@vygruppen/spor-react 13.0.2 → 13.1.0

package/src/theme/slot-recipes/listbox.ts

@@ -24,19 +24,19 @@ export const listBoxSlotRecipe = defineSlotRecipe({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: "ghost.text",
+      color: "text.ghost",
       cursor: "pointer",
       listStyle: "none",
       _active: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
       },
 
       _hover: {
-        backgroundColor: "accent.surface",
-        color: "accent.text",
+        backgroundColor: "surface.accent",
+        color: "text.accent",
       },
       _selected: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
       },
       _focus: {
         outline: "2px solid",
@@ -46,9 +46,9 @@ export const listBoxSlotRecipe = defineSlotRecipe({
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text",
+        color: "text.ghost",
       },
     },
   },
@@ -57,13 +57,13 @@ export const listBoxSlotRecipe = defineSlotRecipe({
       core: {
         root: {
           outline: "1px solid",
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
         },
       },
       floating: {
         root: {
           outline: "1px solid",
-          outlineColor: "floating.outline",
+          outlineColor: "outline.floating",
         },
       },
     },

package/src/theme/slot-recipes/media-controller-button.ts

@@ -18,7 +18,7 @@ export const mediaControllerSlotRecipe = defineSlotRecipe({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "brand.surface",
+      color: "surface.brand",
       outlineOffset: "2px",
     },
     icon: {
@@ -31,14 +31,14 @@ export const mediaControllerSlotRecipe = defineSlotRecipe({
       play: {
         root: {
           padding: 0,
-          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: {
@@ -51,9 +51,9 @@ export const mediaControllerSlotRecipe = defineSlotRecipe({
       jumpSkip: {
         root: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active",
+              backgroundColor: "surface.ghost.active",
             },
           },
           _disabled: {

package/src/theme/slot-recipes/menu.ts

@@ -38,19 +38,19 @@ export const menuSlotRecipe = defineSlotRecipe({
       gap: 1.5,
 
       _hover: {
-        backgroundColor: "accent.surface.hover",
+        backgroundColor: "surface.accent.hover",
       },
 
       "&:active": {
-        backgroundColor: "accent.surface.active",
+        backgroundColor: "surface.accent.active",
       },
 
       _checked: {
-        backgroundColor: "accent.surface",
+        backgroundColor: "surface.accent",
       },
 
       _highlighted: {
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "surface.ghost.hover",
       },
     },
     itemGroupLabel: {
@@ -87,19 +87,19 @@ export const menuSlotRecipe = defineSlotRecipe({
       core: {
         content: {
           border: "1px solid",
-          borderColor: "core.outline",
+          borderColor: "outline.core",
         },
       },
       accent: {
         content: {
           border: "1px solid",
-          borderColor: "core.outline",
+          borderColor: "outline.core",
         },
       },
       floating: {
         content: {
           border: "sm",
-          borderColor: "floating.outline",
+          borderColor: "outline.floating",
           boxShadow: "lg",
         },
       },

package/src/theme/slot-recipes/numeric-stepper.ts

@@ -25,7 +25,7 @@ export const numericStepperRecipe = defineSlotRecipe({
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
-      color: "core.text",
+      color: "text.core",
       backgroundColor: "transparent",
 
       _focus: {
@@ -35,7 +35,7 @@ export const numericStepperRecipe = defineSlotRecipe({
       },
 
       _active: {
-        backgroundColor: "accent.surface.active",
+        backgroundColor: "surface.accent.active",
       },
 
       _disabled: {
@@ -45,7 +45,7 @@ export const numericStepperRecipe = defineSlotRecipe({
 
       _hover: {
         outline: "1px solid",
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
       },
     },
     text: {
@@ -55,7 +55,7 @@ export const numericStepperRecipe = defineSlotRecipe({
       paddingX: 1,
       textAlign: "center",
       width: "4ch",
-      color: "core.text",
+      color: "text.core",
     },
     button: {
       outlineOffset: "-2px",

package/src/theme/slot-recipes/pagination.ts

@@ -14,18 +14,18 @@ export const paginationSlotRecipe = defineSlotRecipe({
       width: "5",
       fontSize: "xs",
       borderRadius: "xl",
-      color: "core.text",
+      color: "text.core",
       cursor: "pointer",
       _hover: {
-        background: "ghost.surface.hover",
+        background: "surface.ghost.hover",
         _active: {
-          background: "ghost.surface.active",
+          background: "surface.ghost.active",
         },
       },
       _selected: {
         cursor: "default",
         fontWeight: "bold",
-        backgroundColor: "core.surface.active",
+        backgroundColor: "surface.core.active",
       },
     },
     list: {

package/src/theme/slot-recipes/popover.ts

@@ -10,13 +10,13 @@ export const popoverSlotRecipe = defineSlotRecipe({
       position: "relative",
       display: "flex",
       flexDirection: "row-reverse",
-      color: "text.inverted",
+      color: "text.brand",
 
       gap: "0.625rem",
       padding: "0.563rem 0.75rem",
 
       textStyle: "sm",
-      bg: "surface.tertiary",
+      bg: "surface.brand",
       boxShadow: "lg",
       borderRadius: "sm",
       zIndex: "popover",
@@ -34,7 +34,7 @@ export const popoverSlotRecipe = defineSlotRecipe({
       },
     },
     body: {
-      color: "text.inverted",
+      color: "text.brand",
 
       alignItems: "center",
       borderRadius: "sm",
@@ -42,7 +42,7 @@ export const popoverSlotRecipe = defineSlotRecipe({
       maxWidth: "20em",
     },
     arrow: {
-      "--arrow-background": "colors.surface.tertiary",
+      "--arrow-background": "colors.surface.brand",
       "--arrow-size": "6px",
     },
   },

package/src/theme/slot-recipes/progress-bar.ts

@@ -10,7 +10,7 @@ export const progressBarRecipe = defineSlotRecipe({
     },
     background: {
       display: "flex",
-      backgroundColor: "accent.surface.hover",
+      backgroundColor: "surface.accent.hover",
       borderRadius: "sm",
       boxPack: "start",
       justifyContent: "flex-start",
@@ -22,7 +22,7 @@ export const progressBarRecipe = defineSlotRecipe({
       borderRadius: "sm",
     },
     progress: {
-      backgroundColor: "brand.surface.active",
+      backgroundColor: "surface.brand.active",
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out",

package/src/theme/slot-recipes/progress-indicator.ts

@@ -15,7 +15,7 @@ export const progressIndicatorRecipe = defineSlotRecipe({
       width: 1,
       fill: "icon.disabled",
       "&[aria-current='step']": {
-        fill: "brand.surface",
+        fill: "surface.brand",
       },
     },
   },

package/src/theme/slot-recipes/radio-card.ts

@@ -42,16 +42,16 @@ export const radioCardSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         item: {
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           outlineWidth: tokens.size.stroke.sm,
           outlineStyle: "solid",
 
           _hover: {
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineWidth: tokens.size.stroke.md,
             outlineStyle: "solid",
             _active: {
-              backgroundColor: "core.surface.active",
+              backgroundColor: "surface.core.active",
               outlineWidth: tokens.size.stroke.sm,
             },
           },
@@ -59,7 +59,7 @@ export const radioCardSlotRecipe = defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
               outlineWidth: `calc(3 * ${tokens.size.stroke.md})`, // space for double outline
@@ -73,18 +73,18 @@ export const radioCardSlotRecipe = defineSlotRecipe({
           shadowColor: "surface.disabled",
 
           border: "sm",
-          borderColor: "floating.outline",
+          borderColor: "outline.floating",
 
-          background: "floating.surface",
+          background: "surface.floating",
           _hover: {
-            background: "floating.surface.hover",
+            background: "surface.floating.hover",
 
-            borderColor: "floating.outline.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",
             },
           },
@@ -92,7 +92,7 @@ export const radioCardSlotRecipe = defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
 
             _focusVisible: {
               outlineStyle: "double",

package/src/theme/slot-recipes/radio.ts

@@ -37,18 +37,18 @@ export const radioGroupSlotRecipe = defineSlotRecipe({
       justifyContent: "center",
       verticalAlign: "top",
       borderWidth: "2px",
-      borderColor: "core.outline",
+      borderColor: "outline.core",
       borderRadius: "xl",
       width: 4,
       height: 4,
 
       _checked: {
-        borderColor: "brand.surface",
+        borderColor: "surface.brand",
       },
       _hover: {
-        borderColor: "brand.surface.hover",
+        borderColor: "surface.brand.hover",
         "& .dot": {
-          backgroundColor: "brand.surface.hover",
+          backgroundColor: "surface.brand.hover",
         },
       },
 
@@ -71,7 +71,7 @@ export const radioGroupSlotRecipe = defineSlotRecipe({
         height: "full",
         width: "full",
         borderRadius: "xl",
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         scale: "0.5",
       },
     },

package/src/theme/slot-recipes/select.ts

@@ -72,7 +72,7 @@ export const selectSlotRecipe = defineSlotRecipe({
       color: {
         base: "text",
         _disabled: "text.disabled",
-        _invalid: "text.secondary",
+        _invalid: "text.highlight",
       },
       _icon: {
         width: 3,
@@ -110,14 +110,14 @@ export const selectSlotRecipe = defineSlotRecipe({
       justifyContent: "space-between",
       gap: 1,
       borderRadius: "sm",
-      color: "ghost.text",
+      color: "text.ghost",
       cursor: "pointer",
       outline: "none",
       "&[data-highlighted]:hover": {
         outlineOffset: "2px",
         outline: "2px solid",
         outlineColor: "outline.focus",
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "surface.accent.hover",
       },
       "&[data-highlighted]": {
         outlineOffset: "2px",
@@ -125,7 +125,7 @@ export const selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus",
       },
       _active: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.accent.active",
       },
       _highlighted: {
         _active: {
@@ -133,12 +133,12 @@ export const selectSlotRecipe = defineSlotRecipe({
         },
       },
       _hover: {
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "surface.accent.hover",
         outline: "2px solid core.outline",
         outlineOffset: "2px",
       },
       _selected: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.accent",
       },
       _icon: {
         width: 3,
@@ -173,9 +173,9 @@ export const selectSlotRecipe = defineSlotRecipe({
     valueText: {},
     itemDescription: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text",
+        color: "text.ghost",
       },
     },
   },
@@ -184,13 +184,13 @@ export const selectSlotRecipe = defineSlotRecipe({
       core: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline",
+            outlineColor: "outline.core",
           },
           _active: {
-            backgroundColor: "brand.surface.active",
+            backgroundColor: "surface.brand.active",
           },
           _disabled: {
             pointerEvents: "none",
@@ -202,13 +202,13 @@ export const selectSlotRecipe = defineSlotRecipe({
       floating: {
         control: {
           outline: "1px solid",
-          outlineColor: "floating.outline",
+          outlineColor: "outline.floating",
           _hover: {
             outline: "2px solid",
-            outlineColor: "floating.outline",
+            outlineColor: "outline.floating",
           },
           _active: {
-            backgroundColor: "brand.surface.active",
+            backgroundColor: "surface.brand.active",
           },
           _disabled: {
             pointerEvents: "none",
@@ -222,7 +222,7 @@ export const selectSlotRecipe = defineSlotRecipe({
       rightSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
         },
         trigger: {
           _focus: {
@@ -233,7 +233,7 @@ export const selectSlotRecipe = defineSlotRecipe({
       leftSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
         },
         trigger: {
           _focus: {

package/src/theme/slot-recipes/stepper.ts

@@ -59,7 +59,7 @@ export const stepperSlotRecipe = defineSlotRecipe({
       },
       accent: {
         root: {
-          backgroundColor: "accent.bg",
+          backgroundColor: "bg.accent",
         },
         stepButton: {
           color: {
@@ -67,13 +67,13 @@ export const stepperSlotRecipe = defineSlotRecipe({
             _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",
             },
@@ -81,7 +81,7 @@ export const stepperSlotRecipe = defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            backgroundColor: "brand.surface.hover",
+            backgroundColor: "surface.brand.hover",
           },
         },
       },

package/src/theme/slot-recipes/switch.ts

@@ -29,7 +29,7 @@ export const switchSlotRecipe = defineSlotRecipe({
       justifyContent: "center",
       width: "var(--switch-height)",
       height: "var(--switch-height)",
-      backgroundColor: "core.icon",
+      backgroundColor: "icon.core",
 
       _disabled: {
         backgroundColor: "icon.disabled",
@@ -39,7 +39,7 @@ export const switchSlotRecipe = defineSlotRecipe({
       },
       _checked: {
         translate: "var(--switch-x) 0",
-        backgroundColor: "brand.icon",
+        backgroundColor: "icon.brand",
       },
     },
 
@@ -69,13 +69,13 @@ export const switchSlotRecipe = defineSlotRecipe({
       transitionDuration: "fast",
       outline: "1px solid",
       outlineOffset: "-1px",
-      outlineColor: "core.outline",
+      outlineColor: "outline.core",
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline.hover",
+        outlineColor: "outline.core.hover",
         _checked: {
           outlineColor: "transparent",
-          backgroundColor: "brand.surface.hover",
+          backgroundColor: "surface.brand.hover",
         },
       },
 
@@ -86,7 +86,7 @@ export const switchSlotRecipe = defineSlotRecipe({
       },
 
       _checked: {
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         outline: "none",
         _focusVisible: {
           outlineOffset: "1px",

package/src/theme/slot-recipes/table.ts

@@ -48,10 +48,10 @@ export const tableSlotRecipe = defineSlotRecipe({
           backgroundColor: "bg",
         },
         header: {
-          backgroundColor: "bg.tertiary",
+          backgroundColor: "bg.brand",
         },
         columnHeader: {
-          color: "text.secondary",
+          color: "text.highlight",
         },
       },
       grey: {

package/src/theme/slot-recipes/tabs.ts

@@ -63,26 +63,26 @@ export const tabsSlotRecipe = defineSlotRecipe({
     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",
             },
@@ -95,29 +95,29 @@ export const tabsSlotRecipe = defineSlotRecipe({
       },
       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",
             },
           },
@@ -165,7 +165,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
           paddingX: 3,
           _focus: {
             border: "md",
-            borderColor: "accent.surface",
+            borderColor: "surface.accent",
           },
         },
       },

package/src/theme/slot-recipes/toast.ts

@@ -29,14 +29,14 @@ export const toastSlotRecipe = defineSlotRecipe({
 
       color: "text",
       "&[data-type=success]": {
-        backgroundColor: "alert.success.surface",
+        backgroundColor: "surface.success",
       },
       "&[data-type=error]": {
-        backgroundColor: "alert.error.surface",
+        backgroundColor: "surface.critical",
       },
 
       "&[data-type=info]": {
-        backgroundColor: "alert.info.surface",
+        backgroundColor: "surface.info",
       },
     },