@vygruppen/spor-react 13.0.2 → 13.1.0

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/anatomy.ts

@@ -286,6 +286,8 @@ export const comboboxAnatomy = arkComboboxAnatomy.extendWith(
   "empty",
 );
 
+export const tagAnatomy = createAnatomy("tag").parts("root");
+
 export const menuAnatomy = createAnatomy("menu").parts(
   "trigger",
   "content",

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

package/src/theme/slot-recipes/floating-action-button.ts

@@ -57,12 +57,12 @@ export const floatingActionButtonSlotRecipe = defineSlotRecipe({
     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",
             },
           },
         },
@@ -71,29 +71,29 @@ export const floatingActionButtonSlotRecipe = defineSlotRecipe({
         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",
             },
           },
         },

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

@@ -13,6 +13,7 @@ import { drawerSlotRecipe } from "./drawer";
 import { fieldSlotRecipe } from "./field";
 import { floatingActionButtonSlotRecipe } from "./floating-action-button";
 import { infoTagSlotRecipe } from "./info-tag";
+import { inputChipSlotRecipe } from "./input-chip";
 import { lineIconSlotRecipe } from "./line-icon";
 import { listSlotRecipe } from "./list";
 import { listBoxSlotRecipe } from "./listbox";
@@ -70,5 +71,6 @@ export const slotRecipes = {
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
+  tag: inputChipSlotRecipe,
   menu: menuSlotRecipe,
 };

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

@@ -0,0 +1,118 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { tagAnatomy } from "./anatomy";
+
+export const inputChipSlotRecipe = defineSlotRecipe({
+  slots: tagAnatomy.keys(),
+  className: "chakra-tag",
+  base: {
+    root: {
+      display: "flex",
+      direction: "row",
+      width: "fit-content",
+      height: "fit-content",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      outline: "none",
+      "&:focus": {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        root: {
+          backgroundColor: "surface",
+          border: "1px solid",
+          borderColor: "outline",
+          "&:hover": {
+            outline: "2px solid",
+            outlineColor: "outline.core.hover",
+          },
+          "&:active": {
+            outline: "none",
+            backgroundColor: "surface.core.active",
+          },
+        },
+      },
+      accent: {
+        root: {
+          backgroundColor: "surface.accent",
+          color: "text.highlight",
+          "& svg": {
+            color: "icon.highlight",
+          },
+          "&:hover": {
+            backgroundColor: "surface.accent.hover",
+          },
+          "&:active": {
+            backgroundColor: "surface.accent.active",
+            outline: "none",
+          },
+        },
+      },
+      brand: {
+        root: {
+          backgroundColor: "surface.brand",
+          color: "text.brand",
+          "& svg": {
+            color: "icon.brand",
+          },
+          "&:hover": {
+            backgroundColor: "surface.brand.hover",
+          },
+          "&:active": {
+            backgroundColor: "surface.brand.active",
+            outline: "none",
+          },
+        },
+      },
+    },
+    size: {
+      xs: {
+        root: {
+          fontSize: "desktop.xs",
+          paddingX: "1.5",
+          paddingY: "0",
+          fontWeight: "normal",
+          borderRadius: "xs",
+        },
+      },
+      sm: {
+        root: {
+          fontSize: "desktop.sm",
+          paddingX: "2",
+          paddingY: "0.5",
+          fontWeight: "bold",
+          borderRadius: "9px",
+        },
+      },
+      md: {
+        root: {
+          padding: 5,
+          fontSize: "desktop.md",
+          paddingX: "2",
+          paddingY: "1",
+          fontWeight: "bold",
+          borderRadius: "sm",
+        },
+      },
+      lg: {
+        root: {
+          fontSize: "desktop.md",
+          paddingX: "2",
+          paddingY: "3",
+          fontWeight: "bold",
+          borderRadius: "md",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "core",
+    size: "sm",
+  },
+});