@vygruppen/spor-react 9.0.3 → 9.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.0.3 build
+> @vygruppen/spor-react@9.2.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 487.85 KB
-CJS ⚡️ Build success in 2081ms
+CJS dist/index.js 488.21 KB
+CJS ⚡️ Build success in 2042ms
 ESM dist/index.mjs                      2.02 KB
-ESM dist/CountryCodeSelect-ZL7DHEIA.mjs 1.19 KB
-ESM dist/chunk-FTQF5IX2.mjs             381.89 KB
-ESM ⚡️ Build success in 2082ms
-DTS ⚡️ Build success in 12077ms
-DTS dist/index.d.ts  318.30 KB
-DTS dist/index.d.mts 318.30 KB
+ESM dist/CountryCodeSelect-XAG646YQ.mjs 1.19 KB
+ESM dist/chunk-VLNBMJ7I.mjs             382.23 KB
+ESM ⚡️ Build success in 2043ms
+DTS ⚡️ Build success in 11913ms
+DTS dist/index.d.ts  318.41 KB
+DTS dist/index.d.mts 318.41 KB

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @vygruppen/spor-react
 
+## 9.2.0
+
+### Minor Changes
+
+- 8568d79: CardSelect: Add support for not having a visual label, by passing in aria-label instead of label prop
+
+### Patch Changes
+
+- 84b4bbf: Change the way cards and card selects are rendered
+- Updated dependencies [84b4bbf]
+  - @vygruppen/spor-design-tokens@3.5.1
+
+## 9.1.0
+
+### Minor Changes
+
+- 6fe2534: Add support for Brand.CargoNet
+
+### Patch Changes
+
+- Updated dependencies [6fe2534]
+  - @vygruppen/spor-design-tokens@3.5.0
+
 ## 9.0.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-ZL7DHEIA.mjs → CountryCodeSelect-XAG646YQ.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-FTQF5IX2.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-VLNBMJ7I.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-FTQF5IX2.mjs → chunk-VLNBMJ7I.mjs}

