@tempoxyz/ds 0.2.0 → 0.2.4

package/dist/web/zyzz.config.d.ts

@@ -29,6 +29,10 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '40': "40px";
         readonly '64': "64px";
     };
+    readonly borderWidth: {
+        readonly '1': "1px";
+        readonly '2': "2px";
+    };
     readonly breakpoint: {
         readonly '640': "40rem";
         readonly '768': "48rem";
@@ -74,14 +78,42 @@ export declare const style: Config.StyleFactory<Pick<{
             };
         };
         readonly background: {
+            readonly chip: {
+                readonly dark: "#ffffff21";
+                readonly light: "#0000000d";
+            };
+            readonly indicator: {
+                readonly dark: "rgb(255 255 255 / 0.16)";
+                readonly light: "#fff";
+            };
+            readonly info: {
+                readonly dark: "#161b29";
+                readonly light: "#e6eefe";
+            };
+            readonly negative: {
+                readonly dark: "#2a1410";
+                readonly light: "#ffe6e0";
+            };
+            readonly positive: {
+                readonly dark: "#052315";
+                readonly light: "#d3f8df";
+            };
             readonly primary: {
                 readonly dark: "#100f0f";
                 readonly light: "#f5f5f5";
             };
+            readonly raised: {
+                readonly dark: "#1f1e1e";
+                readonly light: "#fff";
+            };
             readonly surface: {
                 readonly dark: "#1a1919";
                 readonly light: "#fff";
             };
+            readonly warning: {
+                readonly dark: "#2d1504";
+                readonly light: "#ffede2";
+            };
         };
         readonly black: "#000";
         readonly blue: {
@@ -449,6 +481,19 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '1': "inset 0 1px 1px rgb(0 0 0 / 0.05)";
         readonly '4': "inset 0 2px 4px rgb(0 0 0 / 0.05)";
     };
+    readonly opacity: {
+        readonly disabled: 0.4;
+        readonly hover: 0.86;
+    };
+    readonly outlineOffset: {
+        readonly '-2': "-2px";
+        readonly '0': "0px";
+        readonly '2': "2px";
+    };
+    readonly outlineWidth: {
+        readonly '1': "1px";
+        readonly '2': "2px";
+    };
     readonly perspective: {
         readonly '100': "100px";
         readonly '300': "300px";
@@ -457,14 +502,20 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '1200': "1200px";
     };
     readonly radius: {
+        readonly '0': "0rem";
         readonly '2': "0.125rem";
         readonly '4': "0.25rem";
         readonly '6': "0.375rem";
         readonly '8': "0.5rem";
+        readonly '10': "0.625rem";
         readonly '12': "0.75rem";
         readonly '16': "1rem";
         readonly full: "9999px";
     };
+    readonly scale: {
+        readonly enter: 0.96;
+        readonly press: 0.98;
+    };
     readonly shadow: {
         readonly '0': "0 1px rgb(0 0 0 / 0.05)";
         readonly '2': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
@@ -474,26 +525,46 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '25': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
         readonly '50': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
         readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+        readonly modal: "0 32px 64px -16px rgb(0 0 0 / 0.28)";
         readonly popover: "0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)";
         readonly raised: "0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)";
+        readonly thumb: "0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12)";
     };
     readonly spacing: {
+        readonly '-24': "-1.5rem";
+        readonly '-20': "-1.25rem";
+        readonly '-16': "-1rem";
+        readonly '-14': "-0.875rem";
+        readonly '-12': "-0.75rem";
+        readonly '-10': "-0.625rem";
+        readonly '-8': "-0.5rem";
+        readonly '-6': "-0.375rem";
+        readonly '-4': "-0.25rem";
         readonly '0': "0rem";
         readonly '1': "1px";
+        readonly '2': "0.125rem";
         readonly '4': "0.25rem";
+        readonly '6': "0.375rem";
         readonly '8': "0.5rem";
+        readonly '10': "0.625rem";
         readonly '12': "0.75rem";
+        readonly '14': "0.875rem";
         readonly '16': "1rem";
+        readonly '18': "1.125rem";
         readonly '20': "1.25rem";
+        readonly '22': "1.375rem";
         readonly '24': "1.5rem";
         readonly '28': "1.75rem";
+        readonly '30': "1.875rem";
         readonly '32': "2rem";
         readonly '36': "2.25rem";
+        readonly '38': "2.375rem";
         readonly '40': "2.5rem";
         readonly '44': "2.75rem";
         readonly '48': "3rem";
         readonly '56': "3.5rem";
         readonly '64': "4rem";
+        readonly '68': "4.25rem";
         readonly '80': "5rem";
         readonly '96': "6rem";
         readonly '112': "7rem";
@@ -517,6 +588,20 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '4': "0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)";
         readonly '8': "0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)";
     };
