@vygruppen/spor-react 8.2.1 → 9.0.0

package/src/theme/components/index.ts

@@ -1,5 +1,6 @@
 export { default as Accordion } from "./accordion";
 export { default as Alert } from "./alert";
+export { default as AlertExpandable } from "./alert-expandable";
 export { default as Badge } from "./badge";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as Button } from "./button";
@@ -24,7 +25,9 @@ export { default as List } from "./list";
 export { default as ListBox } from "./listbox";
 export { default as MediaControllerButton } from "./media-controller-button";
 export { default as Modal } from "./modal";
+export { default as NumericStepper } from "./numeric-stepper";
 export { default as Popover } from "./popover";
+export { default as ProgressBar } from "./progress-bar";
 export { default as ProgressIndicator } from "./progress-indicator";
 export { default as Radio } from "./radio";
 export { default as Select } from "./select";
@@ -36,4 +39,3 @@ export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
 export { default as TravelTag } from "./travel-tag";
-export { default as AlertExpandable } from "./alert-expandable";

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

@@ -1,8 +1,8 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { baseBackground, floatingBackground } from "../utils/background-utils";
-import { baseBorder, floatingBorder } from "../utils/border-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 import { srOnly } from "../utils/sr-utils";
 
 const parts = anatomy("InfoSelect").parts(
@@ -37,19 +37,15 @@ const config = helpers.defineMultiStyleConfig({
       },
       ...focusVisibleStyles(props),
       _disabled: {
-        color: "whiteAlpha.400",
+        pointerEvents: "none",
+        ...baseText("disabled", props),
         ...baseBackground("disabled", props),
-        _hover: { ...baseBorder("disabled", props) },
-        _focus: { ...baseBorder("disabled", props) },
       },
       _active: {
         ...baseBackground("active", props),
       },
       _invalid: {
         ...baseBorder("invalid", props),
-        _hover: {
-          ...baseBorder("hover", props),
-        },
       },
     },
     arrowIcon: {},

package/src/theme/components/input.ts

@@ -1,8 +1,8 @@
 import { inputAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+import { surface } from "../utils/surface-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -13,7 +13,7 @@ const config = helpers.defineMultiStyleConfig({
       width: "100%",
       outline: "none",
       border: 0,
-      backgroundColor: mode("white", "darkGrey")(props),
+      ...baseBackground("default", props),
       borderRadius: "sm",
       transitionProperty: "common",
       transitionDuration: "fast",
@@ -22,43 +22,28 @@ const config = helpers.defineMultiStyleConfig({
       height: "54px",
       fontSize: "mobile.md",
 
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      }),
-      _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-        }),
-      },
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2,
-        }),
+        ...baseBorder("hover", props),
+      },
+      _active: {
+        ...baseBackground("active", props),
+        ...baseBorder("default", props),
       },
       _focusVisible: {
         ...focusVisibleStyles(props)._focusVisible,
-        outlineOffset: -2,
+        outlineOffset: 0,
       },
 
       _disabled: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-        }),
-        cursor: "not-allowed",
+        ...surface("disabled", props),
+        ...baseBorder("disabled", props),
+        pointerEvents: "none",
       },
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2,
-        }),
+        ...baseBorder("invalid", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2,
-          }),
+          ...baseBorder("hover", props),
         },
       },
       " + label": {
@@ -84,7 +69,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     group: {
       ":has(:disabled)": {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        ...baseText("disabled", props),
       },
     },
   }),

package/src/theme/components/link.ts

