@saas-ui/react 3.0.0-next.26 → 3.0.0-next.28

package/dist/components/sidebar/sidebar.recipe.js

@@ -24,7 +24,7 @@ export const sidebarSlotRecipe = defineSlotRecipe({
             flexDirection: 'column',
         },
         backdrop: {
-            bg: 'blackAlpha.200',
+            layerStyle: 'backdrop',
             position: 'fixed',
             inset: 0,
             '--sidebar-backdrop-z-index': 'zIndex.layer-3',

package/dist/components/skeleton/skeleton.recipe.d.ts

@@ -1,7 +1,7 @@
 export declare const skeletonRecipe: import("@chakra-ui/react").RecipeDefinition<{
     loading: {
         true: {
-            borderRadius: "l2";
+            borderRadius: "panel.md";
             boxShadow: "none";
             backgroundClip: "padding-box";
             cursor: "default";

package/dist/components/skeleton/skeleton.recipe.js

@@ -5,7 +5,7 @@ export const skeletonRecipe = defineRecipe({
     variants: {
         loading: {
             true: {
-                borderRadius: 'l2',
+                borderRadius: 'panel.md',
                 boxShadow: 'none',
                 backgroundClip: 'padding-box',
                 cursor: 'default',

package/dist/components/skip-nav-link/skip-nav-link.recipe.js

@@ -5,7 +5,7 @@ export const skipNavLinkRecipe = defineRecipe({
         display: 'inline-flex',
         bg: 'bg.panel',
         padding: '2.5',
-        borderRadius: 'l2',
+        borderRadius: 'control.md',
         fontWeight: 'semibold',
         focusVisibleRing: 'outside',
         textStyle: 'sm',

package/dist/components/stat/stat.recipe.js

@@ -7,7 +7,7 @@ export const statSlotRecipe = defineSlotRecipe({
         root: {
             display: 'flex',
             flexDirection: 'column',
-            gap: '1',
+            gap: '0',
             position: 'relative',
             flex: '1',
         },

package/dist/components/steps/steps.recipe.js

@@ -57,7 +57,7 @@ export const stepsSlotRecipe = defineSlotRecipe({
             gap: '3',
             textAlign: 'start',
             focusVisibleRing: 'outside',
-            borderRadius: 'l2',
+            borderRadius: 'control.md',
         },
         content: {
             focusVisibleRing: 'outside',

package/dist/components/tabs/tabs.recipe.d.ts

@@ -33,6 +33,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
             root: {
                 '--tabs-height': "sizes.6";
                 '--tabs-content-padding': "spacing.2";
+                '--tabs-trigger-radius': "radii.control.sm";
             };
             trigger: {
                 py: "1";
@@ -44,6 +45,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
             root: {
                 '--tabs-height': "sizes.7";
                 '--tabs-content-padding': "spacing.3";
+                '--tabs-trigger-radius': "radii.control.md";
             };
             trigger: {
                 py: "1";
@@ -55,6 +57,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
             root: {
                 '--tabs-height': "sizes.8";
                 '--tabs-content-padding': "spacing.4";
+                '--tabs-trigger-radius': "radii.control.md";
             };
             trigger: {
                 py: "2";
@@ -66,6 +69,7 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
             root: {
                 '--tabs-height': "sizes.10";
                 '--tabs-content-padding': "spacing.4.5";
+                '--tabs-trigger-radius': "radii.control.lg";
             };
             trigger: {
                 py: "2";
@@ -97,9 +101,11 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
                     };
                 };
                 _selected: {
-                    color: "fg !important";
+                    color: "fg";
                     _horizontal: {
                         layerStyle: "indicator.bottom";
+                        borderTopRadius: "3px";
+                        '--indicator-offset-x': "spacing.3";
                         '--indicator-offset-y': "-1px";
                         '--indicator-color': "colors.colorPalette.solid";
                     };
@@ -124,9 +130,13 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
                     color: "fg.subtle";
                 };
                 _selected: {
-                    bg: "colorPalette.subtle !important";
-                    color: "colorPalette.fg !important";
-                    borderColor: "colorPalette.solid/50";
+                    bg: "colorPalette.subtle";
+                    color: "colorPalette.fg";
+                    borderColor: "colorPalette.solid/40";
+                    _hover: {
+                        bg: "colorPalette.subtle";
+                        color: "colorPalette.fg";
+                    };
                 };
             };
         };
@@ -136,14 +146,18 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
             };
             trigger: {
                 borderRadius: "var(--tabs-trigger-radius)";
-                color: "fg.muted";
+                color: "fg.subtle";
                 _hover: {
-                    bg: "bg.muted";
-                    color: "fg.subtle";
+                    bg: "colorPalette.muted";
+                    color: "colorPalette.fg";
                 };
                 _selected: {
-                    bg: "colorPalette.subtle !important";
-                    color: "colorPalette.fg !important";
+                    bg: "colorPalette.subtle";
+                    color: "colorPalette.fg";
+                    _hover: {
+                        bg: "colorPalette.subtle";
+                        color: "colorPalette.fg";
+                    };
                 };
             };
         };
@@ -159,6 +173,9 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
                 justifyContent: "center";
                 color: "fg.muted";
                 borderRadius: "var(--tabs-trigger-radius)";
+                _hover: {
+                    color: "fg.subtle";
+                };
                 _selected: {
                     bg: "bg";
                     color: "colorPalette.fg";
@@ -197,6 +214,9 @@ export declare const tabsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
                 color: "fg.muted";
                 borderWidth: "1px";
                 borderColor: "transparent";
+                _hover: {
+                    color: "fg.subtle";
+                };
                 _selected: {
                     bg: "currentBg";
                     color: "colorPalette.fg";

package/dist/components/tabs/tabs.recipe.js

@@ -103,6 +103,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
                 root: {
                     '--tabs-height': 'sizes.6',
                     '--tabs-content-padding': 'spacing.2',
+                    '--tabs-trigger-radius': 'radii.control.sm',
                 },
                 trigger: {
                     py: '1',
@@ -114,6 +115,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
                 root: {
                     '--tabs-height': 'sizes.7',
                     '--tabs-content-padding': 'spacing.3',
+                    '--tabs-trigger-radius': 'radii.control.md',
                 },
                 trigger: {
                     py: '1',
@@ -125,6 +127,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
                 root: {
                     '--tabs-height': 'sizes.8',
                     '--tabs-content-padding': 'spacing.4',
+                    '--tabs-trigger-radius': 'radii.control.md',
                 },
                 trigger: {
                     py: '2',
@@ -136,6 +139,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
                 root: {
                     '--tabs-height': 'sizes.10',
                     '--tabs-content-padding': 'spacing.4.5',
+                    '--tabs-trigger-radius': 'radii.control.lg',
                 },
                 trigger: {
                     py: '2',
@@ -165,9 +169,11 @@ export const tabsSlotRecipe = defineSlotRecipe({
                         _active: { bg: 'initial' },
                     },
                     _selected: {
-                        color: 'fg !important',
+                        color: 'fg',
                         _horizontal: {
                             layerStyle: 'indicator.bottom',
+                            borderTopRadius: '3px',
+                            '--indicator-offset-x': 'spacing.3',
                             '--indicator-offset-y': '-1px',
                             '--indicator-color': 'colors.colorPalette.solid',
                         },
@@ -192,9 +198,13 @@ export const tabsSlotRecipe = defineSlotRecipe({
                         color: 'fg.subtle',
                     },
                     _selected: {
-                        bg: 'colorPalette.subtle !important',
-                        color: 'colorPalette.fg !important',
-                        borderColor: 'colorPalette.solid/50',
+                        bg: 'colorPalette.subtle',
+                        color: 'colorPalette.fg',
+                        borderColor: 'colorPalette.solid/40',
+                        _hover: {
+                            bg: 'colorPalette.subtle',
+                            color: 'colorPalette.fg',
+                        },
                     },
                 },
             },
@@ -204,14 +214,18 @@ export const tabsSlotRecipe = defineSlotRecipe({
                 },
                 trigger: {
                     borderRadius: 'var(--tabs-trigger-radius)',
-                    color: 'fg.muted',
+                    color: 'fg.subtle',
                     _hover: {
-                        bg: 'bg.muted',
-                        color: 'fg.subtle',
+                        bg: 'colorPalette.muted',
+                        color: 'colorPalette.fg',
                     },
                     _selected: {
-                        bg: 'colorPalette.subtle !important',
-                        color: 'colorPalette.fg !important',
+                        bg: 'colorPalette.subtle',
+                        color: 'colorPalette.fg',
+                        _hover: {
+                            bg: 'colorPalette.subtle',
+                            color: 'colorPalette.fg',
+                        },
                     },
                 },
             },
@@ -227,6 +241,9 @@ export const tabsSlotRecipe = defineSlotRecipe({
                     justifyContent: 'center',
                     color: 'fg.muted',
                     borderRadius: 'var(--tabs-trigger-radius)',
+                    _hover: {
+                        color: 'fg.subtle',
+                    },
                     _selected: {
                         bg: 'bg',
                         color: 'colorPalette.fg',
@@ -265,6 +282,9 @@ export const tabsSlotRecipe = defineSlotRecipe({
                     color: 'fg.muted',
                     borderWidth: '1px',
                     borderColor: 'transparent',
+                    _hover: {
+                        color: 'fg.subtle',
+                    },
                     _selected: {
                         bg: 'currentBg',
                         color: 'colorPalette.fg',

package/dist/components/tag/tag.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const tagSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
+export declare const tagSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "endElement" | "startElement", {
     size: {
         sm: {
             root: {

package/dist/components/tooltip/tooltip.recipe.js

@@ -12,7 +12,7 @@ export const tooltipSlotRecipe = defineSlotRecipe({
             color: 'fg',
             px: '2.5',
             py: '1',
-            borderRadius: 'l2',
+            borderRadius: 'panel.sm',
             fontWeight: 'medium',
             textStyle: 'xs',
             boxShadow: 'md',

package/dist/theme/conditions.d.ts

@@ -14,4 +14,5 @@ export declare const conditions: {
     parentHover: string;
     pressable: string;
     popupExpanded: string;
+    rowHover: string;
 };

package/dist/theme/conditions.js

@@ -15,4 +15,5 @@ export const conditions = defineConditions({
     parentHover: 'button:hover &, a:hover &, [role=button]:hover &',
     pressable: '&:is(a, button, [role=button])',
     popupExpanded: '&:is([aria-haspopup][aria-expanded=true], [aria-haspopup][data-expanded], [aria-haspopup][data-state=expanded])',
+    rowHover: 'tr:hover &, [role=row]:hover &',
 });

package/dist/theme/global-css.js

@@ -43,14 +43,17 @@ export const globalCss = defineGlobalStyles({
         '--overlay-effect': 'blur({blurs.lg})',
         '--backdrop-effect': 'none',
     },
+    '.dark *': {
+        '--overlay-translucency': '85%',
+    },
     body: {
         color: 'fg',
         bg: 'bg',
         lineHeight: '1.5',
         colorPalette: 'accent',
     },
-    '*::placeholder': {
-        color: 'fg.subtle',
+    '*::placeholder, *[data-placeholder]': {
+        color: 'fg.muted/90',
     },
     '*::selection': {
         bg: 'colorPalette.solid/20',

package/dist/theme/layer-styles.js

@@ -52,7 +52,9 @@ export const layerStyles = defineLayerStyles({
                 position: 'absolute',
                 bottom: 'var(--indicator-offset-y, 0)',
                 insetInline: 'var(--indicator-offset-x, 0)',
-                height: 'var(--indicator-thickness, 2px)',
+                height: 'var(--indicator-thickness, 3px)',
+                borderTopLeftRadius: 'var(--indicator-thickness, 3px)',
+                borderTopRightRadius: 'var(--indicator-thickness, 3px)',
                 background: 'var(--indicator-color, var(--indicator-color-fallback))',
             },
         },
@@ -66,7 +68,9 @@ export const layerStyles = defineLayerStyles({
                 position: 'absolute',
                 top: 'var(--indicator-offset-y, 0)',
                 insetInline: 'var(--indicator-offset-x, 0)',
-                height: 'var(--indicator-thickness, 2px)',
+                height: 'var(--indicator-thickness, 3px)',
+                borderBottomLeftRadius: 'var(--indicator-thickness, 3px)',
+                borderBottomRightRadius: 'var(--indicator-thickness, 3px)',
                 background: 'var(--indicator-color, var(--indicator-color-fallback))',
             },
         },
@@ -80,7 +84,9 @@ export const layerStyles = defineLayerStyles({
                 position: 'absolute',
                 insetInlineStart: 'var(--indicator-offset-x, 0)',
                 insetBlock: 'var(--indicator-offset-y, 0)',
-                width: 'var(--indicator-thickness, 2px)',
+                width: 'var(--indicator-thickness, 3px)',
+                borderTopLeftRadius: 'var(--indicator-thickness, 3px)',
+                borderBottomLeftRadius: 'var(--indicator-thickness, 3px)',
                 background: 'var(--indicator-color, var(--indicator-color-fallback))',
             },
         },
@@ -94,7 +100,9 @@ export const layerStyles = defineLayerStyles({
                 position: 'absolute',
                 insetInlineEnd: 'var(--indicator-offset-x, 0)',
                 insetBlock: 'var(--indicator-offset-y, 0)',
-                width: 'var(--indicator-thickness, 2px)',
+                width: 'var(--indicator-thickness, 3px)',
+                borderTopRightRadius: 'var(--indicator-thickness, 3px)',
+                borderBottomRightRadius: 'var(--indicator-thickness, 3px)',
                 background: 'var(--indicator-color, var(--indicator-color-fallback))',
             },
         },

package/dist/theme/recipes.d.ts

@@ -116,7 +116,10 @@ export declare const recipes: {
                 bg: "colorPalette.solid";
                 color: "colorPalette.contrast";
                 '--btn-shadow': "shadows.sm";
-                boxShadow: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+                boxShadow: {
+                    base: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+                    _dark: " 0px 1px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+                };
                 textShadow: "0 1px 2px rgba(0,0,0,0.3)";
                 overflow: "clip";
                 _after: {
@@ -394,7 +397,7 @@ export declare const recipes: {
                 borderColor: "transparent";
                 bg: {
                     _light: "gray.100";
-                    _dark: "whiteAlpha.50";
+                    _dark: "white/10";
                 };
             };
             flushed: {
@@ -516,7 +519,7 @@ export declare const recipes: {
     skeleton: import("@chakra-ui/react").RecipeDefinition<{
         loading: {
             true: {
-                borderRadius: "l2";
+                borderRadius: "panel.md";
                 boxShadow: "none";
                 backgroundClip: "padding-box";
                 cursor: "default";
@@ -685,7 +688,7 @@ export declare const recipes: {
         };
         variant: {
             solid: {
-                borderColor: "border";
+                borderColor: "border.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     bg: "colorPalette.solid";
                     color: "colorPalette.contrast";
@@ -693,7 +696,7 @@ export declare const recipes: {
                 };
             };
             outline: {
-                borderColor: "border";
+                borderColor: "border.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     color: "colorPalette.fg";
                     borderColor: "colorPalette.solid";
@@ -701,7 +704,7 @@ export declare const recipes: {
             };
             subtle: {
                 bg: "colorPalette.muted";
-                borderColor: "colorPalette.muted";
+                borderColor: "colorPalette.emphasized";
                 '&:is([data-state=checked], [data-state=indeterminate])': {
                     color: "colorPalette.fg";
                 };

package/dist/theme/semantic-tokens/colors.js

@@ -72,7 +72,7 @@ export const semanticColors = defineSemanticTokens.colors({
         overlay: {
             value: {
                 _light: 'color-mix(in oklch, {colors.white} var(--overlay-translucency), transparent)',
-                _dark: 'color-mix(in srgb, var(--overlay-translucency), {colors.gray.950} 100%)',
+                _dark: 'color-mix(in oklch, {colors.gray.800} var(--overlay-translucency), transparent)',
             },
         },
         backdrop: {

package/dist/theme/semantic-tokens/shadows.js

@@ -45,7 +45,7 @@ export const semanticShadows = defineSemanticTokens.shadows({
     inset: {
         value: {
             _light: 'inset 0 1px 2px 0 {black/5}',
-            _dark: 'inset 0 1px 2px 0 {colors.gray.300/5}',
+            _dark: 'inset 0 -1px 2px 0 {colors.gray.300/8}, inset 0 0 0 1px {colors.gray.300/8}',
         },
     },
 });