@vygruppen/spor-react 5.2.0 → 5.4.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-HOS74XL2.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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-S2IJI3LY.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -26,6 +26,7 @@
     "@vygruppen/spor-icon-react": "*",
     "@vygruppen/spor-loader": "*",
     "awesome-phonenumber": "^5.10.0",
+    "deepmerge": "^4.3.1",
     "framer-motion": "^9.1.7",
     "lottie-react": "^2.3.1",
     "react-aria": "^3.30.0",

package/src/datepicker/DateRangePicker.tsx

@@ -40,10 +40,12 @@ type DateRangePickerProps = Omit<
     endName?: string;
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
-    onChange?: (dates: {
-      start: DateValue | null;
-      end: DateValue | null;
-    }) => void;
+    onChange?: (
+      dates: {
+        start: DateValue | null;
+        end: DateValue | null;
+      } | null,
+    ) => void;
   };
 /**
  * A date range picker component.

package/src/index.tsx

@@ -17,6 +17,7 @@ export * from "./logo";
 export * from "./media-controller";
 export * from "./modal";
 export * from "./popover";
+export * from "./progress-indicator";
 export * from "./provider";
 export * from "./stepper";
 export * from "./tab";

package/src/input/CardSelect.tsx

@@ -59,6 +59,7 @@ type CardSelectProps = BoxProps & {
  * ```
  *
  * @see https://spor.vy.no/components/card-select
+ *
  */
 export const CardSelect = forwardRef<CardSelectProps, "button">(
   (
@@ -96,7 +97,10 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
 
     const { buttonProps } = useButton(triggerProps, triggerRef);
 
-    const styles = useMultiStyleConfig("CardSelect", { variant, size });
+    const styles = useMultiStyleConfig("CardSelect", {
+      variant,
+      size,
+    });
     useForceRerender(state.isOpen);
 
     const ChevronIcon =

package/src/input/InfoSelect.tsx

@@ -113,6 +113,7 @@ type InfoSelectProps<T extends object> = {
   disabledKeys?: string[];
   /** Whether or not the input is invalid */
   "aria-invalid"?: boolean;
+  variant?: "base" | "floating";
 };
 /**
  * A styled select component.
@@ -157,6 +158,7 @@ export function InfoSelect<T extends object>({
   value,
   isLabelSrOnly,
   defaultValue,
+  variant = "base",
   ...props
 }: InfoSelectProps<T>) {
   const renamedProps = {
@@ -174,9 +176,13 @@ export function InfoSelect<T extends object>({
     triggerRef,
   );
 
+  const stateStyle = "completed";
+
   const styles = useMultiStyleConfig("InfoSelect", {
     isOpen: state.isOpen,
     isLabelSrOnly,
+    variant,
+    stateStyle,
   });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t } = useTranslation();

package/src/progress-indicator/ProgressDot.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box } from "..";
+import { useMultiStyleConfig } from "@chakra-ui/react";
+
+type ProgressDot = {
+  isActive: boolean;
+};
+
+export const ProgressDot = ({ isActive }: ProgressDot) => {
+  const style = useMultiStyleConfig("ProgressIndicator");
+  return (
+    <Box
+      as="svg"
+      display="block"
+      __css={style.progressDot}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      aria-current={isActive ? "step" : undefined}
+    >
+      <Box as="circle" cx="50" cy="50" r="50" />
+    </Box>
+  );
+};

package/src/progress-indicator/ProgressIndicator.tsx

@@ -0,0 +1,56 @@
+import { useMultiStyleConfig } from "@chakra-ui/react";
+import React from "react";
+import { Box, createTexts, useTranslation } from "..";
+import { ProgressDot } from "./ProgressDot";
+
+type ProgressIndicatorProps = {
+  numberOfSteps: number;
+  activeStep: number;
+};
+
+/**
+ * A progress indicator is used to show which step of a process a user is currently in
+ * to give them a sense of progress.
+ *
+ * You specify the active step, which starts at 1 (not 0)
+ *
+ * ```tsx
+ * <ProgressIndicator
+ *  numberOfSteps={3}
+ *  activeStep={2}
+ * />
+ * ```
+ */
+export const ProgressIndicator = ({
+  numberOfSteps,
+  activeStep,
+}: ProgressIndicatorProps) => {
+  const { t } = useTranslation();
+  const style = useMultiStyleConfig("ProgressIndicator");
+
+  return (
+    <Box
+      __css={style.root}
+      role="progressbar"
+      aria-valuemin={1}
+      aria-valuemax={numberOfSteps}
+      aria-valuenow={activeStep}
+      aria-valuetext={t(texts.stepsOf(activeStep, numberOfSteps))}
+    >
+      <Box __css={style.container}>
+        {Array.from({ length: numberOfSteps }, (_, i) => (
+          <ProgressDot aria-value={i + 1} isActive={activeStep === i + 1} />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+const texts = createTexts({
+  stepsOf: (activeStep, numberOfSteps) => ({
+    nb: `Steg ${activeStep} av ${numberOfSteps}`,
+    nn: `Steg ${activeStep} av ${numberOfSteps}`,
+    sv: `Steg ${activeStep} av ${numberOfSteps}`,
+    en: `Step ${activeStep} of ${numberOfSteps}`,
+  }),
+});

package/src/progress-indicator/index.tsx

@@ -0,0 +1 @@
+export * from "./ProgressIndicator";

package/src/provider/SporProvider.tsx

@@ -1,11 +1,13 @@
 import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
 import { Global } from "@emotion/react";
+import deepmerge from "deepmerge";
 import React from "react";
 import { Language, LanguageProvider } from "..";
-import { theme as defaultSporTheme, fontFaces } from "../";
+import { Brand, brandTheme, theme as defaultSporTheme, fontFaces } from "../";
 
 type SporProviderProps = ChakraProviderProps & {
   language?: Language;
+  brand?: Brand;
 };
 
 /**
@@ -47,12 +49,17 @@ type SporProviderProps = ChakraProviderProps & {
 export const SporProvider = ({
   theme = defaultSporTheme,
   language = Language.NorwegianBokmal,
+  brand = Brand.VyDigital,
   children,
   ...props
 }: SporProviderProps) => {
+  const brandCustomizations = brandTheme[brand] ?? {};
+
+  const extendedTheme = deepmerge(theme, brandCustomizations);
+
   return (
     <LanguageProvider language={language}>
-      <ChakraProvider theme={theme} {...props}>
+      <ChakraProvider theme={extendedTheme} {...props}>
         <Global styles={fontFaces} />
         {children}
       </ChakraProvider>

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

@@ -1,8 +1,13 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
+import { StyleFunctionProps, mode } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import {
+  baseBackground,
+  floatingBackground,
+  ghostBackground,
+} from "../utils/background-utils";
 
 const parts = anatomy("card-select").parts("trigger", "card");
 
@@ -13,9 +18,6 @@ const config = helpers.defineMultiStyleConfig({
       appearance: "none",
       display: "flex",
       alignItems: "center",
-      _expanded: {
-        backgroundColor: mode("mint", "night")(props),
-      },
       ...focusVisible({
         notFocus: {},
         focus: {
@@ -31,20 +33,11 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       boxShadow: "md",
       padding: 3,
+      color: mode("darkGrey", "white")(props),
     },
   }),
   variants: {
-    ghost: (props) => ({
-      trigger: {
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
-        },
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props),
-        },
-      },
-    }),
-    outline: (props) => ({
+    base: (props) => ({
       trigger: {
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
@@ -66,20 +59,20 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props),
+          ...baseBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("darkGrey", "whiteAlpha.400")(props),
             borderWidth: 1,
           }),
         },
-
         _expanded: {
+          ...baseBackground("active", props),
           _hover: {
-            backgroundColor: mode("seaMist", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: "none",
           },
           _active: {
-            backgroundColor: mode("mint", "todo")(props),
+            ...baseBackground("active", props),
             boxShadow: getBoxShadowString({
               borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
               borderWidth: 1,
@@ -88,13 +81,26 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
     }),
-    card: (props) => ({
+    ghost: (props) => ({
+      trigger: {
+        _hover: {
+          ...ghostBackground("hover", props),
+        },
+        _active: {
+          ...ghostBackground("active", props),
+        },
+        _expanded: {
+          ...ghostBackground("selected", props),
+        },
+      },
+    }),
+    floating: (props) => ({
       trigger: {
-        backgroundColor: mode("transparent", "whiteAlpha.100")(props),
+        ...floatingBackground("default", props),
         boxShadow: "sm",
         transition: "all .1s ease-out",
         _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
+          ...floatingBackground("hover", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: 1,
@@ -102,7 +108,7 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
+          ...floatingBackground("active", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
             borderWidth: mode(0, 1)(props),
@@ -110,6 +116,7 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         _expanded: {
+          ...floatingBackground("active", props),
           _hover: {
             boxShadow: getBoxShadowString({
               borderColor: "darkGrey",
@@ -117,7 +124,7 @@ const config = helpers.defineMultiStyleConfig({
             }),
           },
           _active: {
-            backgroundColor: mode("mint", "whiteAlpha.200")(props),
+            ...floatingBackground("active", props),
             boxShadow: "none",
           },
         },

package/src/theme/components/index.ts

@@ -25,6 +25,7 @@ export { default as ListBox } from "./listbox";
 export { default as MediaControllerButton } from "./media-controller-button";
 export { default as Modal } from "./modal";
 export { default as Popover } from "./popover";
+export { default as ProgressIndicator } from "./progress-indicator";
 export { default as Radio } from "./radio";
 export { default as Select } from "./select";
 export { default as Skeleton } from "./skeleton";

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

@@ -2,8 +2,9 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { focusVisible } from "../utils/focus-utils";
 import { srOnly } from "../utils/sr-utils";
-import { baseBorder } from "../utils/border-utils";
-import { baseBackground } from "../utils/background-utils";
+import { baseBorder, floatingBorder } from "../utils/border-utils";
+import { baseBackground, floatingBackground } from "../utils/background-utils";
+import { PartsStyleInterpolation } from "@chakra-ui/styled-system";
 
 const parts = anatomy("InfoSelect").parts(
   "container",
@@ -55,7 +56,6 @@ const config = helpers.defineMultiStyleConfig({
         ...baseBorder("focus", props),
       },
       _expanded: {
-        ...baseBackground("active", props),
         ...baseBorder("focus", props),
       },
       _invalid: {
@@ -75,5 +75,34 @@ const config = helpers.defineMultiStyleConfig({
     },
     arrowIcon: {},
   }),
+  variants: {
+    base: (props) => ({}),
+    floating: (props) => ({
+      button: {
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        _hover: {
+          ...floatingBorder("hover", props),
+          ...floatingBackground("hover", props),
+        },
+        ...focusVisible({
+          focus: {
+            ...floatingBorder("focus", props),
+            outline: "none",
+          },
+          notFocus: {
+            ...floatingBorder("default", props),
+          },
+        }),
+        _active: {
+          ...floatingBorder("active", props),
+          ...floatingBackground("active", props),
+        },
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });
 export default config;

package/src/theme/components/listbox.ts

@@ -2,7 +2,8 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-import { baseBackground } from "../utils/background-utils";
+import { baseBackground, ghostBackground } from "../utils/background-utils";
+import { baseBorder } from "../utils/border-utils";
 
 const parts = anatomy("ListBox").parts(
   "container",
@@ -19,7 +20,7 @@ const config = helpers.defineMultiStyleConfig({
       // avoiding extra div by blending a transparent color into darkGrey for dark mode
       backgroundColor: mode(
         "white",
-        `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`,
+        `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`,
       )(props),
       boxShadow: "sm",
       overflowY: "auto",
@@ -36,21 +37,18 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       color: mode("darkGrey", "white")(props),
       cursor: "pointer",
-      _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
-        outline: "none",
-      },
+      outline: "none",
       _active: {
-        backgroundColor: mode("mint", "pine")(props),
-        outline: "none",
+        ...ghostBackground("active", props),
       },
       _focus: {
-        outline: "none",
-        backgroundColor: mode("seaMist", "pine")(props),
+        ...ghostBackground("focus", props),
+      },
+      _hover: {
+        ...ghostBackground("hover", props),
       },
       _selected: {
-        ...baseBackground("selected", props),
-        color: "white",
+        ...ghostBackground("selected", props),
       },
     },
     label: {},

package/src/theme/components/progress-indicator.ts

@@ -0,0 +1,45 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { anatomy, mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+
+const parts = anatomy("progress-indicator").parts(
+  "root",
+  "container",
+  "progressDot",
+);
+
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    root: {
+      width: "100%",
+    },
+    container: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      justifyContent: ["space-between", "center"],
+    },
+    progressDot: {
+      height: 1,
+      width: 1,
+      "&[aria-current='step']": {
+        circle: {
+          fill: mode("pine", "coralGreen")(props),
+        },
+      },
+      circle: {
+        fill: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      },
+    },
+  }),
+
+  variants: {
+    base: (props) => ({}),
+  },
+  defaultProps: {
+    variant: "base",
+  },
+});
+
+export default config;

package/src/theme/index.ts

@@ -2,6 +2,11 @@ import { theme as defaultTheme } from "@chakra-ui/theme";
 import * as components from "./components";
 import * as foundations from "./foundations";
 
+export enum Brand {
+  VyDigital = "VyDigital",
+  VyUtvikling = "VyUtvikling",
+}
+
 export const theme = {
   ...defaultTheme,
   ...foundations,
@@ -11,4 +16,17 @@ export const theme = {
   },
 };
 
+export const brandTheme = {
+  [Brand.VyDigital]: {
+    colors: {
+      accent: foundations.colors.night,
+    },
+  },
+  [Brand.VyUtvikling]: {
+    colors: {
+      accent: foundations.colors.darkGrey,
+    },
+  },
+};
+
 export { fontFaces } from "./font-faces";

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

@@ -1,14 +1,15 @@
 import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+import { colors } from "../foundations";
 
-type State =
-  | "default"
-  | "hover"
-  | "active"
-  | "focus"
-  | "selected"
-  | "invalid"
-  | "disabled";
-export function baseBackground(state: State, props: StyleFunctionProps) {
+type BaseBackgroundState = Subset<
+  State,
+  "default" | "active" | "selected" | "disabled"
+>;
+export function baseBackground(
+  state: BaseBackgroundState,
+  props: StyleFunctionProps,
+) {
   switch (state) {
     case "active":
       return {
@@ -16,13 +17,97 @@ export function baseBackground(state: State, props: StyleFunctionProps) {
       };
     case "selected":
       return {
-        backgroundColor: "pine",
+        backgroundColor: mode("pine", "coralGreen")(props),
       };
     case "disabled":
       return {
         backgroundColor: mode("silver", "whiteAlpha.100")(props),
       };
     default:
-      return {};
+      return {
+        backgroundColor: "transparent",
+      };
+  }
+}
+
+type GhostBackgroundState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+
+export function ghostBackground(
+  state: GhostBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "hover": {
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent",
+      };
+    case "selected": {
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent",
+      };
+  }
+}
+
+type FloatingBackgroundState = Subset<
+  State,
+  "default" | "hover" | "focus" | "active" | "selected"
+>;
+
+export function floatingBackground(
+  state: FloatingBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+      return {
+        backgroundColor: mode("mint", "pine")(props),
+      };
+    case "active":
+      return {
+        backgroundColor: mode(
+          "mint",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`,
+        )(props),
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`,
+        )(props),
+      };
+    case "focus":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`,
+        )(props),
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`,
+        )(props),
+      };
   }
 }