@voxel51/voodo 0.1.0 → 0.2.0-dev-prerelease-publishing.0

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

@@ -1,187 +1,411 @@
+/**
+ * Color tokens.
+ *
+ * Two-tier system mirroring the Figma variables:
+ *  - `primitives`: raw color scales (neutral/orange/green/red/blue/yellow/
+ *    purple/pink/teal). Not emitted as CSS vars directly.
+ *  - `colors.{common,dark,light}`: semantic tokens that reference primitives.
+ *    These are flattened to CSS custom properties by the theme generator.
+ *
+ * Values are sourced from the Figma "Theme" variable collection (both modes).
+ */
+export declare const primitives: {
+    readonly neutral: {
+        readonly 0: "#FFFFFF";
+        readonly 25: "#FFF9F5";
+        readonly 50: "#F9F8F7";
+        readonly 75: "#F2F1F0";
+        readonly 100: "#EEEDEC";
+        readonly 125: "#E8E7E6";
+        readonly 150: "#E0DEDC";
+        readonly 200: "#D0CECC";
+        readonly 250: "#C0BEBC";
+        readonly 300: "#B5B3B1";
+        readonly 350: "#A0A09E";
+        readonly 400: "#9C9896";
+        readonly 450: "#8F8D8B";
+        readonly 500: "#6E6C6A";
+        readonly 550: "#6B6968";
+        readonly 600: "#4A4C4E";
+        readonly 650: "#4A4847";
+        readonly 700: "#3E4244";
+        readonly 750: "#2F3234";
+        readonly 800: "#2A2B2C";
+        readonly 825: "#232526";
+        readonly 850: "#1F2021";
+        readonly 875: "#1E1F20";
+        readonly 900: "#1C1D1E";
+        readonly 925: "#18191A";
+        readonly 950: "#141618";
+        readonly 1000: "#000000";
+    };
+    readonly orange: {
+        readonly 300: "#FFD098";
+        readonly 400: "#FF9950";
+        readonly 500: "#FF6D04";
+        readonly 600: "#D05700";
+        readonly 700: "#9B4200";
+    };
+    readonly green: {
+        readonly 300: "#7AB87C";
+        readonly 400: "#4CA05A";
+        readonly 500: "#1E7D45";
+        readonly 600: "#166638";
+        readonly 700: "#0E4E2B";
+    };
+    readonly red: {
+        readonly 300: "#FF9999";
+        readonly 400: "#FF6767";
+        readonly 500: "#C33636";
+        readonly 600: "#9B2727";
+        readonly 700: "#751D1D";
+    };
+    readonly blue: {
+        readonly 300: "#86B5F6";
+        readonly 400: "#4F8BEF";
+        readonly 500: "#2563EB";
+        readonly 600: "#1D4EBA";
+        readonly 700: "#153A8A";
+    };
+    readonly yellow: {
+        readonly 300: "#FCCB58";
+        readonly 400: "#ECAB2E";
+        readonly 500: "#D97706";
+        readonly 600: "#B26003";
+        readonly 700: "#8A4A02";
+    };
+    readonly purple: {
+        readonly 300: "#CBA6FF";
+        readonly 400: "#AB81FB";
+        readonly 500: "#8B5CF6";
+        readonly 600: "#6F42C1";
+        readonly 700: "#532E91";
+    };
+    readonly pink: {
+        readonly 300: "#F988B4";
+        readonly 400: "#EF5793";
+        readonly 500: "#DB2777";
+        readonly 600: "#AF1D5E";
+        readonly 700: "#851547";
+    };
+    readonly teal: {
+        readonly 300: "#5EC6B9";
+        readonly 400: "#32ADA0";
+        readonly 500: "#0D9488";
+        readonly 600: "#0A766C";
+        readonly 700: "#075951";
+    };
+};
 export declare const colors: {
     common: {
         brand: {
-            primary: string;
-            accent: string;
+            primary: "#FF6D04";
+            accent: "#FF9950";
         };
         semantic: {
-            success: string;
-            destructive: string;
-            info: string;
-            warning: string;
+            success: "#1E7D45";
+            destructive: "#C33636";
+            info: "#2563EB";
+            warning: "#D97706";
         };
     };
     dark: {
         content: {
             bg: {
-                background: string;
+                background: "#18191A";
                 card: {
-                    1: string;
-                    2: string;
-                    elevated: string;
+                    1: "#1E1F20";
+                    2: "#232526";
+                    elevated: "#2F3234";
                 };
-                muted: string;
-                popover: string;
-                secondary: string;
+                muted: "#1F2021";
+                popover: "#141618";
+                secondary: "#1C1D1E";
                 selected: string;
             };
             text: {
-                fg: string;
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                muted: string;
-                placeholder: string;
-                success: string;
-                destructive: string;
-                info: string;
-                warning: string;
+                fg: "#FFF9F5";
+                primary: "#FFFFFF";
+                secondary: "#8F8D8B";
+                tertiary: "#6E6C6A";
+                muted: "#9C9896";
+                placeholder: "#6B6968";
+                success: "#7AB87C";
+                destructive: "#FF6767";
+                info: "#86B5F6";
+                warning: "#FCCB58";
+                accent: "#FF9950";
+                decorative: "#FFD098";
             };
             border: {
-                default: string;
-                strong: string;
-                hover: string;
-                focus: string;
-                subtle: string;
-                active: string;
-                error: string;
-                success: string;
-                warning: string;
-                disabled: string;
+                default: "#2F3234";
+                strong: "#3E4244";
+                hover: "#4A4C4E";
+                focus: "#6E6C6A";
+                subtle: "#1E1F20";
+                active: "#FF6D04";
+                error: "#FF6767";
+                success: "#7AB87C";
+                warning: "#FCCB58";
+                disabled: "#1E1F20";
+                input: "#2F3234";
+                "input-hover": "#4A4C4E";
+                "input-focus": "#6E6C6A";
             };
             status: {
-                approved: string;
-                review: string;
-                progress: string;
-                default: string;
-                failed: string;
+                approved: "#7AB87C";
+                review: "#FF9950";
+                progress: "#CBA6FF";
+                default: "#8F8D8B";
+                failed: "#FF6767";
             };
             icon: {
+                default: "#8F8D8B";
+                subtle: "#6E6C6A";
+                emphasis: "#FFFFFF";
+                muted: "#6B6968";
+                disabled: "#6B6968";
+                decorative: "#FF9950";
+                brand: "#FF6D04";
+                dark: "#18191A";
+                "brand-accent": "#FF9950";
+                success: "#7AB87C";
+                destructive: "#FF6767";
+                warning: "#FCCB58";
+                info: "#86B5F6";
+            };
+            overlay: {
                 default: string;
-                subtle: string;
-                emphasis: string;
-                muted: string;
-                disabled: string;
-                decorative: string;
-                brand: string;
-                "brand-accent": string;
-                success: string;
-                destructive: string;
-                warning: string;
-                info: string;
+                light: string;
+                heavy: string;
+            };
+            focus: {
+                ring: string;
+            };
+            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";
+            };
+            scrollbar: {
+                track: "#18191A";
+                thumb: "#3E4244";
+                "thumb-hover": "#4A4C4E";
+            };
+            selection: {
+                bg: string;
+                text: "#FFFFFF";
             };
         };
         action: {
             primary: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#FF6D04";
+                secondary: "#D05700";
+                tertiary: "#9B4200";
+                text: "#FFFFFF";
             };
             secondary: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#232526";
+                secondary: "#2A2B2C";
+                tertiary: "#1E1F20";
+                text: "#FFFFFF";
             };
             success: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#1E7D45";
