@chakra-ui/theme - npm Package Compare versions

Comparing version 3.1.1 to 3.1.2

dist/components/avatar.d.ts

@@ -11,6 +11,6 @@ import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
             border: string;
+            borderColor: string;
             _dark: {
                 [x: string]: string;
             };
-            borderColor: string;
         };
@@ -21,6 +21,10 @@ excessLabel: {
             };
+            bg: string;
+            fontSize: string;
+            width: string;
+            height: string;
+            lineHeight: string;
             _dark: {
                 [x: string]: string;
             };
-            bgColor: string;
         };
@@ -32,12 +36,19 @@ container: {
             bg: string;
+            fontSize: string;
+            color: string;
+            borderColor: string;
+            verticalAlign: string;
+            width: string;
+            height: string;
             "&:not([data-loaded])": {
                 [x: string]: string;
             };
-            color: string;
             _dark: {
                 [x: string]: string;
             };
-            borderColor: string;
-            verticalAlign: string;
         };
+        label: {
+            fontSize: string;
+            lineHeight: string;
+        };
     }) | undefined;
@@ -47,13 +58,11 @@ sizes?: {
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -63,3 +72,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -69,13 +78,11 @@ };
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -85,3 +92,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -91,13 +98,11 @@ };
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -107,3 +112,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -113,13 +118,11 @@ };
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -129,3 +132,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -135,13 +138,11 @@ };
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -151,3 +152,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -157,13 +158,11 @@ };
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -173,3 +172,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -179,13 +178,11 @@ };
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -195,3 +192,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -201,13 +198,11 @@ };
             container: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                fontSize: string;
+                [x: string]: string | 1 | 10 | 1.5 | {
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
             excessLabel: {
-                width: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-                height: 1 | 10 | 1.5 | "100%" | 2 | "px" | "container" | 3 | "md" | "full" | 16 | 6 | "max" | "min" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
-            };
-            label: {
-                fontSize: string;
-                lineHeight: string | 1 | 10 | 1.5 | {
+                [x: string]: string | 1 | 10 | 1.5 | {
                     sm: string;
@@ -217,3 +212,3 @@ md: string;
                     xl: string;
-                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | undefined;
+                } | 2 | 3 | 16 | 6 | 0.5 | 2.5 | 3.5 | 4 | 5 | 7 | 8 | 9 | 12 | 14 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
             };
@@ -220,0 +215,0 @@ };

dist/components/avatar.js

@@ -111,19 +111,24 @@ "use strict";
 var $bg = (0, import_styled_system.cssVar)("avatar-bg");
+var $fs = (0, import_styled_system.cssVar)("avatar-font-size");
+var $size = (0, import_styled_system.cssVar)("avatar-size");
 var baseStyleBadge = (0, import_styled_system.defineStyle)({
   borderRadius: "full",
   border: "0.2em solid",
+  borderColor: $border.reference,
   [$border.variable]: "white",
   _dark: {
     [$border.variable]: "colors.gray.800"
-  },
-  borderColor: $border.reference
+  }
 });
 var baseStyleExcessLabel = (0, import_styled_system.defineStyle)({
+  bg: $bg.reference,
+  fontSize: $fs.reference,
+  width: $size.reference,
+  height: $size.reference,
+  lineHeight: "1",
   [$bg.variable]: "colors.gray.200",
   _dark: {
     [$bg.variable]: "colors.whiteAlpha.400"
-  },
-  bgColor: $bg.reference
+  }
 });
-var $avatarBg = (0, import_styled_system.cssVar)("avatar-background");
 var baseStyleContainer = (0, import_styled_system.defineStyle)((props) => {
@@ -137,19 +142,27 @@ const { name, theme } = props;
   return {
-    bg: $avatarBg.reference,
+    bg: $bg.reference,
+    fontSize: $fs.reference,
+    color,
+    borderColor: $border.reference,
+    verticalAlign: "top",
+    width: $size.reference,
+    height: $size.reference,
     "&:not([data-loaded])": {
-      [$avatarBg.variable]: bg
+      [$bg.variable]: bg
     },
-    color,
     [$border.variable]: "colors.white",
     _dark: {
       [$border.variable]: "colors.gray.800"
-    },
-    borderColor: $border.reference,
-    verticalAlign: "top"
+    }
   };
 });
+var baseStyleLabel = (0, import_styled_system.defineStyle)({
+  fontSize: $fs.reference,
+  lineHeight: "1"
+});
 var baseStyle = definePartsStyle((props) => ({
   badge: runIfFn(baseStyleBadge, props),
   excessLabel: runIfFn(baseStyleExcessLabel, props),
-  container: runIfFn(baseStyleContainer, props)
+  container: runIfFn(baseStyleContainer, props),
+  label: baseStyleLabel
 }));