@@ -2501,7 +2501,6 @@ var CardSelect = forwardRef(
     isOpen: externalIsOpen,
     defaultOpen = false,
     onToggle,
-    label,
     icon,
     children,
     width = "fit-content",
@@ -2510,6 +2509,7 @@ var CardSelect = forwardRef(
     withChevron = true,
     ...props
   }, externalRef) => {
+    const label = "label" in props ? props.label : props["aria-label"];
     const internalRef = useRef(null);
     const triggerRef = externalRef ?? internalRef;
     const state2 = useOverlayTriggerState({
@@ -2535,11 +2535,12 @@ var CardSelect = forwardRef(
         type: "button",
         ref: triggerRef,
         sx: styles3.trigger,
+        "aria-label": label,
         ...buttonProps,
         width,
         "data-attachable": true
       },
-      /* @__PURE__ */ React69__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__default.createElement(Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React69__default.createElement(
+      /* @__PURE__ */ React69__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__default.createElement(Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React69__default.createElement(
         ChevronIcon,
         {
           transform: state2.isOpen ? "rotate(180deg)" : "none"
@@ -3340,7 +3341,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-ZL7DHEIA.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-XAG646YQ.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10385,8 +10386,8 @@ var shadows2 = {
   lg: tokens10__default.depth.shadow.lg.value
 };
 var spacing2 = Object.entries(tokens10__default.size.spacing).reduce(
-  (tokens14, [key, token]) => ({
-    ...tokens14,
+  (tokens15, [key, token]) => ({
+    ...tokens15,
     [Number(key)]: token
   }),
   {}
@@ -10584,7 +10585,7 @@ var getColorSchemeBaseProps = (props) => {
         ...baseBorder("default", props),
         backgroundColor: mode(
           "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props),
         color: "inherit"
       };
@@ -10633,7 +10634,7 @@ var getColorSchemeHoverProps = (props) => {
       return {
         backgroundColor: mode(
           "white",
-          `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
+          `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
         )(props),
         ...floatingBorder("hover", props)
       };
@@ -10654,7 +10655,7 @@ var getColorSchemeActiveProps = (props) => {
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: mode("mint", "teal")(props),
+        backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
         ...floatingBorder("active", props)
       };
     case "grey":
@@ -10669,8 +10670,6 @@ var getColorSchemeActiveProps = (props) => {
       };
   }
 };
-
-// src/theme/components/card-select.ts
 var parts3 = anatomy("card-select").parts("trigger", "card");
 var helpers4 = createMultiStyleConfigHelpers(parts3.keys);
 var config9 = helpers4.defineMultiStyleConfig({
@@ -10688,7 +10687,10 @@ var config9 = helpers4.defineMultiStyleConfig({
       boxShadow: "md",
       padding: 3,
       ...baseText("default", props),
-      ...floatingBackground("default", props)
+      backgroundColor: mode(
+        "white",
+        `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
+      )(props)
     }
   }),
   variants: {
@@ -10737,7 +10739,8 @@ var config9 = helpers4.defineMultiStyleConfig({
         _expanded: {
           ...floatingBackground("active", props)
         }
-      }
+      },
+      card: {}
     })
   },
   sizes: {
@@ -12097,7 +12100,7 @@ var config24 = defineStyleConfig$1({
   }),
   variants: {
     primary: (props) => ({
-      ...accentText("default", props),
+      ...baseText("default", props),
       _hover: {
         ...brandText("hover", props),
         ...brandBackground("hover", props)
@@ -13254,6 +13257,7 @@ var fontFaces = `
 var Brand = /* @__PURE__ */ ((Brand2) => {
   Brand2["VyDigital"] = "VyDigital";
   Brand2["VyUtvikling"] = "VyUtvikling";
+  Brand2["CargoNet"] = "CargoNet";
   return Brand2;
 })(Brand || {});
 var theme = {
@@ -13268,15 +13272,20 @@ var brandTheme = {
   ["VyDigital" /* VyDigital */]: {},
   ["VyUtvikling" /* VyUtvikling */]: {
     colors: {
-      accent: {
-        surface: {
-          default: {
-            light: colors2.seaMist,
-            dark: colors2.darkGrey
-          }
+      bg: {
+        default: {
+          dark: colors2.darkGrey
+        }
+      },
+      surface: {
+        default: {
+          dark: colors2.darkGrey
         }
       }
     }
+  },
+  ["CargoNet" /* CargoNet */]: {
+    colors: tokens10__default.color.cargonet
   }
 };
 var BaseToast = ({ children, variant, id }) => {

package/dist/index.d.mts

@@ -657,8 +657,6 @@ type CardSelectProps = BoxProps & {
     defaultOpen?: boolean;
     /** Callback for when the card select opens or closes. */
     onToggle?: (isOpen: boolean) => void;
-    /** The text of the trigger button */
-    label: string;
     /** An optional trigger button icon, rendered to the left of the label */
     icon?: React.ReactNode;
     /** The content of the card select */
@@ -669,7 +667,11 @@ type CardSelectProps = BoxProps & {
     placement?: AriaPositionProps["placement"];
     /** Whether or not to show the chevron. Defaults to true */
     withChevron?: boolean;
-};
+} & ({
+    label: string;
+} | {
+    "aria-label": string;
+});
 /**
  * A card select component.
  *
@@ -2127,7 +2129,8 @@ declare const fontFaces: string;
 
 declare enum Brand {
     VyDigital = "VyDigital",
-    VyUtvikling = "VyUtvikling"
+    VyUtvikling = "VyUtvikling",
+    CargoNet = "CargoNet"
 }
 declare const theme: {
     components: {
@@ -3306,6 +3309,7 @@ declare const theme: {
                         backgroundColor: string;
                         boxShadow: string;
                     };
+                    card: {};
                 };
             } | undefined;
             defaultProps?: {
@@ -8685,16 +8689,21 @@ declare const brandTheme: {
     VyDigital: {};
     VyUtvikling: {
         colors: {
-            accent: {
-                surface: {
-                    default: {
-                        light: string;
-                        dark: string;
-                    };
+            bg: {
+                default: {
+                    dark: string;
+                };
+            };
+            surface: {
+                default: {
+                    dark: string;
                 };
             };
         };
     };
+    CargoNet: {
+        colors: any;
+    };
 };
 
 type BaseToastProps = {

package/dist/index.d.ts

@@ -657,8 +657,6 @@ type CardSelectProps = BoxProps & {
     defaultOpen?: boolean;
     /** Callback for when the card select opens or closes. */
     onToggle?: (isOpen: boolean) => void;
-    /** The text of the trigger button */
-    label: string;
     /** An optional trigger button icon, rendered to the left of the label */
     icon?: React.ReactNode;
     /** The content of the card select */
@@ -669,7 +667,11 @@ type CardSelectProps = BoxProps & {
     placement?: AriaPositionProps["placement"];
     /** Whether or not to show the chevron. Defaults to true */
     withChevron?: boolean;
-};
+} & ({
+    label: string;
+} | {
+    "aria-label": string;
+});
 /**
  * A card select component.
  *
@@ -2127,7 +2129,8 @@ declare const fontFaces: string;
 
 declare enum Brand {
     VyDigital = "VyDigital",
-    VyUtvikling = "VyUtvikling"
+    VyUtvikling = "VyUtvikling",
+    CargoNet = "CargoNet"
 }
 declare const theme: {
     components: {
@@ -3306,6 +3309,7 @@ declare const theme: {
                         backgroundColor: string;
                         boxShadow: string;
                     };
+                    card: {};
                 };
             } | undefined;
             defaultProps?: {
@@ -8685,16 +8689,21 @@ declare const brandTheme: {
     VyDigital: {};
     VyUtvikling: {
         colors: {
-            accent: {
-                surface: {
-                    default: {
-                        light: string;
-                        dark: string;
-                    };
+            bg: {
+                default: {
+                    dark: string;
+                };
+            };
+            surface: {
+                default: {
+                    dark: string;
                 };
             };
         };
     };
+    CargoNet: {
+        colors: any;
+    };
 };
 
 type BaseToastProps = {

package/dist/index.js

@@ -2247,7 +2247,6 @@ var init_CardSelect = __esm({
         isOpen: externalIsOpen,
         defaultOpen = false,
         onToggle,
-        label,
         icon,
         children,
         width = "fit-content",
@@ -2256,6 +2255,7 @@ var init_CardSelect = __esm({
         withChevron = true,
         ...props
       }, externalRef) => {
+        const label = "label" in props ? props.label : props["aria-label"];
         const internalRef = React69.useRef(null);
         const triggerRef = externalRef ?? internalRef;
         const state2 = reactStately.useOverlayTriggerState({
@@ -2281,11 +2281,12 @@ var init_CardSelect = __esm({
             type: "button",
             ref: triggerRef,
             sx: styles3.trigger,
+            "aria-label": label,
             ...buttonProps,
             width,
             "data-attachable": true
           },
-          /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React69__namespace.default.createElement(
+          /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React69__namespace.default.createElement(
             ChevronIcon,
             {
               transform: state2.isOpen ? "rotate(180deg)" : "none"
@@ -11793,8 +11794,8 @@ var spacing2, space2;
 var init_spacing = __esm({
   "src/theme/foundations/spacing.ts"() {
     spacing2 = Object.entries(tokens10__namespace.default.size.spacing).reduce(
-      (tokens14, [key, token]) => ({
-        ...tokens14,
+      (tokens15, [key, token]) => ({
+        ...tokens15,
         [Number(key)]: token
       }),
       {}
@@ -12078,7 +12079,7 @@ var init_card2 = __esm({
             ...baseBorder("default", props),
             backgroundColor: themeTools.mode(
               "white",
-              `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`
+              `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
             )(props),
             color: "inherit"
           };
@@ -12109,7 +12110,7 @@ var init_card2 = __esm({
           return {
             backgroundColor: themeTools.mode(
               "white",
-              `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`
+              `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
             )(props),
             ...floatingBorder("hover", props)
           };
@@ -12130,7 +12131,7 @@ var init_card2 = __esm({
       switch (colorScheme) {
         case "white":
           return {
-            backgroundColor: themeTools.mode("mint", "teal")(props),
+            backgroundColor: themeTools.mode("bg.tertiary.light", `bg.default.dark`)(props),
             ...floatingBorder("active", props)
           };
         case "grey":
@@ -12147,8 +12148,6 @@ var init_card2 = __esm({
     };
   }
 });
-
-// src/theme/components/card-select.ts
 var parts3, helpers4, config9, card_select_default;
 var init_card_select = __esm({
   "src/theme/components/card-select.ts"() {
@@ -12175,7 +12174,10 @@ var init_card_select = __esm({
           boxShadow: "md",
           padding: 3,
           ...baseText("default", props),
-          ...floatingBackground("default", props)
+          backgroundColor: themeTools.mode(
+            "white",
+            `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
+          )(props)
         }
       }),
       variants: {
@@ -12224,7 +12226,8 @@ var init_card_select = __esm({
             _expanded: {
               ...floatingBackground("active", props)
             }
-          }
+          },
+          card: {}
         })
       },
       sizes: {
@@ -13675,7 +13678,6 @@ var init_line_icon = __esm({
 var config24, link_default;
 var init_link2 = __esm({
   "src/theme/components/link.ts"() {
-    init_accent_utils();
     init_base_utils();
     init_brand_utils();
     init_focus_utils();
@@ -13712,7 +13714,7 @@ var init_link2 = __esm({
       }),
       variants: {
         primary: (props) => ({
-          ...accentText("default", props),
+          ...baseText("default", props),
           _hover: {
             ...brandText("hover", props),
             ...brandBackground("hover", props)
@@ -15104,8 +15106,6 @@ var init_font_faces = __esm({
 `;
   }
 });
-
-// src/theme/index.ts
 exports.Brand = void 0; exports.theme = void 0; exports.brandTheme = void 0;
 var init_theme = __esm({
   "src/theme/index.ts"() {
@@ -15116,6 +15116,7 @@ var init_theme = __esm({
     exports.Brand = /* @__PURE__ */ ((Brand2) => {
       Brand2["VyDigital"] = "VyDigital";
       Brand2["VyUtvikling"] = "VyUtvikling";
+      Brand2["CargoNet"] = "CargoNet";
       return Brand2;
     })(exports.Brand || {});
     exports.theme = {
@@ -15130,15 +15131,20 @@ var init_theme = __esm({
       ["VyDigital" /* VyDigital */]: {},
       ["VyUtvikling" /* VyUtvikling */]: {
         colors: {
-          accent: {
-            surface: {
-              default: {
-                light: colors2.seaMist,
-                dark: colors2.darkGrey
-              }
+          bg: {
+            default: {
+              dark: colors2.darkGrey
+            }
+          },
+          surface: {
+            default: {
+              dark: colors2.darkGrey
             }
           }
         }
+      },
+      ["CargoNet" /* CargoNet */]: {
+        colors: tokens10__namespace.default.color.cargonet
       }
     };
   }

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-FTQF5IX2.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-VLNBMJ7I.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.0.3",
+  "version": "9.2.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/CardSelect.tsx

@@ -33,8 +33,6 @@ type CardSelectProps = BoxProps & {
   defaultOpen?: boolean;
   /** Callback for when the card select opens or closes. */
   onToggle?: (isOpen: boolean) => void;
-  /** The text of the trigger button */
-  label: string;
   /** An optional trigger button icon, rendered to the left of the label */
   icon?: React.ReactNode;
   /** The content of the card select */
@@ -45,7 +43,7 @@ type CardSelectProps = BoxProps & {
   placement?: AriaPositionProps["placement"];
   /** Whether or not to show the chevron. Defaults to true */
   withChevron?: boolean;
-};
+} & ({ label: string } | { "aria-label": string });
 
 /**
  * A card select component.
@@ -69,7 +67,6 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
       isOpen: externalIsOpen,
       defaultOpen = false,
       onToggle,
-      label,
       icon,
       children,
       width = "fit-content",
@@ -80,6 +77,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
     },
     externalRef,
   ) => {
+    const label = "label" in props ? props.label : props["aria-label"];
     const internalRef = useRef<HTMLButtonElement>(null);
     const triggerRef = (externalRef ??
       internalRef) as React.RefObject<HTMLButtonElement>;
@@ -112,13 +110,16 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
           type="button"
           ref={triggerRef}
           sx={styles.trigger}
+          aria-label={label}
           {...buttonProps}
           width={width}
           data-attachable
         >
           <Flex gap={1.5} alignItems="center">
             {icon}
-            <Box as="span">{label}</Box>
+            <Box as="span" display={props["aria-label"] ? "none" : "inline"}>
+              {label}
+            </Box>
             {withChevron ? (
               <ChevronIcon
                 transform={state.isOpen ? "rotate(180deg)" : "none"}

package/src/theme/components/card-select.ts

@@ -1,5 +1,6 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import { mode } from "@chakra-ui/theme-tools";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
@@ -23,7 +24,10 @@ const config = helpers.defineMultiStyleConfig({
       boxShadow: "md",
       padding: 3,
       ...baseText("default", props),
-      ...floatingBackground("default", props),
+      backgroundColor: mode(
+        "white",
+        `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
+      )(props),
     },
   }),
   variants: {
@@ -73,6 +77,7 @@ const config = helpers.defineMultiStyleConfig({
           ...floatingBackground("active", props),
         },
       },
+      card: {},
     }),
   },
   sizes: {

package/src/theme/components/card.ts

@@ -85,7 +85,7 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
         ...baseBorder("default", props),
         backgroundColor: mode(
           "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-surface-default-dark))`,
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
         )(props),
         color: "inherit",
       };
@@ -134,7 +134,7 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
       return {
         backgroundColor: mode(
           "white",
-          `color-mix(in srgb, white 20%, var(--spor-colors-surface-default-dark))`,
+          `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
         )(props),
         ...floatingBorder("hover", props),
       };
@@ -154,7 +154,7 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: mode("mint", "teal")(props),
+        backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
         ...floatingBorder("active", props),
       };
     case "grey":

package/src/theme/components/link.ts

@@ -1,6 +1,5 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
-import { accentText } from "../utils/accent-utils";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { brandBackground, brandText } from "../utils/brand-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
@@ -41,7 +40,7 @@ const config = defineStyleConfig({
   }),
   variants: {
     primary: (props) => ({
-      ...accentText("default", props),
+      ...baseText("default", props),
       _hover: {
         ...brandText("hover", props),
         ...brandBackground("hover", props),

package/src/theme/index.ts

@@ -1,10 +1,12 @@
 import { theme as defaultTheme } from "@chakra-ui/theme";
+import tokens from "@vygruppen/spor-design-tokens";
 import * as components from "./components";
 import * as foundations from "./foundations";
 
 export enum Brand {
   VyDigital = "VyDigital",
   VyUtvikling = "VyUtvikling",
+  CargoNet = "CargoNet",
 }
 
 export const theme = {
@@ -20,16 +22,21 @@ export const brandTheme = {
   [Brand.VyDigital]: {},
   [Brand.VyUtvikling]: {
     colors: {
-      accent: {
-        surface: {
-          default: {
-            light: foundations.colors.seaMist,
-            dark: foundations.colors.darkGrey,
-          },
+      bg: {
+        default: {
+          dark: foundations.colors.darkGrey,
+        },
+      },
+      surface: {
+        default: {
+          dark: foundations.colors.darkGrey,
         },
       },
     },
   },
+  [Brand.CargoNet]: {
+    colors: tokens.color.cargonet as any,
+  },
 };
 
 export { fontFaces } from "./font-faces";