+                secondary: "#166638";
+                tertiary: "#0E4E2B";
+                text: "#FFFFFF";
             };
             danger: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#C33636";
+                secondary: "#9B2727";
+                tertiary: "#751D1D";
+                text: "#FFFFFF";
             };
         };
     };
     light: {
         content: {
             bg: {
-                background: string;
+                background: "#F9F8F7";
                 card: {
-                    1: string;
-                    2: string;
-                    elevated: string;
+                    1: "#FFFFFF";
+                    2: "#F2F1F0";
+                    elevated: "#FFFFFF";
                 };
-                muted: string;
-                popover: string;
-                secondary: string;
+                muted: "#EEEDEC";
+                popover: "#FFFFFF";
+                secondary: "#E8E7E6";
                 selected: string;
             };
             text: {
-                fg: string;
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                muted: string;
-                placeholder: string;
-                success: string;
-                destructive: string;
-                info: string;
-                warning: string;
+                fg: "#000000";
+                primary: "#18191A";
+                secondary: "#4A4847";
+                tertiary: "#6B6968";
+                muted: "#8F8D8B";
+                placeholder: "#B5B3B1";
+                success: "#166638";
+                destructive: "#9B2727";
+                info: "#1D4EBA";
+                warning: "#8A4A02";
+                accent: "#D97706";
+                decorative: "#FF9950";
             };
             border: {
-                default: string;
-                strong: string;
-                hover: string;
-                focus: string;
-                subtle: string;
-                active: string;
-                error: string;
-                success: string;
-                warning: string;
-                disabled: string;
+                default: "#E0DEDC";
+                strong: "#D0CECC";
+                hover: "#C0BEBC";
+                focus: "#A0A09E";
+                subtle: "#EEEDEC";
+                active: "#FF6D04";
+                error: "#C33636";
+                success: "#1E7D45";
+                warning: "#D97706";
+                disabled: "#EEEDEC";
+                input: "#D0CECC";
+                "input-hover": "#C0BEBC";
+                "input-focus": "#A0A09E";
             };
             status: {
-                approved: string;
-                review: string;
-                progress: string;
-                default: string;
-                failed: string;
+                approved: "#1E7D45";
+                review: "#D05700";
+                progress: "#8B5CF6";
+                default: "#6B6968";
+                failed: "#C33636";
             };
             icon: {
+                default: "#6B6968";
+                subtle: "#8F8D8B";
+                emphasis: "#18191A";
+                muted: "#B5B3B1";
+                disabled: "#B5B3B1";
+                decorative: "#D05700";
+                brand: "#FF6D04";
+                dark: "#18191A";
+                "brand-accent": "#FF9950";
+                success: "#1E7D45";
+                destructive: "#C33636";
+                warning: "#D97706";
+                info: "#2563EB";
+            };
+            overlay: {
                 default: string;
-                subtle: string;
-                emphasis: string;
-                muted: string;
-                disabled: string;
-                decorative: string;
-                brand: string;
-                "brand-accent": string;
-                success: string;
-                destructive: string;
-                warning: string;
-                info: string;
+                light: string;
+                heavy: string;
+            };
+            focus: {
+                ring: string;
+            };
+            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";
+            };
+            scrollbar: {
+                track: "#F2F1F0";
+                thumb: "#D0CECC";
+                "thumb-hover": "#C0BEBC";
+            };
+            selection: {
+                bg: string;
+                text: "#000000";
             };
         };
         action: {
             primary: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#FF6D04";
+                secondary: "#D05700";
+                tertiary: "#9B4200";
+                text: "#FFFFFF";
             };
             secondary: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#EEEDEC";
+                secondary: "#E0DEDC";
+                tertiary: "#D0CECC";
+                text: "#000000";
             };
             success: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#1E7D45";
+                secondary: "#166638";
+                tertiary: "#0E4E2B";
+                text: "#FFFFFF";
             };
             danger: {
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                text: string;
+                primary: "#C33636";
+                secondary: "#9B2727";
+                tertiary: "#751D1D";
+                text: "#FFFFFF";
             };
         };
     };

package/dist/theme/tokens/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2LlB,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/theme/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFb,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyTlB,CAAC"}