Skip to Content
Packages@cfxdevkit/theme

@cfxdevkit/theme

Design tokens and CSS layer.

Install

pnpm add @cfxdevkit/theme

Scope: Shared design tokens (colors, spacing, typography, shadows, motion) usable from any UI library.

No React, no CSS-in-JS dependency. Outputs JSON + CSS variables + (optional) Tailwind preset.

Sub-paths

Sub-pathExports
.13 symbols
./tokens6 symbols
./react6 symbols
./css0 symbols
./dark0 symbols

.

Exports the full theme API, including tokens and React integration.

import { colors, spacing, radius, typography, shadow, motion, ThemeProvider, useTheme } from '@cfxdevkit/theme';
  • colors, spacing, radius, typography, shadow, motion: Raw design token objects.
  • ThemeProvider, useTheme: React context provider and hook for theme switching.

Example

import { ThemeProvider, useTheme } from '@cfxdevkit/theme';
 
function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <Main />
    </ThemeProvider>
  );
}
 
function Main() {
  const { theme, resolvedTheme } = useTheme();
  // `theme`: user preference ('light' | 'dark' | 'system')
  // `resolvedTheme`: effective theme ('light' | 'dark')
  return <div style={{ color: colors.text.primary }}>Hello</div>;
}

./tokens

Exports only the raw design tokens (no React dependencies).

import { colors, spacing, radius, typography, shadow, motion } from '@cfxdevkit/theme/tokens';

Useful for non-React environments (e.g., vanilla JS, Storybook, Figma plugins).

Example

import { colors, spacing } from '@cfxdevkit/theme/tokens';
 
const buttonStyle = {
  backgroundColor: colors.primary.default,
  padding: spacing.md,
  borderRadius: radius.md,
};

./react

Exports only the React integration (context provider + hook).

import { ThemeProvider, useTheme } from '@cfxdevkit/theme/react';

Requires @cfxdevkit/theme to be installed separately for token access.

Example

import { ThemeProvider } from '@cfxdevkit/theme/react';
import { colors } from '@cfxdevkit/theme/tokens';
 
function App() {
  return (
    <ThemeProvider defaultTheme="system" storageKey="cfx-theme">
      <div style={{ color: colors.text.primary }}>Theme-aware content</div>
    </ThemeProvider>
  );
}

./css

No named exports. Used internally to generate CSS variable files.

./dark

No named exports. Used internally for dark-mode token variants.

Usage

import { colors, spacing, ThemeProvider, useTheme } from '@cfxdevkit/theme';
 
// Use tokens directly
const styles = {
  color: colors.text.primary,
  padding: spacing.lg,
};
 
// Or use React integration
function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <Content />
    </ThemeProvider>
  );
}
 
function Content() {
  const { resolvedTheme } = useTheme();
  return <div>Current theme: {resolvedTheme}</div>;
}

API Reference

See API.md for the full public surface.

Tier

Tier 0 — framework — Must not runtime-import from any higher tier.

API Reference

.

// Package name identifier for runtime introspection.
export declare const __packageName: "@cfxdevkit/theme";
 
// Core color design tokens (e.g., semantic, functional, and base colors).
export declare const colors: {
  // Color definitions (e.g., primary, secondary, background, text, etc.)
};
 
// Core spacing design tokens (e.g., scale, layout, and component spacing).
export declare const spacing: {
  // Spacing values (e.g., 0, 1, 2, ..., 'auto')
};
 
// Core border radius design tokens (e.g., rounded, pill, circle).
export declare const radius: {
  // Radius values (e.g., sm, md, lg, full)
};
 
// Core typography design tokens (e.g., font families, sizes, weights, line heights).
export declare const typography: {
  // Typography definitions (e.g., fontFamilies, fontSizes, fontWeights, lineHeights)
};
 
// Core shadow design tokens (e.g., depth, elevation, ambient).
export declare const shadow: {
  // Shadow definitions (e.g., xs, sm, md, lg, xl)
};
 
