@vygruppen/spor-react 13.0.3 → 13.1.0

package/src/theme/recipes/link.ts

@@ -33,7 +33,7 @@ export const linkRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
-        color: "core.text",
+        color: "text.core",
         _hover: {
           color: "text",
           _active: {

package/src/theme/recipes/pressable-card.ts

@@ -30,33 +30,33 @@ export const pressableCardRecipe = defineRecipe({
         shadowColor: "surface.disabled",
 
         border: "sm",
-        borderColor: "floating.outline",
+        borderColor: "outline.floating",
 
-        backgroundColor: "floating.surface",
+        backgroundColor: "surface.floating",
         _hover: {
           boxShadow: "0px 2px 6px 0px var(--shadow-color)",
-          backgroundColor: "floating.surface.hover",
+          backgroundColor: "surface.floating.hover",
 
-          borderColor: "floating.outline.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: 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,
           },
         },
@@ -64,13 +64,13 @@ export const pressableCardRecipe = defineRecipe({
       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",
           },
         },

package/src/theme/recipes/skeleton.ts

@@ -50,7 +50,7 @@ export const skeletonRecipe = defineRecipe({
       },
       none: {
         animation: "none",
-        background: "surface.color.grey",
+        background: "surface.neutral",
       },
     },
   },

package/src/theme/recipes/static-card.ts

@@ -7,29 +7,29 @@ export const staticCardRecipe = defineRecipe({
   variants: {
     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",
       },
     },
   },

package/src/theme/semantic-tokens/colors.ts

@@ -16,5 +16,5 @@ export const vyUtviklingColors = defineSemanticTokens.colors({
 });
 
 export const cargonetColors = defineSemanticTokens.colors({
-  ...tokens.color.cargonet.color.cargonet,
+  ...tokens.color["cargonet"].color.cargonet,
 });

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

@@ -18,7 +18,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "core.text",
+      color: "text.core",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -75,10 +75,10 @@ export const accordionSlotRecipe = defineSlotRecipe({
         },
         itemTrigger: {
           "&:hover": {
-            background: "ghost.surface.hover",
+            background: "surface.ghost.hover",
           },
           "&:active": {
-            backgroundColor: "ghost.surface.active",
+            backgroundColor: "surface.ghost.active",
           },
         },
       },
@@ -86,7 +86,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
         item: {
           outline: "solid",
           outlineWidth: tokens.size.stroke.sm,
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
         },
         itemTrigger: {
           _expanded: {
@@ -94,13 +94,13 @@ export const accordionSlotRecipe = defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens.size.stroke.md,
-            outlineColor: "core.outline",
+            outlineColor: "outline.core",
             outline: "2px solid",
 
             outlineOffset: 0,
           },
           "&:active": {
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             outlineWidth: tokens.size.stroke.sm,
             outline: "none",
           },
@@ -113,7 +113,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
         item: {
           borderRadius: "none",
           borderBottom: "1px solid",
-          borderBottomColor: "floating.outline.active",
+          borderBottomColor: "outline.neutral",
         },
       },
       floating: {
@@ -121,7 +121,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
           outline: "1px solid",
           outlineWidth: tokens.size.stroke.sm,
           boxShadow: "sm",
-          outlineColor: "floating.outline",
+          outlineColor: "outline.floating",
         },
         itemTrigger: {
           _expanded: {
@@ -130,12 +130,12 @@ export const accordionSlotRecipe = defineSlotRecipe({
           "&:hover": {
             outlineWidth: tokens.size.stroke.md,
             outline: "1px solid",
-            outlineColor: "floating.outline.hover",
+            outlineColor: "outline.floating.hover",
 
             outlineOffset: 1,
           },
           "&:active": {
-            backgroundColor: "floating.surface.active",
+            backgroundColor: "surface.floating.active",
             outlineWidth: tokens.size.stroke.sm,
             outline: "none",
           },

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,
       },
     },