@vygruppen/spor-react 13.0.3 → 13.1.1

package/src/theme/recipes/badge.ts

@@ -11,59 +11,59 @@ export const badgeRecipie = defineRecipe({
   variants: {
     colorPalette: {
       neutral: {
-        backgroundColor: "badge.surface",
-        color: "badge.text",
+        backgroundColor: "surface",
+        color: "text",
         "& svg": {
-          color: "badge.icon",
+          color: "icon",
         },
       },
       grey: {
-        backgroundColor: "badge.grey.surface",
-        color: "badge.grey.text",
+        backgroundColor: "surface.neutral",
+        color: "text.neutral",
         "& svg": {
-          color: "badge.grey.icon",
+          color: "icon.neutral",
         },
       },
       green: {
-        backgroundColor: "badge.green.surface",
-        color: "badge.green.text",
+        backgroundColor: "surface.success",
+        color: "text.success",
         "& svg": {
-          color: "badge.green.icon",
+          color: "icon.success",
         },
       },
       blue: {
-        backgroundColor: "badge.blue.surface",
-        color: "badge.blue.text",
+        backgroundColor: "surface.info",
+        color: "text.info",
         "& svg": {
-          color: "badge.blue.icon",
+          color: "icon.info",
         },
       },
       cream: {
-        backgroundColor: "badge.cream.surface",
-        color: "badge.cream.text",
+        backgroundColor: "surface.warning",
+        color: "text.warning",
         "& svg": {
-          color: "badge.cream.icon",
+          color: "icon.warning",
         },
       },
       yellow: {
-        backgroundColor: "badge.yellow.surface",
-        color: "badge.yellow.text",
+        backgroundColor: "surface.notice",
+        color: "text.notice",
         "& svg": {
-          color: "badge.yellow.icon",
+          color: "icon.notice",
         },
       },
       orange: {
-        backgroundColor: "badge.orange.surface",
-        color: "badge.orange.text",
+        backgroundColor: "surface.caution",
+        color: "text.caution",
         "& svg": {
-          color: "badge.orange.icon",
+          color: "icon.caution",
         },
       },
       red: {
-        backgroundColor: "badge.red.surface",
-        color: "badge.red.text",
+        backgroundColor: "surface.critical",
+        color: "text.critical",
         "& svg": {
-          color: "badge.red.icon",
+          color: "icon.critical",
         },
       },
     },
@@ -108,10 +108,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "blue",
       inverted: true,
       css: {
-        backgroundColor: "badge.blue.surface.inverted",
-        color: "badge.blue.text.inverted",
+        backgroundColor: {
+          _light: "darkBlue",
+          _dark: "lightBlue",
+        },
+        color: {
+          _light: "icyBlue",
+          _dark: "royal",
+        },
         "& svg": {
-          color: "badge.blue.icon.inverted",
+          color: {
+            _light: "royal",
+            _dark: "icyBlue",
+          },
         },
       },
     },
@@ -119,10 +128,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "green",
       inverted: true,
       css: {
-        backgroundColor: "badge.green.surface.inverted",
-        color: "badge.green.text.inverted",
+        backgroundColor: {
+          _light: "darkTeal",
+          _dark: "seaMist",
+        },
+        color: {
+          _light: "mint",
+          _dark: "jungle",
+        },
         "& svg": {
-          color: "badge.green.icon.inverted",
+          color: {
+            _light: "mint",
+            _dark: "jungle",
+          },
         },
       },
     },
@@ -130,10 +148,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "grey",
       inverted: true,
       css: {
-        backgroundColor: "badge.grey.surface.inverted",
-        color: "badge.grey.text.inverted",
+        backgroundColor: {
+          _light: "carbon",
+          _dark: "platinum",
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey",
+        },
         "& svg": {
-          color: "badge.grey.icon.inverted",
+          color: {
+            _light: "white",
+            _dark: "darkGrey",
+          },
         },
       },
     },
@@ -142,10 +169,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "cream",
       inverted: true,
       css: {
-        backgroundColor: "badge.cream.surface.inverted",
-        color: "badge.cream.text.inverted",
+        backgroundColor: {
+          _light: "coffee",
+          _dark: "blonde",
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee",
+        },
         "& svg": {
-          color: "badge.cream.icon.inverted",
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee",
+          },
         },
       },
     },