// Core motion design tokens (e.g., durations, easing curves, delays).
export declare const motion: {
  // Motion definitions (e.g., durations, easings)
};
 
// Theme mode type: 'light', 'dark', or 'system' (auto-detect).
export type Theme = 'light' | 'dark' | 'system';
 
// Resolved theme mode type: only 'light' or 'dark' (after system resolution).
export type ResolvedTheme = 'light' | 'dark';
 
// Context value interface for theme state and helpers.
export interface ThemeContextValue {
  theme: ResolvedTheme;
  setTheme: (theme: Theme) => void;
  resolvedTheme: ResolvedTheme;
  toggleTheme: () => void;
}
 
// Props accepted by the ThemeProvider component.
export interface ThemeProviderProps {
  defaultTheme?: Theme;
  storageKey?: string;
  children: React.ReactNode;
}
 
// React component that provides theme context and persists user preference.
export declare function ThemeProvider({ defaultTheme, storageKey, children, }: ThemeProviderProps): import("react").JSX.Element;
 
// Hook to access theme context (theme, setTheme, toggleTheme).
export declare function useTheme(): ThemeContextValue;

Usage

import { ThemeProvider, useTheme } from '@cfxdevkit/theme';
 
function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <MainContent />
    </ThemeProvider>
  );
}
 
function MainContent() {
  const { theme, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>Toggle Theme ({theme})</button>;
}

./tokens

// Re-export of core design token collections (colors, spacing, radius, typography, shadow, motion).
export declare const colors: {
  // Color definitions (e.g., primary, secondary, background, text, etc.)
};
 
// Re-export of spacing tokens.
export declare const spacing: {
  // Spacing values (e.g., 0, 1, 2, ..., 'auto')
};
 
// Re-export of border radius tokens.
export declare const radius: {
  // Radius values (e.g., sm, md, lg, full)
};
 
// Re-export of typography tokens.
export declare const typography: {
  // Typography definitions (e.g., fontFamilies, fontSizes, fontWeights, lineHeights)
};
 
// Re-export of shadow tokens.
export declare const shadow: {
  // Shadow definitions (e.g., xs, sm, md, lg, xl)
};
 
// Re-export of motion tokens.
export declare const motion: {
  // Motion definitions (e.g., durations, easings)
};

Usage

import { spacing, radius, colors } from '@cfxdevkit/theme/tokens';
 
const styles = {
  padding: spacing[3], // e.g., '8px'
  borderRadius: radius.md, // e.g., '4px'
  backgroundColor: colors.background.default,
};

./react

// Theme mode type: 'light', 'dark', or 'system' (auto-detect).
export type Theme = 'light' | 'dark' | 'system';
 
// Resolved theme mode type: only 'light' or 'dark' (after system resolution).
export type ResolvedTheme = 'light' | 'dark';
 
// Context value interface for theme state and helpers.
export interface ThemeContextValue {
  theme: ResolvedTheme;
  setTheme: (theme: Theme) => void;
  resolvedTheme: ResolvedTheme;
  toggleTheme: () => void;
}
 
// Props accepted by the ThemeProvider component.
export interface ThemeProviderProps {
  defaultTheme?: Theme;
  storageKey?: string;
  children: React.ReactNode;
}
 
// React component that provides theme context and persists user preference.
export declare function ThemeProvider({ defaultTheme, storageKey, children, }: ThemeProviderProps): import("react").JSX.Element;
 
// Hook to access theme context (theme, setTheme, toggleTheme).
export declare function useTheme(): ThemeContextValue;

Usage

import { ThemeProvider, useTheme } from '@cfxdevkit/theme/react';
 
function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <MainContent />
    </ThemeProvider>
  );
}
 
function MainContent() {
  const { theme, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>Toggle Theme ({theme})</button>;
}

./css

(no named exports detected)

./dark

(no named exports detected)

Last updated on
@cfxdevkit/testing@cfxdevkit/ui