@vygruppen/spor-react 12.4.3 → 12.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.3",
+  "version": "12.4.5",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -45,9 +45,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.6",
-    "@vygruppen/spor-loader": "0.6.0",
-    "@vygruppen/spor-icon-react": "4.1.0"
+    "@vygruppen/spor-design-tokens": "4.0.7",
+    "@vygruppen/spor-icon-react": "4.1.0",
+    "@vygruppen/spor-loader": "0.6.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
@@ -66,7 +66,7 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.0.1",
+    "@vygruppen/eslint-config": "1.1.0",
     "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {

package/src/nudge/Nudge.tsx

@@ -1,11 +1,12 @@
 "use client";
-import { PopoverCloseTrigger, usePopoverContext } from "@ark-ui/react";
 import {
   Box,
   BoxProps,
   chakra,
   Popover as ChakraPopover,
+  PopoverCloseTrigger,
   PopoverRootProps,
+  usePopoverContext,
 } from "@chakra-ui/react";
 import { ArrowRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React, {

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

@@ -1,7 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
 
-import { ghostBackground } from "../utils/ghost-utils";
-
 export const closeButtonRecipe = defineRecipe({
   base: {
     transitionProperty: "common",
@@ -11,12 +9,12 @@ export const closeButtonRecipe = defineRecipe({
     color: "darkGrey",
     fontWeight: "normal",
     _hover: {
-      ...ghostBackground("hover"),
+      background: "ghost.surface.hover",
       _disabled: {
         color: "dimGrey",
       },
       _active: {
-        ...ghostBackground("active"),
+        background: "ghost.surface.active",
       },
     },
   },

package/src/theme/recipes/link.ts

@@ -1,7 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
 
-import { coreText } from "../utils/core-utils";
-
 export const linkRecipe = defineRecipe({
   base: {
     transitionProperty: "common",
@@ -42,7 +40,7 @@ export const linkRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
-        ...coreText("default"),
+        color: "core.text",
         _hover: {
           color: "text.default",
           _active: {
@@ -51,10 +49,10 @@ export const linkRecipe = defineRecipe({
         },
       },
       secondary: {
-        ...coreText("highlight"),
+        color: "text.hightlight",
         padding: "2px",
         _hover: {
-          ...coreText("highlight"),
+          color: "text.hightlight",
           _active: {
             color: "text.disabled",
           },

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

@@ -1,7 +1,5 @@
 import { defineSemanticTokens } from "@chakra-ui/react";
-import cargonetJson from "@vygruppen/spor-design-tokens/tokens/color/cargonet.json" assert { type: "json" };
-import vyDigitalJson from "@vygruppen/spor-design-tokens/tokens/color/vy-digital.json" assert { type: "json" };
-import VyUtviklingJson from "@vygruppen/spor-design-tokens/tokens/color/vy-utvikling.json" assert { type: "json" };
+import tokens from "@vygruppen/spor-design-tokens/raw-tokens";
 
 export enum Brand {
   VyDigital = "VyDigital",
@@ -10,13 +8,13 @@ export enum Brand {
 }
 
 export const vyDigitalColors = defineSemanticTokens.colors({
-  ...vyDigitalJson.color.vyDigital,
+  ...tokens.color["vy-digital"].color.vyDigital,
 });
 
 export const vyUtviklingColors = defineSemanticTokens.colors({
-  ...VyUtviklingJson.color.vyUtvikling,
+  ...tokens.color["vy-utvikling"].color.vyUtvikling,
 });
 
 export const cargonetColors = defineSemanticTokens.colors({
-  ...cargonetJson.color.cargonet,
+  ...tokens.color.cargonet.color.cargonet,
 });

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

@@ -1,8 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
 
-import { coreBorder, coreText } from "../utils/core-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { ghostBackground } from "../utils/ghost-utils";
 import { accordionAnatomy } from "./anatomy";
 
 export const accordionSlotRecipe = defineSlotRecipe({
@@ -20,7 +18,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      ...coreText("default"),
+      color: "core.text",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -72,58 +70,65 @@ export const accordionSlotRecipe = defineSlotRecipe({
   variants: {
     variant: {
       ghost: {
-        root: {
+        item: {
           outline: "none",
         },
         itemTrigger: {
           "&:hover": {
-            ...ghostBackground("hover"),
+            background: "ghost.surface.hover",
           },
           "&:active": {
-            ...ghostBackground("active"),
+            backgroundColor: "ghost.surface.active",
           },
         },
       },
       core: {
         item: {
-          ...coreBorder("default"),
+          outline: "solid",
+          outlineWidth: tokens.size.stroke.sm,
+          outlineColor: "core.outline",
         },
         itemTrigger: {
           _expanded: {
             borderBottomRadius: "none",
           },
           "&:hover": {
-            ...coreBorder("hover"),
+            outlineWidth: tokens.size.stroke.md,
+            outlineColor: "core.outline.hover",
+            outline: "solid",
+
             outlineOffset: 0,
           },
           "&:active": {
             backgroundColor: "core.surface.active",
-            ...coreBorder("default"),
+            outlineWidth: tokens.size.stroke.sm,
+            outlineColor: "core.outline.active",
+            outline: "solid",
           },
         },
       },
       floating: {
         item: {
-          ...floatingBackground("default"),
-          ...floatingBorder("default"),
-          boxShadow: "sm",
+          outline: "solid",
+          outlineWidth: tokens.size.stroke.sm,
+          outlineColor: "core.outline",
         },
         itemTrigger: {
           _expanded: {
             borderBottomRadius: "none",
           },
           "&:hover": {
-            outlineOffset: 1,
-            ...floatingBackground("hover"),
-            ...floatingBorder("hover"),
-            "&:active": {
-              backgroundColor: "floating.surface.active",
-              ...floatingBorder("default"),
-            },
+            outlineWidth: tokens.size.stroke.md,
+            outlineColor: "floating.outline.hover",
+            outline: "solid",
+
+            outlineOffset: 0,
           },
           "&:active": {
             backgroundColor: "floating.surface.active",
-            ...floatingBorder("default"),
+            outlineWidth: tokens.size.stroke.sm,
+            outlineColor: "floating.outline.active",
+            outline: "solid",
           },
         },
       },

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

@@ -1,8 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 import tokens from "@vygruppen/spor-design-tokens";
 
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { coreBackground, coreText } from "../utils/core-utils";
 import { checkboxAnatomy } from "./anatomy";
 
 export const checkboxSlotRecipe = defineSlotRecipe({
@@ -14,13 +12,11 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       gap: 1.5,
       _hover: {
         "& > input:enabled:not([aria-invalid]) + .spor-checkbox__control": {
-          ...coreBackground("hover"),
-          borderColor: brandBackground("hover").backgroundColor,
+          borderColor: "core.outline.hover",
         },
         "& > input:enabled:checked:not([aria-invalid]) + .spor-checkbox__control":
           {
-            ...brandBackground("hover"),
-            borderColor: brandBackground("hover").backgroundColor,
+            background: "brand.surface.hover",
           },
       },
     },
@@ -44,19 +40,18 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       border: "2px solid",
       borderColor: "core.outline",
       borderRadius: "xs",
-      ...coreBackground("default"),
 
       _checked: {
-        ...brandText("default"),
-        ...brandBackground("default"),
-        borderColor: brandBackground("default").backgroundColor,
+        color: "brand.icon",
+        borderColor: "brand.surface",
+        background: "brand.surface",
         _focus: {
           borderColor: "brand.surface.active",
         },
 
         _disabled: {
-          ...coreBackground("disabled"),
-          ...coreText("disabled"),
+          background: "surface.disabled",
+          color: "text.disabled",
           borderColor: "currentColor",
         },
 
@@ -66,11 +61,10 @@ export const checkboxSlotRecipe = defineSlotRecipe({
         },
       },
       _disabled: {
-        ...coreBackground("disabled"),
-        borderColor: coreText("disabled").color,
+        // borderColor: coreText("disabled").color,
+        borderColor: "text.disabled",
       },
       _invalid: {
-        ...coreBackground("default"),
         borderColor: "outline.error",
       },
       _focus: {

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

@@ -1,7 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
 import { inputRecipe } from "../recipes/input";
-import { coreText } from "../utils/core-utils";
 import { NativeSelectAnatomy } from "./anatomy";
 
 export const nativeSelectSlotRecipe = defineSlotRecipe({
@@ -34,7 +33,7 @@ export const nativeSelectSlotRecipe = defineSlotRecipe({
       color: "currentColor",
       fontSize: "sm",
       _disabled: {
-        ...coreText("disabled"),
+        color: "text.disabled",
       },
     },
   },

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

@@ -1,7 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { coreBackground, coreText } from "../utils/core-utils";
-import { ghostBackground } from "../utils/ghost-utils";
 import { paginationAnatomy } from "./anatomy";
 
 export const paginationSlotRecipe = defineSlotRecipe({
@@ -16,13 +14,12 @@ export const paginationSlotRecipe = defineSlotRecipe({
       width: "5",
       fontSize: "xs",
       borderRadius: "xl",
-      ...coreText("default"),
+      color: "core.text",
       cursor: "pointer",
-      ...coreBackground("default"),
       _hover: {
-        ...ghostBackground("hover"),
+        background: "ghost.surface.hover",
         _active: {
-          ...ghostBackground("active"),
+          background: "ghost.surface.active",
         },
       },
       _selected: {

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

@@ -1,8 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { accentBackground, accentText } from "../utils/accent-utils";
-import { brandBackground } from "../utils/brand-utils";
-import { coreText } from "../utils/core-utils";
 import { stepperAnatomy } from "./anatomy";
 
 export const stepperSlotRecipe = defineSlotRecipe({
@@ -70,13 +67,13 @@ export const stepperSlotRecipe = defineSlotRecipe({
             _dark: "whiteAlpha.900",
           },
           _disabled: {
-            color: coreText("disabled").color,
+            color: "core.text",
           },
           _currentStep: {
-            color: accentText("default").color,
+            color: "accent.text",
           },
           _hover: {
-            backgroundColor: accentBackground("hover").backgroundColor,
+            backgroundColor: "accent.surface.hover",
             _disabled: {
               backgroundColor: "transparent",
             },
@@ -84,7 +81,7 @@ export const stepperSlotRecipe = defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            ...brandBackground("hover"),
+            backgroundColor: "brand.surface.hover",
           },
         },
       },

package/src/theme/tokens/colors.ts

@@ -1,10 +1,8 @@
 import { defineTokens } from "@chakra-ui/react";
-import aliasJson from "@vygruppen/spor-design-tokens/tokens/color/alias.json" assert { type: "json" };
-import linjetagJson from "@vygruppen/spor-design-tokens/tokens/color/linjetag.json" assert { type: "json" };
-import paletteJson from "@vygruppen/spor-design-tokens/tokens/color/palette.json" assert { type: "json" };
+import tokens from "@vygruppen/spor-design-tokens/raw-tokens";
 
 export const colors = defineTokens.colors({
-  ...aliasJson.color.alias,
-  ...paletteJson.color.palette,
-  linjetag: linjetagJson.color.linjetag,
+  ...tokens.color.alias.color.alias,
+  ...tokens.color.palette.color.palette,
+  linjetag: tokens.color.linjetag.color.linjetag,
 });

package/src/toast/toast.tsx

@@ -39,7 +39,7 @@ export const createToast = ({
   toaster.create({
     description: text,
     type: variant,
-    id,
+    id: id ?? crypto.randomUUID(),
     duration,
   });
 

package/tsup.config.ts

@@ -6,13 +6,4 @@ export default defineConfig({
   dts: true,
   treeshake: true,
   sourcemap: true,
-  esbuildOptions(options) {
-    // Ensure JSON files are treated as JSON modules
-    options.loader = {
-      ...options.loader,
-      ".json": "json",
-    };
-    options.target = "esnext";
-    options.platform = "node";
-  },
 });

package/src/theme/utils/accent-utils.ts

@@ -1,47 +0,0 @@
-import { brandBackground } from "./brand-utils";
-import { State, Subset } from "./types";
-
-type AccentBackgroundState = Subset<
-  State,
-  "default" | "hover" | "active" | "selected"
->;
-
-export function accentBackground(state: AccentBackgroundState) {
-  switch (state) {
-    case "selected": {
-      return brandBackground("default");
-    }
-    case "active": {
-      return {
-        backgroundColor: "accent.surface.active",
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: "accent.surface.hover",
-      };
-    }
-    default: {
-      return {
-        backgroundColor: "accent.surface",
-      };
-    }
-  }
-}
-
-type AccentTextState = Subset<State, "default" | "selected">;
-
-export function accentText(state: AccentTextState) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "brand.text",
-      };
-    }
-    default: {
-      return {
-        color: "accent.text",
-      };
-    }
-  }
-}

package/src/theme/utils/bg-utils.ts

@@ -1,20 +0,0 @@
-type Bg = "default" | "secondary" | "tertiary";
-export const bg = (bg: Bg) => {
-  switch (bg) {
-    case "default": {
-      return {
-        backgroundColor: "bg",
-      };
-    }
-    case "secondary": {
-      return {
-        backgroundColor: "bg.secondary",
-      };
-    }
-    case "tertiary": {
-      return {
-        backgroundColor: "bg.tertiary",
-      };
-    }
-  }
-};

package/src/theme/utils/brand-utils.ts

@@ -1,29 +0,0 @@
-import { State, Subset } from "./types";
-
-type BrandBackgroundState = Subset<State, "default" | "hover" | "active">;
-
-export function brandBackground(state: BrandBackgroundState) {
-  switch (state) {
-    case "active": {
-      return {
-        backgroundColor: "brand.surface.active",
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: "brand.surface.hover",
-      };
-    }
-    default: {
-      return {
-        backgroundColor: "brand.surface",
-      };
-    }
-  }
-}
-
-export function brandText() {
-  return {
-    color: "brand.text",
-  };
-}

package/src/theme/utils/core-utils.ts

@@ -1,101 +0,0 @@
-import { brandBackground } from "./brand-utils";
-import { surface } from "./surface-utils";
-import { State, Subset } from "./types";
-
-type coreBackgroundState = Subset<
-  State,
-  "default" | "active" | "selected" | "hover" | "disabled"
->;
-export function coreBackground(state: coreBackgroundState) {
-  switch (state) {
-    case "active": {
-      return brandBackground("active");
-    }
-    case "selected": {
-      return brandBackground("default");
-    }
-
-    case "disabled": {
-      return surface("disabled");
-    }
-
-    default: {
-      return { backgroundColor: "transparent" };
-    }
-  }
-}
-
-type BorderState = Subset<
-  State,
-  "hover" | "focus" | "active" | "disabled" | "selected" | "invalid" | "default"
->;
-
-export function coreBorder(state: BorderState) {
-  switch (state) {
-    case "hover": {
-      return {
-        outline: "2px solid",
-        outlineColor: "core.outline",
-      };
-    }
-
-    case "disabled": {
-      return {
-        outline: "1px solid",
-        outlineColor: "outline.disabled",
-      };
-    }
-    case "active": {
-      return {
-        outline: "1px solid",
-        outlineColor: "core.outline",
-      };
-    }
-    case "invalid": {
-      return {
-        outline: "2px solid",
-        outlineColor: "outline.error",
-      };
-    }
-    default: {
-      return {
-        outline: "1px solid",
-        outlineColor: "core.outline",
-      };
-    }
-  }
-}
-
-type coreTextState = Subset<
-  State,
-  "default" | "selected" | "disabled" | "highlight" | "active"
->;
-export function coreText(state: coreTextState) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "brand.text",
-      };
-    }
-    case "active": {
-      return {
-        color: "brand.text",
-      };
-    }
-    case "highlight": {
-      return {
-        color: "text.highlight",
-      };
-    }
-    case "disabled": {
-      return {
-        color: "text.disabled",
-      };
-    }
-    default: {
-      return {
-        color: "core.text",
-      };
-    }
-  }
-}

package/src/theme/utils/floating-utils.ts

@@ -1,69 +0,0 @@
-import { brandBackground } from "./brand-utils";
-import { State, Subset } from "./types";
-
-type FloatingBackgroundState = Subset<
-  State,
-  "default" | "hover" | "active" | "focus"
->;
-
-export function floatingBackground(state: FloatingBackgroundState) {
-  switch (state) {
-    case "focus": {
-      return brandBackground("default");
-    }
-    case "active": {
-      return {
-        backgroundColor: "floating.surface.active",
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: {
-          _light: "floating.surface.hover",
-          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-        },
-      };
-    }
-    case "default": {
-      return {
-        backgroundColor: {
-          _light: "bg",
-          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-        },
-      };
-    }
-  }
-}
-
-type FloatingBorderState = Subset<
-  State,
-  "default" | "hover" | "active" | "focus"
->;
-export function floatingBorder(state: FloatingBorderState) {
-  switch (state) {
-    case "hover": {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline.hover",
-      };
-    }
-    case "focus": {
-      return {
-        outline: "1px solid",
-        outlineColor: "outline.focus",
-      };
-    }
-    case "active": {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline.active",
-      };
-    }
-    default: {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-      };
-    }
-  }
-}