@vygruppen/spor-react 13.0.3 → 13.1.0

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React13 from 'react';
 import React13__default, { createContext, useContext, useId, cloneElement, isValidElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
-import ReactLottie from 'lottie-react';
+import { useLottie } from 'lottie-react';
 import { useInterval } from 'usehooks-ts';
 export { useIsClient, useMap, useOnClickOutside } from 'usehooks-ts';
 import { useProgressBar, useCalendar as useCalendar$1, useRangeCalendar, useCalendarCell, useFocusRing, mergeProps, useCalendarGrid, useDateFormatter, VisuallyHidden as VisuallyHidden$1, useDatePicker, I18nProvider, useId as useId$1, useDateRangePicker, useFilter as useFilter$1, useComboBox, useListBox, useOption, useListBoxSection, useDateField, useTimeField, usePopover, DismissButton, Overlay, useDateSegment, useButton } from 'react-aria';
@@ -212,8 +212,23 @@ function createTexts(texts27) {
   return texts27;
 }
 function Lottie({ animationData }) {
-  return /* @__PURE__ */ jsx(ReactLottie, { animationData });
+  const { View } = useLottie({ animationData });
+  return View;
 }
+
+// src/loader/text.ts
+var useGetLoadingText = () => {
+  const { t } = useTranslation();
+  return t(loadingText.loading);
+};
+var loadingText = createTexts({
+  loading: {
+    en: "Loading",
+    nb: "Laster",
+    nn: "Lastar",
+    sv: "Laddar"
+  }
+});
 var ColorInlineLoader = ({
   width,
   maxWidth,
@@ -221,7 +236,7 @@ var ColorInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderColorData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var ColorSpinner = ({
@@ -232,14 +247,14 @@ var ColorSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerColorData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
 var ContentLoader = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxs(Box, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: contentLoaderData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { textAlign: "center", fontWeight: "bold", children })
   ] });
 };
@@ -259,7 +274,7 @@ var DarkFullScreenLoader = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderWhiteData }) }) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
       ]
     }
   );