+    readonly transitionDuration: {
+        readonly '0': "0ms";
+        readonly '100': "100ms";
+        readonly '120': "120ms";
+        readonly '140': "140ms";
+        readonly '150': "150ms";
+        readonly '160': "160ms";
+        readonly '180': "180ms";
+        readonly '200': "200ms";
+        readonly '220': "220ms";
+        readonly '240': "240ms";
+        readonly '280': "280ms";
+        readonly '320': "320ms";
+    };
     readonly typography: {
         readonly button: {
             readonly '12': {
@@ -835,6 +920,12 @@ export declare const style: Config.StyleFactory<Pick<{
             };
         };
     };
+    readonly zIndex: {
+        readonly modal: 60;
+        readonly overlay: 40;
+        readonly popover: 50;
+        readonly toast: 1000;
+    };
 }, "breakpoint" | "container" | "typography"> & {
     readonly color?: undefined;
     readonly '~vars': {
@@ -851,6 +942,10 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '40': "40px";
                 readonly '64': "64px";
             };
+            readonly borderWidth: {
+                readonly '1': "1px";
+                readonly '2': "2px";
+            };
             readonly breakpoint: {
                 readonly '640': "40rem";
                 readonly '768': "48rem";
@@ -896,14 +991,42 @@ export declare const style: Config.StyleFactory<Pick<{
                     };
                 };
                 readonly background: {
+                    readonly chip: {
+                        readonly dark: "#ffffff21";
+                        readonly light: "#0000000d";
+                    };
+                    readonly indicator: {
+                        readonly dark: "rgb(255 255 255 / 0.16)";
+                        readonly light: "#fff";
+                    };
+                    readonly info: {
+                        readonly dark: "#161b29";
+                        readonly light: "#e6eefe";
+                    };
+                    readonly negative: {
+                        readonly dark: "#2a1410";
+                        readonly light: "#ffe6e0";
+                    };
+                    readonly positive: {
+                        readonly dark: "#052315";
+                        readonly light: "#d3f8df";
+                    };
                     readonly primary: {
                         readonly dark: "#100f0f";
                         readonly light: "#f5f5f5";
                     };
+                    readonly raised: {
+                        readonly dark: "#1f1e1e";
+                        readonly light: "#fff";
+                    };
                     readonly surface: {
                         readonly dark: "#1a1919";
                         readonly light: "#fff";
                     };
+                    readonly warning: {
+                        readonly dark: "#2d1504";
+                        readonly light: "#ffede2";
+                    };
                 };
                 readonly black: "#000";
                 readonly blue: {
@@ -1271,6 +1394,19 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '1': "inset 0 1px 1px rgb(0 0 0 / 0.05)";
                 readonly '4': "inset 0 2px 4px rgb(0 0 0 / 0.05)";
             };
+            readonly opacity: {
+                readonly disabled: 0.4;
+                readonly hover: 0.86;
+            };
+            readonly outlineOffset: {
+                readonly '-2': "-2px";
+                readonly '0': "0px";
+                readonly '2': "2px";
+            };
+            readonly outlineWidth: {
+                readonly '1': "1px";
+                readonly '2': "2px";
+            };
             readonly perspective: {
                 readonly '100': "100px";
                 readonly '300': "300px";
@@ -1279,14 +1415,20 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '1200': "1200px";
             };
             readonly radius: {
+                readonly '0': "0rem";
                 readonly '2': "0.125rem";
                 readonly '4': "0.25rem";
                 readonly '6': "0.375rem";
                 readonly '8': "0.5rem";
+                readonly '10': "0.625rem";
                 readonly '12': "0.75rem";
                 readonly '16': "1rem";
                 readonly full: "9999px";
             };
+            readonly scale: {
+                readonly enter: 0.96;
+                readonly press: 0.98;
+            };
             readonly shadow: {
                 readonly '0': "0 1px rgb(0 0 0 / 0.05)";
                 readonly '2': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
@@ -1296,26 +1438,46 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '25': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
                 readonly '50': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
                 readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+                readonly modal: "0 32px 64px -16px rgb(0 0 0 / 0.28)";
                 readonly popover: "0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)";
                 readonly raised: "0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)";
+                readonly thumb: "0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12)";
             };
             readonly spacing: {
+                readonly '-24': "-1.5rem";
+                readonly '-20': "-1.25rem";
+                readonly '-16': "-1rem";
+                readonly '-14': "-0.875rem";
+                readonly '-12': "-0.75rem";
+                readonly '-10': "-0.625rem";
+                readonly '-8': "-0.5rem";
+                readonly '-6': "-0.375rem";
+                readonly '-4': "-0.25rem";
                 readonly '0': "0rem";
                 readonly '1': "1px";
+                readonly '2': "0.125rem";
                 readonly '4': "0.25rem";
+                readonly '6': "0.375rem";
                 readonly '8': "0.5rem";
+                readonly '10': "0.625rem";
                 readonly '12': "0.75rem";
+                readonly '14': "0.875rem";
                 readonly '16': "1rem";
+                readonly '18': "1.125rem";
                 readonly '20': "1.25rem";
+                readonly '22': "1.375rem";
                 readonly '24': "1.5rem";
                 readonly '28': "1.75rem";
+                readonly '30': "1.875rem";
                 readonly '32': "2rem";
                 readonly '36': "2.25rem";
+                readonly '38': "2.375rem";
                 readonly '40': "2.5rem";
                 readonly '44': "2.75rem";
                 readonly '48': "3rem";
                 readonly '56': "3.5rem";
                 readonly '64': "4rem";
+                readonly '68': "4.25rem";
                 readonly '80': "5rem";
                 readonly '96': "6rem";
                 readonly '112': "7rem";
@@ -1339,6 +1501,20 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '4': "0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)";
                 readonly '8': "0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)";
             };
+            readonly transitionDuration: {
+                readonly '0': "0ms";
+                readonly '100': "100ms";
+                readonly '120': "120ms";
+                readonly '140': "140ms";
+                readonly '150': "150ms";
+                readonly '160': "160ms";
+                readonly '180': "180ms";
+                readonly '200': "200ms";
+                readonly '220': "220ms";
+                readonly '240': "240ms";
+                readonly '280': "280ms";
+                readonly '320': "320ms";
+            };
             readonly typography: {
                 readonly button: {
                     readonly '12': {
@@ -1657,6 +1833,12 @@ export declare const style: Config.StyleFactory<Pick<{
                     };
                 };
             };
+            readonly zIndex: {
+                readonly modal: 60;
+                readonly overlay: 40;
+                readonly popover: 50;
+                readonly toast: 1000;
+            };
         };
         readonly mappings: {};
     };
