@vygruppen/spor-react 13.0.3 → 13.1.1

package/src/theme/slot-recipes/alert-expandable.ts

@@ -24,117 +24,117 @@ export const alertExpandableSlotRecipe = defineSlotRecipe({
     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",
         },
       },
     },

package/src/theme/slot-recipes/alert-service.ts

@@ -12,10 +12,10 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       transitionDuration: "fast",
       borderTopRadius: "none",
       borderBottomRadius: "md",
-      backgroundColor: "alert.service.surface",
+      backgroundColor: "surface.service",
       outline: "1px solid",
-      outlineColor: "alert.service.outline",
-      color: "text.inverted",
+      outlineColor: "outline.service",
+      color: "text.brand",
       boxShadow: "sm",
     },
     itemTrigger: {
@@ -27,16 +27,16 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "full",
-      color: "text.inverted",
+      color: "text.brand",
       "&:hover": {
-        backgroundColor: "alert.service.surface.hover",
+        backgroundColor: "surface.service.hover",
       },
       "&:active": {
-        backgroundColor: "alert.service.surface.active",
+        backgroundColor: "surface.service.active",
       },
 
       _icon: {
-        color: "text",
+        color: "icon.brand",
       },
     },
     itemTriggerTitle: {
@@ -46,7 +46,7 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       fontWeight: "400",
       fontSize: ["mobile.xs", "desktop.xs"],
       textWrap: "nowrap",
-      color: "alert.service.text.secondary",
+      color: "text.service.subtle",
     },
 
     itemContent: {
@@ -58,14 +58,14 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
     itemBody: {
       marginX: "auto",
       padding: "0 !important",
-      color: "alert.service.text.secondary",
+      color: "text.service.subtle",
       gap: 0,
       flexDirection: "column",
       display: "flex",
       "& > p": {
         width: "full",
         borderBottom: "1px dashed",
-        borderColor: "outline.inverted",
+        borderColor: "outline.neutral",
 
         paddingY: ["1", "1.5"],
 

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

@@ -4,21 +4,21 @@ import { alertAnatomy } from "./anatomy";
 
 const createVariant = (variant: string) => ({
   root: {
-    borderColor: `alert.${variant}.outline`,
-    background: `alert.${variant}.surface`,
+    borderColor: `outline.${variant}`,
+    background: `surface.${variant}`,
   },
   description: {
-    color: `alert.${variant}.text.secondary`,
+    color: `text.${variant}.subtle`,
   },
   title: {
-    color: `alert.${variant}.text`,
+    color: `text.${variant}`,
   },
   closeButton: {
-    color: `alert.${variant}.text`,
+    color: `text.${variant}`,
     _hover: {
-      bg: `alert.${variant}.surface.hover`,
+      bg: `surface.${variant}.hover`,
       _active: {
-        bg: `alert.${variant}.surface.active`,
+        bg: `surface.${variant}.active`,
       },
     },
   },
@@ -54,13 +54,13 @@ export const alertSlotRecipe = defineSlotRecipe({
   },
   variants: {
     variant: {
-      important: createVariant("important"),
-      alt: createVariant("alt"),
-      error: createVariant("error"),
+      important: createVariant("warning"),
+      alt: createVariant("notice"),
+      error: createVariant("critical"),
       success: createVariant("success"),
       info: createVariant("info"),
       neutral: createVariant("neutral"),
-      "error-secondary": createVariant("error-secondary"),
+      "error-secondary": createVariant("caution"),
       service: createVariant("service"),
     },
   },

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

@@ -80,7 +80,7 @@ export const comboboxSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       flex: "1",
       _highlighted: {
-        bg: "ghost.surface.active",
+        bg: "surface.ghost.active",
       },
       _disabled: {
         pointerEvents: "none",
@@ -89,15 +89,15 @@ export const comboboxSlotRecipe = defineSlotRecipe({
       },
 
       _hover: {
-        bg: "ghost.surface.hover",
+        bg: "surface.ghost.hover",
       },
 
       _pressed: {
-        bg: "ghost.surface.active",
+        bg: "surface.ghost.active",
       },
 
       _focus: {
-        bg: "ghost.surface.active",
+        bg: "surface.ghost.active",
       },
     },
 
@@ -120,7 +120,7 @@ export const comboboxSlotRecipe = defineSlotRecipe({
     itemGroupLabel: {
       px: "3",
       py: "0.5",
-      color: "floating.text",
+      color: "text.floating",
       fontFeatureSettings: "liga off",
       fontSize: ["mobile.sm, desktop.sm"],
       fontWeight: "bold",

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

@@ -33,11 +33,11 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
       core: {
         link: {
           _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",
               outline: "none",
             },
           },
@@ -46,9 +46,9 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
       ghost: {
         link: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active",
+              backgroundColor: "surface.ghost.active",
             },
           },
         },

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

@@ -14,11 +14,11 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       gap: 1.5,
       _hover: {
         "& > input:enabled:not([aria-invalid]) + .spor-checkbox__control": {
-          borderColor: "core.outline.hover",
+          borderColor: "outline.core.hover",
         },
         "& > input:enabled:checked:not([aria-invalid]) + .spor-checkbox__control":
           {
-            background: "brand.surface.hover",
+            background: "surface.brand.hover",
           },
       },
     },
@@ -40,31 +40,25 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       transitionProperty: "background, border-color",
       transitionDuration: "moderate",
       border: "2px solid",
-      borderColor: "core.outline",
+      borderColor: "outline.core",
       borderRadius: "xs",
 
       _checked: {
-        color: "brand.icon",
-        borderColor: "brand.surface",
-        background: "brand.surface",
+        color: "icon.brand",
+        borderColor: "surface.brand",
+        background: "surface.brand",
         _focus: {
-          borderColor: "brand.surface.active",
+          borderColor: "surface.brand.active",
         },
-
-        _disabled: {
-          background: "surface.disabled",
-          color: "text.disabled",
-          borderColor: "currentColor",
-        },
-
         _invalid: {
           backgroundColor: "outline.error",
           borderColor: "outline.error",
         },
       },
       _disabled: {
-        // borderColor: coreText("disabled").color,
-        borderColor: "text.disabled",
+        background: "surface.disabled",
+        borderColor: "outline.disabled",
+        color: "text.disabled",
       },
       _invalid: {
         borderColor: "outline.error",
@@ -74,7 +68,7 @@ export const checkboxSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus",
         outlineOffset: tokens.size.stroke.md,
         outlineWidth: tokens.size.stroke.md,
-        borderColor: "core.outline",
+        borderColor: "outline.core",
         borderWidth: tokens.size.stroke.md,
       },
     },

package/src/theme/slot-recipes/choice-chip.ts

@@ -18,16 +18,16 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
       paddingInlineEnd: "2",
 
       outline: "1px solid",
-      outlineColor: "core.outline",
+      outlineColor: "outline.core",
       _checked: {
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         borderRadius: "sm",
         outline: "none",
-        color: "brand.text",
+        color: "text.brand",
         _hover: {
-          backgroundColor: "brand.surface.hover",
+          backgroundColor: "surface.brand.hover",
           _active: {
-            backgroundColor: "brand.surface.active",
+            backgroundColor: "surface.brand.active",
           },
         },
       },
@@ -130,53 +130,53 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         root: {
-          color: "core.text",
-          outlineColor: "core.outline",
+          color: "text.core",
+          outlineColor: "outline.core",
 
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
 
             _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",
           outline: "none",
 
           _hover: {
-            backgroundColor: "accent.surface.hover",
+            backgroundColor: "surface.accent.hover",
 
             _active: {
-              backgroundColor: "accent.surface.active",
+              backgroundColor: "surface.accent.active",
             },
           },
         },
       },
       floating: {
         root: {
-          backgroundColor: "floating.surface",
+          backgroundColor: "surface.floating",
           outline: "1px solid",
-          outlineColor: "floating.outline",
-          color: "floating.text",
+          outlineColor: "outline.floating",
+          color: "text.floating",
 
           boxShadow: "sm",
           _hover: {
-            backgroundColor: "floating.surface.hover",
+            backgroundColor: "surface.floating.hover",
             outline: "1px solid",
-            outlineColor: "floating.outline.hover",
+            outlineColor: "outline.floating.hover",
 
             _active: {
-              backgroundColor: "floating.surface.active",
+              backgroundColor: "surface.floating.active",
               outline: "1px solid",
-              outlineColor: "floating.outline",
+              outlineColor: "outline.floating",
             },
           },
         },

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

@@ -43,7 +43,7 @@ export const datePickerSlotRecipe = defineSlotRecipe({
     },
     dateTimeSegment: {
       _focus: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
         color: "text",
       },
     },
@@ -60,10 +60,10 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       transitionProperty: "box-shadow, background-color",
       right: "0.5rem",
       _hover: {
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "surface.ghost.hover",
       },
       _active: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
       },
       _invalid: {
         outline: "2px solid",
@@ -74,11 +74,11 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       backgroundColor: "surface",
     },
     calendarPopover: {
-      color: "core.text",
+      color: "text.core",
       outline: "1px solid",
-      outlineColor: "floating.outline",
+      outlineColor: "outline.floating",
       boxShadow: "md",
-      backgroundColor: "floating.surface",
+      backgroundColor: "surface.floating",
       minHeight: "min-content",
     },
     rangeCalendarPopover: {
@@ -86,11 +86,11 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       maxWidth: "100vw",
     },
     weekdays: {
-      color: "core.text",
+      color: "text.core",
       fontWeight: "bold",
     },
     weekend: {
-      color: "accent.text",
+      color: "text.accent",
       fontWeight: "bold",
     },
     cell: {
@@ -104,12 +104,12 @@ export const datePickerSlotRecipe = defineSlotRecipe({
           top: 0,
           bottom: 0,
           zIndex: -1,
-          backgroundColor: "brand.surface",
+          backgroundColor: "surface.brand",
         },
       },
     },
     dateCell: {
-      color: "core.text",
+      color: "text.core",
       borderRadius: "xl",
       position: "relative",
       transition: ".1s ease-in-out",
@@ -119,10 +119,10 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       transitionProperty: "common",
 
       _hover: {
-        backgroundColor: "ghost.surface.hover",
+        backgroundColor: "surface.ghost.hover",
       },
       _active: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
       },
       _disabled: {
         backgroundColor: "surface.disabled",
@@ -130,16 +130,16 @@ export const datePickerSlotRecipe = defineSlotRecipe({
         pointerEvents: "none",
       },
       _selected: {
-        backgroundColor: "brand.surface",
-        color: "brand.text",
+        backgroundColor: "surface.brand",
+        color: "text.brand",
         _active: {
-          backgroundColor: "brand.surface.active",
-          color: "brand.text",
+          backgroundColor: "surface.brand.active",
+          color: "text.brand",
         },
       },
       "&[data-today]": {
         outline: "1px solid",
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
       },
       "&[data-unavailable]": {
         pointerEvents: "none",
@@ -154,16 +154,16 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       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]": {
@@ -182,18 +182,18 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       },
       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]": {
@@ -214,11 +214,11 @@ export const datePickerSlotRecipe = defineSlotRecipe({
         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]": {

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

@@ -22,13 +22,13 @@ export const fieldSlotRecipe = defineSlotRecipe({
     },
     helperText: {
       marginTop: 2,
-      color: "text.tertiary",
+      color: "text.subtle",
       lineHeight: "normal",
       fontSize: "sm",
     },
     errorText: {
       borderRadius: "xs",
-      backgroundColor: "alert.error.surface",
+      backgroundColor: "surface.critical",
       color: "text",
       paddingX: 1.5,
       paddingY: 1,
@@ -46,7 +46,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "alert.error.surface",
+        backgroundColor: "surface.critical",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none",
       },