@@ -271,7 +286,7 @@ var DarkInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderDarkData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var DarkSpinner = ({
@@ -284,7 +299,7 @@ var DarkSpinner = ({
   const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -295,7 +310,7 @@ var LightFullScreenLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderBlackData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var LightInlineLoader = ({
@@ -305,7 +320,7 @@ var LightInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderLightData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() })
   ] });
 };
 var LightSpinner = ({
@@ -316,7 +331,7 @@ var LightSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerLightData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: useGetLoadingText() }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -571,12 +586,12 @@ var ButtonContent = ({
 ] });
 var LoadingContent = ({
   children,
-  loadingText
+  loadingText: loadingText2
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Flex, { gap: "1", visibility: "hidden", children }),
   /* @__PURE__ */ jsxs(Center, { position: "absolute", inset: "1px 0", children: [
     /* @__PURE__ */ jsx(ColorInlineLoader, { maxWidth: "8", marginX: 2, marginY: 2 }),
-    loadingText && /* @__PURE__ */ jsx(Box, { children: loadingText })
+    loadingText2 && /* @__PURE__ */ jsx(Box, { children: loadingText2 })
   ] })
 ] });
 var getChildContent = (child) => {
@@ -589,7 +604,7 @@ var Button = ({
   ref,
   loading,
   disabled,
-  loadingText,
+  loadingText: loadingText2,
   variant = "primary",
   size = "md",
   leftIcon,
@@ -599,11 +614,11 @@ var Button = ({
   ...rest
 }) => {
   const { t } = useTranslation();
-  const ariaLabel = loading ? String(loadingText ?? t(texts2.loadingText)) : rest["aria-label"];
+  const ariaLabel = loading ? String(loadingText2 ?? t(texts2.loadingText)) : rest["aria-label"];
   const renderContent = () => {
     const content = rest.asChild ? getChildContent(children) : children;
     if (loading)
-      return /* @__PURE__ */ jsx(LoadingContent, { size, loadingText, children: /* @__PURE__ */ jsx(ButtonContent, { leftIcon, rightIcon, children: content }) });
+      return /* @__PURE__ */ jsx(LoadingContent, { size, loadingText: loadingText2, children: /* @__PURE__ */ jsx(ButtonContent, { leftIcon, rightIcon, children: content }) });
     return /* @__PURE__ */ jsx(ButtonContent, { leftIcon, rightIcon, children: content });
   };
   return /* @__PURE__ */ jsx(
@@ -663,59 +678,59 @@ var 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.subtle",
+        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"
         }
       }
     },
@@ -1088,10 +1103,10 @@ var BaseAlertIcon = ({
 }) => {
   const css = {
     "& path:first-of-type": {
-      fill: `alert.${variant}.icon`
+      fill: `icon.${variant}`
     },
     "& path:not(:first-of-type)": {
-      fill: `alert.${variant}.surface`
+      fill: `surface.${variant}`
     }
   };
   switch (variant) {
@@ -1279,6 +1294,7 @@ var ServiceAlert = ({
       css: { ...styles.root, ...css },
       ref,
       ...rest,
+      className: "light",
       children: /* @__PURE__ */ jsxs(Accordion$1.Item, { value: defaultValue, children: [
         /* @__PURE__ */ jsx(Accordion$1.ItemTrigger, { css: styles.itemTrigger, children: /* @__PURE__ */ jsxs(
           HStack,
@@ -1307,7 +1323,7 @@ var ServiceAlert = ({
               ] }),
               /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: [0.5, null, null, 1], children: [
                 notification && /* @__PURE__ */ jsx(Text, { css: styles.notificationText, children: t(texts5.notification(notification)) }),
-                /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, { color: "icon.inverted" }) })
+                /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, { color: "icon.brand" }) })
               ] })
             ]
           }
@@ -1672,18 +1688,18 @@ var cellStyles = {
   },
   // Selection edge (single-mode selected OR range start/end)
   "&[data-edge]": {
-    backgroundColor: "brand.surface",
-    color: "text.inverted"
+    backgroundColor: "surface.brand",
+    color: "text.brand"
   },
   // Range middle
   "&[data-middle]": {
-    backgroundColor: "surface.secondary",
+    backgroundColor: "surface.subtle",
     color: "text"
   },
   // Hover for non-selected, non-disabled cells on devices that support hover
   "@media (hover: hover)": {
     "&:not([data-edge]):not([data-middle]):not([data-disabled]):hover": {
-      backgroundColor: "surface.secondary",
+      backgroundColor: "surface.subtle",
       color: "text"
     }
   }
@@ -2086,7 +2102,7 @@ var Field3 = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsx(Text3, { variant: "sm", color: "text.tertiary", children: helperText })
+    helperText && /* @__PURE__ */ jsx(Text3, { variant: "sm", color: "text.subtle", children: helperText })
   ] });
 };
 var FieldErrorText = ({
@@ -2323,7 +2339,7 @@ var CalendarNavigator = ({
         fontWeight: "bold",
         flex: "1",
         textAlign: "center",
-        color: "core.text",
+        color: "text.core",
         children: capitalize(title)
       }
     ),
@@ -3122,7 +3138,7 @@ var CloseDrawerLine = ({
       top: 0,
       marginY: 2,
       marginX: "auto",
-      backgroundColor: "floating.outline.active",
+      backgroundColor: "outline.neutral",
       borderRadius: "xs",
       ...props,
       ref
@@ -3593,7 +3609,7 @@ var CardSelectContent = ({
       p: "2",
       bg: "bg",
       border: "sm",
-      borderColor: "floating.outline",
+      borderColor: "outline.floating",
       borderRadius: "sm",
       ...props,
       children
@@ -3601,9 +3617,9 @@ var CardSelectContent = ({
   ) }) }) }) });
 };
 var bgActiveStyleMap = {
-  core: "core.surface.active",
-  ghost: "ghost.surface.active",
-  floating: "floating.surface.active"
+  core: "surface.core.active",
+  ghost: "surface.ghost.active",
+  floating: "surface.floating.active"
 };
 var CardSelectTrigger = ({
   ref,
@@ -3688,9 +3704,15 @@ var Popover = ({
   hasBackdrop = true,
   containerPadding = 12
 }) => {
-  var _a6;
   const internalRef = useRef(null);
   const popoverRef = ref ?? internalRef;
+  useLayoutEffect(() => {
+    var _a6;
+    const element = typeof popoverRef === "object" ? popoverRef == null ? void 0 : popoverRef.current : null;
+    if (element) {
+      element.style.minWidth = `${((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? 0}px`;
+    }
+  });
   const { popoverProps, underlayProps } = usePopover(
     {
       triggerRef,
@@ -3704,19 +3726,11 @@ var Popover = ({
     },
     state
   );
-  const popoverBox = /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ...popoverProps,
-      ref: popoverRef,
-      minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto",
-      children: [
-        /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
-        children,
-        /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
-      ]
-    }
-  );
+  const popoverBox = /* @__PURE__ */ jsxs(Box, { ...popoverProps, ref: popoverRef, children: [
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+    children,
+    /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
+  ] });
   if (isNonModal) {
     return popoverBox;
   }
@@ -3847,7 +3861,7 @@ var Combobox2 = (props) => {
         "aria-controls": listboxId,
         borderBottomLeftRadius: state.isOpen && !loading ? 0 : borderBottomLeftRadius,
         borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
-        _active: { backgroundColor: "core.surface.active" },
+        _active: { backgroundColor: "surface.core.active" },
         ...filteredInputProps,
         startElement: leftIcon,
         endElement: loading ? /* @__PURE__ */ jsx(
@@ -5163,7 +5177,7 @@ var LineIcon = function LineIcon2({
       css: { ...styles.iconContainer, ...style },
       padding: targetPadding(),
       borderWidth: borderContainer(),
-      borderColor: variant === "walk" ? "core.outline" : "transparent",
+      borderColor: variant === "walk" ? "outline.core" : "transparent",
       "aria-label": label,
       ref,
       className: clsx_default("light", rest.className),
@@ -6603,8 +6617,8 @@ var StepperStep = ({
   const state = getState(stepNumber, activeStep);
   const recipe = useSlotRecipe({ key: "stepper" });
   const style = recipe({ variant });
-  const disabledTextColor = "text.tertiary";
-  const iconColor = "text.tertiary";
+  const disabledTextColor = "text.subtle";
+  const iconColor = "text.subtle";
   const disabled = state !== "active" && disabledOverride || state === "disabled";
   return /* @__PURE__ */ jsxs(Box, { css: style.stepContainer, "data-part": "step-container", children: [
     stepNumber > 1 && /* @__PURE__ */ jsx(
@@ -6908,40 +6922,40 @@ var 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: tokens22__default.size.stroke.sm,
-        outlineColor: "core.outline",
+        outlineColor: "outline.core",
         _hover: {
           outlineWidth: tokens22__default.size.stroke.md,
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           _active: {
-            background: "core.surface.active",
+            background: "surface.core.active",
             outlineWidth: tokens22__default.size.stroke.sm,
-            outlineColor: "core.outline"
+            outlineColor: "outline.core"
           }
         },
         _focus: {
@@ -6949,28 +6963,28 @@ var 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"
           }
         }
       }
@@ -7025,12 +7039,12 @@ var 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"
       }
     }
   },
@@ -7105,7 +7119,7 @@ var inputRecipe = defineRecipe({
       },
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     }
   },
@@ -7114,14 +7128,14 @@ var 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: {
@@ -7131,17 +7145,17 @@ var 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: {
           outline: "1px solid",
@@ -7184,7 +7198,7 @@ var linkRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
-        color: "core.text",
+        color: "text.core",
         _hover: {
           color: "text",
           _active: {
@@ -7247,29 +7261,29 @@ var pressableCardRecipe = defineRecipe({
         boxShadow: "0px 1px 3px 0px var(--shadow-color)",
         shadowColor: "surface.disabled",
         border: "sm",
-        borderColor: "floating.outline",
-        backgroundColor: "floating.surface",
+        borderColor: "outline.floating",
+        backgroundColor: "surface.floating",
         _hover: {
           boxShadow: "0px 2px 6px 0px var(--shadow-color)",
-          backgroundColor: "floating.surface.hover",
-          borderColor: "floating.outline.hover",
+          backgroundColor: "surface.floating.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: tokens22__default.size.stroke.sm,
         outlineStyle: "solid",
         _hover: {
-          outlineColor: "core.outline.hover",
+          outlineColor: "outline.core.hover",
           outlineWidth: tokens22__default.size.stroke.md,
           outlineStyle: "solid",
           _active: {
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             outlineWidth: tokens22__default.size.stroke.sm
           }
         }
@@ -7277,12 +7291,12 @@ var 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"
           }
         }
@@ -7401,7 +7415,7 @@ var skeletonRecipe = defineRecipe({
       },
       none: {
         animation: "none",
-        background: "surface.color.grey"
+        background: "surface.neutral"
       }
     }
   }
@@ -7413,29 +7427,29 @@ var 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"
       }
     }
   },
@@ -7493,7 +7507,7 @@ var vyUtviklingColors = defineSemanticTokens.colors({
   ...tokens4.color["vy-utvikling"].color.vyUtvikling
 });
 var cargonetColors = defineSemanticTokens.colors({
-  ...tokens4.color.cargonet.color.cargonet
+  ...tokens4.color["cargonet"].color.cargonet
 });
 var radii = defineSemanticTokens.radii({
   none: { value: tokens22__default.size["border-radius"].none },
@@ -7831,7 +7845,7 @@ var accordionSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      color: "core.text",
+      color: "text.core",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -7887,10 +7901,10 @@ var accordionSlotRecipe = defineSlotRecipe({
         },
         itemTrigger: {
           "&:hover": {
-            background: "ghost.surface.hover"
+            background: "surface.ghost.hover"
           },
           "&:active": {
-            backgroundColor: "ghost.surface.active"
+            backgroundColor: "surface.ghost.active"
           }
         }
       },
@@ -7898,7 +7912,7 @@ var accordionSlotRecipe = defineSlotRecipe({
         item: {
           outline: "solid",
           outlineWidth: tokens22__default.size.stroke.sm,
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         itemTrigger: {
           _expanded: {
@@ -7906,12 +7920,12 @@ var accordionSlotRecipe = defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens22__default.size.stroke.md,
-            outlineColor: "core.outline",
+            outlineColor: "outline.core",
             outline: "2px solid",
             outlineOffset: 0
           },
           "&:active": {
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             outlineWidth: tokens22__default.size.stroke.sm,
             outline: "none"
           }
@@ -7924,7 +7938,7 @@ var accordionSlotRecipe = defineSlotRecipe({
         item: {
           borderRadius: "none",
           borderBottom: "1px solid",
-          borderBottomColor: "floating.outline.active"
+          borderBottomColor: "outline.neutral"
         }
       },
       floating: {
@@ -7932,7 +7946,7 @@ var accordionSlotRecipe = defineSlotRecipe({
           outline: "1px solid",
           outlineWidth: tokens22__default.size.stroke.sm,
           boxShadow: "sm",
-          outlineColor: "floating.outline"
+          outlineColor: "outline.floating"
         },
         itemTrigger: {
           _expanded: {
@@ -7941,11 +7955,11 @@ var accordionSlotRecipe = defineSlotRecipe({
           "&:hover": {
             outlineWidth: tokens22__default.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: tokens22__default.size.stroke.sm,
             outline: "none"
           }
@@ -7956,21 +7970,21 @@ var accordionSlotRecipe = defineSlotRecipe({
 });
 var createVariant = (variant) => ({
   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`
       }
     }
   }
@@ -8005,13 +8019,13 @@ var 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")
     }
   },
@@ -8041,117 +8055,117 @@ var alertExpandableSlotRecipe = defineSlotRecipe({
     variant: {
       important: {
         itemContent: {
-          color: "alert.important.text.secondary"
+          color: "text.warning.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.important.surface.hover",
+            bg: "surface.warning.hover",
             outline: "1px solid",
-            outlineColor: "alert.important.outline.hover",
+            outlineColor: "outline.warning.hover",
             outlineOffset: "0px"
           },
           "&:active": {
-            bg: "alert.important.surface.active"
+            bg: "surface.warning.active"
           }
         },
         root: {
-          borderColor: "alert.important.outline",
-          bg: "alert.important.surface"
+          borderColor: "outline.warning",
+          bg: "surface.warning"
         },
         title: {
-          color: "alert.important.text"
+          color: "text.warning"
         }
       },
       success: {
         itemContent: {
-          color: "alert.success.text.secondary"
+          color: "text.success.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.success.surface.hover",
+            bg: "surface.success.hover",
             outline: "1px solid",
             outlineOffset: "0px",
-            outlineColor: "alert.success.outline.hover",
+            outlineColor: "outline.success.hover",
             "&:active": {
-              bg: "alert.success.surface.active"
+              bg: "surface.success.active"
             }
           }
         },
         root: {
-          borderColor: "alert.success.outline",
-          bg: "alert.success.surface"
+          borderColor: "outline.success",
+          bg: "surface.success"
         },
         title: {
-          color: "alert.success.text"
+          color: "text.success"
         }
       },
       alt: {
         itemContent: {
-          color: "alert.alt.text.secondary"
+          color: "text.notice.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.alt.surface.hover",
+            bg: "surface.notice.hover",
             outlineOffset: "0px",
             outline: "1px solid",
-            outlineColor: "alert.alt.outline.hover",
+            outlineColor: "outline.notice.hover",
             "&:active": {
-              bg: "alert.alt.surface.active"
+              bg: "surface.notice.active"
             }
           }
         },
         root: {
-          borderColor: "alert.alt.outline",
-          bg: "alert.alt.surface"
+          borderColor: "outline.notice",
+          bg: "surface.notice"
         },
         title: {
-          color: "alert.alt.text"
+          color: "text.notice"
         }
       },
       info: {
         itemContent: {
-          color: "alert.info.text.secondary"
+          color: "text.info.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.info.surface.hover",
+            bg: "surface.info.hover",
             outlineOffset: "0px",
             outline: "1px solid",
-            outlineColor: "alert.info.outline.hover",
+            outlineColor: "outline.info.hover",
             "&:active": {
-              bg: "alert.info.surface.active"
+              bg: "surface.info.active"
             }
           }
         },
         root: {
-          borderColor: "alert.info.outline",
-          bg: "alert.info.surface"
+          borderColor: "outline.info",
+          bg: "surface.info"
         },
         title: {
-          color: "alert.info.text"
+          color: "text.info"
         }
       },
       error: {
         itemContent: {
-          color: "alert.error.text.secondary"
+          color: "text.critical.subtle"
         },
         itemTrigger: {
           "&:hover": {
-            bg: "alert.error.surface.hover",
+            bg: "surface.critical.hover",
             outlineOffset: "0px",
             outline: "1px solid",
-            outlineColor: "alert.error.outline.hover",
+            outlineColor: "outline.critical.hover",
             "&:active": {
-              bg: "alert.error.surface.active"
+              bg: "surface.critical.active"
             }
           }
         },
         root: {
-          borderColor: "alert.error.outline",
-          bg: "alert.error.surface"
+          borderColor: "outline.critical",
+          bg: "surface.critical"
         },
         title: {
-          color: "alert.error.text"
+          color: "text.critical"
         }
       }
     }
@@ -8167,10 +8181,10 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       transitionDuration: "fast",
       borderTopRadius: "none",
       borderBottomRadius: "md",
-      backgroundColor: "alert.service.surface",
+      backgroundColor: "surface.service",
       outline: "1px solid",
-      outlineColor: "alert.service.outline",
-      color: "text.inverted",
+      outlineColor: "outline.service",
+      color: "text.brand",
       boxShadow: "sm"
     },
     itemTrigger: {
@@ -8182,15 +8196,15 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "full",
-      color: "text.inverted",
+      color: "text.brand",
       "&:hover": {
-        backgroundColor: "alert.service.surface.hover"
+        backgroundColor: "surface.service.hover"
       },
       "&:active": {
-        backgroundColor: "alert.service.surface.active"
+        backgroundColor: "surface.service.active"
       },
       _icon: {
-        color: "text"
+        color: "icon.brand"
       }
     },
     itemTriggerTitle: {
@@ -8200,7 +8214,7 @@ var alertServiceSlotRecipe = defineSlotRecipe({
       fontWeight: "400",
       fontSize: ["mobile.xs", "desktop.xs"],
       textWrap: "nowrap",
-      color: "alert.service.text.secondary"
+      color: "text.service.subtle"
     },
     itemContent: {
       paddingX: ["2", "3"],
@@ -8210,14 +8224,14 @@ var alertServiceSlotRecipe = defineSlotRecipe({
     itemBody: {
       marginX: "auto",
       padding: "0 !important",
-      color: "alert.service.text.secondary",
+      color: "text.service.subtle",
       gap: 0,
       flexDirection: "column",
       display: "flex",
       "& > p": {
         width: "full",
         borderBottom: "1px dashed",
-        borderColor: "outline.inverted",
+        borderColor: "outline.neutral",
         paddingY: ["1", "1.5"],
         _first: {
           paddingTop: 0
@@ -8300,7 +8314,7 @@ var comboboxSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       flex: "1",
       _highlighted: {
-        bg: "ghost.surface.active"
+        bg: "surface.ghost.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -8308,13 +8322,13 @@ var comboboxSlotRecipe = defineSlotRecipe({
         color: "text.disabled"
       },
       _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"
       }
     },
     empty: {
@@ -8333,7 +8347,7 @@ var comboboxSlotRecipe = defineSlotRecipe({
     itemGroupLabel: {
       px: "3",
       py: "0.5",
-      color: "floating.text",
+      color: "text.floating",
       fontFeatureSettings: "liga off",
       fontSize: ["mobile.sm, desktop.sm"],
       fontWeight: "bold"
@@ -8369,11 +8383,11 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
       core: {
         link: {
           _hover: {
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
-              backgroundColor: "core.surface.active",
+              backgroundColor: "surface.core.active",
               outline: "none"
             }
           }
@@ -8382,9 +8396,9 @@ var breadcrumbSlotRecipe = defineSlotRecipe({
       ghost: {
         link: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active"
+              backgroundColor: "surface.ghost.active"
             }
           }
         }
@@ -8406,10 +8420,10 @@ var 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"
         }
       }
     },
@@ -8431,19 +8445,14 @@ var 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"
-        },
-        _disabled: {
-          background: "surface.disabled",
-          color: "text.disabled",
-          borderColor: "currentColor"
+          borderColor: "surface.brand.active"
         },
         _invalid: {
           backgroundColor: "outline.error",
@@ -8451,8 +8460,9 @@ var checkboxSlotRecipe = defineSlotRecipe({
         }
       },
       _disabled: {
-        // borderColor: coreText("disabled").color,
-        borderColor: "text.disabled"
+        background: "surface.disabled",
+        borderColor: "outline.disabled",
+        color: "text.disabled"
       },
       _invalid: {
         borderColor: "outline.error"
@@ -8462,7 +8472,7 @@ var checkboxSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus",
         outlineOffset: tokens22__default.size.stroke.md,
         outlineWidth: tokens22__default.size.stroke.md,
-        borderColor: "core.outline",
+        borderColor: "outline.core",
         borderWidth: tokens22__default.size.stroke.md
       }
     },
@@ -8486,16 +8496,16 @@ var choiceChipSlotRecipe = defineSlotRecipe({
       paddingInlineStart: "2",
       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"
           }
         }
       },
@@ -8592,47 +8602,47 @@ var 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"
             }
           }
         }
@@ -8710,7 +8720,7 @@ var datePickerSlotRecipe = defineSlotRecipe({
     },
     dateTimeSegment: {
       _focus: {
-        backgroundColor: "ghost.surface.active",
+        backgroundColor: "surface.ghost.active",
         color: "text"
       }
     },
@@ -8726,10 +8736,10 @@ var 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",
@@ -8740,11 +8750,11 @@ var 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: {
@@ -8752,11 +8762,11 @@ var datePickerSlotRecipe = defineSlotRecipe({
       maxWidth: "100vw"
     },
     weekdays: {
-      color: "core.text",
+      color: "text.core",
       fontWeight: "bold"
     },
     weekend: {
-      color: "accent.text",
+      color: "text.accent",
       fontWeight: "bold"
     },
     cell: {
@@ -8770,12 +8780,12 @@ var 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",
@@ -8784,10 +8794,10 @@ var datePickerSlotRecipe = defineSlotRecipe({
       height: [6, 7],
       transitionProperty: "common",
       _hover: {
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "surface.ghost.hover"
       },
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.ghost.active"
       },
       _disabled: {
         backgroundColor: "surface.disabled",
@@ -8795,16 +8805,16 @@ var 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",
@@ -8819,14 +8829,14 @@ var 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]": {
               outline: "2px solid",
@@ -8844,17 +8854,17 @@ var 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]": {
               outline: "2px solid",
@@ -8874,11 +8884,11 @@ var 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]": {
               outline: "2px solid",
@@ -9338,13 +9348,13 @@ var 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,
@@ -9362,7 +9372,7 @@ var fieldSlotRecipe = defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "alert.error.surface",
+        backgroundColor: "surface.critical",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none"
       }
@@ -9423,12 +9433,12 @@ var 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"
             }
           }
         }
@@ -9437,29 +9447,29 @@ var 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"
             }
           }
         }
@@ -9779,42 +9789,42 @@ var inputChipSlotRecipe = defineSlotRecipe({
           borderColor: "outline",
           "&:hover": {
             outline: "2px solid",
-            outlineColor: "core.outline.hover"
+            outlineColor: "outline.core.hover"
           },
           "&:active": {
             outline: "none",
-            backgroundColor: "core.surface.active"
+            backgroundColor: "surface.core.active"
           }
         }
       },
       accent: {
         root: {
-          backgroundColor: "accent.surface",
+          backgroundColor: "surface.accent",
           color: "text.highlight",
           "& svg": {
             color: "icon.highlight"
           },
           "&:hover": {
-            backgroundColor: "accent.surface.hover"
+            backgroundColor: "surface.accent.hover"
           },
           "&:active": {
-            backgroundColor: "accent.surface.active",
+            backgroundColor: "surface.accent.active",
             outline: "none"
           }
         }
       },
       brand: {
         root: {
-          backgroundColor: "brand.surface",
-          color: "text.inverted",
+          backgroundColor: "surface.brand",
+          color: "text.brand",
           "& svg": {
-            color: "icon.inverted"
+            color: "icon.brand"
           },
           "&:hover": {
-            backgroundColor: "brand.surface.hover"
+            backgroundColor: "surface.brand.hover"
           },
           "&:active": {
-            backgroundColor: "brand.surface.active",
+            backgroundColor: "surface.brand.active",
             outline: "none"
           }
         }
@@ -10041,18 +10051,18 @@ var listBoxSlotRecipe = defineSlotRecipe({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: "ghost.text",
+      color: "text.ghost",
       cursor: "pointer",
       listStyle: "none",
       _active: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.ghost.active"
       },
       _hover: {
-        backgroundColor: "accent.surface",
-        color: "accent.text"
+        backgroundColor: "surface.accent",
+        color: "text.accent"
       },
       _selected: {
-        backgroundColor: "ghost.surface.active"
+        backgroundColor: "surface.ghost.active"
       },
       _focus: {
         outline: "2px solid",
@@ -10062,9 +10072,9 @@ var listBoxSlotRecipe = defineSlotRecipe({
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text"
+        color: "text.ghost"
       }
     }
   },
@@ -10073,13 +10083,13 @@ var listBoxSlotRecipe = defineSlotRecipe({
       core: {
         root: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         }
       },
       floating: {
         root: {
           outline: "1px solid",
-          outlineColor: "floating.outline"
+          outlineColor: "outline.floating"
         }
       }
     }
@@ -10104,7 +10114,7 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "brand.surface",
+      color: "surface.brand",
       outlineOffset: "2px"
     },
     icon: {
@@ -10117,14 +10127,14 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
       play: {
         root: {
           padding: 0,
-          color: "brand.text",
-          backgroundColor: "brand.surface",
+          color: "text.brand",
+          backgroundColor: "surface.brand",
           _hover: {
-            color: "brand.text",
-            backgroundColor: "brand.surface.hover",
+            color: "text.brand",
+            backgroundColor: "surface.brand.hover",
             _active: {
-              color: "brand.text",
-              backgroundColor: "brand.surface.active"
+              color: "text.brand",
+              backgroundColor: "surface.brand.active"
             }
           },
           _disabled: {
@@ -10137,9 +10147,9 @@ var mediaControllerSlotRecipe = defineSlotRecipe({
       jumpSkip: {
         root: {
           _hover: {
-            backgroundColor: "ghost.surface.hover",
+            backgroundColor: "surface.ghost.hover",
             _active: {
-              backgroundColor: "ghost.surface.active"
+              backgroundColor: "surface.ghost.active"
             }
           },
           _disabled: {
@@ -10249,16 +10259,16 @@ var menuSlotRecipe = defineSlotRecipe({
       justifyContent: "space-between",
       gap: 1.5,
       _hover: {
-        backgroundColor: "accent.surface.hover"
+        backgroundColor: "surface.accent.hover"
       },
       "&:active": {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _checked: {
-        backgroundColor: "accent.surface"
+        backgroundColor: "surface.accent"
       },
       _highlighted: {
-        backgroundColor: "ghost.surface.hover"
+        backgroundColor: "surface.ghost.hover"
       }
     },
     itemGroupLabel: {
@@ -10295,19 +10305,19 @@ var menuSlotRecipe = defineSlotRecipe({
       core: {
         content: {
           border: "1px solid",
-          borderColor: "core.outline"
+          borderColor: "outline.core"
         }
       },
       accent: {
         content: {
           border: "1px solid",
-          borderColor: "core.outline"
+          borderColor: "outline.core"
         }
       },
       floating: {
         content: {
           border: "sm",
-          borderColor: "floating.outline",
+          borderColor: "outline.floating",
           boxShadow: "lg"
         }
       }
@@ -10395,7 +10405,7 @@ var numericStepperRecipe = defineSlotRecipe({
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
-      color: "core.text",
+      color: "text.core",
       backgroundColor: "transparent",
       _focus: {
         backgroundColor: "surface",
@@ -10403,7 +10413,7 @@ var numericStepperRecipe = defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _disabled: {
         pointerEvents: "none",
@@ -10411,7 +10421,7 @@ var numericStepperRecipe = defineSlotRecipe({
       },
       _hover: {
         outline: "1px solid",
-        outlineColor: "core.outline"
+        outlineColor: "outline.core"
       }
     },
     text: {
@@ -10421,7 +10431,7 @@ var numericStepperRecipe = defineSlotRecipe({
       paddingX: 1,
       textAlign: "center",
       width: "4ch",
-      color: "core.text"
+      color: "text.core"
     },
     button: {
       outlineOffset: "-2px",
@@ -10455,18 +10465,18 @@ var paginationSlotRecipe = defineSlotRecipe({
       width: "5",
       fontSize: "xs",
       borderRadius: "xl",
-      color: "core.text",
+      color: "text.core",
       cursor: "pointer",
       _hover: {
-        background: "ghost.surface.hover",
+        background: "surface.ghost.hover",
         _active: {
-          background: "ghost.surface.active"
+          background: "surface.ghost.active"
         }
       },
       _selected: {
         cursor: "default",
         fontWeight: "bold",
-        backgroundColor: "core.surface.active"
+        backgroundColor: "surface.core.active"
       }
     },
     list: {
@@ -10486,11 +10496,11 @@ var popoverSlotRecipe = defineSlotRecipe({
       position: "relative",
       display: "flex",
       flexDirection: "row-reverse",
-      color: "text.inverted",
+      color: "text.brand",
       gap: "0.625rem",
       padding: "0.563rem 0.75rem",
       textStyle: "sm",
-      bg: "surface.tertiary",
+      bg: "surface.brand",
       boxShadow: "lg",
       borderRadius: "sm",
       zIndex: "popover",
@@ -10507,14 +10517,14 @@ var popoverSlotRecipe = defineSlotRecipe({
       }
     },
     body: {
-      color: "text.inverted",
+      color: "text.brand",
       alignItems: "center",
       borderRadius: "sm",
       zIndex: "inherit",
       maxWidth: "20em"
     },
     arrow: {
-      "--arrow-background": "colors.surface.tertiary",
+      "--arrow-background": "colors.surface.brand",
       "--arrow-size": "6px"
     }
   },
@@ -10558,7 +10568,7 @@ var progressBarRecipe = defineSlotRecipe({
     },
     background: {
       display: "flex",
-      backgroundColor: "accent.surface.hover",
+      backgroundColor: "surface.accent.hover",
       borderRadius: "sm",
       boxPack: "start",
       justifyContent: "flex-start",
@@ -10569,7 +10579,7 @@ var progressBarRecipe = defineSlotRecipe({
       borderRadius: "sm"
     },
     progress: {
-      backgroundColor: "brand.surface.active",
+      backgroundColor: "surface.brand.active",
       borderRadius: "sm",
       maxWidth: "100%",
       transition: "width .2s ease-out"
@@ -10599,7 +10609,7 @@ var progressIndicatorRecipe = defineSlotRecipe({
       width: 1,
       fill: "icon.disabled",
       "&[aria-current='step']": {
-        fill: "brand.surface"
+        fill: "surface.brand"
       }
     }
   }
@@ -10639,17 +10649,17 @@ var radioGroupSlotRecipe = defineSlotRecipe({
       justifyContent: "center",
       verticalAlign: "top",
       borderWidth: "2px",
-      borderColor: "core.outline",
+      borderColor: "outline.core",
       borderRadius: "xl",
       width: 4,
       height: 4,
       _checked: {
-        borderColor: "brand.surface"
+        borderColor: "surface.brand"
       },
       _hover: {
-        borderColor: "brand.surface.hover",
+        borderColor: "surface.brand.hover",
         "& .dot": {
-          backgroundColor: "brand.surface.hover"
+          backgroundColor: "surface.brand.hover"
         }
       },
       _disabled: {
@@ -10670,7 +10680,7 @@ var radioGroupSlotRecipe = defineSlotRecipe({
         height: "full",
         width: "full",
         borderRadius: "xl",
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         scale: "0.5"
       }
     }
@@ -10722,15 +10732,15 @@ var radioCardSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         item: {
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           outlineWidth: tokens22__default.size.stroke.sm,
           outlineStyle: "solid",
           _hover: {
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
             _active: {
-              backgroundColor: "core.surface.active",
+              backgroundColor: "surface.core.active",
               outlineWidth: tokens22__default.size.stroke.sm
             }
           },
@@ -10738,7 +10748,7 @@ var radioCardSlotRecipe = defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
               outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
@@ -10752,15 +10762,15 @@ var radioCardSlotRecipe = defineSlotRecipe({
           boxShadow: "0px 1px 3px 0px var(--shadow-color)",
           shadowColor: "surface.disabled",
           border: "sm",
-          borderColor: "floating.outline",
-          background: "floating.surface",
+          borderColor: "outline.floating",
+          background: "surface.floating",
           _hover: {
-            background: "floating.surface.hover",
-            borderColor: "floating.outline.hover",
+            background: "surface.floating.hover",
+            borderColor: "outline.floating.hover",
             boxShadow: "0px 2px 6px 0px var(--shadow-color)",
             _active: {
-              background: "floating.surface.active",
-              borderColor: "floating.outline.active",
+              background: "surface.floating.active",
+              borderColor: "outline.neutral",
               boxShadow: "none"
             }
           },
@@ -10768,7 +10778,7 @@ var radioCardSlotRecipe = defineSlotRecipe({
             outlineColor: "outline.focus",
             outlineWidth: tokens22__default.size.stroke.md,
             outlineStyle: "solid",
-            backgroundColor: "core.surface.active",
+            backgroundColor: "surface.core.active",
             _focusVisible: {
               outlineStyle: "double",
               outlineWidth: `calc(3 * ${tokens22__default.size.stroke.md})`
@@ -10848,7 +10858,7 @@ var selectSlotRecipe = defineSlotRecipe({
       color: {
         base: "text",
         _disabled: "text.disabled",
-        _invalid: "text.secondary"
+        _invalid: "text.highlight"
       },
       _icon: {
         width: 3,
@@ -10885,14 +10895,14 @@ var selectSlotRecipe = defineSlotRecipe({
       justifyContent: "space-between",
       gap: 1,
       borderRadius: "sm",
-      color: "ghost.text",
+      color: "text.ghost",
       cursor: "pointer",
       outline: "none",
       "&[data-highlighted]:hover": {
         outlineOffset: "2px",
         outline: "2px solid",
         outlineColor: "outline.focus",
-        backgroundColor: "accent.surface.hover"
+        backgroundColor: "surface.accent.hover"
       },
       "&[data-highlighted]": {
         outlineOffset: "2px",
@@ -10900,7 +10910,7 @@ var selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.focus"
       },
       _active: {
-        backgroundColor: "accent.surface.active"
+        backgroundColor: "surface.accent.active"
       },
       _highlighted: {
         _active: {
@@ -10908,12 +10918,12 @@ var selectSlotRecipe = defineSlotRecipe({
         }
       },
       _hover: {
-        backgroundColor: "accent.surface.hover",
+        backgroundColor: "surface.accent.hover",
         outline: "2px solid core.outline",
         outlineOffset: "2px"
       },
       _selected: {
-        backgroundColor: "accent.surface"
+        backgroundColor: "surface.accent"
       },
       _icon: {
         width: 3,
@@ -10948,9 +10958,9 @@ var selectSlotRecipe = defineSlotRecipe({
     valueText: {},
     itemDescription: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "ghost.text",
+      color: "text.ghost",
       "[aria-selected='true'] &": {
-        color: "ghost.text"
+        color: "text.ghost"
       }
     }
   },
@@ -10959,13 +10969,13 @@ var selectSlotRecipe = defineSlotRecipe({
       core: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline",
+          outlineColor: "outline.core",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline"
+            outlineColor: "outline.core"
           },
           _active: {
-            backgroundColor: "brand.surface.active"
+            backgroundColor: "surface.brand.active"
           },
           _disabled: {
             pointerEvents: "none",
@@ -10977,13 +10987,13 @@ var selectSlotRecipe = defineSlotRecipe({
       floating: {
         control: {
           outline: "1px solid",
-          outlineColor: "floating.outline",
+          outlineColor: "outline.floating",
           _hover: {
             outline: "2px solid",
-            outlineColor: "floating.outline"
+            outlineColor: "outline.floating"
           },
           _active: {
-            backgroundColor: "brand.surface.active"
+            backgroundColor: "surface.brand.active"
           },
           _disabled: {
             pointerEvents: "none",
@@ -10997,7 +11007,7 @@ var selectSlotRecipe = defineSlotRecipe({
       rightSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -11008,7 +11018,7 @@ var selectSlotRecipe = defineSlotRecipe({
       leftSideSquare: {
         control: {
           outline: "1px solid",
-          outlineColor: "core.outline"
+          outlineColor: "outline.core"
         },
         trigger: {
           _focus: {
@@ -11076,7 +11086,7 @@ var stepperSlotRecipe = defineSlotRecipe({
       },
       accent: {
         root: {
-          backgroundColor: "accent.bg"
+          backgroundColor: "bg.accent"
         },
         stepButton: {
           color: {
@@ -11084,13 +11094,13 @@ var stepperSlotRecipe = defineSlotRecipe({
             _dark: "whiteAlpha.900"
           },
           _disabled: {
-            color: "core.text"
+            color: "text.core"
           },
           _currentStep: {
-            color: "accent.text"
+            color: "text.accent"
           },
           _hover: {
-            backgroundColor: "accent.surface.hover",
+            backgroundColor: "surface.accent.hover",
             _disabled: {
               backgroundColor: "transparent"
             }
@@ -11098,7 +11108,7 @@ var stepperSlotRecipe = defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            backgroundColor: "brand.surface.hover"
+            backgroundColor: "surface.brand.hover"
           }
         }
       }
@@ -11132,7 +11142,7 @@ var switchSlotRecipe = defineSlotRecipe({
       justifyContent: "center",
       width: "var(--switch-height)",
       height: "var(--switch-height)",
-      backgroundColor: "core.icon",
+      backgroundColor: "icon.core",
       _disabled: {
         backgroundColor: "icon.disabled",
         _checked: {
@@ -11141,7 +11151,7 @@ var switchSlotRecipe = defineSlotRecipe({
       },
       _checked: {
         translate: "var(--switch-x) 0",
-        backgroundColor: "brand.icon"
+        backgroundColor: "icon.brand"
       }
     },
     label: {
@@ -11170,13 +11180,13 @@ var switchSlotRecipe = defineSlotRecipe({
       transitionDuration: "fast",
       outline: "1px solid",
       outlineOffset: "-1px",
-      outlineColor: "core.outline",
+      outlineColor: "outline.core",
       _hover: {
         outline: "2px solid",
-        outlineColor: "core.outline.hover",
+        outlineColor: "outline.core.hover",
         _checked: {
           outlineColor: "transparent",
-          backgroundColor: "brand.surface.hover"
+          backgroundColor: "surface.brand.hover"
         }
       },
       _focusVisible: {
@@ -11185,7 +11195,7 @@ var switchSlotRecipe = defineSlotRecipe({
         outlineStyle: "double"
       },
       _checked: {
-        backgroundColor: "brand.surface",
+        backgroundColor: "surface.brand",
         outline: "none",
         _focusVisible: {
           outlineOffset: "1px",
@@ -11284,10 +11294,10 @@ var tableSlotRecipe = defineSlotRecipe({
           backgroundColor: "bg"
         },
         header: {
-          backgroundColor: "bg.tertiary"
+          backgroundColor: "bg.brand"
         },
         columnHeader: {
-          color: "text.secondary"
+          color: "text.highlight"
         }
       },
       grey: {
@@ -11496,26 +11506,26 @@ var tabsSlotRecipe = defineSlotRecipe({
     variant: {
       core: {
         list: {
-          color: "core.text",
+          color: "text.core",
           border: "sm"
         },
         trigger: {
-          color: "core.text",
+          color: "text.core",
           border: "md",
           borderColor: "transparent",
           _hover: {
             outline: "2px solid",
-            outlineColor: "core.outline.hover",
+            outlineColor: "outline.core.hover",
             outlineOffset: "-2px"
           },
           _active: {
-            backgroundColor: "brand.surface.active",
-            color: "brand.text",
+            backgroundColor: "surface.brand.active",
+            color: "text.brand",
             outline: "none"
           },
           _selected: {
-            backgroundColor: "brand.surface",
-            color: "brand.text",
+            backgroundColor: "surface.brand",
+            color: "text.brand",
             _hover: {
               outline: "none"
             }
@@ -11528,28 +11538,28 @@ var tabsSlotRecipe = defineSlotRecipe({
       },
       accent: {
         list: {
-          backgroundColor: "accent.bg",
-          color: "accent.text"
+          backgroundColor: "bg.accent",
+          color: "text.accent"
         },
         trigger: {
-          color: "accent.text",
+          color: "text.accent",
           _disabled: {
             backgroundColor: "surface.disabled",
             color: "icon.disabled"
           },
           _hover: {
-            backgroundColor: "accent.surface.hover",
+            backgroundColor: "surface.accent.hover",
             _active: {
-              backgroundColor: "brand.surface.active",
-              color: "brand.text"
+              backgroundColor: "surface.brand.active",
+              color: "text.brand"
             }
           },
           _selected: {
-            backgroundColor: "brand.surface",
-            color: "brand.text",
+            backgroundColor: "surface.brand",
+            color: "text.brand",
             _hover: {
-              backgroundColor: "brand.surface.hover",
-              color: "brand.text",
+              backgroundColor: "surface.brand.hover",
+              color: "text.brand",
               outline: "none"
             }
           }
@@ -11597,7 +11607,7 @@ var tabsSlotRecipe = defineSlotRecipe({
           paddingX: 3,
           _focus: {
             border: "md",
-            borderColor: "accent.surface"
+            borderColor: "surface.accent"
           }
         }
       }
@@ -11628,13 +11638,13 @@ var toastSlotRecipe = defineSlotRecipe({
       boxShadow: "xl",
       color: "text",
       "&[data-type=success]": {
-        backgroundColor: "alert.success.surface"
+        backgroundColor: "surface.success"
       },
       "&[data-type=error]": {
-        backgroundColor: "alert.error.surface"
+        backgroundColor: "surface.critical"
       },
       "&[data-type=info]": {
-        backgroundColor: "alert.info.surface"
+        backgroundColor: "surface.info"
       }
     },
     title: {