@vygruppen/spor-react 8.2.1 → 9.0.0

package/src/theme/components/choice-chip.ts

@@ -1,19 +1,10 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
-import {
-  accentBackground,
-  baseBackground,
-  brandBackground,
-  floatingBackground,
-} from "../utils/background-utils";
-import { baseText, accentText } from "../utils/text-utils";
-import {
-  baseBorder,
-  accentBorder,
-  brandBorder,
-  floatingBorder,
-} from "../utils/border-utils";
+import { accentBackground, accentText } from "../utils/accent-utils";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { brandBackground } from "../utils/brand-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const parts = anatomy("choice-chip").parts("container", "icon", "label");
 
@@ -25,25 +16,25 @@ const config = helpers.defineMultiStyleConfig({
       display: "inline-flex",
       alignItems: "center",
       fontSize: "16px",
-      px: 1,
       cursor: "pointer",
+      transitionProperty: "all",
+      transitionDuration: "fast",
       _checked: {
+        outlineColor: "transparent",
         ...accentText("selected", props),
         ...accentBackground("selected", props),
-        ...accentBorder("selected", props),
         _hover: {
           ...brandBackground("hover", props),
           ...baseText("selected", props),
-          ...brandBorder("hover", props),
+          outlineColor: "transparent",
         },
         _active: {
           ...baseText("selected", props),
           ...brandBackground("active", props),
-          ...brandBorder("active", props),
         },
       },
       _disabled: {
-        cursor: "not-allowed",
+        pointerEvents: "none",
         boxShadow: "none",
         ...baseText("disabled", props),
         ...baseBackground("disabled", props),
@@ -67,7 +58,7 @@ const config = helpers.defineMultiStyleConfig({
       "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
     },
     icon: {
-      mr: props.hasLabel ? 1 : 0,
+      marginRight: props.hasLabel ? 1 : 0,
     },
   }),
   variants: {
@@ -76,12 +67,10 @@ const config = helpers.defineMultiStyleConfig({
         ...baseBackground("default", props),
         ...baseBorder("default", props),
         ...baseText("default", props),
-        "@media (hover:hover)": {
-          _hover: {
-            ...baseText("default", props),
-            ...baseBorder("hover", props),
-            ...baseBackground("hover", props),
-          },
+        _hover: {
+          ...baseText("default", props),
+          ...baseBorder("hover", props),
+          ...baseBackground("hover", props),
         },
         _active: {
           ...baseBackground("active", props),
@@ -93,23 +82,17 @@ const config = helpers.defineMultiStyleConfig({
       container: {
         ...accentBackground("default", props),
         ...accentText("default", props),
-        ...accentBorder("default", props),
-        "@media (hover:hover)": {
-          _hover: {
-            ...accentBackground("hover", props),
-            ...accentBorder("hover", props),
-            ...accentText("default", props),
-          },
+        _hover: {
+          ...accentBackground("hover", props),
+          ...accentText("default", props),
         },
         _active: {
           ...accentText("default", props),
-          ...accentBorder("active", props),
           ...accentBackground("active", props),
         },
       },
       _active: {
         ...accentText("default", props),
-        ...accentBorder("active", props),
         ...accentBackground("active", props),
       },
     }),
@@ -118,10 +101,12 @@ const config = helpers.defineMultiStyleConfig({
         ...floatingBackground("default", props),
         ...baseText("default", props),
         ...floatingBorder("default", props),
+        boxShadow: "sm",
         _hover: {
           ...floatingBackground("hover", props),
           ...floatingBorder("hover", props),
           ...baseText("default", props),
+          boxShadow: "md",
         },
         _active: {
           ...floatingBackground("active", props),
@@ -132,37 +117,37 @@ const config = helpers.defineMultiStyleConfig({
     }),
   },
   sizes: {
-    sm: {
+    xs: {
       container: {
         borderRadius: "30px",
         _checked: {
           borderRadius: "9px",
         },
         height: "30px",
-        px: 1.5,
+        paddingX: 1.5,
       },
     },
-    md: {
+    sm: {
       container: {
         borderRadius: "30px",
         _checked: {
           borderRadius: "12px",
         },
         height: "36px",
-        px: 2,
+        paddingX: 2,
       },
     },
-    lg: {
+    md: {
       container: {
         borderRadius: "30px",
         _checked: {
           borderRadius: "12px",
         },
         height: "42px",
-        px: 2,
+        paddingX: 2,
       },
     },
-    xl: {
+    lg: {
       container: {
         borderRadius: "30px",
         _checked: {
@@ -174,7 +159,7 @@ const config = helpers.defineMultiStyleConfig({
     },
   },
   defaultProps: {
-    size: "md",
+    size: "sm",
   },
 });
 

package/src/theme/components/close-button.ts

@@ -1,6 +1,6 @@
 import { defineStyleConfig } 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 $size = cssVar("close-button-size");
 

package/src/theme/components/datepicker.ts

@@ -1,8 +1,13 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy, cssVar, mode } from "@chakra-ui/theme-tools";
-import { colors, zIndices } from "../foundations";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { zIndices } from "../foundations";
+import { accentText } from "../utils/accent-utils";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { brandBackground, brandText } from "../utils/brand-utils";
+import { floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
+import { surface } from "../utils/surface-utils";
 
 const parts = anatomy("datepicker").parts(
   "wrapper",
@@ -23,10 +28,6 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     wrapper: {
-      backgroundColor: mode("white", "night")(props),
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      }),
       transitionProperty: "box-shadow",
       transitionDuration: "fast",
       borderRadius: "sm",
@@ -39,6 +40,7 @@ const config = helpers.defineMultiStyleConfig({
       },
       _disabled: {
         pointerEvents: "none",
+        ...baseBackground("disabled", props),
       },
       _focusWithin: {
         ...focusVisibleStyles(props)._focusVisible,
@@ -57,7 +59,6 @@ const config = helpers.defineMultiStyleConfig({
       )(props),
     },
     calendarTriggerButton: {
-      backgroundColor: mode("white", "night")(props),
       width: 8,
       display: "flex",
       alignItems: "center",
@@ -71,42 +72,35 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "sm",
       right: "9px",
 
+      ...focusVisibleStyles(props),
       _hover: {
-        boxShadow: "none",
-        backgroundColor: mode("seaMist", "pine")(props),
+        ...ghostBackground("hover", props),
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+        ...ghostBackground("active", props),
       },
-      ...focusVisibleStyles(props),
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2,
-        }),
+        ...baseBorder("invalid", props),
       },
     },
     arrow: {
-      [$arrowBackground.variable]: mode("white", colors.night)(props),
+      [$arrowBackground.variable]: surface("default", props).backgroundColor,
     },
     calendarPopover: {
-      backgroundColor: mode("white", "night")(props),
-      color: mode("darkGrey", "white")(props),
-      boxShadow: getBoxShadowString({
-        borderWidth: 2,
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-        baseShadow: "md",
-      }),
+      ...baseBackground("default", props),
+      ...baseText("default", props),
+      ...baseBorder("default", props),
+      boxShadow: "md",
     },
     weekdays: {
-      color: mode("darkGrey", "white")(props),
+      ...baseText("default", props),
     },
     weekend: {
-      color: mode("darkTeal", "seaMist")(props),
+      ...accentText("default", props),
     },
     dateCell: {
-      backgroundColor: mode("white", "night")(props),
-      color: mode("darkGrey", "white")(props),
+      ...ghostBackground("default", props),
+      ...baseText("default", props),
       borderRadius: "50%",
       position: "relative",
       transition: ".1s ease-in-out",
@@ -117,187 +111,75 @@ const config = helpers.defineMultiStyleConfig({
       transitionSpeed: "fast",
 
       _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
-      },
-      _focusVisible: {
-        outlineColor: "greenHaze",
-        outlineWidth: 2,
-        outlineStyle: "solid",
+        ...ghostBackground("hover", props),
       },
+      ...focusVisibleStyles(props),
       _active: {
-        backgroundColor: "seaMist",
-        boxShadow: "none",
-        color: mode("darkGrey", "white")(props),
+        ...ghostBackground("active", props),
       },
       _disabled: {
-        color: "osloGrey",
-        boxShadow: "none",
+        ...baseBackground("disabled", props),
+        ...baseText("disabled", props),
         pointerEvents: "none",
       },
       _selected: {
-        backgroundColor: mode("darkTeal", "pine")(props),
-        color: "white",
+        ...brandBackground("default", props),
+        ...brandText("default", props),
         _active: {
-          backgroundColor: "seaMist",
-          boxShadow: "none",
-          color: "darkGrey",
+          ...brandBackground("active", props),
+          ...brandText("active", props),
         },
       },
       "&[data-today]": {
-        boxShadow: getBoxShadowString({
-          borderWidth: 1,
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-        }),
+        ...baseBorder("default", props),
       },
       "&[data-unavailable]": {
         pointerEvents: "none",
-        color: "osloGrey",
+        ...baseBackground("disabled", props),
+        ...baseText("disabled", props),
       },
     },
   }),
   variants: {
     base: (props) => ({
       wrapper: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-        }),
+        ...baseBorder("default", props),
+        ...baseBackground("default", props),
+
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2,
-          }),
+          ...baseBorder("hover", props),
         },
         _invalid: {
-          boxShadow: getBoxShadowString({
-            borderColor: "brightRed",
-            borderWidth: 2,
-          }),
+          ...baseBorder("invalid", props),
         },
         _disabled: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1,
-          }),
-          _focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1,
-            }),
-          },
-        },
-      },
-      calendar: {
-        backgroundColor: mode("white", "night")(props),
-        color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-        }),
-      },
-      dateCell: {
-        color: mode("darkGrey", "white")(props),
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
-        },
-        "&[data-today]": {
-          boxShadow: getBoxShadowString({
-            borderWidth: 1,
-            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-          }),
+          ...baseBorder("disabled", props),
         },
       },
     }),
     floating: (props) => ({
       wrapper: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-          baseShadow: "sm",
-        }),
+        ...floatingBorder("default", props),
+        boxShadow: "sm",
+
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2,
-            baseShadow: "sm",
-          }),
+          ...floatingBorder("hover", props),
         },
         _invalid: {
-          boxShadow: getBoxShadowString({
-            borderColor: "brightRed",
-            borderWidth: 2,
-            baseShadow: "sm",
-          }),
+          ...baseBorder("invalid", props),
         },
         _disabled: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1,
