@vygruppen/spor-react 8.3.0 → 9.0.1

package/src/theme/components/button.ts

@@ -1,8 +1,11 @@
 import { defineStyleConfig } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { colors } from "../foundations";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { brandBackground, brandText } from "../utils/brand-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
+import { surface } from "../utils/surface-utils";
+import { accentBackground, accentText } from "../utils/accent-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props) => ({
@@ -16,111 +19,73 @@ const config = defineStyleConfig({
     textWrap: "wrap",
     paddingX: 3,
     paddingY: 1,
-    _focus: {
-      boxShadow: 0,
-      outline: 0,
-    },
     ...focusVisibleStyles(props),
     _disabled: {
       cursor: "not-allowed",
+      pointerEvents: "none",
       boxShadow: "none",
-      backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-      color: mode("blackAlpha.400", "whiteAlpha.400")(props),
-    },
-    _hover: {
-      _disabled: {
-        background: mode("blackAlpha.100", "whiteAlpha.100")(props),
-      },
+      ...surface("disabled", props),
+      ...baseText("disabled", props),
     },
   }),
   variants: {
     primary: (props) => ({
-      // FIXME: Update to use a global defined background color for darkMode whenever it is available.
-      // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: mode("pine", "coralGreen")(props),
-      color: mode("white", "darkTeal")(props),
+      ...brandBackground("default", props),
+      ...brandText("default", props),
       _hover: {
-        backgroundColor: mode("darkTeal", "blueGreen")(props),
+        ...brandBackground("hover", props),
       },
       _active: {
-        backgroundColor: mode("greenHaze", "seaMist")(props),
+        ...brandBackground("active", props),
       },
     }),
     secondary: (props) => ({
-      // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
-      backgroundColor: mode("seaMist", "primaryGreen")(props),
-      color: mode("darkTeal", "seaMist")(props),
-      // order is important here for now while we do not have global defined background color for darkMode
+      ...accentBackground("default", props),
+      ...accentText("default", props),
       _hover: {
-        backgroundColor: mode("coralGreen", "greenHaze")(props),
+        ...accentBackground("hover", props),
       },
       _active: {
-        backgroundColor: mode("mint", "darkTeal")(props),
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.azure,
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.blackAlpha[600],
-        )(props)}`,
-        _hover: {
-          boxShadow: `inset 0 0 0 2px ${mode(
-            colors.greenHaze,
-            colors.azure,
-          )(props)}, inset 0 0 0 4px ${mode(
-            colors.white,
-            colors.blackAlpha[600],
-          )(props)}`,
-        },
+        ...accentBackground("active", props),
       },
     }),
     tertiary: (props) => ({
-      backgroundColor: "transparent",
-      color: mode("darkGrey", "white")(props),
-      boxShadow: `inset 0 0 0 1px ${mode(
-        colors.blackAlpha[400],
-        colors.whiteAlpha[400],
-      )(props)}`,
+      ...baseBackground("default", props),
+      ...baseText("default", props),
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: `inset 0 0 0 2px currentColor`,
+        ...baseBorder("hover", props),
       },
       _active: {
-        boxShadow: `inset 0 0 0 1px ${mode(
-          colors.blackAlpha[400],
-          colors.whiteAlpha[300],
-        )(props)}`,
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+        ...baseBorder("default", props), // We want a
+        ...baseBackground("active", props),
       },
     }),
     ghost: (props) => ({
-      backgroundColor: "transparent",
-      color: mode("darkGrey", "white")(props),
+      ...ghostBackground("default", props),
+      ...baseText("default", props),
       _hover: {
-        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+        ...ghostBackground("hover", props),
         _disabled: {
-          color: "blackAlpha.300",
+          ...baseText("disabled", props),
         },
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        ...ghostBackground("active", props),
       },
     }),
     floating: (props) => ({
-      backgroundColor: mode("white", "whiteAlpha.100")(props),
-      boxShadow: getBoxShadowString({
-        borderColor: mode("grey.200", "whiteAlpha.400")(props),
-        baseShadow: "sm",
-      }),
-      _active: {
-        backgroundColor: mode("mint", "whiteAlpha.400")(props),
-      },
+      ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
+      boxShadow: "sm",
       _hover: {
-        backgroundColor: mode("white", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.300", "white")(props),
-          baseShadow: "md",
-          borderWidth: 2,
-        }),
+        ...floatingBackground("hover", props),
+        ...floatingBorder("hover", props),
+        boxShadow: "md",
+      },
+      _active: {
+        ...floatingBackground("active", props),
+        boxShadow: "sm",
       },
     }),
   },
@@ -146,8 +111,8 @@ const config = defineStyleConfig({
     xs: {
       minHeight: 5,
       minWidth: 5,
+      paddingY: 0.5,
       fontSize: "16px",
-
       fontWeight: "normal",
     },
   },

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

@@ -1,13 +1,9 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
-import {
-  baseBackground,
-  floatingBackground,
-  ghostBackground,
-} from "../utils/background-utils";
-import { getBoxShadowString } from "../utils/box-shadow-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 { ghostBackground } from "../utils/ghost-utils";
 
 const parts = anatomy("card-select").parts("trigger", "card");
 
@@ -18,48 +14,31 @@ const config = helpers.defineMultiStyleConfig({
       appearance: "none",
       display: "flex",
       alignItems: "center",
+      transitionProperty: "outline",
+      transitionDuration: "fast",
       ...focusVisibleStyles(props),
     },
     card: {
       borderRadius: "sm",
       boxShadow: "md",
       padding: 3,
-      color: mode("darkGrey", "white")(props),
+      ...baseText("default", props),
       ...floatingBackground("default", props),
     },
   }),
   variants: {
     base: (props) => ({
       trigger: {
-        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),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "whiteAlpha.400")(props),
-            borderWidth: 1,
-          }),
+          ...baseBorder("default", props),
         },
         _expanded: {
           ...baseBackground("active", props),
-          _hover: {
-            ...baseBackground("active", props),
-            boxShadow: "none",
-          },
-          _active: {
-            ...baseBackground("active", props),
-            boxShadow: getBoxShadowString({
-              borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-              borderWidth: 1,
-            }),
-          },
         },
       },
     }),
@@ -78,41 +57,20 @@ const config = helpers.defineMultiStyleConfig({
     }),
     floating: (props) => ({
       trigger: {
+        boxShadow: "sm",
         ...floatingBackground("default", props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("silver", "whiteAlpha.400")(props),
-          borderWidth: 1,
-          baseShadow: "sm",
-        }),
+        ...floatingBorder("default", props),
         transition: "all .1s ease-out",
         _hover: {
           ...floatingBackground("hover", props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("silver", "whiteAlpha.400")(props),
-            borderWidth: 2,
-            baseShadow: "sm",
-          }),
+          ...floatingBorder("hover", props),
         },
         _active: {
           ...floatingBackground("active", props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("silver", "whiteAlpha.400")(props),
-            borderWidth: mode(0, 1)(props),
-            baseShadow: "sm",
-          }),
+          ...floatingBorder("active", props),
         },
         _expanded: {
           ...floatingBackground("active", props),
-          _hover: {
-            boxShadow: getBoxShadowString({
-              borderColor: "darkGrey",
-              borderWidth: 3,
-            }),
-          },
-          _active: {
-            ...floatingBackground("active", props),
-            boxShadow: "none",
-          },
         },
       },
     }),

package/src/theme/components/card.ts

@@ -1,8 +1,8 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-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";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -14,24 +14,51 @@ const config = defineStyleConfig({
     transitionProperty: "common",
     transitionDuration: "fast",
     borderRadius: "md",
+    // Except for white cards, all cards are light mode always
+    color: "text.default.light",
     ...getColorSchemeBaseProps(props),
-
     "button&, a&, label&, &.is-clickable": {
+      outline: "1px solid",
       ...getColorSchemeClickableProps(props),
-      _hover: getColorSchemeHoverProps(props),
       ...focusVisibleStyles(props),
+      _hover: getColorSchemeHoverProps(props),
       _active: getColorSchemeActiveProps(props),
       _disabled: {
-        backgroundColor: "platinum",
-        boxShadow: getBoxShadowString({
-          borderColor: "silver",
-          isInset: false,
-        }),
-        color: "osloGrey",
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props),
         pointerEvents: "none",
       },
     },
   }),
+  sizes: {
+    sm: {
+      "button&, a&, label&, &.is-clickable": {
+        boxShadow: "sm",
+
+        _hover: {
+          boxShadow: "md",
+        },
+
+        _active: {
+          boxShadow: "none",
+        },
+      },
+    },
+    lg: {
+      "button&, a&, label&, &.is-clickable": {
+        boxShadow: "md",
+
+        _hover: {
+          boxShadow: "lg",
+        },
+
+        _active: {
+          boxShadow: "sm",
+        },
+      },
+    },
+  },
 });
 
 export default config;
@@ -46,21 +73,20 @@ type CardThemeProps = {
     | "yellow"
     | "orange"
     | "red";
-  size: "sm" | "lg";
+  theme: any;
 };
 
 const getColorSchemeBaseProps = (props: CardThemeProps) => {
-  const { colorScheme, size } = props;
-  const baseShadow = size === "lg" ? "md" : "sm";
-  switch (colorScheme) {
+  switch (props.colorScheme) {
     case "white":
       return {
-        backgroundColor: mode("white", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: "silver",
-          isInset: false,
-        }),
+        outline: "1px solid",
+        outlineColor: "silver",
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 10%, ${props.theme.colors.surface.default.dark})`,
+        )(props),
+        color: "inherit",
       };
     case "grey":
       return {
@@ -78,95 +104,67 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
     }
     default:
       return {
-        backgroundColor: colors[colorScheme]?.[100] ?? "platinum",
+        backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
       };
   }
 };
 
