@castui/cast-ui 4.1.1 → 4.2.1

package/dist/tokens/colors.d.ts

@@ -1,9 +1,17 @@
 /**
- * Semantic intent colors — derived from semantic.tokens.json
+ * Semantic intent colours — derived from semantic.tokens.json
  * Maps: intent → prominence → state → { bg, fg, border }
  *
  * Source tokens: intent/{intent}/{prominence}/{state}/{bg|fg|border}
  * Primitive palette refs: blue (brand), cool-grey (neutral), red (danger)
+ *
+ * Two colour schemes are exported — `lightColors` and `darkColors` — matching
+ * the `semantic-light` / `semantic-dark` modes of the Figma semantic variable
+ * collection. The active scheme is resolved by ThemeProvider via the
+ * `colorMode` prop; components read colours from `useTheme().scheme`.
+ *
+ * The flat named exports at the bottom (intentColors, surfaceTokens, …) are
+ * the light-scheme values, kept for backwards compatibility.
  */
 type StateColors = {
     bg: string;
@@ -23,18 +31,202 @@ type IntentColors = {
 export type IntentName = 'brand' | 'neutral' | 'danger';
 export type ProminenceName = 'default' | 'bold' | 'subtle';
 export type StateName = 'default' | 'hover' | 'active';
+/** Colour mode — matches the semantic-light/semantic-dark Figma variable modes */
+export type ColorMode = 'light' | 'dark';
+type OptionStateColors = {
+    default: {
+        bg: string;
+        fg: string;
+    };
+    hover: {
+        bg: string;
+        fg: string;
+    };
+    selected: {
+        bg: string;
+        fg: string;
+    };
+    selectedHover: {
+        bg: string;
+        fg: string;
+    };
+    disabled: {
+        bg: string;
+        fg: string;
+    };
+};
+export type ColorScheme = {
+    /** intent → prominence → state → { bg, fg, border } */
+    intents: Record<IntentName, IntentColors>;
+    /** Disabled state — shared across all intents */
+    disabled: StateColors;
+    /** Focus ring colour — control/focus-ring-colour */
+    focusRing: {
+        color: string;
+    };
+    /** Surface tokens — backgrounds and overlay styling */
+    surface: {
+        /** Page/screen background — surface/base */
+        base: string;
+        /** Subtle background for sections/cards — surface/subtle */
+        subtle: string;
+        /** Overlay surfaces (Dialog, Popover, Tooltip, Select, etc.) */
+        overlay: {
+            bg: string;
+            border: string;
+            borderRadius: number;
+        };
+    };
+    /** Semantic text tokens */
+    text: {
+        description: string;
+        /** Placeholder text in form fields — intent/neutral/placeholder */
+        placeholder: string;
+    };
+    /** Overlay/scrim opacity */
+    overlay: {
+        scrimOpacity: number;
+    };
+    /** Option state colours — used by SelectOption (neutral intent) */
+    select: {
+        option: OptionStateColors;
+        /** Separator line colour */
+        separator: string;
+    };
+    /** Tag tokens — multi-select pill styling (layout constant across modes) */
+    tag: {
+        bg: string;
+        fg: string;
+        borderRadius: number;
+        paddingX: number;
+        paddingY: number;
+        gap: number;
+        closeSize: number;
+    };
+    /** Error/danger colour for form field borders and helper text */
+    error: {
+        border: string;
+        fg: string;
+    };
+    /** Checkbox colours — indicator box, icon, and label */
+    checkbox: {
+        box: {
+            uncheckedDefault: {
+                bg: string;
+                border: string;
+            };
+            uncheckedHover: {
+                bg: string;
+                border: string;
+            };
+            checked: {
+                bg: string;
+                border: string;
+            };
+            disabled: {
+                bg: string;
+                border: string;
+            };
+        };
+        icon: {
+            default: string;
+            disabled: string;
+        };
+        label: {
+            default: string;
+            disabled: string;
+        };
+    };
+    /** Radio colours — indicator ring/fill, centre dot, and label */
+    radio: {
+        indicator: {
+            uncheckedDefault: {
+                bg: string;
+                border: string;
+            };
+            uncheckedHover: {
+                bg: string;
+                border: string;
+            };
+            checked: {
+                bg: string;
+                border: string;
+            };
+            checkedHover: {
+                bg: string;
+                border: string;
+            };
+            disabled: {
+                bg: string;
+                border: string;
+            };
+        };
+        dot: {
+            default: string;
+            disabled: string;
+        };
+        label: {
+            default: string;
+            disabled: string;
+        };
+    };
+    /** Toggle colours — track (on/off/disabled) + thumb + label */
+    toggle: {
+        track: {
+            off: string;
+            offHover: string;
+            on: string;
+            onHover: string;
+            disabledOff: string;
+            disabledOn: string;
+        };
+        thumb: string;
+        label: {
+            default: string;
+            disabled: string;
+        };
+    };
+    /** Avatar colours — initials/icon fallback surface + foreground */
+    avatar: {
+        bg: string;
+        fg: string;
+    };
+    /** Skeleton colours — placeholder surface for loading states */
+    skeleton: {
+        bg: string;
+        highlight: string;
+    };
+    /** List colours — used by List / ListItem / ListSubheader */
+    list: {
+        item: OptionStateColors;
+        subheaderFg: string;
+        descriptionFg: string;
+        separator: string;
+        containerBg: string;
+    };
+};
+export declare const lightColors: ColorScheme;
+export declare const darkColors: ColorScheme;
+/** Scheme lookup by colour mode */
+export declare const colorSchemes: Record<ColorMode, ColorScheme>;
 export declare const intentColors: Record<IntentName, IntentColors>;
 /** Disabled state — shared across all intents */
 export declare const disabledColors: StateColors;
 /** Semantic control constants */
 export declare const controlTokens: {
     borderWidth: number;
+    /** Focus ring width — control/focus-ring-width */
+    focusRingWidth: number;
+    /** Focus ring offset — control/focus-ring-offset */
+    focusRingOffset: number;
+    /** Focus ring colour — control/focus-ring-colour (blue/500). Mode-aware value: useTheme().scheme.focusRing.color */
+    focusRingColor: string;
 };
 /** Surface tokens — backgrounds and overlay styling */
 export declare const surfaceTokens: {
-    /** Page/screen background — cool-grey/50 */
+    /** Page/screen background — surface/base */
     base: string;
-    /** Subtle background for sections/cards — cool-grey/100 */
+    /** Subtle background for sections/cards — surface/subtle */
     subtle: string;
     /** Overlay surfaces (Dialog, Popover, Tooltip, Select, etc.) */
     overlay: {
@@ -46,6 +238,8 @@ export declare const surfaceTokens: {
 /** Semantic text tokens */
 export declare const textTokens: {
     description: string;
+    /** Placeholder text in form fields — intent/neutral/placeholder */
+    placeholder: string;
 };
 /** Overlay/scrim opacity */
 export declare const overlayTokens: {
@@ -53,28 +247,7 @@ export declare const overlayTokens: {
 };
 /** Option state colours — used by SelectOption (neutral intent) */
 export declare const selectColors: {
-    option: {
-        default: {
-            bg: string;
-            fg: string;
-        };
-        hover: {
-            bg: string;
-            fg: string;
-        };
-        selected: {
-            bg: string;
-            fg: string;
-        };
-        selectedHover: {
-            bg: string;
-            fg: string;
-        };
-        disabled: {
-            bg: string;
-            fg: string;
-        };
-    };
+    option: OptionStateColors;
     /** Separator line colour */
     separator: string;
 };
@@ -93,5 +266,100 @@ export declare const errorTokens: {
     border: string;
     fg: string;
 };
+/** Checkbox colours — indicator box, icon, and label */
+export declare const checkboxColors: {
+    box: {
+        uncheckedDefault: {
+            bg: string;
+            border: string;
+        };
+        uncheckedHover: {
+            bg: string;
+            border: string;
+        };
+        checked: {
+            bg: string;
+            border: string;
+        };
+        disabled: {
+            bg: string;
+            border: string;
+        };
+    };
+    icon: {
+        default: string;
+        disabled: string;
+    };
+    label: {
+        default: string;
+        disabled: string;
+    };
+};
+/** Radio colours — indicator ring/fill, centre dot, and label */
+export declare const radioColors: {
+    indicator: {
+        uncheckedDefault: {
+            bg: string;
+            border: string;
+        };
+        uncheckedHover: {
+            bg: string;
+            border: string;
+        };
+        checked: {
+            bg: string;
+            border: string;
+        };
+        checkedHover: {
+            bg: string;
+            border: string;
+        };
+        disabled: {
+            bg: string;
+            border: string;
+        };
+    };
+    dot: {
+        default: string;
+        disabled: string;
+    };
+    label: {
+        default: string;
+        disabled: string;
+    };
+};
+/** Toggle colours — track (on/off/disabled) + thumb + label */
+export declare const toggleColors: {
+    track: {
+        off: string;
+        offHover: string;
+        on: string;
+        onHover: string;
+        disabledOff: string;
+        disabledOn: string;
+    };
+    thumb: string;
+    label: {
+        default: string;
+        disabled: string;
+    };
+};
+/** Avatar colours — initials/icon fallback surface + foreground */
+export declare const avatarColors: {
+    bg: string;
+    fg: string;
+};
+/** Skeleton colours — placeholder surface for loading states */
+export declare const skeletonColors: {
+    bg: string;
+    highlight: string;
+};
+/** List colours — used by List / ListItem / ListSubheader */
+export declare const listColors: {
+    item: OptionStateColors;
+    subheaderFg: string;
+    descriptionFg: string;
+    separator: string;
+    containerBg: string;
+};
 export {};
-//# sourceMappingURL=colors.d.ts.map