@vygruppen/spor-react 13.0.3 → 13.1.0

package/dist/index.d.ts

@@ -25,10 +25,10 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
             };
             itemTrigger: {
                 "&:hover": {
-                    background: "ghost.surface.hover";
+                    background: "surface.ghost.hover";
                 };
                 "&:active": {
-                    backgroundColor: "ghost.surface.active";
+                    backgroundColor: "surface.ghost.active";
                 };
             };
         };
@@ -36,7 +36,7 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
             item: {
                 outline: "solid";
                 outlineWidth: string;
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
             };
             itemTrigger: {
                 _expanded: {
@@ -44,12 +44,12 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 };
                 "&:hover": {
                     outlineWidth: string;
-                    outlineColor: "core.outline";
+                    outlineColor: "outline.core";
                     outline: "2px solid";
                     outlineOffset: number;
                 };
                 "&:active": {
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     outlineWidth: string;
                     outline: "none";
                 };
@@ -62,7 +62,7 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
             item: {
                 borderRadius: "none";
                 borderBottom: "1px solid";
-                borderBottomColor: "floating.outline.active";
+                borderBottomColor: "outline.neutral";
             };
         };
         floating: {
@@ -70,7 +70,7 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 outline: "1px solid";
                 outlineWidth: string;
                 boxShadow: "sm";
-                outlineColor: "floating.outline";
+                outlineColor: "outline.floating";
             };
             itemTrigger: {
                 _expanded: {
@@ -79,11 +79,11 @@ declare const accordionSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 "&:hover": {
                     outlineWidth: string;
                     outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
+                    outlineColor: "outline.floating.hover";
                     outlineOffset: number;
                 };
                 "&:active": {
-                    backgroundColor: "floating.surface.active";
+                    backgroundColor: "surface.floating.active";
                     outlineWidth: string;
                     outline: "none";
                 };
@@ -213,117 +213,117 @@ declare const alertExpandableSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"
     variant: {
         important: {
             itemContent: {
-                color: "alert.important.text.secondary";
+                color: "text.warning.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.important.surface.hover";
+                    bg: "surface.warning.hover";
                     outline: "1px solid";
-                    outlineColor: "alert.important.outline.hover";
+                    outlineColor: "outline.warning.hover";
                     outlineOffset: "0px";
                 };
                 "&:active": {
-                    bg: "alert.important.surface.active";
+                    bg: "surface.warning.active";
                 };
             };
             root: {
-                borderColor: "alert.important.outline";
-                bg: "alert.important.surface";
+                borderColor: "outline.warning";
+                bg: "surface.warning";
             };
             title: {
-                color: "alert.important.text";
+                color: "text.warning";
             };
         };
         success: {
             itemContent: {
-                color: "alert.success.text.secondary";
+                color: "text.success.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.success.surface.hover";
+                    bg: "surface.success.hover";
                     outline: "1px solid";
                     outlineOffset: "0px";
-                    outlineColor: "alert.success.outline.hover";
+                    outlineColor: "outline.success.hover";
                     "&:active": {
-                        bg: "alert.success.surface.active";
+                        bg: "surface.success.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.success.outline";
-                bg: "alert.success.surface";
+                borderColor: "outline.success";
+                bg: "surface.success";
             };
             title: {
-                color: "alert.success.text";
+                color: "text.success";
             };
         };
         alt: {
             itemContent: {
-                color: "alert.alt.text.secondary";
+                color: "text.notice.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.alt.surface.hover";
+                    bg: "surface.notice.hover";
                     outlineOffset: "0px";
                     outline: "1px solid";
-                    outlineColor: "alert.alt.outline.hover";
+                    outlineColor: "outline.notice.hover";
                     "&:active": {
-                        bg: "alert.alt.surface.active";
+                        bg: "surface.notice.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.alt.outline";
-                bg: "alert.alt.surface";
+                borderColor: "outline.notice";
+                bg: "surface.notice";
             };
             title: {
-                color: "alert.alt.text";
+                color: "text.notice";
             };
         };
         info: {
             itemContent: {
-                color: "alert.info.text.secondary";
+                color: "text.info.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.info.surface.hover";
+                    bg: "surface.info.hover";
                     outlineOffset: "0px";
                     outline: "1px solid";
-                    outlineColor: "alert.info.outline.hover";
+                    outlineColor: "outline.info.hover";
                     "&:active": {
-                        bg: "alert.info.surface.active";
+                        bg: "surface.info.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.info.outline";
-                bg: "alert.info.surface";
+                borderColor: "outline.info";
+                bg: "surface.info";
             };
             title: {
-                color: "alert.info.text";
+                color: "text.info";
             };
         };
         error: {
             itemContent: {
-                color: "alert.error.text.secondary";
+                color: "text.critical.subtle";
             };
             itemTrigger: {
                 "&:hover": {
-                    bg: "alert.error.surface.hover";
+                    bg: "surface.critical.hover";
                     outlineOffset: "0px";
                     outline: "1px solid";
-                    outlineColor: "alert.error.outline.hover";
+                    outlineColor: "outline.critical.hover";
                     "&:active": {
-                        bg: "alert.error.surface.active";
+                        bg: "surface.critical.active";
                     };
                 };
             };
             root: {
-                borderColor: "alert.error.outline";
-                bg: "alert.error.surface";
+                borderColor: "outline.critical";
+                bg: "surface.critical";
             };
             title: {
-                color: "alert.error.text";
+                color: "text.critical";
             };
         };
     };
@@ -427,40 +427,40 @@ declare const Breadcrumb: ({ ref, children, css, ...props }: BreadcrumbRootProps
 declare const buttonRecipe: _chakra_ui_react.RecipeDefinition<{
     variant: {
         primary: {
-            background: "brand.surface";
-            color: "brand.text";
+            background: "surface.brand";
+            color: "text.brand";
             fontWeight: "bold";
             _hover: {
-                background: "brand.surface.hover";
+                background: "surface.brand.hover";
                 _active: {
-                    background: "brand.surface.active";
+                    background: "surface.brand.active";
                 };
             };
         };
         secondary: {
-            background: "accent.surface";
-            color: "accent.text";
+            background: "surface.accent";
+            color: "text.accent";
             fontWeight: "bold";
             _hover: {
-                background: "accent.surface.hover";
+                background: "surface.accent.hover";
                 _active: {
-                    background: "accent.surface.active";
+                    background: "surface.accent.active";
                 };
             };
         };
         tertiary: {
-            color: "core.text";
+            color: "text.core";
             outline: "solid";
             fontWeight: "normal";
             outlineWidth: string;
-            outlineColor: "core.outline";
+            outlineColor: "outline.core";
             _hover: {
                 outlineWidth: string;
-                outlineColor: "core.outline.hover";
+                outlineColor: "outline.core.hover";
                 _active: {
-                    background: "core.surface.active";
+                    background: "surface.core.active";
                     outlineWidth: string;
-                    outlineColor: "core.outline";
+                    outlineColor: "outline.core";
                 };
             };
             _focus: {
@@ -468,28 +468,28 @@ declare const buttonRecipe: _chakra_ui_react.RecipeDefinition<{
             };
         };
         ghost: {
-            color: "ghost.text";
+            color: "text.ghost";
             fontWeight: "bold";
             _hover: {
-                background: "ghost.surface.hover";
+                background: "surface.ghost.hover";
                 _active: {
-                    background: "ghost.surface.active";
+                    background: "surface.ghost.active";
                 };
             };
         };
         floating: {
-            color: "floating.text";
-            background: "floating.surface";
+            color: "text.floating";
+            background: "surface.floating";
             fontWeight: "bold";
             border: "sm";
-            borderColor: "floating.outline";
+            borderColor: "outline.floating";
             boxShadow: "0px 1px 3px 0px var(--spor-colors-surface-disabled, rgba(0, 0, 0, 0.10))";
             _hover: {
-                borderColor: "floating.outline.hover";
+                borderColor: "outline.floating.hover";
                 _active: {
-                    background: "core.surface.active";
+                    background: "surface.core.active";
                     boxShadow: "none";
-                    borderColor: "floating.outline";
+                    borderColor: "outline.floating";
                 };
             };
         };
@@ -663,12 +663,12 @@ declare const floatingActionButtonSlotRecipe: _chakra_ui_react.SlotRecipeDefinit
     variant: {
         brand: {
             root: {
-                backgroundColor: "brand.surface";
-                color: "brand.text";
+                backgroundColor: "surface.brand";
+                color: "text.brand";
                 _hover: {
-                    backgroundColor: "brand.surface.hover";
+                    backgroundColor: "surface.brand.hover";
                     _active: {
-                        backgroundColor: "brand.surface.active";
+                        backgroundColor: "surface.brand.active";
                     };
                 };
             };
@@ -677,29 +677,29 @@ declare const floatingActionButtonSlotRecipe: _chakra_ui_react.SlotRecipeDefinit
             root: {
                 backgroundColor: "transparent";
                 outline: "1px solid";
-                outlineColor: "core.outline";
-                color: "core.text";
+                outlineColor: "outline.core";
+                color: "text.core";
                 _hover: {
                     backgroundColor: "transparent";
                     outline: "2px solid";
-                    outlineColor: "core.outline";
+                    outlineColor: "outline.core";
                     _active: {
                         outline: "1px solid";
-                        outlineColor: "core.outline";
-                        backgroundColor: "core.surface.active";
+                        outlineColor: "outline.core";
+                        backgroundColor: "surface.core.active";
                     };
                 };
             };
         };
         accent: {
             root: {
-                backgroundColor: "accent.surface";
-                color: "accent.text";
+                backgroundColor: "surface.accent";
+                color: "text.accent";
                 _hover: {
-                    backgroundColor: "accent.surface.hover";
-                    color: "accent.text";
+                    backgroundColor: "surface.accent.hover";
+                    color: "text.accent";
                     _active: {
-                        backgroundColor: "accent.surface.active";
+                        backgroundColor: "surface.accent.active";
                     };
                 };
             };
@@ -847,29 +847,29 @@ declare const pressableCardRecipe: _chakra_ui_react.RecipeDefinition<{
             boxShadow: "0px 1px 3px 0px var(--shadow-color)";
             shadowColor: "surface.disabled";
             border: "sm";
-            borderColor: "floating.outline";
-            backgroundColor: "floating.surface";
+            borderColor: "outline.floating";
+            backgroundColor: "surface.floating";
             _hover: {
                 boxShadow: "0px 2px 6px 0px var(--shadow-color)";
-                backgroundColor: "floating.surface.hover";
-                borderColor: "floating.outline.hover";
+                backgroundColor: "surface.floating.hover";
+                borderColor: "outline.floating.hover";
                 _active: {
                     boxShadow: "none";
-                    backgroundColor: "floating.surface.active";
-                    borderColor: "floating.outline.active";
+                    backgroundColor: "surface.floating.active";
+                    borderColor: "outline.neutral";
                 };
             };
         };
         core: {
-            outlineColor: "core.outline";
+            outlineColor: "outline.core";
             outlineWidth: string;
             outlineStyle: "solid";
             _hover: {
-                outlineColor: "core.outline.hover";
+                outlineColor: "outline.core.hover";
                 outlineWidth: string;
                 outlineStyle: "solid";
                 _active: {
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     outlineWidth: string;
                 };
             };
@@ -877,12 +877,12 @@ declare const pressableCardRecipe: _chakra_ui_react.RecipeDefinition<{
         accent: {
             boxShadow: "0px 1px 3px 0px var(--shadow-color)";
             shadowColor: "surface.disabled";
-            background: "alert.success.surface";
+            background: "surface.success";
             _hover: {
-                background: "alert.success.surface.hover";
+                background: "surface.success.hover";
                 boxShadow: "0px 2px 6px 0px var(--shadow-color)";
                 _active: {
-                    background: "alert.success.surface.active";
+                    background: "surface.success.active";
                     boxShadow: "none";
                 };
             };
@@ -928,15 +928,15 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
     variant: {
         core: {
             item: {
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
                 outlineWidth: string;
                 outlineStyle: "solid";
                 _hover: {
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     outlineWidth: string;
                     outlineStyle: "solid";
                     _active: {
-                        backgroundColor: "core.surface.active";
+                        backgroundColor: "surface.core.active";
                         outlineWidth: string;
                     };
                 };
@@ -944,7 +944,7 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                     outlineColor: "outline.focus";
                     outlineWidth: string;
                     outlineStyle: "solid";
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     _focusVisible: {
                         outlineStyle: "double";
                         outlineWidth: `calc(3 * ${string})`;
@@ -957,15 +957,15 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                 boxShadow: "0px 1px 3px 0px var(--shadow-color)";
                 shadowColor: "surface.disabled";
                 border: "sm";
-                borderColor: "floating.outline";
-                background: "floating.surface";
+                borderColor: "outline.floating";
+                background: "surface.floating";
                 _hover: {
-                    background: "floating.surface.hover";
-                    borderColor: "floating.outline.hover";
+                    background: "surface.floating.hover";
+                    borderColor: "outline.floating.hover";
                     boxShadow: "0px 2px 6px 0px var(--shadow-color)";
                     _active: {
-                        background: "floating.surface.active";
-                        borderColor: "floating.outline.active";
+                        background: "surface.floating.active";
+                        borderColor: "outline.neutral";
                         boxShadow: "none";
                     };
                 };
@@ -973,7 +973,7 @@ declare const radioCardSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root"
                     outlineColor: "outline.focus";
                     outlineWidth: string;
                     outlineStyle: "solid";
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                     _focusVisible: {
                         outlineStyle: "double";
                         outlineWidth: `calc(3 * ${string})`;
@@ -1028,29 +1028,29 @@ declare const Separator: ({ ref, ...props }: SeparatorProps & {
 declare const staticCardRecipe: _chakra_ui_react.RecipeDefinition<{
     colorPalette: {
         white: {
-            backgroundColor: "surface.color.neutral";
+            backgroundColor: "surface";
             color: "text";
         };
         grey: {
-            backgroundColor: "surface.color.grey";
+            backgroundColor: "surface.neutral";
         };
         yellow: {
-            backgroundColor: "surface.color.cream";
+            backgroundColor: "surface.warning";
         };
         darkYellow: {
-            backgroundColor: "surface.color.yellow";
+            backgroundColor: "surface.notice";
         };
         red: {
-            backgroundColor: "surface.color.red";
+            backgroundColor: "surface.critical";
         };
         green: {
-            backgroundColor: "surface.color.green";
+            backgroundColor: "surface.success";
         };
         blue: {
-            backgroundColor: "surface.color.blue";
+            backgroundColor: "surface.info";
         };
         orange: {
-            backgroundColor: "surface.color.orange";
+            backgroundColor: "surface.caution";
         };
     };
 }>;
@@ -1163,14 +1163,14 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
         core: {
             wrapper: {
                 outline: "1px solid";
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
                 _hover: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                         outline: "1px solid";
-                        outlineColor: "core.outline";
+                        outlineColor: "outline.core";
                     };
                     "&[data-active]": {
                         outline: "2px solid";
@@ -1188,17 +1188,17 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
         };
         floating: {
             wrapper: {
-                bg: "floating.surface";
+                bg: "surface.floating";
                 outline: "1px solid";
-                outlineColor: "floating.outline";
+                outlineColor: "outline.floating";
                 boxShadow: "sm";
                 _hover: {
                     outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
+                    outlineColor: "outline.floating.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                         outline: "1px solid";
-                        outlineColor: "core.outline";
+                        outlineColor: "outline.core";
                     };
                     "&[data-active]": {
                         outline: "2px solid";
@@ -1218,11 +1218,11 @@ declare const datePickerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"cell"
             wrapper: {
                 _hover: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                         outline: "1px solid";
-                        outlineColor: "core.outline";
+                        outlineColor: "outline.core";
                     };
                     "&[data-active]": {
                         outline: "2px solid";
@@ -1923,13 +1923,13 @@ declare const listBoxSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
         core: {
             root: {
                 outline: "1px solid";
-                outlineColor: "core.outline";
+                outlineColor: "outline.core";
             };
         };
         floating: {
             root: {
                 outline: "1px solid";
-                outlineColor: "floating.outline";
+                outlineColor: "outline.floating";
             };
         };
     };
@@ -2072,14 +2072,14 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
             field: {
                 backgroundColor?: "transparent" | undefined;
                 outline?: "1px solid" | undefined;
-                outlineColor?: "core.outline" | undefined;
+                outlineColor?: "outline.core" | undefined;
                 _hover?: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     _active: {
                         outline: "1px solid";
                         outlineColor: "outline.disabled";
-                        backgroundColor: "core.surface.active";
+                        backgroundColor: "surface.core.active";
                     };
                 } | undefined;
                 _focus?: {
@@ -2091,17 +2091,17 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
         floating: {
             field: {
                 boxShadow?: "sm" | undefined;
-                bg?: "floating.surface" | undefined;
+                bg?: "surface.floating" | undefined;
                 outline?: "1px solid" | undefined;
-                outlineColor?: "floating.outline" | undefined;
+                outlineColor?: "outline.floating" | undefined;
                 _hover?: {
                     outline: "1px solid";
-                    outlineColor: "floating.outline.hover";
+                    outlineColor: "outline.floating.hover";
                 } | undefined;
                 _active?: {
                     outline: "1px solid";
-                    outlineColor: "floating.outline.active";
-                    backgroundColor: "floating.surface.active";
+                    outlineColor: "outline.neutral";
+                    backgroundColor: "surface.floating.active";
                 } | undefined;
                 focus?: {
                     outline: string;
@@ -2477,14 +2477,14 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
         core: {
             backgroundColor?: "transparent" | undefined;
             outline?: "1px solid" | undefined;
-            outlineColor?: "core.outline" | undefined;
+            outlineColor?: "outline.core" | undefined;
             _hover?: {
                 outline: "2px solid";
-                outlineColor: "core.outline.hover";
+                outlineColor: "outline.core.hover";
                 _active: {
                     outline: "1px solid";
                     outlineColor: "outline.disabled";
-                    backgroundColor: "core.surface.active";
+                    backgroundColor: "surface.core.active";
                 };
             } | undefined;
             _focus?: {
@@ -2494,17 +2494,17 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
         };
         floating: {
             boxShadow?: "sm" | undefined;
-            bg?: "floating.surface" | undefined;
+            bg?: "surface.floating" | undefined;
             outline?: "1px solid" | undefined;
-            outlineColor?: "floating.outline" | undefined;
+            outlineColor?: "outline.floating" | undefined;
             _hover?: {
                 outline: "1px solid";
-                outlineColor: "floating.outline.hover";
+                outlineColor: "outline.floating.hover";
             } | undefined;
             _active?: {
                 outline: "1px solid";
-                outlineColor: "floating.outline.active";
-                backgroundColor: "floating.surface.active";
+                outlineColor: "outline.neutral";
+                backgroundColor: "surface.floating.active";
             } | undefined;
             focus?: {
                 outline: string;
@@ -3214,7 +3214,7 @@ declare const skeletonRecipe: _chakra_ui_react.RecipeDefinition<{
         };
         none: {
             animation: "none";
-            background: "surface.color.grey";
+            background: "surface.neutral";
         };
     };
 }>;
@@ -3269,14 +3269,14 @@ declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"
         play: {
             root: {
                 padding: number;
-                color: "brand.text";
-                backgroundColor: "brand.surface";
+                color: "text.brand";
+                backgroundColor: "surface.brand";
                 _hover: {
-                    color: "brand.text";
-                    backgroundColor: "brand.surface.hover";
+                    color: "text.brand";
+                    backgroundColor: "surface.brand.hover";
                     _active: {
-                        color: "brand.text";
-                        backgroundColor: "brand.surface.active";
+                        color: "text.brand";
+                        backgroundColor: "surface.brand.active";
                     };
                 };
                 _disabled: {
@@ -3289,9 +3289,9 @@ declare const mediaControllerSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"
         jumpSkip: {
             root: {
                 _hover: {
-                    backgroundColor: "ghost.surface.hover";
+                    backgroundColor: "surface.ghost.hover";
                     _active: {
-                        backgroundColor: "ghost.surface.active";
+                        backgroundColor: "surface.ghost.active";
                     };
                 };
                 _disabled: {
@@ -3527,7 +3527,7 @@ declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
         };
         accent: {
             root: {
-                backgroundColor: "accent.bg";
+                backgroundColor: "bg.accent";
             };
             stepButton: {
                 color: {
@@ -3535,13 +3535,13 @@ declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
                     _dark: "whiteAlpha.900";
                 };
                 _disabled: {
-                    color: "core.text";
+                    color: "text.core";
                 };
                 _currentStep: {
-                    color: "accent.text";
+                    color: "text.accent";
                 };
                 _hover: {
-                    backgroundColor: "accent.surface.hover";
+                    backgroundColor: "surface.accent.hover";
                     _disabled: {
                         backgroundColor: "transparent";
                     };
@@ -3549,7 +3549,7 @@ declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" |
             };
             backButton: {
                 _hover: {
-                    backgroundColor: "brand.surface.hover";
+                    backgroundColor: "surface.brand.hover";
                 };
             };
         };
@@ -3645,26 +3645,26 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
     variant: {
         core: {
             list: {
-                color: "core.text";
+                color: "text.core";
                 border: "sm";
             };
             trigger: {
-                color: "core.text";
+                color: "text.core";
                 border: "md";
                 borderColor: "transparent";
                 _hover: {
                     outline: "2px solid";
-                    outlineColor: "core.outline.hover";
+                    outlineColor: "outline.core.hover";
                     outlineOffset: "-2px";
                 };
                 _active: {
-                    backgroundColor: "brand.surface.active";
-                    color: "brand.text";
+                    backgroundColor: "surface.brand.active";
+                    color: "text.brand";
                     outline: "none";
                 };
                 _selected: {
-                    backgroundColor: "brand.surface";
-                    color: "brand.text";
+                    backgroundColor: "surface.brand";
+                    color: "text.brand";
                     _hover: {
                         outline: "none";
                     };
@@ -3677,28 +3677,28 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
         };
         accent: {
             list: {
-                backgroundColor: "accent.bg";
-                color: "accent.text";
+                backgroundColor: "bg.accent";
+                color: "text.accent";
             };
             trigger: {
-                color: "accent.text";
+                color: "text.accent";
                 _disabled: {
                     backgroundColor: "surface.disabled";
                     color: "icon.disabled";
                 };
                 _hover: {
-                    backgroundColor: "accent.surface.hover";
+                    backgroundColor: "surface.accent.hover";
                     _active: {
-                        backgroundColor: "brand.surface.active";
-                        color: "brand.text";
+                        backgroundColor: "surface.brand.active";
+                        color: "text.brand";
                     };
                 };
                 _selected: {
-                    backgroundColor: "brand.surface";
-                    color: "brand.text";
+                    backgroundColor: "surface.brand";
+                    color: "text.brand";
                     _hover: {
-                        backgroundColor: "brand.surface.hover";
-                        color: "brand.text";
+                        backgroundColor: "surface.brand.hover";
+                        color: "text.brand";
                         outline: "none";
                     };
                 };
@@ -3746,7 +3746,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 paddingX: number;
                 _focus: {
                     border: "md";
-                    borderColor: "accent.surface";
+                    borderColor: "surface.accent";
                 };
             };
         };
@@ -3812,10 +3812,10 @@ declare const tableSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "b
                 backgroundColor: "bg";
             };
             header: {
-                backgroundColor: "bg.tertiary";
+                backgroundColor: "bg.brand";
             };
             columnHeader: {
-                color: "text.secondary";
+                color: "text.highlight";
             };
         };
         grey: {