@vygruppen/spor-react 12.9.0 → 12.10.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.9.0 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.10.1 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           315.42 KB
+CJS dist/index.cjs           314.93 KB
 CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs.map       629.08 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS dist/index.cjs.map       629.60 KB
-CJS ⚡️ Build success in 3398ms
-ESM dist/index.mjs           294.02 KB
+CJS ⚡️ Build success in 2614ms
+ESM dist/index.mjs           293.53 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       629.60 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 3402ms
-DTS ⚡️ Build success in 32388ms
+ESM dist/index.mjs.map       629.08 KB
+ESM ⚡️ Build success in 2615ms
+DTS ⚡️ Build success in 27219ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        156.40 KB
+DTS dist/index.d.ts        155.93 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       156.40 KB
+DTS dist/index.d.cts       155.93 KB

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.9.0 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.10.1 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,11 +1,32 @@
 # @vygruppen/spor-react
 
+## 12.10.1
+
+### Patch Changes
+
+- e690a57: New use-semantic-tokens linting rule to enforce semantic color tokens in Spor components.
+  - @vygruppen/spor-design-tokens@4.0.8
+  - @vygruppen/spor-icon-react@4.2.1
+
+## 12.10.0
+
+### Minor Changes
+
+- c367662: Bump to 12.10.0 - error with previous changeset.
+
 ## 12.9.0
 
 ### Minor Changes
 
 - 5e4f450: Drawer: Make it possible to close a drawer by swiping
 
+### Patch Changes
+
+- e375b23: Make it possible to turn off automatic system detection for color mode
+- a4ed71b: Add gap between icon and text in ChoiceChip
+- Updated dependencies [33ffcc7]
+  - @vygruppen/spor-design-tokens@4.0.8
+
 ## 12.8.10
 
 ### Patch Changes

package/dist/index.cjs