@@ -153,10 +189,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "yellow",
       inverted: true,
       css: {
-        backgroundColor: "badge.yellow.surface.inverted",
-        color: "badge.yellow.text.inverted",
+        backgroundColor: {
+          _light: "bronze",
+          _dark: "banana",
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee",
+        },
         "& svg": {
-          color: "badge.yellow.icon.inverted",
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee",
+          },
         },
       },
     },
@@ -164,10 +209,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "orange",
       inverted: true,
       css: {
-        backgroundColor: "badge.orange.surface.inverted",
-        color: "badge.orange.text.inverted",
+        backgroundColor: {
+          _light: "wood",
+          _dark: "champagne",
+        },
+        color: {
+          _light: "bisque",
+          _dark: "wood",
+        },
         "& svg": {
-          color: "badge.orange.icon.inverted",
+          color: {
+            _light: "bisque",
+            _dark: "wood",
+          },
         },
       },
     },
@@ -175,10 +229,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "red",
       inverted: true,
       css: {
-        backgroundColor: "badge.red.surface.inverted",
-        color: "badge.red.text.inverted",
+        backgroundColor: {
+          _light: "burgundy",
+          _dark: "lightRed",
+        },
+        color: {
+          _light: "pink",
+          _dark: "maroon",
+        },
         "& svg": {
-          color: "badge.red.icon.inverted",
+          color: {
+            _light: "pink",
+            _dark: "maroon",
+          },
         },
       },
     },
@@ -187,10 +250,19 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "neutral",
       inverted: true,
       css: {
-        backgroundColor: "badge.surface.inverted",
-        color: "badge.text.inverted",
+        backgroundColor: {
+          _light: "ink",
+          _dark: "white",
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey",
+        },
         "& svg": {
-          color: "badge.icon.inverted",
+          color: {
+            _light: "white",
+            _dark: "darkGrey",
+          },
         },
       },
     },

package/src/theme/recipes/button.ts

@@ -29,40 +29,40 @@ export const buttonRecipe = defineRecipe({
   variants: {
     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: tokens.size.stroke.sm,
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
         _hover: {
           outlineWidth: tokens.size.stroke.md,
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           _active: {
-            background: "core.surface.active",
+            background: "surface.core.active",
             outlineWidth: tokens.size.stroke.sm,
-            outlineColor: "core.outline",
+            outlineColor: "outline.core",
           },
         },
         _focus: {
@@ -70,30 +70,30 @@ export const buttonRecipe = defineRecipe({
         },
       },
       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",
           },
         },
       },

package/src/theme/recipes/close-button.ts

@@ -9,12 +9,12 @@ export const closeButtonRecipe = defineRecipe({
     color: "text",
     fontWeight: "normal",
     _hover: {
-      background: "ghost.surface.hover",
+      background: "surface.ghost.hover",
       _disabled: {
         color: "icon.disabled",
       },
       _active: {
-        background: "ghost.surface.active",
+        background: "surface.ghost.active",
       },
     },
   },

package/src/theme/recipes/input.ts

@@ -37,7 +37,7 @@ export const inputRecipe = defineRecipe({
       },
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
       },
     },
   },
@@ -46,14 +46,14 @@ export const inputRecipe = defineRecipe({
       core: {
         backgroundColor: "transparent",
         outline: "1px solid",
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
         _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",
           },
         },
         _focus: {
@@ -63,18 +63,18 @@ export const inputRecipe = defineRecipe({
       },
       floating: {
         boxShadow: "sm",
-        bg: "floating.surface",
+        bg: "surface.floating",
         outline: "1px solid",
-        outlineColor: "floating.outline",
+        outlineColor: "outline.floating",
 
         _hover: {
           outline: "1px solid",
-          outlineColor: "floating.outline.hover",
+          outlineColor: "outline.floating.hover",
         },
         _active: {
           outline: "1px solid",
-          outlineColor: "floating.outline.active",
-          backgroundColor: "floating.surface.active",
+          outlineColor: "outline.neutral",
+          backgroundColor: "surface.floating.active",
         },
 
         focus: {

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