@@ -1,8 +1,9 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
-import { baseBackground, brandBackground } from "../utils/background-utils";
-import { baseText, brandText } from "../utils/text-utils";
+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";
 
 const config = defineStyleConfig({
   baseStyle: (props) => ({
@@ -40,7 +41,7 @@ const config = defineStyleConfig({
   }),
   variants: {
     primary: (props) => ({
-      ...brandText("default", props),
+      ...accentText("default", props),
       _hover: {
         ...brandText("hover", props),
         ...brandBackground("hover", props),
@@ -57,16 +58,15 @@ const config = defineStyleConfig({
       )(props)}, ${mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
       ...baseText("default", props),
       "&:focus, &:focus-visible, &:active, &:hover": {
-        outline: "solid",
-        outlineWidth: "1px",
+        outline: "1px solid",
       },
       ...baseBackground("default", props),
       _hover: {
-        outlineColor: mode("darkGrey", "white")(props),
+        ...baseBorder("hover", props), // TODO: This is also weird
         ...baseBackground("hover", props),
+        outlineWidth: 1,
       },
       _active: {
-        outlineColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
         ...baseBackground("active", props),
       },
     }),

package/src/theme/components/listbox.ts

@@ -1,8 +1,9 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
-import { colors } from "../foundations";
-import { ghostBackground } from "../utils/background-utils";
+import { baseBorder } from "../utils/base-utils";
+import { ghostBackground } from "../utils/ghost-utils";
+import { surface } from "../utils/surface-utils";
 
 const parts = anatomy("ListBox").parts(
   "container",
@@ -16,17 +17,14 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      // avoiding extra div by blending a transparent color into darkGrey for dark mode
-      backgroundColor: mode(
-        "white",
-        `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`,
-      )(props),
+      ...surface("default", props),
       boxShadow: "sm",
       overflowY: "auto",
       maxHeight: "50vh",
       width: "100%",
       listStyle: "none",
       borderBottomRadius: "sm",
+      ...baseBorder("default", props),
     },
     item: {
       paddingX: 2,

package/src/theme/components/media-controller-button.ts

@@ -1,6 +1,10 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { baseText } from "../utils/base-utils";
+import { brandBackground } from "../utils/brand-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
+import { surface } from "../utils/surface-utils";
 
 const parts = anatomy("media-controller-button").parts("container", "icon");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -19,7 +23,8 @@ const config = helpers.defineMultiStyleConfig({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "primaryGreen",
+      // The SVG icon color is set to the brand background color, due to how SVGs work
+      color: brandBackground("default", props).backgroundColor,
       ...focusVisibleStyles(props),
     },
     icon: {
@@ -30,51 +35,41 @@ const config = helpers.defineMultiStyleConfig({
     },
   }),
   variants: {
-    play: {
+    play: (props) => ({
       container: {
         padding: 0,
         _hover: {
-          color: "pine",
+          color: brandBackground("hover", props).backgroundColor,
         },
         _active: {
-          color: "greenHaze",
+          color: brandBackground("active", props).backgroundColor,
         },
 
         _disabled: {
-          color: "silver",
-          _hover: {
-            color: "silver",
-          },
-          _active: {
-            color: "silver",
-          },
+          pointerEvents: "none",
+          color: surface("disabled", props).backgroundColor,
         },
       },
-    },
-    jumpSkip: {
+    }),
+    jumpSkip: (props) => ({
       container: {
         _hover: {
-          backgroundColor: "seaMist",
+          ...ghostBackground("hover", props),
         },
         _active: {
-          backgroundColor: "mint",
+          ...ghostBackground("active", props),
         },
         _disabled: {
-          backgroundColor: "platinum",
-          color: "steel",
-          _hover: {
-            backgroundColor: "platinum",
-          },
-          _active: {
-            backgroundColor: "platinum",
-          },
+          pointerEvents: "none",
+          ...surface("disabled", props),
+          ...baseText("disabled", props),
         },
       },
       icon: {
         width: "0.71em",
         height: "0.71em",
       },
-    },
+    }),
   },
   sizes: {
     sm: {

package/src/theme/components/modal.ts

@@ -1,6 +1,8 @@
 import { modalAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode, type PartsStyleObject } from "@chakra-ui/theme-tools";
+import { type PartsStyleObject } from "@chakra-ui/theme-tools";
+import { baseText } from "../utils/base-utils";
+import { bg } from "../utils/bg-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -19,9 +21,9 @@ const config = helpers.defineMultiStyleConfig({
     },
     dialog: {
       borderRadius: "md",
-      background: mode("white", "pine")(props),
-      color: mode("inherit", "white")(props),
-      my: "3.75rem",
+      ...bg("default", props),
+      ...baseText("default", props),
+      marginY: "3.75rem",
       zIndex: "modal",
       maxHeight:
         props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined,
@@ -84,11 +86,11 @@ function getSize(value: string): PartsStyleObject<typeof parts> {
         "@supports(min-height: -webkit-fill-available)": {
           minHeight: "-webkit-fill-available",
         },
-        my: 0,
+        marginY: 0,
       },
     };
   }
   return {
-    dialog: { maxW: value },
+    dialog: { maxWidth: value },
   };
 }

package/src/theme/components/numeric-stepper.ts

@@ -0,0 +1,65 @@
+import { anatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+
+const parts = anatomy("NumericStepper").parts(
+  "container",
+  "button",
+  "text",
+  "input",
+);
+
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    container: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+    },
+    input: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 1,
+      paddingX: 1,
+      borderRadius: "xs",
+      textAlign: "center",
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      ...baseBackground("default", props),
+      ...baseText("default", props),
+
+      _disabled: {
+        pointerEvents: "none",
+        opacity: 0.5,
+      },
+
+      _hover: {
+        ...baseBorder("default", props),
+      },
+
+      _active: {
+        ...baseBackground("active", props),
+      },
+
+      ...focusVisibleStyles(props),
+    },
+    text: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      width: "4ch",
+      ...baseText("default", props),
+    },
+    button: {
+      minWidth: "24px",
+      minHeight: "24px",
+    },
+  }),
+});
+
+export default config;

package/src/theme/components/popover.ts

@@ -1,7 +1,7 @@
 import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { cssVar, mode } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const $popperBg = cssVar("popper-bg");
 const $arrowBg = cssVar("popper-arrow-bg");
@@ -15,19 +15,18 @@ const config = helpers.defineMultiStyleConfig({
       zIndex: "popover",
     },
     content: {
-      [$popperBg.variable]: mode("colors.darkTeal", "colors.pine")(props),
+      [$popperBg.variable]: mode(
+        "colors.surface.tertiary.light",
+        "colors.surface.tertiary.dark",
+      )(props),
       backgroundColor: $popperBg.reference,
       [$arrowBg.variable]: $popperBg.reference,
-      [$arrowShadowColor.variable]: "blackAlpha.300",
-      color: "white",
+      [$arrowShadowColor.variable]: "colors.blackAlpha.300",
+      color: "white", // TODO: Should this be a semantic token? Where does it fit in?
       borderRadius: "sm",
       padding: 1.5,
       zIndex: "inherit",
       maxWidth: "20em",
-      _focus: {
-        outline: 0,
-        boxShadow: "outline",
-      },
     },
     arrow: {
       backgroundColor: "transparent",

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

@@ -0,0 +1,43 @@
+import { anatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import { mode } from "@chakra-ui/theme-tools";
+
+const parts = anatomy("progressBar").parts(
+  "container",
+  "background",
+  "progress",
+  "description",
+);
+
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    container: {
+      minWidth: "100px",
+    },
+    background: {
+      display: "flex",
+      backgroundColor: mode("coralGreen", "pine")(props), // TODO: Replace with semantic tokens
+      borderRadius: "sm",
+      justifyContent: "flex-start",
+      marginX: "auto",
+    },
+    progress: {
+      backgroundColor: mode(
+        "brand.surface.active.light",
+        "brand.surface.active.dark",
+      )(props),
+      borderRadius: "sm",
+      maxWidth: "100%",
+      transition: "width .2s ease-out",
+    },
+    description: {
+      textAlign: "center",
+      marginTop: 2,
+      marginX: "auto",
+      fontWeight: "bold",
+    },
+  }),
+});
+
+export default config;

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

@@ -25,11 +25,14 @@ const config = helpers.defineMultiStyleConfig({
       width: 1,
       "&[aria-current='step']": {
         circle: {
-          fill: mode("pine", "coralGreen")(props),
+          fill: mode(
+            "brand.surface.default.light",
+            "brand.surface.default.dark",
+          )(props),
         },
       },
       circle: {
-        fill: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        fill: mode("icon.disabled.light", "icon.disabled.dark")(props),
       },
     },
   }),