-function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
-  const baseShadow = size === "lg" ? "md" : "sm";
-  switch (colorScheme) {
+function getColorSchemeClickableProps(props: CardThemeProps) {
+  switch (props.colorScheme) {
     case "white":
       return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: "silver",
-        }),
+        outlineColor: "silver",
       };
     case "grey":
       return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: "steel",
-        }),
+        outlineColor: "steel",
       };
     default:
       return {
-        backgroundColor: colors[colorScheme]?.[100] ?? "platinum",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors[colorScheme]?.[200] ?? "silver",
-        }),
+        backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
+        outlineColor: colors[props.colorScheme]?.[200] ?? "silver",
       };
   }
 }
 
 const getColorSchemeHoverProps = (props: CardThemeProps) => {
-  const { colorScheme, size } = props;
-  const baseShadow = size === "lg" ? "lg" : "md";
-  switch (colorScheme) {
+  switch (props.colorScheme) {
     case "white":
       return {
-        backgroundColor: mode("white", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel,
-        }),
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 20%, ${props.theme.colors.surface.default.dark})`,
+        )(props),
+        outlineColor: "steel",
       };
     case "grey":
       return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.osloGrey,
-        }),
+        outlineColor: "osloGrey",
       };
     default:
       return {
-        backgroundColor: colors[colorScheme]?.[200] ?? "silver",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors[colorScheme]?.[400] ?? colors.silver,
-        }),
+        backgroundColor: colors[props.colorScheme]?.[200] ?? "silver",
+        outlineColor: colors[props.colorScheme]?.[400] ?? "silver",
       };
   }
 };
 const getColorSchemeActiveProps = (props: CardThemeProps) => {
-  const { colorScheme, size } = props;
-  const baseShadow = size === "lg" ? "sm" : "none";
+  const { colorScheme } = props;
   switch (colorScheme) {
     case "white":
       return {
         backgroundColor: mode("mint", "teal")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.silver,
-        }),
+        outlineColor: "silver",
       };
     case "grey":
       return {
         backgroundColor: "white",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel,
-        }),
+        outlineColor: "steel",
       };
     default:
       return {
         backgroundColor: colors[colorScheme]?.[50] ?? "lightGrey",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors[colorScheme]?.[100] ?? colors.silver,
-        }),
+        outlineColor: colors[colorScheme]?.[100] ?? "silver",
       };
   }
 };

package/src/theme/components/checkbox.ts

@@ -1,9 +1,9 @@
 import { checkboxAnatomy 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 } from "../utils/background-utils";
-import { baseText } from "../utils/text-utils";
+import { baseBackground, baseText } from "../utils/base-utils";
+import { brandBackground, brandText } from "../utils/brand-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -13,20 +13,20 @@ const config = helpers.defineMultiStyleConfig({
       _hover: {
         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
           ...baseBackground("hover", props),
-          borderColor: mode("darkGrey", "white")(props),
+          borderColor: brandBackground("hover", props).backgroundColor,
         },
         "input:enabled[aria-invalid] + .chakra-checkbox__control": {
           backgroundColor: mode("white", "inherit")(props),
-          borderColor: "brightRed",
+          borderColor: mode("outline.error.light", "outline.error.dark"),
         },
         "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control":
           {
-            backgroundColor: mode("darkTeal", "blueGreen")(props),
-            borderColor: mode("darkTeal", "blueGreen")(props),
+            ...brandBackground("hover", props),
+            borderColor: brandBackground("hover", props).backgroundColor,
           },
         "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed",
+          borderColor: mode("outline.error.light", "outline.error.dark"),
+          backgroundColor: mode("outline.error.light", "outline.error.dark"),
         },
       },
     },
@@ -42,23 +42,23 @@ const config = helpers.defineMultiStyleConfig({
       transitionProperty: "background, border-color",
       transitionDuration: "normal",
       border: "2px solid",
-      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      borderColor: mode(
+        "base.outline.default.light",
+        "base.outline.default.dark",
+      )(props),
       borderRadius: "xs",
-      color: mode("white", "darkTeal")(props),
       ...baseBackground("default", props),
+      ...focusVisibleStyles(props),
 
       _checked: {
-        ...baseBackground("selected", props),
-        borderColor: mode("pine", "coralGreen")(props),
-        ...baseText("default", props),
-        color: mode("white", "darkTeal")(props),
-
-        ...focusVisibleStyles(props),
+        ...brandText("default", props),
+        ...brandBackground("default", props),
+        borderColor: brandBackground("default", props).backgroundColor,
 
         _disabled: {
           ...baseBackground("disabled", props),
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-          color: mode("blackAlpha.200", "whiteAlpha.200")(props),
+          ...baseText("disabled", props),
+          borderColor: "currentColor",
         },
 
         _invalid: {
@@ -69,7 +69,7 @@ const config = helpers.defineMultiStyleConfig({
 
       _disabled: {
         ...baseBackground("disabled", props),
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        borderColor: baseText("disabled", props).color,
       },
       _invalid: {
         ...baseBackground("default", props),