@c15t/react 2.0.4 → 2.2.0-canary-20260727202135

package/docs/styling/tokens.md

@@ -1,216 +0,0 @@
----
-title: Design Tokens
-description: The six base token categories that control colors, typography, spacing, radius, shadows, and motion, plus optional dark-mode overrides.
----
-## Color Tokens
-
-Color tokens define the palette for all consent components. Set `colors` for light mode and `dark` for dark mode overrides.
-
-When `textOnPrimary` is omitted, c15t derives it automatically from `primary` to keep text readable on primary-filled surfaces such as stock branding tags and buttons. Set `textOnPrimary` explicitly when you need a specific foreground color.
-
-```tsx
-const theme = {
-  colors: {
-    primary: '#6366f1',
-    primaryHover: '#4f46e5',
-    surface: '#ffffff',
-    surfaceHover: '#f9fafb',
-    border: '#e5e7eb',
-    borderHover: '#d1d5db',
-    text: '#1f2937',
-    textMuted: '#6b7280',
-    textOnPrimary: '#ffffff',
-    overlay: 'rgba(0, 0, 0, 0.5)',
-    switchTrack: '#d1d5db',
-    switchTrackActive: '#6366f1',
-    switchThumb: '#ffffff',
-  },
-  dark: {
-    primary: '#818cf8',
-    surface: '#1f2937',
-    text: '#f9fafb',
-    textMuted: '#9ca3af',
-    border: '#374151',
-  },
-} satisfies Theme;
-```
-
-### ColorTokens
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|primary|string \|undefined|Primary brand/accent color for interactive elements.|-|Optional|
-|primaryHover|string \|undefined|Hover/active state for primary elements.|-|Optional|
-|surface|string \|undefined|Main background color for panels and containers.|-|Optional|
-|surfaceHover|string \|undefined|Hover state for surface elements.|-|Optional|
-|border|string \|undefined|Border color for containers and inputs.|-|Optional|
-|borderHover|string \|undefined|Hover state for bordered elements.|-|Optional|
-|text|string \|undefined|Primary text color for headings and body.|-|Optional|
-|textMuted|string \|undefined|Muted text color for secondary content.|-|Optional|
-|textOnPrimary|string \|undefined|Text color for content on primary background. Auto-derived from \`primary\` when omitted.|-|Optional|
-|overlay|string \|undefined|Overlay color for modal backdrops.|-|Optional|
-|switchTrack|string \|undefined|Toggle track color (off state).|-|Optional|
-|switchTrackActive|string \|undefined|Toggle track color (on state).|-|Optional|
-|switchThumb|string \|undefined|Toggle thumb color.|-|Optional|
-
-## Typography Tokens
-
-Control font family, sizes, weights, and line heights.
-
-```tsx
-const theme = {
-  typography: {
-    fontFamily: 'Inter, system-ui, sans-serif',
-    fontSize: { sm: '0.875rem', base: '1rem', lg: '1.125rem' },
-    fontWeight: { normal: 400, medium: 500, semibold: 600 },
-    lineHeight: { tight: '1.25', normal: '1.5', relaxed: '1.75' },
-  },
-} satisfies Theme;
-```
-
-### TypographyTokens
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|fontFamily|string \|undefined|Font family for all components.|-|Optional|
-|fontSize|Object \|undefined|Font sizes for text hierarchy.|-|Optional|
-|fontWeight|Object \|undefined|Font weights for emphasis.|-|Optional|
-|lineHeight|Object \|undefined|Line heights for readability.|-|Optional|
-
-#### `fontSize`
-
-Font sizes for text hierarchy.
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|sm|string \|undefined|@default '0.875rem'|-|Optional|
-|base|string \|undefined|@default '1rem'|-|Optional|
-|lg|string \|undefined|@default '1.125rem'|-|Optional|
-
-#### `fontWeight`
-
-Font weights for emphasis.
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|normal|number \|undefined|@default 400|-|Optional|
-|medium|number \|undefined|@default 500|-|Optional|
-|semibold|number \|undefined|@default 600|-|Optional|
-
-#### `lineHeight`
-
-Line heights for readability.
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|tight|string \|undefined|@default '1.25'|-|Optional|
-|normal|string \|undefined|@default '1.5'|-|Optional|
-|relaxed|string \|undefined|@default '1.75'|-|Optional|
-
-## Spacing Tokens
-
-Five-step scale for internal padding, margins, and gaps.
-
-```tsx
-const theme = {
-  spacing: {
-    xs: '0.25rem',  // 4px
-    sm: '0.5rem',   // 8px
-    md: '1rem',     // 16px
-    lg: '1.5rem',   // 24px
-    xl: '2rem',     // 32px
-  },
-} satisfies Theme;
-```
-
-### SpacingTokens
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|xs|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
-|sm|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
-|md|string \|undefined|@default '1rem' (16px)|'1rem' (16px)|Optional|
-|lg|string \|undefined|@default '1.5rem' (24px)|'1.5rem' (24px)|Optional|
-|xl|string \|undefined|@default '2rem' (32px)|'2rem' (32px)|Optional|
-
-## Radius Tokens
-
-Border radius scale for rounded corners.
-
-```tsx
-const theme = {
-  radius: {
-    sm: '0.25rem',  // 4px
-    md: '0.5rem',   // 8px
-    lg: '0.75rem',  // 12px
-    full: '9999px', // Pill shape
-  },
-} satisfies Theme;
-```
-
-### RadiusTokens
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|sm|string \|undefined|@default '0.25rem' (4px)|'0.25rem' (4px)|Optional|
-|md|string \|undefined|@default '0.5rem' (8px)|'0.5rem' (8px)|Optional|
-|lg|string \|undefined|@default '0.75rem' (12px)|'0.75rem' (12px)|Optional|
-|full|string \|undefined|@default '9999px'|'9999px'|Optional|
-
-## Shadow Tokens
-
-Box shadow scale for depth and elevation.
-
-```tsx
-const theme = {
-  shadows: {
-    sm: '0 1px 2px hsla(0, 0%, 0%, 0.05)',
-    md: '0 4px 12px hsla(0, 0%, 0%, 0.08)',
-    lg: '0 8px 24px hsla(0, 0%, 0%, 0.12)',
-  },
-} satisfies Theme;
-```
-
-### ShadowTokens
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|sm|string \|undefined|@default '0 1px 2px hsla(0, 0%, 0%, 0.05)'|'0 1px 2px hsla(0, 0%, 0%, 0.05)'|Optional|
-|md|string \|undefined|@default '0 4px 12px hsla(0, 0%, 0%, 0.08)'|'0 4px 12px hsla(0, 0%, 0%, 0.08)'|Optional|
-|lg|string \|undefined|@default '0 8px 24px hsla(0, 0%, 0%, 0.12)'|'0 8px 24px hsla(0, 0%, 0%, 0.12)'|Optional|
-
-## Motion Tokens
-
-Animation duration and easing presets.
-
-```tsx
-const theme = {
-  motion: {
-    duration: { fast: '100ms', normal: '200ms', slow: '300ms' },
-    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    easingOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-    easingInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
-    easingSpring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-  },
-} satisfies Theme;
-```
-
-### MotionTokens
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|duration|Object \|undefined|Duration presets for transitions.|-|Optional|
-|easing|string \|undefined|Default CSS easing function for general animation curves.|'cubic-bezier(0.4, 0, 0.2, 1)'|Optional|
-|easingOut|string \|undefined|CSS easing function for enter/exit animations. Use for modals, tooltips, dropdowns, and any element entering or exiting.|'cubic-bezier(0.215, 0.61, 0.355, 1)'|Optional|
-|easingInOut|string \|undefined|CSS easing function for on-screen movement. Use when elements already on screen need to move or morph.|'cubic-bezier(0.645, 0.045, 0.355, 1)'|Optional|
-|easingSpring|string \|undefined|CSS easing function with spring-like overshoot. Use for playful, bouncy animations.|'cubic-bezier(0.34, 1.56, 0.64, 1)'|Optional|
-
-#### `duration`
-
-Duration presets for transitions.
-
-|Property|Type|Description|Default|Required|
-|:--|:--|:--|:--|:--:|
-|fast|string \|undefined|@default '100ms'|-|Optional|
-|normal|string \|undefined|@default '200ms'|-|Optional|
-|slow|string \|undefined|@default '300ms'|-|Optional|