@@ -1678,6 +1860,10 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '40': "40px";
         readonly '64': "64px";
     };
+    readonly borderWidth: {
+        readonly '1': "1px";
+        readonly '2': "2px";
+    };
     readonly breakpoint: {
         readonly '640': "40rem";
         readonly '768': "48rem";
@@ -1723,14 +1909,42 @@ export declare const style: Config.StyleFactory<Pick<{
             };
         };
         readonly background: {
+            readonly chip: {
+                readonly dark: "#ffffff21";
+                readonly light: "#0000000d";
+            };
+            readonly indicator: {
+                readonly dark: "rgb(255 255 255 / 0.16)";
+                readonly light: "#fff";
+            };
+            readonly info: {
+                readonly dark: "#161b29";
+                readonly light: "#e6eefe";
+            };
+            readonly negative: {
+                readonly dark: "#2a1410";
+                readonly light: "#ffe6e0";
+            };
+            readonly positive: {
+                readonly dark: "#052315";
+                readonly light: "#d3f8df";
+            };
             readonly primary: {
                 readonly dark: "#100f0f";
                 readonly light: "#f5f5f5";
             };
+            readonly raised: {
+                readonly dark: "#1f1e1e";
+                readonly light: "#fff";
+            };
             readonly surface: {
                 readonly dark: "#1a1919";
                 readonly light: "#fff";
             };
+            readonly warning: {
+                readonly dark: "#2d1504";
+                readonly light: "#ffede2";
+            };
         };
         readonly black: "#000";
         readonly blue: {
@@ -2098,6 +2312,19 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '1': "inset 0 1px 1px rgb(0 0 0 / 0.05)";
         readonly '4': "inset 0 2px 4px rgb(0 0 0 / 0.05)";
     };
