react-mcu 1.3.2 → 2.0.0

package/dist/index.d.ts

@@ -38,24 +38,67 @@ type McuConfig = {
      */
     customColors?: HexCustomColor[];
     /**
-     * Apply contrast adjustment to tonal palette shades when true.
-     * When true, all tonal palette shades are adjusted based on the contrast level.
-     * When false (default), contrast adjustments only apply to core Material Design tokens.
+     * Prefix for generated CSS custom properties and Figma token css.variable extensions.
+     * Scheme tokens use `--{prefix}-sys-color-*`, palette tones use `--{prefix}-ref-palette-*`.
+     * Default: "md" (Material Design convention).
      */
-    contrastAllColors?: boolean;
-    /**
-     * Adapt tonal palette shades for dark mode.
-     * When true, tonal palette shades automatically invert for dark mode
-     * (high values become dark, low values become light).
-     * When false (default), tonal palette values remain constant across light/dark mode.
-     */
-    adaptiveShades?: boolean;
+    prefix?: string;
 };
 declare const schemeNames: readonly ["tonalSpot", "monochrome", "neutral", "vibrant", "expressive", "fidelity", "content"];
 type SchemeName = (typeof schemeNames)[number];
-declare const tokenNames: readonly ["background", "error", "errorContainer", "inverseOnSurface", "inversePrimary", "inverseSurface", "onBackground", "onError", "onErrorContainer", "onPrimary", "onPrimaryContainer", "onPrimaryFixed", "onPrimaryFixedVariant", "onSecondary", "onSecondaryContainer", "onSecondaryFixed", "onSecondaryFixedVariant", "onSurface", "onSurfaceVariant", "onTertiary", "onTertiaryContainer", "onTertiaryFixed", "onTertiaryFixedVariant", "outline", "outlineVariant", "primary", "primaryContainer", "primaryFixed", "primaryFixedDim", "scrim", "secondary", "secondaryContainer", "secondaryFixed", "secondaryFixedDim", "shadow", "surface", "surfaceBright", "surfaceContainer", "surfaceContainerHigh", "surfaceContainerHighest", "surfaceContainerLow", "surfaceContainerLowest", "surfaceDim", "surfaceTint", "surfaceVariant", "tertiary", "tertiaryContainer", "tertiaryFixed", "tertiaryFixedDim"];
-type TokenName = (typeof tokenNames)[number];
-declare function builder(hexSource: McuConfig["source"], { scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, customColors: hexCustomColors, contrastAllColors, adaptiveShades, }?: Omit<McuConfig, "source">): {
+declare const tokenDescriptions: {
+    readonly background: "Default background color for screens and large surfaces.";
+    readonly error: "Color for error states, used on elements like error text and icons.";
+    readonly errorContainer: "Fill color for error container elements like error banners.";
+    readonly inverseOnSurface: "Color for text and icons on inverse surface backgrounds.";
+    readonly inversePrimary: "Primary color used on inverse surface, e.g. buttons on snackbars.";
+    readonly inverseSurface: "Background for elements that require reverse contrast, such as snackbars.";
+    readonly onBackground: "Color for text and icons displayed on the background.";
+    readonly onError: "Color for text and icons on error-colored elements.";
+    readonly onErrorContainer: "Color for text and icons on error container elements.";
+    readonly onPrimary: "Color for text and icons on primary-colored elements like filled buttons.";
+    readonly onPrimaryContainer: "Color for text and icons on primary container elements like tonal buttons.";
+    readonly onPrimaryFixed: "Color for text and icons on primary fixed elements, constant across themes.";
+    readonly onPrimaryFixedVariant: "Lower-emphasis color for text and icons on primary fixed elements.";
+    readonly onSecondary: "Color for text and icons on secondary-colored elements.";
+    readonly onSecondaryContainer: "Color for text and icons on secondary container elements.";
+    readonly onSecondaryFixed: "Color for text and icons on secondary fixed elements, constant across themes.";
+    readonly onSecondaryFixedVariant: "Lower-emphasis color for text and icons on secondary fixed elements.";
+    readonly onSurface: "High-emphasis color for text and icons on surface backgrounds.";
+    readonly onSurfaceVariant: "Medium-emphasis color for text and icons on surface variant backgrounds.";
+    readonly onTertiary: "Color for text and icons on tertiary-colored elements.";
+    readonly onTertiaryContainer: "Color for text and icons on tertiary container elements.";
+    readonly onTertiaryFixed: "Color for text and icons on tertiary fixed elements, constant across themes.";
+    readonly onTertiaryFixedVariant: "Lower-emphasis color for text and icons on tertiary fixed elements.";
+    readonly outline: "Subtle color for borders and dividers to create visual separation.";
+    readonly outlineVariant: "Lower-emphasis border color used for decorative dividers.";
+    readonly primary: "Main brand color, used for key components like filled buttons and active states.";
+    readonly primaryContainer: "Fill color for large primary elements like cards and tonal buttons.";
+    readonly primaryFixed: "Fixed primary color that stays the same in light and dark themes.";
+    readonly primaryFixedDim: "Dimmed variant of the fixed primary color for lower emphasis.";
+    readonly scrim: "Color overlay for modals and dialogs to obscure background content.";
+    readonly secondary: "Accent color for less prominent elements like filter chips and selections.";
+    readonly secondaryContainer: "Fill color for secondary container elements like tonal buttons and input fields.";
+    readonly secondaryFixed: "Fixed secondary color that stays the same in light and dark themes.";
+    readonly secondaryFixedDim: "Dimmed variant of the fixed secondary color for lower emphasis.";
+    readonly shadow: "Color for elevation shadows applied to surfaces and components.";
+    readonly surface: "Default surface color for cards, sheets, and dialogs.";
+    readonly surfaceBright: "Brightest surface variant, used for elevated surfaces in dark themes.";
+    readonly surfaceContainer: "Middle-emphasis container color for grouping related content.";
+    readonly surfaceContainerHigh: "Higher-emphasis container color for elements like cards.";
+    readonly surfaceContainerHighest: "Highest-emphasis container color for text fields and other input areas.";
+    readonly surfaceContainerLow: "Lower-emphasis container color for subtle surface groupings.";
+    readonly surfaceContainerLowest: "Lowest-emphasis container, typically the lightest surface in light theme.";
+    readonly surfaceDim: "Dimmest surface variant, used for recessed areas or dark theme backgrounds.";
+    readonly surfaceTint: "Tint color applied to surfaces for subtle primary color elevation overlay.";
+    readonly surfaceVariant: "Alternative surface color for differentiated areas like sidebar backgrounds.";
+    readonly tertiary: "Third accent color for complementary elements that balance primary and secondary.";
+    readonly tertiaryContainer: "Fill color for tertiary container elements like complementary cards.";
+    readonly tertiaryFixed: "Fixed tertiary color that stays the same in light and dark themes.";
+    readonly tertiaryFixedDim: "Dimmed variant of the fixed tertiary color for lower emphasis.";
+};
+type TokenName = keyof typeof tokenDescriptions;
+declare function builder(hexSource: McuConfig["source"], { scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, customColors: hexCustomColors, prefix, }?: Omit<McuConfig, "source">): {
     toCss(): string;
     toJson(): {
         seed: string;
@@ -71,63 +114,47 @@ declare function builder(hexSource: McuConfig["source"], { scheme, contrast, pri
     };
     toFigmaTokens(): {
         "Light.tokens.json": {
-            Schemes: Record<string, {
-                $type: "color";
-                $value: {
-                    colorSpace: "srgb";
-                    components: number[];
-                    alpha: number;
-                    hex: string;
-                };
-                $extensions: {
-                    "com.figma.scopes": string[];
-                    "com.figma.isOverride": boolean;
-                };
-            }>;
-            Palettes: Record<string, Record<string, {
-                $type: "color";
-                $value: {
-                    colorSpace: "srgb";
-                    components: number[];
-                    alpha: number;
-                    hex: string;
-                };
-                $extensions: {
-                    "com.figma.scopes": string[];
-                    "com.figma.isOverride": boolean;
-                };
-            }>>;
+            ref: {
+                palette: Record<string, Record<string, {
+                    $type: "color";
+                    $value: {
+                        colorSpace: "srgb";
+                        components: number[];
+                        alpha: number;
+                        hex: string;
+                    };
+                    $extensions: {
+                        "com.figma.scopes": string[];
+                        "com.figma.isOverride": boolean;
+                    };
+                }>>;
+            };
+            sys: {
+                color: Record<string, unknown>;
+            };
             $extensions: {
                 "com.figma.modeName": string;
             };
         };
         "Dark.tokens.json": {
-            Schemes: Record<string, {
-                $type: "color";
-                $value: {
-                    colorSpace: "srgb";
-                    components: number[];
-                    alpha: number;
-                    hex: string;
-                };
-                $extensions: {
-                    "com.figma.scopes": string[];
-                    "com.figma.isOverride": boolean;
-                };
-            }>;
-            Palettes: Record<string, Record<string, {
-                $type: "color";
-                $value: {
-                    colorSpace: "srgb";
-                    components: number[];
-                    alpha: number;
-                    hex: string;
-                };
-                $extensions: {
-                    "com.figma.scopes": string[];
-                    "com.figma.isOverride": boolean;
-                };
-            }>>;
+            ref: {
+                palette: Record<string, Record<string, {
+                    $type: "color";
+                    $value: {
+                        colorSpace: "srgb";
+                        components: number[];
+                        alpha: number;
+                        hex: string;
+                    };
+                    $extensions: {
+                        "com.figma.scopes": string[];
+                        "com.figma.isOverride": boolean;
+                    };
+                }>>;
+            };
+            sys: {
+                color: Record<string, unknown>;
+            };
             $extensions: {
                 "com.figma.modeName": string;
             };
@@ -149,7 +176,7 @@ declare function builder(hexSource: McuConfig["source"], { scheme, contrast, pri
     };
 };
 
-declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, contrastAllColors, adaptiveShades, children, }: McuConfig & {
+declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, prefix, children, }: McuConfig & {
     children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;