@voxel51/voodo 1.4.0-dev.0 → 2.1.0

package/dist/theme/tokens/index.d.ts

@@ -1,13 +1,15 @@
 import { transitions } from './transitions';
 export { transitions };
 export { colors, primitives } from './colors';
-export { palettePool, paletteSlots } from './palette';
+export { chartPool, overlayPool, palettePool, paletteSlots, type VizHue, } from './palette';
+export { fontSize, lineHeight } from './typography';
+export { spacingRole } from './spacing';
 declare const _default: {
     colors: {
         common: {
             brand: {
-                primary: "#FF6D04";
-                accent: "#FF9950";
+                primary: "#FA5300";
+                accent: "#FF8A3D";
             };
             semantic: {
                 success: "#1E7D45";
@@ -19,307 +21,373 @@ declare const _default: {
         dark: {
             content: {
                 bg: {
+                    accent: "#FF8A3D";
                     background: "#18191A";
-                    card: {
-                        1: "#1E1F20";
-                        2: "#232526";
-                        elevated: "#2F3234";
-                    };
+                    card: "#1E1F20";
+                    "card-elevated": "#2F3234";
+                    "card-nested": "#232526";
+                    failure: "#C33636";
+                    info: "#2563EB";
                     muted: "#1F2021";
                     popover: "#141618";
+                    primary: "#FA5300";
                     secondary: "#1C1D1E";
                     selected: string;
-                    raised: "#2F3234";
-                };
-                text: {
-                    fg: "#FFF9F5";
-                    primary: "#FFFFFF";
-                    secondary: "#8F8D8B";
-                    tertiary: "#6E6C6A";
-                    muted: "#9C9896";
-                    placeholder: "#6B6968";
-                    success: "#7AB87C";
-                    destructive: "#FF6767";
-                    info: "#86B5F6";
-                    warning: "#FCCB58";
-                    accent: "#FF9950";
-                    decorative: "#FFD098";
+                    success: "#1E7D45";
+                    warning: "#D97706";
                 };
                 border: {
+                    active: "#FA5300";
                     default: "#2F3234";
-                    strong: "#3E4244";
-                    hover: "#4A4C4E";
+                    disabled: "#1E1F20";
+                    error: "#FF6767";
                     focus: "#6E6C6A";
+                    hover: "#4A4C4E";
+                    input: "#2F3234";
+                    "input-focus": "#6E6C6A";
+                    "input-hover": "#4A4C4E";
+                    strong: "#3E4244";
                     subtle: "#1E1F20";
-                    active: "#FF6D04";
-                    error: "#FF6767";
                     success: "#7AB87C";
                     warning: "#FCCB58";
-                    disabled: "#1E1F20";
-                    input: "#2F3234";
-                    "input-hover": "#4A4C4E";
-                    "input-focus": "#6E6C6A";
                 };
-                status: {
-                    approved: "#7AB87C";
-                    review: "#FF9950";
-                    progress: "#CBA6FF";
-                    default: "#8F8D8B";
-                    failed: "#FF6767";
+                code: {
+                    bg: "#141618";
+                    border: "#2F3234";
+                    text: "#FF8A3D";
+                };
+                focus: {
+                    ring: string;
                 };
                 icon: {
+                    brand: "#FA5300";
+                    dark: "#18191A";
+                    decorative: "#FF8A3D";
                     default: "#8F8D8B";
-                    subtle: "#6E6C6A";
+                    disabled: "#6B6968";
                     emphasis: "#FFFFFF";
+                    failure: "#FF6767";
+                    info: "#86B5F6";
                     muted: "#6B6968";
-                    disabled: "#6B6968";
-                    decorative: "#FF9950";
-                    brand: "#FF6D04";
-                    dark: "#18191A";
-                    "brand-accent": "#FF9950";
+                    subtle: "#6E6C6A";
                     success: "#7AB87C";
-                    destructive: "#FF6767";
                     warning: "#FCCB58";
-                    info: "#86B5F6";
                 };
-                overlay: {
-                    default: string;
-                    light: string;
-                    heavy: string;
-                };
-                focus: {
-                    ring: string;
+                interactive: {
+                    "danger-default": "#C33636";
+                    "danger-hover": "#9B2727";
+                    "danger-pressed": "#751D1D";
+                    "expressive-default": {
+                        end: "#B84DD9";
+                        mid: "#DA3B72";
+                        start: "#FA5300";
+                    };
+                    "expressive-hover": {
+                        end: "#9E37C0";
+                        mid: "#C62B60";
+                        start: "#D14600";
+                    };
+                    "expressive-pressed": {
+                        end: "#82299F";
+                        mid: "#A9214F";
+                        start: "#A83800";
+                    };
+                    "primary-default": "#FA5300";
+                    "primary-hover": "#C74200";
+                    "primary-pressed": "#943100";
+                    "secondary-default": "#232526";
+                    "secondary-hover": "#2A2B2C";
+                    "secondary-pressed": "#1E1F20";
+                    "success-default": "#1E7D45";
+                    "success-hover": "#166638";
+                    "success-pressed": "#0E4E2B";
                 };
                 link: {
                     default: "#86B5F6";
                     hover: "#4F8BEF";
                     visited: "#AB81FB";
                 };
-                palette: {
-                    1: "#FF6D04";
-                    2: "#2563EB";
-                    3: "#1E7D45";
-                    4: "#8B5CF6";
-                    5: "#DB2777";
-                    6: "#D97706";
-                    7: "#0D9488";
-                    8: "#6F42C1";
-                    9: "#532E91";
-                    10: "#C33636";
-                    11: "#B26003";
-                    12: "#166638";
-                    orange: "#FF6D04";
-                    blue: "#2563EB";
-                    green: "#1E7D45";
-                    purple: "#8B5CF6";
-                    pink: "#DB2777";
-                    yellow: "#D97706";
-                    teal: "#0D9488";
-                    red: "#C33636";
-                };
-                skeleton: {
-                    base: "#232526";
-                    shimmer: "#2F3234";
-                };
-                tooltip: {
-                    bg: "#2A2B2C";
-                    text: "#FFF9F5";
-                };
-                code: {
-                    bg: "#141618";
-                    text: "#FF9950";
-                    border: "#2F3234";
+                scrim: {
+                    default: string;
+                    heavy: string;
+                    light: string;
                 };
                 scrollbar: {
-                    track: "#18191A";
                     thumb: "#3E4244";
                     "thumb-hover": "#4A4C4E";
+                    track: "#18191A";
                 };
                 selection: {
                     bg: string;
                     text: "#FFFFFF";
                 };
-            };
-            action: {
-                primary: {
-                    primary: "#FF6D04";
-                    secondary: "#D05700";
-                    tertiary: "#9B4200";
-                    text: "#FFFFFF";
+                skeleton: {
+                    base: "#232526";
+                    shimmer: "#2F3234";
                 };
-                secondary: {
-                    primary: "#232526";
-                    secondary: "#2A2B2C";
-                    tertiary: "#1E1F20";
-                    text: "#FFFFFF";
+                status: {
+                    approved: {
+                        bg: "#1E7D45";
+                        text: "#7AB87C";
+                    };
+                    draft: {
+                        bg: "#6B6968";
+                        text: "#8F8D8B";
+                    };
+                    failed: {
+                        bg: "#C33636";
+                        text: "#FF6767";
+                    };
+                    progress: {
+                        bg: "#8B5CF6";
+                        text: "#CBA6FF";
+                    };
+                    review: {
+                        bg: "#FA5300";
+                        text: "#FF8A3D";
+                    };
                 };
-                success: {
-                    primary: "#1E7D45";
-                    secondary: "#166638";
-                    tertiary: "#0E4E2B";
-                    text: "#FFFFFF";
+                text: {
+                    accent: "#FF8A3D";
+                    decorative: "#FF8A3D";
+                    failure: "#FF6767";
+                    foreground: "#FFF9F5";
+                    info: "#86B5F6";
+                    inverse: "#1C1D1E";
+                    muted: "#9C9896";
+                    placeholder: "#6B6968";
+                    primary: "#FFFFFF";
+                    secondary: "#8F8D8B";
+                    success: "#7AB87C";
+                    tertiary: "#6E6C6A";
+                    warning: "#FCCB58";
                 };
-                danger: {
-                    primary: "#C33636";
-                    secondary: "#9B2727";
-                    tertiary: "#751D1D";
-                    text: "#FFFFFF";
+                tooltip: {
+                    bg: "#2A2B2C";
+                    text: "#FFF9F5";
+                };
+                "viz-chart": {
+                    blue: "#4F8BEF";
+                    green: "#4CA05A";
+                    lime: "#6FA512";
+                    magenta: "#DB64E6";
+                    neutral: "#9C9896";
+                    pink: "#EF5793";
+                    purple: "#AB81FB";
+                    red: "#FF6767";
+                    teal: "#32ADA0";
+                    yellow: "#ECAB2E";
+                };
+                "viz-overlay": {
+                    blue: "#4F8BEF";
+                    green: "#4CA05A";
+                    lime: "#6FA512";
+                    magenta: "#DB64E6";
+                    neutral: "#9C9896";
+                    pink: "#EF5793";
+                    purple: "#AB81FB";
+                    red: "#FF6767";
+                    teal: "#32ADA0";
+                    yellow: "#ECAB2E";
                 };
             };
         };
         light: {
             content: {
                 bg: {
+                    accent: "#FF8A3D";
                     background: "#F9F8F7";
-                    card: {
-                        1: "#FFFFFF";
-                        2: "#F2F1F0";
-                        elevated: "#FFFFFF";
-                    };
+                    card: "#FFFFFF";
+                    "card-elevated": "#FFFFFF";
+                    "card-nested": "#F2F1F0";
+                    failure: "#C33636";
+                    info: "#2563EB";
                     muted: "#EEEDEC";
                     popover: "#FFFFFF";
+                    primary: "#FA5300";
                     secondary: "#E8E7E6";
                     selected: string;
-                    raised: "#E8E7E6";
-                };
-                text: {
-                    fg: "#000000";
-                    primary: "#18191A";
-                    secondary: "#4A4847";
-                    tertiary: "#6B6968";
-                    muted: "#8F8D8B";
-                    placeholder: "#B5B3B1";
-                    success: "#166638";
-                    destructive: "#9B2727";
-                    info: "#1D4EBA";
-                    warning: "#8A4A02";
-                    accent: "#D97706";
-                    decorative: "#FF9950";
+                    success: "#1E7D45";
+                    warning: "#D97706";
                 };
                 border: {
+                    active: "#FA5300";
                     default: "#E0DEDC";
-                    strong: "#D0CECC";
-                    hover: "#C0BEBC";
+                    disabled: "#EEEDEC";
+                    error: "#C33636";
                     focus: "#A0A09E";
+                    hover: "#C0BEBC";
+                    input: "#D0CECC";
+                    "input-focus": "#A0A09E";
+                    "input-hover": "#C0BEBC";
+                    strong: "#D0CECC";
                     subtle: "#EEEDEC";
-                    active: "#FF6D04";
-                    error: "#C33636";
                     success: "#1E7D45";
                     warning: "#D97706";
-                    disabled: "#EEEDEC";
-                    input: "#D0CECC";
-                    "input-hover": "#C0BEBC";
-                    "input-focus": "#A0A09E";
                 };
-                status: {
-                    approved: "#1E7D45";
-                    review: "#D05700";
-                    progress: "#8B5CF6";
-                    default: "#6B6968";
-                    failed: "#C33636";
+                code: {
+                    bg: "#F2F1F0";
+                    border: "#E0DEDC";
+                    text: "#943100";
+                };
+                focus: {
+                    ring: string;
                 };
                 icon: {
+                    brand: "#FA5300";
+                    dark: "#18191A";
+                    decorative: "#FA5300";
                     default: "#6B6968";
-                    subtle: "#8F8D8B";
+                    disabled: "#B5B3B1";
                     emphasis: "#18191A";
+                    failure: "#C33636";
+                    info: "#2563EB";
                     muted: "#B5B3B1";
-                    disabled: "#B5B3B1";
-                    decorative: "#D05700";
-                    brand: "#FF6D04";
-                    dark: "#18191A";
-                    "brand-accent": "#FF9950";
+                    subtle: "#8F8D8B";
                     success: "#1E7D45";
-                    destructive: "#C33636";
                     warning: "#D97706";
-                    info: "#2563EB";
-                };
-                overlay: {
-                    default: string;
-                    light: string;
-                    heavy: string;
                 };
-                focus: {
-                    ring: string;
+                interactive: {
+                    "danger-default": "#C33636";
+                    "danger-hover": "#9B2727";
+                    "danger-pressed": "#751D1D";
+                    "expressive-default": {
+                        end: "#B84DD9";
+                        mid: "#DA3B72";
+                        start: "#FA5300";
+                    };
+                    "expressive-hover": {
+                        end: "#9E37C0";
+                        mid: "#C62B60";
+                        start: "#D14600";
+                    };
+                    "expressive-pressed": {
+                        end: "#82299F";
+                        mid: "#A9214F";
+                        start: "#A83800";
+                    };
+                    "primary-default": "#FA5300";
+                    "primary-hover": "#C74200";
+                    "primary-pressed": "#943100";
+                    "secondary-default": "#EEEDEC";
+                    "secondary-hover": "#E0DEDC";
+                    "secondary-pressed": "#D0CECC";
+                    "success-default": "#1E7D45";
+                    "success-hover": "#166638";
+                    "success-pressed": "#0E4E2B";
                 };
                 link: {
                     default: "#2563EB";
                     hover: "#1D4EBA";
                     visited: "#6F42C1";
                 };
-                palette: {
-                    1: "#FF6D04";
-                    2: "#2563EB";
-                    3: "#1E7D45";
-                    4: "#8B5CF6";
-                    5: "#DB2777";
-                    6: "#D97706";
-                    7: "#0D9488";
-                    8: "#6F42C1";
-                    9: "#532E91";
-                    10: "#C33636";
-                    11: "#B26003";
-                    12: "#166638";
-                    orange: "#FF6D04";
-                    blue: "#2563EB";
-                    green: "#1E7D45";
-                    purple: "#8B5CF6";
-                    pink: "#DB2777";
-                    yellow: "#D97706";
-                    teal: "#0D9488";
-                    red: "#C33636";
-                };
-                skeleton: {
-                    base: "#EEEDEC";
-                    shimmer: "#E0DEDC";
-                };
-                tooltip: {
-                    bg: "#18191A";
-                    text: "#FFF9F5";
-                };
-                code: {
-                    bg: "#F2F1F0";
-                    text: "#D05700";
-                    border: "#E0DEDC";
+                scrim: {
+                    default: string;
+                    heavy: string;
+                    light: string;
                 };
                 scrollbar: {
-                    track: "#F2F1F0";
                     thumb: "#D0CECC";
                     "thumb-hover": "#C0BEBC";
+                    track: "#F2F1F0";
                 };
                 selection: {
                     bg: string;
                     text: "#000000";
                 };
-            };
-            action: {
-                primary: {
-                    primary: "#FF6D04";
-                    secondary: "#D05700";
-                    tertiary: "#9B4200";
-                    text: "#FFFFFF";
+                skeleton: {
+                    base: "#EEEDEC";
+                    shimmer: "#E0DEDC";
                 };
-                secondary: {
-                    primary: "#EEEDEC";
-                    secondary: "#E0DEDC";
-                    tertiary: "#D0CECC";
-                    text: "#000000";
+                status: {
+                    approved: {
+                        bg: "#1E7D45";
+                        text: "#166638";
+                    };
+                    draft: {
+                        bg: "#6B6968";
+                        text: "#4A4C4E";
+                    };
+                    failed: {
+                        bg: "#C33636";
+                        text: "#9B2727";
+                    };
+                    progress: {
+                        bg: "#8B5CF6";
+                        text: "#6F42C1";
+                    };
+                    review: {
+                        bg: "#FA5300";
+                        text: "#C74200";
+                    };
                 };
-                success: {
-                    primary: "#1E7D45";
-                    secondary: "#166638";
-                    tertiary: "#0E4E2B";
-                    text: "#FFFFFF";
+                text: {
+                    accent: "#FA5300";
+                    decorative: "#FA5300";
+                    failure: "#9B2727";
+                    foreground: "#000000";
+                    info: "#1D4EBA";
+                    inverse: "#FFFFFF";
+                    muted: "#8F8D8B";
+                    placeholder: "#B5B3B1";
+                    primary: "#18191A";
+                    secondary: "#4A4847";
+                    success: "#166638";
+                    tertiary: "#6B6968";
+                    warning: "#8A4A02";
                 };
-                danger: {
-                    primary: "#C33636";
-                    secondary: "#9B2727";
-                    tertiary: "#751D1D";
-                    text: "#FFFFFF";
+                tooltip: {
+                    bg: "#18191A";
+                    text: "#FFF9F5";
+                };
+                "viz-chart": {
+                    blue: "#2563EB";
+                    green: "#1E7D45";
+                    lime: "#57820E";
+                    magenta: "#C623D5";
+                    neutral: "#6E6C6A";
+                    pink: "#DB2777";
+                    purple: "#8B5CF6";
+                    red: "#C33636";
+                    teal: "#0D9488";
+                    yellow: "#D97706";
+                };
+                "viz-overlay": {
+                    blue: "#4F8BEF";
+                    green: "#4CA05A";
+                    lime: "#6FA512";
+                    magenta: "#DB64E6";
+                    neutral: "#9C9896";
+                    pink: "#EF5793";
+                    purple: "#AB81FB";
+                    red: "#FF6767";
+                    teal: "#32ADA0";
+                    yellow: "#ECAB2E";
                 };
             };
         };
     };
+    gradients: {
+        readonly action: {
+            readonly expressive: "linear-gradient(105deg, #FA5300, #DA3B72 55%, #B84DD9)";
+        };
+    };
     spacing: {
+        readonly 2: "2px";
+        readonly 4: "4px";
+        readonly 6: "6px";
+        readonly 8: "8px";
+        readonly 10: "10px";
+        readonly 12: "12px";
+        readonly 16: "16px";
+        readonly 20: "20px";
+        readonly 24: "24px";
+        readonly 32: "32px";
+        readonly 40: "40px";
+        readonly 48: "48px";
+        readonly 64: "64px";
+    };
+    spacingRole: {
         readonly xs: "0.25rem";
         readonly sm: "0.5rem";
         readonly md: "1rem";
@@ -357,7 +425,7 @@ declare const _default: {
     typography: {
         readonly fontFamily: {
             readonly sans: readonly ["Palanquin", "sans-serif"];
-            readonly mono: readonly ["monospace"];
+            readonly mono: readonly ["Roboto Mono", "monospace"];
         };
         readonly fontSize: {
             readonly xxs: "9px";
@@ -368,11 +436,73 @@ declare const _default: {
             readonly xl: "18px";
             readonly xxl: "23px";
         };
+        readonly textRole: {
+            readonly "heading-xl": {
+                readonly fontSize: "23px";
+                readonly lineHeight: "28px";
+                readonly fontWeight: 400;
+            };
+            readonly "heading-lg": {
+                readonly fontSize: "18px";
+                readonly lineHeight: "24px";
+                readonly fontWeight: 500;
+            };
+            readonly "heading-md": {
+                readonly fontSize: "16px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 500;
+            };
+            readonly "heading-sm": {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 500;
+            };
+            readonly "heading-xs": {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 500;
+            };
+            readonly "body-primary": {
+                readonly fontSize: "15px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+            };
+            readonly "body-secondary": {
+                readonly fontSize: "14px";
+                readonly lineHeight: "20px";
+                readonly fontWeight: 400;
+            };
+            readonly "body-tertiary": {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 400;
+            };
+            readonly label: {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 600;
+            };
+            readonly caption: {
+                readonly fontSize: "11px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 400;
+            };
+            readonly "code-primary": {
+                readonly fontSize: "12px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 400;
+            };
+            readonly "code-secondary": {
+                readonly fontSize: "11px";
+                readonly lineHeight: "16px";
+                readonly fontWeight: 400;
+            };
+        };
         readonly fontWeight: {
-            readonly light: 300;
-            readonly normal: 400;
-            readonly semibold: 500;
-            readonly bold: 600;
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
         };
     };
 };