package/src/theme/components/radio.ts

@@ -1,7 +1,9 @@
 import { radioAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { focusVisibleStyles } from "../utils/focus-util";
 import { mode } from "@chakra-ui/theme-tools";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { brandBackground } from "../utils/brand-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -11,11 +13,11 @@ const config = helpers.defineMultiStyleConfig({
       _hover: {
         "input:enabled + .chakra-radio__control": {
           backgroundColor: "inherit",
-          borderColor: mode("darkGrey", "white")(props),
+          borderColor: mode("text.default.light", "text.default.dark")(props),
         },
         "input:enabled:checked + .chakra-radio__control": {
-          color: mode("darkTeal", "blueGreen")(props),
-          borderColor: mode("darkTeal", "blueGreen")(props),
+          color: brandBackground("hover", props).backgroundColor,
+          borderColor: brandBackground("hover", props).backgroundColor,
         },
       },
     },
@@ -28,19 +30,19 @@ const config = helpers.defineMultiStyleConfig({
       height: 4,
       backgroundColor: "inherit",
       border: "2px solid",
-      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      borderColor: baseBorder("default", props).outlineColor,
       borderRadius: "50%",
 
       ...focusVisibleStyles(props),
 
       _disabled: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-        color: mode("blackAlpha.200", "whiteAlpha.300")(props),
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props),
       },
       _checked: {
-        borderColor: mode("pine", "coralGreen")(props),
         color: mode("pine", "coralGreen")(props),
+        borderColor: "currentColor",
         _before: {
           content: `""`,
           display: "inline-block",
@@ -51,9 +53,10 @@ const config = helpers.defineMultiStyleConfig({
           background: "currentColor",
         },
         _disabled: {
-          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-          color: mode("blackAlpha.200", "whiteAlpha.300")(props),
+          pointerEvents: "none",
+          ...baseBackground("disabled", props),
+          ...baseBorder("disabled", props),
+          ...baseText("disabled", props),
         },
       },
     },

package/src/theme/components/select.ts

@@ -1,6 +1,6 @@
 import { selectAnatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
+import { baseText } from "../utils/base-utils";
 import { default as Input } from "./input";
 
 const parts = selectAnatomy.extend("root");
@@ -44,7 +44,7 @@ const config = helpers.defineMultiStyleConfig({
       strokeLinecap: "round",
       fontSize: "1.125rem",
       _disabled: {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        ...baseText("disabled", props),
       },
     },
   }),

package/src/theme/components/stepper.ts

@@ -1,5 +1,8 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy, mode } from "@chakra-ui/theme-tools";
+import { baseText } from "../utils/base-utils";
+import { brandBackground, brandText } from "../utils/brand-utils";
+import { accentText, accentBackground } from "../utils/accent-utils";
 
 const parts = anatomy("stepper").parts(
   "root",
@@ -65,26 +68,26 @@ const config = helpers.defineMultiStyleConfig({
     }),
     accent: (props) => ({
       root: {
-        backgroundColor: mode("seaMist", "pine")(props),
-        color: mode("darkTeal", "seaMist")(props),
+        backgroundColor: mode("accent.bg.light", "accent.bg.dark")(props),
+        ...accentText("default", props),
       },
       stepButton: {
         color:
           props.state === "disabled"
-            ? mode("blackAlpha.400", "whiteAlpha.400")(props)
+            ? baseText("disabled", props).color
             : props.state === "completed"
-              ? mode("darkTeal", "white")(props)
-              : mode("white", "darkTeal")(props),
+              ? baseText("default", props).color
+              : brandText("default", props).color,
         _hover: {
           backgroundColor:
             props.state === "disabled"
               ? "transparent"
-              : mode("coralGreen", "greenHaze")(props),
+              : accentBackground("hover", props).backgroundColor,
         },
       },
       backButton: {
         _hover: {
-          backgroundColor: mode("coralGreen", "greenHaze")(props),
+          ...brandBackground("hover", props),
         },
       },
     }),