@vygruppen/spor-react 2.2.0 → 2.3.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, 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, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, 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, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-2KP5MQG7.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Container, ContentLoader, Counter, 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, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Item as SelectItem, SelectItemDescription, SelectItemLabel, 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, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-NYC3Z75S.mjs';

package/package.json

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

package/src/datepicker/CalendarGrid.tsx

@@ -6,6 +6,7 @@ import { Language, useTranslation } from "../i18n";
 import { Text } from "../typography";
 import { CalendarCell } from "./CalendarCell";
 import { useCurrentLocale } from "./utils";
+import { useMultiStyleConfig } from "@chakra-ui/react";
 
 const weekDays: Record<Language, string[]> = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "Lø", "Sø"],
@@ -34,21 +35,24 @@ export function CalendarGrid({ state, offset = {} }: CalendarGridProps) {
   // Get the number of weeks in the month so we can render the proper number of rows.
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
+  const styles = useMultiStyleConfig("Datepicker", {});
 
   return (
     <table {...gridProps}>
       <thead {...headerProps}>
         <tr>
-          {weekDays[language].map((day, index) => (
-            <Text
-              as="th"
-              key={index}
-              color={index < 5 ? "darkGrey" : "greenHaze"}
-              variant="sm"
-            >
-              {day}
-            </Text>
-          ))}
+          {weekDays[language].map((day, index) => {
+            return (
+              <Text
+                as="th"
+                key={index}
+                sx={index < 5 ? styles.weekdays : styles.weekend}
+                variant="sm"
+              >
+                {day}
+              </Text>
+            );
+          })}
         </tr>
       </thead>
       <tbody>

package/src/datepicker/DatePicker.tsx

@@ -11,6 +11,7 @@ import {
   ResponsiveValue,
   useBreakpointValue,
   useFormControlContext,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
 import { useDatePickerState } from "@react-stately/datepicker";
@@ -87,6 +88,8 @@ export function DatePicker({
 
   const hasTrigger = responsiveVariant === "with-trigger";
 
+  const styles = useMultiStyleConfig("Datepicker", {});
+
   return (
     <I18nProvider locale={locale}>
       <Box position="relative" display="inline-flex" flexDirection="column">
@@ -132,11 +135,11 @@ export function DatePicker({
           {state.isOpen && !props.isDisabled && (
             <Portal>
               <PopoverContent
-                backgroundColor="white"
                 color="darkGrey"
                 boxShadow="md"
+                sx={styles.calendar}
               >
-                <PopoverArrow backgroundColor="white" />
+                <PopoverArrow sx={styles.arrow} />
                 <PopoverBody>
                   <Calendar
                     {...calendarProps}

package/src/datepicker/DateRangePicker.tsx

@@ -152,12 +152,11 @@ export function DateRangePicker({
           {state.isOpen && (
             <Portal>
               <PopoverContent
-                backgroundColor="white"
-                color="darkGrey"
+                sx={styles.calendar}
                 boxShadow="md"
                 maxWidth="none"
               >
-                <PopoverArrow backgroundColor="white" />
+                <PopoverArrow sx={styles.arrow} />
                 <PopoverBody>
                   <RangeCalendar {...calendarProps} />
                 </PopoverBody>

package/src/datepicker/DateTimeSegment.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/react";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useRef } from "react";
 import { useDateSegment } from "react-aria";
 import { DateFieldState, DateSegment } from "react-stately";
@@ -18,6 +18,12 @@ export const DateTimeSegment = ({ segment, state }: DateTimeSegmentProps) => {
   const ref = useRef(null);
 
   const { segmentProps } = useDateSegment(segment, state, ref);
+
+  const styles = useMultiStyleConfig("Datepicker", {
+    isPlaceholder: segment.isPlaceholder,
+    isEditable: segment.isEditable,
+  });
+
   return (
     <Box
       {...segmentProps}
@@ -32,13 +38,7 @@ export const DateTimeSegment = ({ segment, state }: DateTimeSegmentProps) => {
       outline="none"
       borderRadius="xs"
       fontSize="mobile.md"
-      color={
-        segment.isPlaceholder
-          ? "dimGrey"
-          : segment.isEditable
-          ? "darkGrey"
-          : "osloGrey"
-      }
+      sx={styles.dateTimeSegment}
       _focus={{
         backgroundColor: "darkTeal",
         color: "white",

package/src/input/Counter.tsx

@@ -0,0 +1,238 @@
+import {
+  chakra,
+  useColorModeValue,
+  useControllableState,
+  useFormControl,
+} from "@chakra-ui/react";
+import React from "react";
+import {
+  Box,
+  BoxProps,
+  Flex,
+  IconButton,
+  createTexts,
+  useTranslation,
+} from "..";
+import { getBoxShadowString } from "../theme/utils/box-shadow-utils";
+import { focusVisible } from "../theme/utils/focus-utils";
+
+type CounterProps = {
+  /** The name of the input field */
+  name?: string;
+  /** The current value */
+  value?: number;
+  /** A default value, if uncontrolled */
+  defaultValue?: number;
+  /** Callback for when the value changes */
+  onChange?: (value: number) => void;
+  /** Optional minimum value. Defaults to 0 */
+  minValue?: number;
+  /** Optional maximum value. Defaults to 99 */
+  maxValue?: number;
+  /** Whether the counter is disabled or not */
+  isDisabled?: boolean;
+} & BoxProps;
+/** A simple counter component
+ *
+ * Allows you to choose a given integer value, like for example the number of
+ * adults on your journey.
+ *
+ * ```tsx
+ * <Counter value={value} onChange={setValue} />
+ * ```
+ *
+ * You can also set a minimum and/or maximum value:
+ *
+ * ```tsx
+ * <Counter value={value} onChange={setValue} minValue={1} maxValue={10} />
+ * ```
+ *
+ * You can use the Counter inside of a FormControl component to get IDs etc linked up automatically:
+ *
+ * ```tsx
+ * <FormControl>
+ *   <FormLabel>Number of adults</FormLabel>
+ *   <Counter />
+ * </FormControl>
+ * ```
+ */
+export function Counter({
+  name: nameProp,
+  id: idProp,
+  value: valueProp,
+  defaultValue = 1,
+  onChange: onChangeProp,
+  minValue = 0,
+  maxValue = 99,
+  isDisabled,
+  ...boxProps
+}: CounterProps) {
+  const { t } = useTranslation();
+  const [value, onChange] = useControllableState<number>({
+    value: valueProp,
+    onChange: onChangeProp,
+    defaultValue,
+  });
+  const formControlProps = useFormControl({ id: idProp, isDisabled });
+  const textColor = useColorModeValue("darkGrey", "white");
+  const backgroundColor = useColorModeValue("white", "darkGrey");
+  const focusColor = useColorModeValue("greenHaze", "azure");
+
+  return (
+    <Flex alignItems="center" {...boxProps}>
+      <VerySmallButton
+        icon={<SubtractIcon color="white" />}
+        aria-label={t(texts.decrementButtonAriaLabel)}
+        onClick={() => onChange(value - 1)}
+        visibility={value <= minValue ? "hidden" : "visible"}
+        isDisabled={formControlProps.disabled}
+      />
+      <chakra.input
+        type="number"
+        min={minValue}
+        max={maxValue}
+        name={nameProp}
+        value={value}
+        {...formControlProps}
+        fontSize="sm"
+        fontWeight="bold"
+        width="3ch"
+        marginX={1}
+        paddingX={1}
+        borderRadius="xs"
+        textAlign="center"
+        backgroundColor={backgroundColor}
+        color={textColor}
+        transition="all .1s ease-out"
+        _hover={{
+          boxShadow: getBoxShadowString({
+            borderColor: "currentColor",
+            borderWidth: 1,
+          }),
+          _disabled: {
+            boxShadow: "none",
+          },
+        }}
+        _disabled={{
+          opacity: 0.5,
+        }}
+        _focus={{
+          outline: "none",
+          boxShadow: getBoxShadowString({
+            borderColor: focusColor,
+            borderWidth: 1,
+          }),
+        }}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          const numericInput = Number(e.target.value);
+          if (Number.isNaN(numericInput)) {
+            return;
+          }
+          onChange(numericInput);
+        }}
+      />
+      <VerySmallButton
+        icon={<AddIcon color="white" />}
+        aria-label={t(texts.incrementButtonAriaLabel)}
+        onClick={() => onChange(value + 1)}
+        visibility={value >= maxValue ? "hidden" : "visible"}
+        isDisabled={formControlProps.disabled}
+      />
+    </Flex>
+  );
+}
+
+type VerySmallButtonProps = {
+  /** The icon to render */
+  icon: React.ReactElement;
+  /** Accessible label for the icon */
+  "aria-label": string;
+  /** Callback for when the button is clicked */
+  onClick: () => void;
+  /** Whether or not the button is hidden */
+  visibility?: "visible" | "hidden";
+  /** Whether or not the button is disabled */
+  isDisabled?: boolean;
+};
+/** Internal override for extra small icon buttons */
+const VerySmallButton = (props: VerySmallButtonProps) => {
+  return (
+    <IconButton
+      variant="primary"
+      size="xs"
+      minWidth="24px"
+      minHeight="24px"
+      sx={focusVisible({
+        notFocus: { boxShadow: "none" },
+        focus: {
+          boxShadow:
+            "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
+        },
+      })}
+      {...props}
+    />
+  );
+};
+
+const SubtractIcon = (props: BoxProps) => (
+  <Box
+    as="svg"
+    viewBox="0 0 30 30"
+    width="24"
+    height="24"
+    stroke="currentColor"
+    {...props}
+  >
+    <line
+      x1="9"
+      y1="15"
+      x2="21"
+      y2="15"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </Box>
+);
+
+const AddIcon = (props: BoxProps) => (
+  <Box
+    as="svg"
+    viewBox="0 0 30 30"
+    width="24"
+    height="24"
+    stroke="currentColor"
+    {...props}
+  >
+    <line
+      x1="9"
+      y1="15"
+      x2="21"
+      y2="15"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <line
+      x1="15"
+      y1="9"
+      x2="15"
+      y2="21"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </Box>
+);
+
+const texts = createTexts({
+  decrementButtonAriaLabel: {
+    nb: "Trekk fra 1",
+    en: "Subtract 1",
+    nn: "Trekk frå 1",
+    sv: "Subtrahera 1",
+  },
+  incrementButtonAriaLabel: {
+    nb: "Legg til 1",
+    en: "Add 1",
+    nn: "Legg til 1",
+    sv: "Lägg till 1",
+  },
+});

package/src/input/PhoneNumberInput.tsx

@@ -84,15 +84,18 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
         </Suspense>
         <Input
           ref={ref}
+          type="tel"
           label={t(texts.phoneNumber)}
           value={value.nationalNumber}
           name={name ? `${name}-phone-number` : "phone-number"}
-          onChange={(e) =>
+          onChange={(e) => {
+            // Removes everything but numbers, spaces and dashes
+            const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
             onChange({
               countryCode: value.countryCode,
-              nationalNumber: e.target.value,
-            })
-          }
+              nationalNumber: strippedValue,
+            });
+          }}
           position="relative"
           left="-1px" // Makes the borders overlap
         />

package/src/input/index.tsx

@@ -5,6 +5,7 @@ export * from "./CardSelect";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChoiceChip";
+export * from "./Counter";
 export * from "./FormControl";
 export * from "./FormErrorMessage";
 export * from "./FormLabel";

package/src/theme/components/button.ts

@@ -96,14 +96,14 @@ const config = defineStyleConfig({
         backgroundColor: "lightGrey",
       },
     },
-    additional: ({ colorMode }) => ({
+    additional: (props) => ({
       backgroundColor: "transparent",
-      color: mode("darkGrey", "white")({ colorMode }),
+      color: mode("darkGrey", "white")(props),
       fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
         colors.blackAlpha[400],
         colors.whiteAlpha[400]
-      )({ colorMode })}`,
+      )(props)}`,
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
@@ -115,7 +115,7 @@ const config = defineStyleConfig({
           boxShadow: `inset 0 0 0 1px ${mode(
             colors.blackAlpha[400],
             colors.whiteAlpha[400]
-          )({ colorMode })}`,
+          )(props)}`,
         },
       }),
       _hover: {
@@ -125,18 +125,18 @@ const config = defineStyleConfig({
         boxShadow: `inset 0 0 0 1px ${mode(
           colors.blackAlpha[400],
           colors.whiteAlpha[300]
-        )({ colorMode })}`,
-        backgroundColor: mode("mint", colors.whiteAlpha[300])({ colorMode }),
+        )(props)}`,
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
       },
     }),
-    ghost: () => ({
+    ghost: (props) => ({
       backgroundColor: "transparent",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       fontWeight: "normal",
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
           }),
         },
@@ -145,13 +145,13 @@ const config = defineStyleConfig({
         },
       }),
       _hover: {
-        backgroundColor: "seaMist",
+        backgroundColor: mode("seaMist", "pine")(props),
         _disabled: {
           color: "blackAlpha.300",
         },
       },
       _active: {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "whiteAlpha.300")(props),
       },
     }),
     floating: {

package/src/theme/components/datepicker.ts

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy } from "@chakra-ui/theme-tools";
+import { anatomy, cssVar, mode } from "@chakra-ui/theme-tools";
 import { colors, zIndices } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
@@ -7,18 +7,25 @@ import { focusVisible } from "../utils/focus-utils";
 const parts = anatomy("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
+  "arrow",
+  "calendar",
+  "weekdays",
+  "weekend",
   "dateCell",
-  "inputLabel"
+  "inputLabel",
+  "dateTimeSegment"
 );
 
+const $arrowBackground = cssVar("popper-arrow-bg");
+
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     wrapper: {
-      backgroundColor: "white",
+      backgroundColor: mode("white", "night")(props),
       boxShadow: getBoxShadowString({
-        borderColor: colors.blackAlpha["400"],
+        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
       }),
       transitionProperty: "box-shadow",
       transitionDuration: "fast",
@@ -28,14 +35,14 @@ const config = helpers.defineMultiStyleConfig({
       alignItems: "center",
       _hover: {
         boxShadow: getBoxShadowString({
-          borderColor: "darkGrey",
+          borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2,
         }),
         zIndex: zIndices.docked,
       },
       _focusWithin: {
         boxShadow: getBoxShadowString({
-          borderColor: "greenHaze",
+          borderColor: mode("greenHaze", "azure")(props),
           borderWidth: 2,
         }),
       },
@@ -48,12 +55,12 @@ const config = helpers.defineMultiStyleConfig({
       _disabled: {
         pointerEvents: "none",
         boxShadow: getBoxShadowString({
-          borderColor: "osloGrey",
+          borderColor: mode("osloGrey", "whiteAlpha.400")(props),
           borderWidth: 1,
         }),
         _focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "osloGrey",
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
             borderWidth: 1,
           }),
         },
@@ -61,13 +68,20 @@ const config = helpers.defineMultiStyleConfig({
     },
     inputLabel: {
       fontSize: "mobile.xs",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       margin: 0,
     },
+    dateTimeSegment: {
+      color: mode(
+        props.isPlaceholder ? "dimGrey" : props.isEditable ? "darkGrey" : "osloGrey", 
+        props.isPlaceholder ? "whiteAlpha.400" : "white"
+      )(props),
+    },
     calendarTriggerButton: {
+      backgroundColor: mode("white", "night")(props),
       boxShadow: `${getBoxShadowString({
-        borderColor: colors.blackAlpha["400"],
-      })}, inset 1px 0 0 1px white`, // to make the shadow colors not multiply
+        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      })}, inset 1px 0 0 1px ${mode("white", colors.night)(props)}`, // to make the shadow colors not multiply
       width: 8,
       display: "flex",
       alignItems: "center",
@@ -80,24 +94,24 @@ const config = helpers.defineMultiStyleConfig({
 
       _hover: {
         boxShadow: `${getBoxShadowString({
-          borderColor: "darkGrey",
+          borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2,
-        })}, inset 2px 0 0 2px white`,
+        })}, inset 2px 0 0 2px ${mode("white", colors.night)(props)}`,
       },
       _active: {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "azure")(props),
       },
       ...focusVisible({
         focus: {
           outline: "none",
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
           }),
         },
         notFocus: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 1,
           }),
         },
@@ -109,9 +123,22 @@ const config = helpers.defineMultiStyleConfig({
         }),
       },
     },
+    arrow: {
+      [$arrowBackground.variable]: mode("white", colors.night)(props)
+    },
+    calendar: {
+      backgroundColor: mode("white", "night")(props),
+      color: mode("darkGrey", "white")(props)
+    },
+    weekdays: {
+      color: mode("darkGrey", "white")(props),
+    },
+    weekend: {
+      color: mode("greenHaze", "azure")(props),
+    },
     dateCell: {
-      backgroundColor: "white",
-      color: "darkGrey",
+      backgroundColor: mode("white", "night")(props),
+      color: mode("darkGrey", "white")(props),
       borderRadius: "50%",
       position: "relative",
       transition: ".1s ease-in-out",
@@ -122,14 +149,14 @@ const config = helpers.defineMultiStyleConfig({
       transitionSpeed: "fast",
 
       _hover: {
-        backgroundColor: "seaMist",
+        backgroundColor: mode("seaMist", "pine")(props),
       },
       ...focusVisible({
         focus: {
           outline: "none",
           boxShadow: getBoxShadowString({
             borderWidth: 2,
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
           }),
         },
         notFocus: {
@@ -141,14 +168,14 @@ const config = helpers.defineMultiStyleConfig({
             }),
           },
           _active: {
-            color: "darkGrey",
+            color: mode("darkGrey", "white")(props),
           },
         },
       }),
       _active: {
         backgroundColor: "seaMist",
         boxShadow: "none",
-        color: "darkGrey",
+        color: mode("darkGrey", "white")(props),
       },
       _disabled: {
         color: "osloGrey",
@@ -156,7 +183,7 @@ const config = helpers.defineMultiStyleConfig({
         pointerEvents: "none",
       },
       _selected: {
-        backgroundColor: "darkTeal",
+        backgroundColor: mode("darkTeal", "pine")(props),
         color: "white",
         _active: {
           backgroundColor: "seaMist",
@@ -167,7 +194,7 @@ const config = helpers.defineMultiStyleConfig({
       "&[data-today]": {
         boxShadow: getBoxShadowString({
           borderWidth: 1,
-          borderColor: "osloGrey",
+          borderColor: mode("osloGrey", "dimGrey")(props),
         }),
       },
       "&[data-unavailable]": {
@@ -175,7 +202,7 @@ const config = helpers.defineMultiStyleConfig({
         color: "osloGrey",
       },
     },
-  },
+  }),
   variants: {
     simple: {
       wrapper: {