@@ -160,13 +173,8 @@ function getSize(size) {
     container: {
-      width: size,
-      height: size,
-      fontSize: `calc(${themeSize != null ? themeSize : size} / 2.5)`
+      [$size.variable]: themeSize != null ? themeSize : size,
+      [$fs.variable]: `calc(${themeSize != null ? themeSize : size} / 2.5)`
     },
     excessLabel: {
-      width: size,
-      height: size
-    },
-    label: {
-      fontSize: `calc(${themeSize != null ? themeSize : size} / 2.5)`,
-      lineHeight: size !== "100%" ? themeSize != null ? themeSize : size : void 0
+      [$size.variable]: themeSize != null ? themeSize : size,
+      [$fs.variable]: `calc(${themeSize != null ? themeSize : size} / 2.5)`
     }
@@ -188,3 +196,5 @@ });
   sizes: sizes2,
-  defaultProps: { size: "md" }
+  defaultProps: {
+    size: "md"
+  }
 });
@@ -191,0 +201,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/components/button.d.ts

@@ -107,14 +107,2 @@ import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
             bg: string;
-            _hover: {
-                bg: string;
-                _disabled: {
-                    bg: string;
-                };
-            };
-            _active: {
-                bg: string;
-            };
-            color?: undefined;
-        } | {
-            bg: string;
             color: string;
@@ -121,0 +109,0 @@ _hover: {

dist/components/button.js

@@ -60,3 +60,3 @@ "use strict";
     return {
-      color: (0, import_theme_tools.mode)(`inherit`, `whiteAlpha.900`)(props),
+      color: (0, import_theme_tools.mode)(`gray.800`, `whiteAlpha.900`)(props),
       _hover: {
@@ -113,2 +113,3 @@ bg: (0, import_theme_tools.mode)(`gray.100`, `whiteAlpha.200`)(props)
       bg: bg2,
+      color: (0, import_theme_tools.mode)(`gray.800`, `whiteAlpha.900`)(props),
       _hover: {
@@ -115,0 +116,0 @@ bg: (0, import_theme_tools.mode)(`gray.200`, `whiteAlpha.300`)(props),

dist/components/input.js

@@ -112,9 +112,9 @@ "use strict";
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -145,7 +145,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColor)(theme, fc)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
       }
@@ -175,8 +175,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -183,0 +183,0 @@ },

dist/components/number-input.js

@@ -180,9 +180,9 @@ "use strict";
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -213,7 +213,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColor)(theme, fc)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
       }
@@ -243,8 +243,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -251,0 +251,0 @@ },

dist/components/pin-input.js

@@ -115,9 +115,9 @@ "use strict";
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -148,7 +148,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColor)(theme, fc)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
       }
@@ -178,8 +178,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -186,0 +186,0 @@ },

dist/components/progress.js

@@ -40,3 +40,3 @@ "use strict";
     transparent 0%,
-    ${(0, import_theme_tools.getColor)(t, bgColor)} 50%,
+    ${(0, import_theme_tools.getColorVar)(t, bgColor)} 50%,
     transparent 100%
@@ -43,0 +43,0 @@ )`;

dist/components/select.js

@@ -116,9 +116,9 @@ "use strict";
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -149,7 +149,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColor)(theme, fc)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
       }
@@ -179,8 +179,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -187,0 +187,0 @@ },

dist/components/textarea.js

@@ -115,9 +115,9 @@ "use strict";
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
         zIndex: 1,
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0 0 0 1px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -148,7 +148,7 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec)
       },
       _focusVisible: {
         bg: "transparent",
-        borderColor: (0, import_theme_tools.getColor)(theme, fc)
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc)
       }
@@ -178,8 +178,8 @@ },
       _invalid: {
-        borderColor: (0, import_theme_tools.getColor)(theme, ec),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, ec)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, ec),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, ec)}`
       },
       _focusVisible: {
-        borderColor: (0, import_theme_tools.getColor)(theme, fc),
-        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColor)(theme, fc)}`
+        borderColor: (0, import_theme_tools.getColorVar)(theme, fc),
+        boxShadow: `0px 1px 0px 0px ${(0, import_theme_tools.getColorVar)(theme, fc)}`
       }
@@ -186,0 +186,0 @@ },

package.json

 {
   "name": "@chakra-ui/theme",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "The default theme for chakra components",
@@ -32,3 +32,3 @@ "keywords": [
     "@chakra-ui/anatomy": "2.1.2",
-    "@chakra-ui/theme-tools": "2.0.17",
+    "@chakra-ui/theme-tools": "2.0.18",
     "@chakra-ui/shared-utils": "2.0.5"
@@ -42,3 +42,3 @@ },
     "@chakra-ui/cli": "2.4.1",
-    "@chakra-ui/styled-system": "2.9.0"
+    "@chakra-ui/styled-system": "2.9.1"
   },
@@ -45,0 +45,0 @@ "tsup": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

900150

decreased by-2.86%

Lines of code

31266

decreased by-0.02%

Dependency changes

• + Added@chakra-ui/theme-tools@2.0.18(transitive)

• - Removed@chakra-ui/theme-tools@2.0.17(transitive)

• Updated@chakra-ui/theme-tools@2.0.18