@@ -248,7 +248,8 @@ var DarkFullScreenLoader = ({
     react.Center,
     {
       height: "100%",
-      background: "darkTeal",
+      background: "bg",
+      className: "dark",
       role: "status",
       "aria-live": "polite",
       ...props,
@@ -288,40 +289,20 @@ var LightFullScreenLoader = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Center,
-    {
-      height: "100%",
-      background: "white",
-      role: "status",
-      "aria-live": "polite",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.fullScreenLoaderBlackData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
+  ] });
 };
 var LightInlineLoader = ({
   width,
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react.Center,
-    {
-      height: "100%",
-      background: "white",
-      role: "status",
-      "aria-live": "polite",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderLightData }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { width, maxWidth, children: /* @__PURE__ */ jsxRuntime.jsx(ClientOnly, { children: /* @__PURE__ */ jsxRuntime.jsx(Lottie, { animationData: sporLoader.inlineLoaderLightData }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.VisuallyHidden, { children: "Loading..." })
+  ] });
 };
 var LightSpinner = ({
   children,
@@ -699,7 +680,7 @@ var badgeRecipie = react.defineRecipe({
         backgroundColor: "surface.color.orange",
         color: "alert.error.text.secondary",
         "& svg": {
-          color: "alert.error.icon.secondary"
+          color: "alert.error-secondary.icon"
         }
       },
       red: {
@@ -2405,7 +2386,7 @@ var CloseDrawerLine = React27.forwardRef((props, ref) => {
       top: 0,
       marginY: 2,
       marginX: "auto",
-      backgroundColor: "silver",
+      backgroundColor: "floating.outline.active",
       borderRadius: "xs",
       ...props,
       ref
@@ -3785,6 +3766,28 @@ var StaticCard = React27.forwardRef(
   }
 );
 StaticCard.displayName = "StaticCard";
+
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0; t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
 var icons = {
   "local-train": {
     sm: sporIconReact.TrainFill18Icon,
@@ -3851,9 +3854,9 @@ var LineIcon = React27.forwardRef(
       return variant === "walk" && target === "travelTag" ? 0 : 0.5;
     };
     const Icon3 = getCorrectIcon({
-      variant: variant === "custom" && "customIconVariant" in rest ? rest.customIconVariant : (
-        // eslint-disable-next-line unicorn/no-nested-ternary
-        variant === "custom" ? "local-train" : variant
+      variant: (
+        // eslint-disable-next-line no-nested-ternary
+        variant === "custom" && "customIconVariant" in rest ? rest.customIconVariant : variant === "custom" ? "local-train" : variant
       ),
       size
     });
@@ -3872,6 +3875,7 @@ var LineIcon = React27.forwardRef(
         borderColor: variant === "walk" ? "core.outline" : "transparent",
         "aria-label": label,
         ref,
+        className: clsx_default("light", rest.className),
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon3, { css: styles.icon })
       }
     );
@@ -3932,8 +3936,8 @@ var TravelTag = React27.forwardRef(
         css: styles.container,
         "aria-disabled": disabled,
         ref,
+        className: clsx_default("light", rest.className),
         ...rest,
-        backgroundColor: disabled ? "surface.disabled" : backgroundColor,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             LineIcon,
@@ -5085,7 +5089,7 @@ var createToast = ({
   text,
   variant,
   id,
-  duration = 6e3
+  duration = 6e5
 }) => toaster.create({
   description: text,
   type: variant,
@@ -5134,9 +5138,10 @@ var texts25 = createTexts({
 var SporProvider = ({
   language = "nb" /* NorwegianBokmal */,
   theme = system,
+  enableSystemColorMode = true,
   children
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(LanguageProvider, { language, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsxs(ColorModeProvider, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(LanguageProvider, { language, children: /* @__PURE__ */ jsxRuntime.jsx(react.ChakraProvider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsxs(ColorModeProvider, { enableSystem: enableSystemColorMode, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Toaster, {}),
     /* @__PURE__ */ jsxRuntime.jsx(react$1.Global, { styles: fontFaces }),
     children
@@ -5514,12 +5519,12 @@ var closeButtonRecipe = react.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"
@@ -5677,17 +5682,17 @@ var linkRecipe = react.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"
           }
@@ -5771,7 +5776,6 @@ var pressableCardRecipe = react.defineRecipe({
         outlineColor: "core.outline",
         outlineWidth: tokens23__namespace.default.size.stroke.sm,
         outlineStyle: "solid",
-        backgroundColor: "core.surface",
         _hover: {
           outlineColor: "core.outline.hover",
           outlineWidth: tokens23__namespace.default.size.stroke.md,
@@ -5929,7 +5933,7 @@ var skeletonRecipe = react.defineRecipe({
       },
       none: {
         animation: "none",
-        background: "steel"
+        background: "surface.color.grey"
       }
     }
   }
@@ -6682,7 +6686,7 @@ var alertServiceSlotRecipe = react.defineSlotRecipe({
         backgroundColor: "alert.service.surface.active"
       },
       _icon: {
-        color: "darkGrey"
+        color: "text"
       }
     },
     itemTriggerTitle: {
@@ -6788,7 +6792,6 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
     indicator: {
       width: "100%",
       height: "100%",
-      borderColor: "white",
       marginTop: -1,
       transform: "scale(1)",
       opacity: 0,
@@ -6819,8 +6822,8 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
           borderColor: "currentColor"
         },
         _invalid: {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed"
+          backgroundColor: "outline.error",
+          borderColor: "outline.error"
         }
       },
       _disabled: {
@@ -6860,7 +6863,7 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
       paddingInlineStart: "2",
       paddingInlineEnd: "2",
       outline: "1px solid",
-      outlineColor: "base.outline",
+      outlineColor: "core.outline",
       _checked: {
         backgroundColor: "brand.surface",
         borderRadius: "sm",
@@ -6885,19 +6888,19 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         color: "text.disabled",
         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"
           }
         }
       }
@@ -6905,6 +6908,7 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
+      gap: "1",
       fontSize: "xs"
     }
   },
@@ -7060,7 +7064,7 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
     dateTimeSegment: {
       _focus: {
         backgroundColor: "ghost.surface.active",
-        color: "text.default"
+        color: "text"
       }
     },
     box: {
@@ -7168,7 +7172,6 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
         wrapper: {
           outline: "1px solid",
           outlineColor: "core.outline",
-          backgroundColor: "core.surface",
           _hover: {
             outline: "2px solid",
             outlineColor: "core.outline.hover",
@@ -7236,6 +7239,7 @@ var dialogSlotRecipe = react.defineSlotRecipe({
   className: "spor-dialog",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       background: "blackAlpha.500",
       position: "fixed",
       left: 0,
@@ -7456,6 +7460,7 @@ var drawerSlotRecipe = react.defineSlotRecipe({
   className: "spor-drawer",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       bg: "blackAlpha.500",
       position: "fixed",
       insetInlineStart: 0,
@@ -7661,6 +7666,7 @@ var fieldSlotRecipe = react.defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
+      // eslint-disable-next-line spor/use-semantic-tokens
       color: "brightRed"
     },
     label: {
@@ -7674,8 +7680,8 @@ var fieldSlotRecipe = react.defineSlotRecipe({
     },
     errorText: {
       borderRadius: "xs",
-      backgroundColor: "lightRed",
-      color: "darkGrey",
+      backgroundColor: "alert.error.surface",
+      color: "text",
       paddingX: 1.5,
       paddingY: 1,
       textStyle: "xs",
@@ -7692,7 +7698,7 @@ var fieldSlotRecipe = react.defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "lightRed",
+        backgroundColor: "alert.error.surface",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none"
       }
@@ -7772,7 +7778,7 @@ var floatingActionButtonSlotRecipe = react.defineSlotRecipe({
           _hover: {
             backgroundColor: "transparent",
             outline: "2px solid",
-            outlineColor: "core.outline.light",
+            outlineColor: "core.outline",
             _active: {
               outline: "1px solid",
               outlineColor: "core.outline",
@@ -7835,6 +7841,9 @@ var travelTagSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       padding: 0.5,
+      _disabled: {
+        background: "surface.disabled"
+      },
       width: "fit-content",
       transitionDuration: "fast",
       transitionProperty: "common",
@@ -7850,13 +7859,13 @@ var travelTagSlotRecipe = react.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"
       }
@@ -7880,24 +7889,21 @@ var travelTagSlotRecipe = react.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: {
@@ -8088,22 +8094,13 @@ var lineIconSlotRecipe = react.defineSlotRecipe({
     iconContainer: {
       display: "flex",
       justifyContent: "center",
-      alignItems: "center",
-      "[aria-disabled=true] &": {
-        backgroundColor: "surface.disabled"
-      }
+      alignItems: "center"
     },
     icon: {
-      color: "white",
-      "[aria-disabled=true] &": {
-        color: "icon.disabled"
-      }
+      color: "bg"
     },
     title: {
-      color: "darkGrey",
-      "[aria-disabled=true] &": {
-        color: "text.disabled"
-      }
+      color: "text"
     }
   },
   variants: {
@@ -8161,39 +8158,15 @@ var lineIconSlotRecipe = react.defineSlotRecipe({
       "alt-transport": {
         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: {
@@ -8842,7 +8815,6 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
           outlineColor: "core.outline",
           outlineWidth: tokens23__namespace.default.size.stroke.sm,
           outlineStyle: "solid",
-          backgroundColor: "core.surface",
           _hover: {
             outlineColor: "core.outline.hover",
             outlineWidth: tokens23__namespace.default.size.stroke.md,
@@ -9018,8 +8990,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "ghost.surface.active",
-        color: "green"
+        backgroundColor: "ghost.surface.active"
       },
       _highlighted: {
         _active: {
@@ -9296,9 +9267,8 @@ var switchSlotRecipe = react.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",
@@ -9322,7 +9292,6 @@ var switchSlotRecipe = react.defineSlotRecipe({
       },
       _disabled: {
         pointerEvents: "none",
-        backgroundColor: "core.disabled",
         outlineColor: "outline.disabled",
         _checked: {
           backgroundColor: "icon.disabled",
@@ -9425,7 +9394,6 @@ var tableSlotRecipe = react.defineSlotRecipe({
           backgroundColor: "bg"
         },
         columnHeader: {
-          color: "brand.text.inverted",
           backgroundColor: "surface.disabled",
           _hover: {
             backgroundColor: "surface.disabled"
@@ -9627,7 +9595,6 @@ var tabsSlotRecipe = react.defineSlotRecipe({
     variant: {
       core: {
         list: {
-          backgroundColor: "core.surface",
           color: "core.text",
           border: "sm"
         },
@@ -9637,7 +9604,7 @@ var tabsSlotRecipe = react.defineSlotRecipe({
           borderColor: "transparent",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.surface.hover",
+            outlineColor: "core.outline.hover",
             outlineOffset: "-2px"
           },
           _active: {
@@ -9654,7 +9621,7 @@ var tabsSlotRecipe = react.defineSlotRecipe({
           },
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "brand.text.disabled"
+            color: "surface.disabled"
           }
         }
       },
@@ -9667,7 +9634,7 @@ var tabsSlotRecipe = react.defineSlotRecipe({
           color: "accent.text",
           _disabled: {
             backgroundColor: "surface.disabled",
-            color: "accent.text.disabled"
+            color: "icon.disabled"
           },
           _hover: {
             backgroundColor: "accent.surface.hover",
@@ -9760,22 +9727,13 @@ var toastSlotRecipe = react.defineSlotRecipe({
       boxShadow: "xl",
       color: "text",
       "&[data-type=success]": {
-        backgroundColor: "alert.success.surface",
-        "& svg": {
-          color: "primaryGreen"
-        }
+        backgroundColor: "alert.success.surface"
       },
       "&[data-type=error]": {
-        backgroundColor: "alert.error.surface",
-        "& svg": {
-          color: "brightRed"
-        }
+        backgroundColor: "alert.error.surface"
       },
       "&[data-type=info]": {
-        backgroundColor: "alert.info.surface",
-        "& svg": {
-          color: "darkBlue"
-        }
+        backgroundColor: "alert.info.surface"
       }
     },
     title: {