+    readonly opacity: {
+        readonly disabled: 0.4;
+        readonly hover: 0.86;
+    };
+    readonly outlineOffset: {
+        readonly '-2': "-2px";
+        readonly '0': "0px";
+        readonly '2': "2px";
+    };
+    readonly outlineWidth: {
+        readonly '1': "1px";
+        readonly '2': "2px";
+    };
     readonly perspective: {
         readonly '100': "100px";
         readonly '300': "300px";
@@ -2106,14 +2333,20 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '1200': "1200px";
     };
     readonly radius: {
+        readonly '0': "0rem";
         readonly '2': "0.125rem";
         readonly '4': "0.25rem";
         readonly '6': "0.375rem";
         readonly '8': "0.5rem";
+        readonly '10': "0.625rem";
         readonly '12': "0.75rem";
         readonly '16': "1rem";
         readonly full: "9999px";
     };
+    readonly scale: {
+        readonly enter: 0.96;
+        readonly press: 0.98;
+    };
     readonly shadow: {
         readonly '0': "0 1px rgb(0 0 0 / 0.05)";
         readonly '2': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
@@ -2123,26 +2356,46 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '25': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
         readonly '50': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
         readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+        readonly modal: "0 32px 64px -16px rgb(0 0 0 / 0.28)";
         readonly popover: "0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)";
         readonly raised: "0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)";
+        readonly thumb: "0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12)";
     };
     readonly spacing: {
+        readonly '-24': "-1.5rem";
+        readonly '-20': "-1.25rem";
+        readonly '-16': "-1rem";
+        readonly '-14': "-0.875rem";
+        readonly '-12': "-0.75rem";
+        readonly '-10': "-0.625rem";
+        readonly '-8': "-0.5rem";
+        readonly '-6': "-0.375rem";
+        readonly '-4': "-0.25rem";
         readonly '0': "0rem";
         readonly '1': "1px";
+        readonly '2': "0.125rem";
         readonly '4': "0.25rem";
+        readonly '6': "0.375rem";
         readonly '8': "0.5rem";
+        readonly '10': "0.625rem";
         readonly '12': "0.75rem";
+        readonly '14': "0.875rem";
         readonly '16': "1rem";
+        readonly '18': "1.125rem";
         readonly '20': "1.25rem";
+        readonly '22': "1.375rem";
         readonly '24': "1.5rem";
         readonly '28': "1.75rem";
+        readonly '30': "1.875rem";
         readonly '32': "2rem";
         readonly '36': "2.25rem";
+        readonly '38': "2.375rem";
         readonly '40': "2.5rem";
         readonly '44': "2.75rem";
         readonly '48': "3rem";
         readonly '56': "3.5rem";
         readonly '64': "4rem";
+        readonly '68': "4.25rem";
         readonly '80': "5rem";
         readonly '96': "6rem";
         readonly '112': "7rem";
@@ -2166,6 +2419,20 @@ export declare const style: Config.StyleFactory<Pick<{
         readonly '4': "0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)";
         readonly '8': "0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)";
     };
+    readonly transitionDuration: {
+        readonly '0': "0ms";
+        readonly '100': "100ms";
+        readonly '120': "120ms";
+        readonly '140': "140ms";
+        readonly '150': "150ms";
+        readonly '160': "160ms";
+        readonly '180': "180ms";
+        readonly '200': "200ms";
+        readonly '220': "220ms";
+        readonly '240': "240ms";
+        readonly '280': "280ms";
+        readonly '320': "320ms";
+    };
     readonly typography: {
         readonly button: {
             readonly '12': {
@@ -2484,6 +2751,12 @@ export declare const style: Config.StyleFactory<Pick<{
             };
         };
     };
+    readonly zIndex: {
+        readonly modal: 60;
+        readonly overlay: 40;
+        readonly popover: 50;
+        readonly toast: 1000;
+    };
 }, "breakpoint" | "container" | "typography"> & {
     readonly color?: undefined;
     readonly '~vars': {
@@ -2500,6 +2773,10 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '40': "40px";
                 readonly '64': "64px";
             };
+            readonly borderWidth: {
+                readonly '1': "1px";
+                readonly '2': "2px";
+            };
             readonly breakpoint: {
                 readonly '640': "40rem";
                 readonly '768': "48rem";
@@ -2545,14 +2822,42 @@ export declare const style: Config.StyleFactory<Pick<{
                     };
                 };
                 readonly background: {
+                    readonly chip: {
+                        readonly dark: "#ffffff21";
+                        readonly light: "#0000000d";
+                    };
+                    readonly indicator: {
+                        readonly dark: "rgb(255 255 255 / 0.16)";
+                        readonly light: "#fff";
+                    };
+                    readonly info: {
+                        readonly dark: "#161b29";
+                        readonly light: "#e6eefe";
+                    };
+                    readonly negative: {
+                        readonly dark: "#2a1410";
+                        readonly light: "#ffe6e0";
+                    };
+                    readonly positive: {
+                        readonly dark: "#052315";
+                        readonly light: "#d3f8df";
+                    };
                     readonly primary: {
                         readonly dark: "#100f0f";
                         readonly light: "#f5f5f5";
                     };
+                    readonly raised: {
+                        readonly dark: "#1f1e1e";
+                        readonly light: "#fff";
+                    };
                     readonly surface: {
                         readonly dark: "#1a1919";
                         readonly light: "#fff";
                     };
+                    readonly warning: {
+                        readonly dark: "#2d1504";
+                        readonly light: "#ffede2";
+                    };
                 };
                 readonly black: "#000";
                 readonly blue: {
@@ -2920,6 +3225,19 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '1': "inset 0 1px 1px rgb(0 0 0 / 0.05)";
                 readonly '4': "inset 0 2px 4px rgb(0 0 0 / 0.05)";
             };
+            readonly opacity: {
+                readonly disabled: 0.4;
+                readonly hover: 0.86;
+            };
+            readonly outlineOffset: {
+                readonly '-2': "-2px";
+                readonly '0': "0px";
+                readonly '2': "2px";
+            };
+            readonly outlineWidth: {
+                readonly '1': "1px";
+                readonly '2': "2px";
+            };
             readonly perspective: {
                 readonly '100': "100px";
                 readonly '300': "300px";
@@ -2928,14 +3246,20 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '1200': "1200px";
             };
             readonly radius: {
+                readonly '0': "0rem";
                 readonly '2': "0.125rem";
                 readonly '4': "0.25rem";
                 readonly '6': "0.375rem";
                 readonly '8': "0.5rem";
+                readonly '10': "0.625rem";
                 readonly '12': "0.75rem";
                 readonly '16': "1rem";
                 readonly full: "9999px";
             };
+            readonly scale: {
+                readonly enter: 0.96;
+                readonly press: 0.98;
+            };
             readonly shadow: {
                 readonly '0': "0 1px rgb(0 0 0 / 0.05)";
                 readonly '2': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
@@ -2945,26 +3269,46 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '25': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
                 readonly '50': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
                 readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+                readonly modal: "0 32px 64px -16px rgb(0 0 0 / 0.28)";
                 readonly popover: "0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)";
                 readonly raised: "0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)";
+                readonly thumb: "0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12)";
             };
             readonly spacing: {
+                readonly '-24': "-1.5rem";
+                readonly '-20': "-1.25rem";
+                readonly '-16': "-1rem";
+                readonly '-14': "-0.875rem";
+                readonly '-12': "-0.75rem";
+                readonly '-10': "-0.625rem";
+                readonly '-8': "-0.5rem";
+                readonly '-6': "-0.375rem";
+                readonly '-4': "-0.25rem";
                 readonly '0': "0rem";
                 readonly '1': "1px";
+                readonly '2': "0.125rem";
                 readonly '4': "0.25rem";
+                readonly '6': "0.375rem";
                 readonly '8': "0.5rem";
+                readonly '10': "0.625rem";
                 readonly '12': "0.75rem";
+                readonly '14': "0.875rem";
                 readonly '16': "1rem";
+                readonly '18': "1.125rem";
                 readonly '20': "1.25rem";
+                readonly '22': "1.375rem";
                 readonly '24': "1.5rem";
                 readonly '28': "1.75rem";
+                readonly '30': "1.875rem";
                 readonly '32': "2rem";
                 readonly '36': "2.25rem";
+                readonly '38': "2.375rem";
                 readonly '40': "2.5rem";
                 readonly '44': "2.75rem";
                 readonly '48': "3rem";
                 readonly '56': "3.5rem";
                 readonly '64': "4rem";
+                readonly '68': "4.25rem";
                 readonly '80': "5rem";
                 readonly '96': "6rem";
                 readonly '112': "7rem";
@@ -2988,6 +3332,20 @@ export declare const style: Config.StyleFactory<Pick<{
                 readonly '4': "0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)";
                 readonly '8': "0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)";
             };
+            readonly transitionDuration: {
+                readonly '0': "0ms";
+                readonly '100': "100ms";
+                readonly '120': "120ms";
+                readonly '140': "140ms";
+                readonly '150': "150ms";
+                readonly '160': "160ms";
+                readonly '180': "180ms";
+                readonly '200': "200ms";
+                readonly '220': "220ms";
+                readonly '240': "240ms";
+                readonly '280': "280ms";
+                readonly '320': "320ms";
+            };
             readonly typography: {
                 readonly button: {
                     readonly '12': {
@@ -3306,6 +3664,12 @@ export declare const style: Config.StyleFactory<Pick<{
                     };
                 };
             };
+            readonly zIndex: {
+                readonly modal: 60;
+                readonly overlay: 40;
+                readonly popover: 50;
+                readonly toast: 1000;
+            };
         };
         readonly mappings: {};
     };
@@ -3336,6 +3700,10 @@ export declare const style: Config.StyleFactory<Pick<{
             readonly '40': "40px";
             readonly '64': "64px";
         };
+        readonly borderWidth: {
+            readonly '1': "1px";
+            readonly '2': "2px";
+        };
         readonly breakpoint: {
             readonly '640': "40rem";
             readonly '768': "48rem";
@@ -3381,14 +3749,42 @@ export declare const style: Config.StyleFactory<Pick<{
                 };
             };
             readonly background: {
+                readonly chip: {
+                    readonly dark: "#ffffff21";
+                    readonly light: "#0000000d";
+                };
+                readonly indicator: {
+                    readonly dark: "rgb(255 255 255 / 0.16)";
+                    readonly light: "#fff";
+                };
+                readonly info: {
+                    readonly dark: "#161b29";
+                    readonly light: "#e6eefe";
+                };
+                readonly negative: {
+                    readonly dark: "#2a1410";
+                    readonly light: "#ffe6e0";
+                };
+                readonly positive: {
+                    readonly dark: "#052315";
+                    readonly light: "#d3f8df";
+                };
                 readonly primary: {
                     readonly dark: "#100f0f";
                     readonly light: "#f5f5f5";
                 };
+                readonly raised: {
+                    readonly dark: "#1f1e1e";
+                    readonly light: "#fff";
+                };
                 readonly surface: {
                     readonly dark: "#1a1919";
                     readonly light: "#fff";
                 };
+                readonly warning: {
+                    readonly dark: "#2d1504";
+                    readonly light: "#ffede2";
+                };
             };
             readonly black: "#000";
             readonly blue: {
@@ -3756,6 +4152,19 @@ export declare const style: Config.StyleFactory<Pick<{
             readonly '1': "inset 0 1px 1px rgb(0 0 0 / 0.05)";
             readonly '4': "inset 0 2px 4px rgb(0 0 0 / 0.05)";
         };
+        readonly opacity: {
+            readonly disabled: 0.4;
+            readonly hover: 0.86;
+        };
+        readonly outlineOffset: {
+            readonly '-2': "-2px";
+            readonly '0': "0px";
+            readonly '2': "2px";
+        };
+        readonly outlineWidth: {
+            readonly '1': "1px";
+            readonly '2': "2px";
+        };
         readonly perspective: {
             readonly '100': "100px";
             readonly '300': "300px";
@@ -3764,14 +4173,20 @@ export declare const style: Config.StyleFactory<Pick<{
             readonly '1200': "1200px";
         };
         readonly radius: {
+            readonly '0': "0rem";
             readonly '2': "0.125rem";
             readonly '4': "0.25rem";
             readonly '6': "0.375rem";
             readonly '8': "0.5rem";
+            readonly '10': "0.625rem";
             readonly '12': "0.75rem";
             readonly '16': "1rem";
             readonly full: "9999px";
         };
+        readonly scale: {
+            readonly enter: 0.96;
+            readonly press: 0.98;
+        };
         readonly shadow: {
             readonly '0': "0 1px rgb(0 0 0 / 0.05)";
             readonly '2': "0 1px 2px 0 rgb(0 0 0 / 0.05)";
@@ -3781,26 +4196,46 @@ export declare const style: Config.StyleFactory<Pick<{
             readonly '25': "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
             readonly '50': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
             readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+            readonly modal: "0 32px 64px -16px rgb(0 0 0 / 0.28)";
             readonly popover: "0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)";
             readonly raised: "0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)";
+            readonly thumb: "0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12)";
         };
         readonly spacing: {
+            readonly '-24': "-1.5rem";
+            readonly '-20': "-1.25rem";
+            readonly '-16': "-1rem";
+            readonly '-14': "-0.875rem";
+            readonly '-12': "-0.75rem";
+            readonly '-10': "-0.625rem";
+            readonly '-8': "-0.5rem";
+            readonly '-6': "-0.375rem";
+            readonly '-4': "-0.25rem";
             readonly '0': "0rem";
             readonly '1': "1px";
+            readonly '2': "0.125rem";
             readonly '4': "0.25rem";
+            readonly '6': "0.375rem";
             readonly '8': "0.5rem";
+            readonly '10': "0.625rem";
             readonly '12': "0.75rem";
+            readonly '14': "0.875rem";
             readonly '16': "1rem";
+            readonly '18': "1.125rem";
             readonly '20': "1.25rem";
+            readonly '22': "1.375rem";
             readonly '24': "1.5rem";
             readonly '28': "1.75rem";
+            readonly '30': "1.875rem";
             readonly '32': "2rem";
             readonly '36': "2.25rem";
+            readonly '38': "2.375rem";
             readonly '40': "2.5rem";
             readonly '44': "2.75rem";
             readonly '48': "3rem";
             readonly '56': "3.5rem";
             readonly '64': "4rem";
+            readonly '68': "4.25rem";
             readonly '80': "5rem";
             readonly '96': "6rem";
             readonly '112': "7rem";
@@ -3824,6 +4259,20 @@ export declare const style: Config.StyleFactory<Pick<{
             readonly '4': "0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)";
             readonly '8': "0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)";
         };
+        readonly transitionDuration: {
+            readonly '0': "0ms";
+            readonly '100': "100ms";
+            readonly '120': "120ms";
+            readonly '140': "140ms";
+            readonly '150': "150ms";
+            readonly '160': "160ms";
+            readonly '180': "180ms";
+            readonly '200': "200ms";
+            readonly '220': "220ms";
+            readonly '240': "240ms";
+            readonly '280': "280ms";
+            readonly '320': "320ms";
+        };
         readonly typography: {
             readonly button: {
                 readonly '12': {
@@ -4142,6 +4591,12 @@ export declare const style: Config.StyleFactory<Pick<{
                 };
             };
         };
+        readonly zIndex: {
+            readonly modal: 60;
+            readonly overlay: 40;
+            readonly popover: 50;
+            readonly toast: 1000;
+        };
     }>;
 }>;
 //# sourceMappingURL=zyzz.config.d.ts.map