-            baseShadow: "sm",
-          }),
-          _focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1,
-              baseShadow: "sm",
-            }),
-          },
-        },
-      },
-      calendar: {
-        backgroundColor: mode("white", "night")(props),
-        color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.200", "whiteAlpha.400")(props),
-          baseShadow: "sm",
-        }),
-      },
-      dateCell: {
-        color: mode("darkGrey", "white")(props),
-        _hover: {
-          backgroundColor: mode("", "")(props),
+          ...baseBorder("disabled", props),
         },
       },
     }),
     ghost: (props) => ({
       wrapper: {
-        boxShadow: "none",
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2,
-          }),
+          ...baseBorder("hover", props),
         },
         _invalid: {
-          boxShadow: getBoxShadowString({
-            borderColor: "brightRed",
-            borderWidth: 2,
-          }),
-        },
-        _disabled: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1,
-          }),
-          _focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1,
-            }),
-          },
-        },
-      },
-      calendar: {
-        backgroundColor: mode("white", "night")(props),
-        color: mode("darkGrey", "white")(props),
-        boxShadow: "none",
-      },
-      dateCell: {
-        color: mode("darkGrey", "white")(props),
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
-        },
-        _selected: {
-          backgroundColor: mode("transparent", "primaryGreen")(props),
-          color: "darkGrey",
+          ...baseBorder("invalid", props),
         },
       },
     }),

