@vygruppen/spor-react 12.9.0 → 12.10.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.9.0",
+  "version": "12.10.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@ark-ui/react": "^4.9.2",
     "@chakra-ui/anatomy": "^2.3.4",
-    "@chakra-ui/react": "^3.24.0",
     "@chakra-ui/cli": "^3.8.0",
+    "@chakra-ui/react": "^3.24.0",
     "@chakra-ui/react-use-size": "^2.1.0",
     "@chakra-ui/styled-system": "^2.12.0",
     "@chakra-ui/system": "^2.6.2",
@@ -46,7 +46,7 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.7",
+    "@vygruppen/spor-design-tokens": "4.0.8",
     "@vygruppen/spor-icon-react": "4.2.1",
     "@vygruppen/spor-loader": "0.7.0"
   },
@@ -58,6 +58,7 @@
     "@types/node": "^22.13.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "clsx": "^2.1.1",
     "concurrently": "^9.1.2",
     "eslint": "^9.25.1",
     "react": "^18.3.1",
@@ -67,7 +68,7 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.1.1",
+    "@vygruppen/eslint-config": "1.2.1",
     "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {

package/src/dialog/Drawer.tsx

@@ -14,6 +14,7 @@ import {
   CloseFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import { forwardRef } from "react";
+import { useSwipeable } from "react-swipeable";
 
 import { Button, CloseButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
@@ -22,7 +23,6 @@ import {
   DrawerFullScreenHeaderProps,
   DrawerProps,
 } from "./types";
-import { useSwipeable } from "react-swipeable";
 
 /**
  * A drawer is a panel that slides in from the side of the screen. It is used to display additional content without taking up too much space.
@@ -98,7 +98,7 @@ export const CloseDrawerLine = forwardRef<HTMLButtonElement>((props, ref) => {
       top={0}
       marginY={2}
       marginX="auto"
-      backgroundColor="silver"
+      backgroundColor="floating.outline.active"
       borderRadius="xs"
       {...props}
       ref={ref}

package/src/linjetag/LineIcon.tsx

@@ -5,6 +5,7 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
+import clsx from "clsx";
 import React, { forwardRef, PropsWithChildren } from "react";
 
 import { lineIconSlotRecipe } from "../theme/slot-recipes/line-icon";
@@ -90,10 +91,10 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
 
     const Icon: React.ElementType = getCorrectIcon({
       variant:
+        // eslint-disable-next-line no-nested-ternary
         variant === "custom" && "customIconVariant" in rest
           ? rest.customIconVariant
-          : // eslint-disable-next-line unicorn/no-nested-ternary
-            variant === "custom" //eslint rules and prettier conflict
+          : variant === "custom"
             ? "local-train"
             : variant,
       size,
@@ -116,6 +117,7 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
         borderColor={variant === "walk" ? "core.outline" : "transparent"}
         aria-label={label}
         ref={ref}
+        className={clsx("light", rest.className)}
       >
         <Icon css={styles.icon} />
       </Box>

package/src/linjetag/TravelTag.tsx

@@ -13,6 +13,7 @@ import {
   WarningFill18Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
+import clsx from "clsx";
 import { forwardRef, PropsWithChildren } from "react";
 
 import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
@@ -122,8 +123,8 @@ export const TravelTag = forwardRef<HTMLDivElement, TravelTagProps>(
         css={styles.container}
         aria-disabled={disabled}
         ref={ref}
+        className={clsx("light", rest.className)}
         {...rest}
-        backgroundColor={disabled ? "surface.disabled" : backgroundColor}
       >
         <LineIcon
           variant={variant}

package/src/loader/DarkFullScreenLoader.tsx

@@ -15,7 +15,8 @@ export const DarkFullScreenLoader = ({
   return (
     <Center
       height="100%"
-      background="darkTeal"
+      background="bg"
+      className="dark"
       role="status"
       aria-live="polite"
       {...props}

package/src/loader/LightFullScreenLoader.tsx

@@ -13,13 +13,7 @@ export const LightFullScreenLoader = ({
   ...props
 }: LightFullScreenLoaderProps) => {
   return (
-    <Center
-      height="100%"
-      background="white"
-      role="status"
-      aria-live="polite"
-      {...props}
-    >
+    <Center height="100%" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
           <Lottie animationData={fullScreenLoaderBlackData} />

package/src/loader/LightInlineLoader.tsx

@@ -15,13 +15,7 @@ export const LightInlineLoader = ({
   ...props
 }: LightInlineLoaderProps) => {
   return (
-    <Center
-      height="100%"
-      background="white"
-      role="status"
-      aria-live="polite"
-      {...props}
-    >
+    <Center height="100%" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
           <Lottie animationData={inlineLoaderLightData} />

package/src/provider/SporProvider.tsx

@@ -12,8 +12,18 @@ import { fontFaces } from "../theme/brand";
 import { Toaster } from "../toast/toast";
 
 type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
+  /**
+   * The current language of your application. Used for built-in microcopy and labels. Default is Norwegian (bokmål).
+   */
   language?: Language;
+  /**
+   * The theme to use for colors and design tokens. If not provided, the default Spor theme is used.
+   */
   theme?: SystemContext;
+  /**
+   * If true, enables system color mode. If false, the default theme is light.
+   */
+  enableSystemColorMode?: boolean;
 };
 
 /**
@@ -56,12 +66,13 @@ import { theme } from '../../../../apps/docs/app/features/portable-text/code-blo
 export const SporProvider = ({
   language = Language.NorwegianBokmal,
   theme = system,
+  enableSystemColorMode = true,
   children,
 }: SporProviderProps) => {
   return (
     <LanguageProvider language={language}>
       <ChakraProvider value={theme}>
-        <ColorModeProvider>
+        <ColorModeProvider enableSystem={enableSystemColorMode}>
           <Toaster />
           <Global styles={fontFaces} />
 

package/src/theme/recipes/badge.ts

@@ -56,7 +56,7 @@ export const badgeRecipie = defineRecipe({
         backgroundColor: "surface.color.orange",
         color: "alert.error.text.secondary",
         "& svg": {
-          color: "alert.error.icon.secondary",
+          color: "alert.error-secondary.icon",
         },
       },
       red: {

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

@@ -6,12 +6,12 @@ export const closeButtonRecipe = defineRecipe({
     transitionDuration: "normal",
     borderRadius: "md",
     backgroundColor: "transparent",
-    color: "darkGrey",
+    color: "text",
     fontWeight: "normal",
     _hover: {
       background: "ghost.surface.hover",
       _disabled: {
-        color: "dimGrey",
+        color: "icon.disabled",
       },
       _active: {
         background: "ghost.surface.active",

package/src/theme/recipes/link.ts

@@ -34,17 +34,17 @@ export const linkRecipe = defineRecipe({
       primary: {
         color: "core.text",
         _hover: {
-          color: "text.default",
+          color: "text",
           _active: {
             color: "text.disabled",
           },
         },
       },
       secondary: {
-        color: "text.hightlight",
+        color: "text.highlight",
         padding: "2px",
         _hover: {
-          color: "text.hightlight",
+          color: "text.highlight",
           _active: {
             color: "text.disabled",
           },

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

@@ -50,7 +50,6 @@ export const pressableCardRecipe = defineRecipe({
         outlineColor: "core.outline",
         outlineWidth: tokens.size.stroke.sm,
         outlineStyle: "solid",
-        backgroundColor: "core.surface",
 
         _hover: {
           outlineColor: "core.outline.hover",

package/src/theme/recipes/skeleton.ts

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

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

@@ -35,7 +35,7 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       },
 
       _icon: {
-        color: "darkGrey",
+        color: "text",
       },
     },
     itemTriggerTitle: {

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

@@ -25,7 +25,6 @@ export const checkboxSlotRecipe = defineSlotRecipe({
     indicator: {
       width: "100%",
       height: "100%",
-      borderColor: "white",
       marginTop: -1,
       transform: "scale(1)",
       opacity: 0,
@@ -59,8 +58,8 @@ export const checkboxSlotRecipe = defineSlotRecipe({
         },
 
         _invalid: {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed",
+          backgroundColor: "outline.error",
+          borderColor: "outline.error",
         },
       },
       _disabled: {

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

@@ -19,7 +19,7 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
       paddingInlineEnd: "2",
 
       outline: "1px solid",
-      outlineColor: "base.outline",
+      outlineColor: "core.outline",
       _checked: {
         backgroundColor: "brand.surface",
         borderRadius: "sm",
@@ -47,19 +47,19 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         outline: "none",
 
         _hover: {
-          backgroundColor: "core.surface.disabled",
+          backgroundColor: "surface.disabled",
           boxShadow: "none",
-          color: "core.text.disabled",
+          color: "text.disabled",
         },
         _checked: {
           cursor: "not-allowed",
           boxShadow: "none",
-          color: "core.text.disabled",
-          backgroundColor: "core.surface.disabled",
+          color: "text.disabled",
+          backgroundColor: "surface.disabled",
           _hover: {
-            backgroundColor: "core.surface.disabled",
+            backgroundColor: "surface.disabled",
             boxShadow: "none",
-            color: "core.text.disabled",
+            color: "text.disabled",
           },
         },
       },
@@ -68,7 +68,7 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
-
+      gap: "1",
       fontSize: "xs",
     },
   },

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

@@ -37,7 +37,7 @@ export const datePickerSlotRecipe = defineSlotRecipe({
     dateTimeSegment: {
       _focus: {
         backgroundColor: "ghost.surface.active",
-        color: "text.default",
+        color: "text",
       },
     },
     box: {
@@ -147,7 +147,6 @@ export const datePickerSlotRecipe = defineSlotRecipe({
         wrapper: {
           outline: "1px solid",
           outlineColor: "core.outline",
-          backgroundColor: "core.surface",
 
           _hover: {
             outline: "2px solid",

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

@@ -7,6 +7,7 @@ export const dialogSlotRecipe = defineSlotRecipe({
   className: "spor-dialog",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       background: "blackAlpha.500",
       position: "fixed",
       left: 0,

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

@@ -7,6 +7,7 @@ export const drawerSlotRecipe = defineSlotRecipe({
   className: "spor-drawer",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       bg: "blackAlpha.500",
       position: "fixed",
       insetInlineStart: 0,

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

@@ -14,6 +14,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
+      // eslint-disable-next-line spor/use-semantic-tokens
       color: "brightRed",
     },
     label: {
@@ -27,8 +28,8 @@ export const fieldSlotRecipe = defineSlotRecipe({
     },
     errorText: {
       borderRadius: "xs",
-      backgroundColor: "lightRed",
-      color: "darkGrey",
+      backgroundColor: "alert.error.surface",
+      color: "text",
       paddingX: 1.5,
       paddingY: 1,
       textStyle: "xs",
@@ -45,7 +46,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "lightRed",
+        backgroundColor: "alert.error.surface",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none",
       },

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

@@ -76,7 +76,7 @@ export const floatingActionButtonSlotRecipe = defineSlotRecipe({
           _hover: {
             backgroundColor: "transparent",
             outline: "2px solid",
-            outlineColor: "core.outline.light",
+            outlineColor: "core.outline",
             _active: {
               outline: "1px solid",
               outlineColor: "core.outline",

package/src/theme/slot-recipes/line-icon.ts

@@ -10,21 +10,12 @@ export const lineIconSlotRecipe = defineSlotRecipe({
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-      "[aria-disabled=true] &": {
-        backgroundColor: "surface.disabled",
-      },
     },
     icon: {
-      color: "white",
-      "[aria-disabled=true] &": {
-        color: "icon.disabled",
-      },
+      color: "bg",
     },
     title: {
-      color: "darkGrey",
-      "[aria-disabled=true] &": {
-        color: "text.disabled",
-      },
+      color: "text",
     },
   },
   variants: {
@@ -83,38 +74,14 @@ export const lineIconSlotRecipe = defineSlotRecipe({
         iconContainer: {
           backgroundColor: "linjetag.altTransport",
         },
-        icon: {
-          color: "darkGrey",
-          "[aria-disabled=true] &": {
-            color: "white",
-          },
-        },
       },
       walk: {
         title: {
           color: "text",
         },
-        icon: {
-          color: "linjetag.walkLight",
-          "[aria-disabled=true] &": {
-            color: "icon.disabled",
-          },
-        },
-        _disabled: {
-          icon: {
-            color: "text.disabled",
-          },
-          title: {
-            color: "text.disabled",
-          },
-        },
       },
       custom: {
-        iconContainer: {
-          _disabled: {
-            backgroundColor: "surface.disabled",
-          },
-        },
+        iconContainer: {},
       },
     },
     size: {

package/src/theme/slot-recipes/radio-card.ts

@@ -45,7 +45,6 @@ export const radioCardSlotRecipe = defineSlotRecipe({
           outlineColor: "core.outline",
           outlineWidth: tokens.size.stroke.sm,
           outlineStyle: "solid",
-          backgroundColor: "core.surface",
 
           _hover: {
             outlineColor: "core.outline.hover",

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

@@ -126,7 +126,6 @@ export const selectSlotRecipe = defineSlotRecipe({
       },
       _active: {
         backgroundColor: "ghost.surface.active",
-        color: "green",
       },
       _highlighted: {
         _active: {

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

@@ -69,9 +69,8 @@ export const switchSlotRecipe = defineSlotRecipe({
       height: "var(--switch-height)",
       transitionProperty: "common",
       transitionDuration: "fast",
-      outline: "1px solid",
-      outlineColor: "core.outline.default",
-      backgroundColor: "core.background",
+      outline: "2px solid",
+      outlineColor: "core.outline",
       _hover: {
         outline: "2px solid",
         outlineColor: "core.outline.hover",
@@ -96,7 +95,6 @@ export const switchSlotRecipe = defineSlotRecipe({
       },
       _disabled: {
         pointerEvents: "none",
-        backgroundColor: "core.disabled",
         outlineColor: "outline.disabled",
 
         _checked: {

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

@@ -59,7 +59,6 @@ export const tableSlotRecipe = defineSlotRecipe({
           backgroundColor: "bg",
         },
         columnHeader: {
-          color: "brand.text.inverted",
           backgroundColor: "surface.disabled",
           _hover: {
             backgroundColor: "surface.disabled",

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

@@ -63,7 +63,6 @@ export const tabsSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         list: {
-          backgroundColor: "core.surface",
           color: "core.text",
           border: "sm",
         },
@@ -73,7 +72,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
           borderColor: "transparent",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.surface.hover",
+            outlineColor: "core.outline.hover",
             outlineOffset: "-2px",
           },
           _active: {
@@ -90,7 +89,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
           },
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "brand.text.disabled",
+            color: "surface.disabled",
           },
         },
       },
@@ -104,7 +103,7 @@ export const tabsSlotRecipe = defineSlotRecipe({
 
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "accent.text.disabled",
+            color: "icon.disabled",
           },
           _hover: {
             backgroundColor: "accent.surface.hover",

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

@@ -30,22 +30,13 @@ export const toastSlotRecipe = defineSlotRecipe({
       color: "text",
       "&[data-type=success]": {
         backgroundColor: "alert.success.surface",
-        "& svg": {
-          color: "primaryGreen",
-        },
       },
       "&[data-type=error]": {
         backgroundColor: "alert.error.surface",
-        "& svg": {
-          color: "brightRed",
-        },
       },
 
       "&[data-type=info]": {
         backgroundColor: "alert.info.surface",
-        "& svg": {
-          color: "darkBlue",
-        },
       },
     },
 

package/src/theme/slot-recipes/travel-tag.ts

@@ -11,6 +11,11 @@ export const travelTagSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       padding: 0.5,
+
+      _disabled: {
+        background: "surface.disabled",
+      },
+
       width: "fit-content",
       transitionDuration: "fast",
       transitionProperty: "common",
@@ -26,13 +31,13 @@ export const travelTagSlotRecipe = defineSlotRecipe({
       },
     },
     textContainer: {
-      color: "darkGrey",
+      color: "text",
       paddingRight: 0.5,
       whiteSpace: "nowrap",
     },
     title: {
       fontWeight: "bold",
-      color: "brand.text.inverted",
+      color: "text",
       "[aria-disabled=true] &": {
         color: "text.disabled",
       },
@@ -56,24 +61,21 @@ export const travelTagSlotRecipe = defineSlotRecipe({
       critical: {
         container: {
           border: "1px solid",
-          borderColor: "error.text",
+          borderColor: "outline.error",
         },
         deviationIcon: {
-          color: "brightRed",
+          color: "outline.error",
         },
       },
       major: {
         container: {
           border: "1px solid",
+          // eslint-disable-next-line spor/use-semantic-tokens
           borderColor: "golden",
         },
       },
       minor: {},
-      info: {
-        deviationIcon: {
-          color: "ocean",
-        },
-      },
+      info: {},
       none: {},
     },
     variant: {

package/src/toast/toast.tsx

@@ -34,7 +34,7 @@ export const createToast = ({
   text,
   variant,
   id,
-  duration = 6000,
+  duration = 600_000,
 }: ToastProps) =>
   toaster.create({
     description: text,