package/src/theme/components/drawer.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,8 +21,8 @@ const config = helpers.defineMultiStyleConfig({
       overflow: props.scrollBehavior === "inside" ? "hidden" : "auto",
     },
     dialog: {
-      backgroundColor: mode("white", "pine")(props),
-      color: mode("inherit", "white")(props),
+      ...bg("default", props),
+      ...baseText("default", props),
       zIndex: "modal",
       maxHeight:
         props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined,
@@ -81,7 +83,7 @@ function getSize(value: string): PartsStyleObject<typeof parts> {
         "@supports(min-height: -webkit-fill-available)": {
           minHeight: "-webkit-fill-available",
         },
-        my: 0,
+        marginY: 0,
       },
     };
   }

package/src/theme/components/fab.ts

@@ -1,6 +1,11 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { anatomy, StyleFunctionProps } from "@chakra-ui/theme-tools";
+
+import { accentBackground, 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";
+import { surface } from "../utils/surface-utils";
 
 const parts = anatomy("fab").parts("container", "icon", "text");
 
@@ -21,20 +26,14 @@ const config = helpers.defineMultiStyleConfig({
       transitionDuration: "fast",
       transitionProperty: "common",
       position: "fixed",
+      zIndex: "sticky",
       ...getPositionProps(props),
-      _disabled: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      },
       ...focusVisibleStyles(props),
-      _hover: {
-        backgroundColor: "seaMist",
-        _disabled: {
-          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-          color: mode("blackAlpha.400", "whiteAlpha.400")(props),
-        },
+      _disabled: {
+        ...surface("disabled", props),
+        ...baseText("disabled", props),
+        pointerEvents: "none",
       },
-      zIndex: "sticky",
     },
     icon: {
       marginRight: props.isTextVisible ? 1 : 0,
@@ -48,75 +47,49 @@ const config = helpers.defineMultiStyleConfig({
     },
   }),
   variants: {
-    dark: (props) => ({
-      container: {
-        backgroundColor: "darkTeal",
-        color: "white",
-        _active: { backgroundColor: "pine" },
-        _hover: {
-          backgroundColor: "night",
-        },
-      },
-    }),
-    light: {
-      container: {
-        backgroundColor: "white",
-        color: "darkGrey",
-        _active: { backgroundColor: "mint" },
-      },
-    },
-    green: {
-      container: {
-        backgroundColor: "mint",
-        color: "darkTeal",
-        _active: { color: "darkTeal", backgroundColor: "lightGrey" },
-      },
-    },
     brand: (props) => ({
       container: {
-        backgroundColor: mode("darkTeal", "mint")(props),
-        color: mode("white", "darkTeal")(props),
-        _active: { backgroundColor: mode("pine", "white")(props) },
+        ...brandBackground("default", props),
+        ...brandText("default", props),
         _hover: {
-          backgroundColor: mode("night", "seaMist")(props),
+          ...brandBackground("hover", props),
+        },
+        _active: {
+          ...brandBackground("active", props),
         },
       },
     }),
     base: (props) => ({
       container: {
-        backgroundColor: mode("white", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props),
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
-          color: mode("darkGrey", "white")(props),
-        },
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        ...baseText("default", props),
         _hover: {
-          backgroundColor: mode("white", "transparent")(props),
-          boxShadow: mode(
-            `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
-            `inset 0 0 0 2px ${props.theme.colors.white}`,
-          )(props),
-          color: mode("darkGrey", "white")(props),
+          ...baseBackground("hover", props),
+          ...baseBorder("hover", props),
+        },
+        _active: {
+          ...baseBorder("default", props),
+          ...baseBackground("active", props),
         },
       },
     }),
     accent: (props) => ({
       container: {
-        backgroundColor: mode("mint", "pine")(props),
-        color: mode("darkTeal", "white")(props),
-        _active: {
-          backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
-          color: mode("darkTeal", "white")(props),
-        },
+        ...accentBackground("default", props),
+        ...accentText("default", props),
         _hover: {
-          backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
-          color: mode("darkTeal", "white")(props),
+          ...accentBackground("hover", props),
+          ...accentText("default", props),
+        },
+        _active: {
+          ...accentBackground("active", props),
         },
       },
     }),
   },
   defaultProps: {
-    variant: "dark",
+    variant: "brand",
   },
 });