@vygruppen/spor-react 8.3.0 → 9.0.0

package/src/theme/components/switch.ts

@@ -1,9 +1,9 @@
 import { switchAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { calc, cssVar, 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 } from "../utils/base-utils";
+import { brandBackground } from "../utils/brand-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const $width = cssVar("switch-track-width");
 const $height = cssVar("switch-track-height");
@@ -14,7 +14,7 @@ const $translateX = cssVar("switch-thumb-x");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       [$diff.variable]: diffValue,
       [$translateX.variable]: $diff.reference,
@@ -27,9 +27,30 @@ const config = helpers.defineMultiStyleConfig({
       height: [$height.reference],
       transitionProperty: "common",
       transitionDuration: "fast",
+      ...baseBackground("default", props),
+      ...baseBorder("default", props),
+      ...focusVisibleStyles(props),
 
+      _hover: {
+        ...baseBackground("hover", props),
+        ...baseBorder("hover", props),
+      },
+      _checked: {
+        ...brandBackground("default", props),
+        outlineColor: "transparent",
+
+        _hover: {
+          ...brandBackground("hover", props),
+        },
+      },
       _disabled: {
         pointerEvents: "none",
+        ...baseBackground("default", props),
+        ...baseBorder("disabled", props),
+        _checked: {
+          ...baseBackground("disabled", props),
+          ...baseBorder("disabled", props),
+        },
       },
     },
     thumb: {
@@ -38,88 +59,20 @@ const config = helpers.defineMultiStyleConfig({
       borderRadius: "50%",
       width: [$height.reference],
       height: [$height.reference],
-      _checked: {
-        transform: `translateX(${$translateX.reference})`,
-      },
-    },
-  },
-  variants: {
-    solid: ({ colorMode }) => ({
-      track: {
-        backgroundColor: "osloGrey",
-        boxShadow: mode(
-          "none",
-          getBoxShadowString({
-            borderColor: colors.whiteAlpha[400],
-          }),
-        )({ colorMode }),
-        ...focusVisibleStyles({ colorMode }),
-        _hover: {
-          backgroundColor: "steel",
-          boxShadow: mode(
-            "none",
-            getBoxShadowString({ borderColor: colors.white }),
-          )({ colorMode }),
-        },
-        _checked: {
-          backgroundColor: mode("darkTeal", "celadon")({ colorMode }),
 
-          _hover: {
-            backgroundColor: mode("pine", "river")({ colorMode }),
-            boxShadow: mode(
-              "none",
-              getBoxShadowString({ borderColor: colors.white }),
-            )({ colorMode }),
-          },
-        },
-        _disabled: {
-          backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
-          boxShadow: mode(
-            "none",
-            getBoxShadowString({ borderColor: colors.whiteAlpha[400] }),
-          )({ colorMode }),
-          _checked: {
-            backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
-            boxShadow: mode(
-              "none",
-              getBoxShadowString({ borderColor: colors.whiteAlpha[400] }),
-            )({ colorMode }),
-          },
-        },
-      },
-
-      thumb: {
-        backgroundColor: "white",
-        "[data-disabled] &": {
-          backgroundColor: "steel",
-        },
+      backgroundColor: mode("base.icon.light", "base.icon.dark")(props),
+      "[data-disabled] &": {
+        backgroundColor: mode(
+          "icon.disabled.light",
+          "icon.disabled.dark",
+        )(props),
       },
-    }),
-    outline: {
-      track: {
-        backgroundColor: "platinum",
-        boxShadow: getBoxShadowString({
-          borderColor: colors.blackAlpha["400"],
-        }),
-        _hover: {
-          backgroundColor: "white",
-        },
-        _checked: {
-          backgroundColor: "white",
-          _hover: {
-            backgroundColor: "mint",
-          },
-        },
-      },
-      thumb: {
-        backgroundColor: "osloGrey",
-
-        _checked: {
-          backgroundColor: "darkTeal",
-        },
+      _checked: {
+        backgroundColor: mode("brand.icon.light", "brand.icon.dark")(props),
+        transform: `translateX(${$translateX.reference})`,
       },
     },
-  },
+  }),
   sizes: {
     sm: {
       container: {

package/src/theme/components/table.ts

@@ -1,7 +1,7 @@
 import { tableAnatomy 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 { baseBorder, baseText } from "../utils/base-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -12,9 +12,10 @@ const numericStyles = {
 };
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     table: {
       borderCollapse: "collapse",
+      ...baseText("default", props),
       width: "100%",
     },
     th: {
@@ -32,18 +33,15 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     caption: {
-      mt: 4,
+      marginTop: 4,
       fontFamily: "heading",
       textAlign: "center",
       fontWeight: "bold",
       color: "currentColor",
     },
-  },
+  }),
   variants: {
     simple: (props) => ({
-      table: {
-        color: mode("darkGrey", "white")(props),
-      },
       th: {
         borderBottom: "sm",
         borderColor: mode(`blackAlpha.200`, `whiteAlpha.300`)(props),
@@ -61,19 +59,19 @@ const config = helpers.defineMultiStyleConfig({
           transitionDuration: "fast",
           transitionProperty: "background-color, box-shadow",
           _hover: {
-            boxShadow: mode(
-              getBoxShadowString({ borderColor: "darkTeal", borderWidth: 3 }),
-              getBoxShadowString({ borderColor: "blueGreen", borderWidth: 3 }),
-            )(props),
+            ...baseBorder("hover", props),
+            outlineOffset: "-2px",
             backgroundColor: mode(
               props.colorScheme === "grey" ? "mint" : "coralGreen",
               "whiteAlpha.200",
             )(props),
           },
+          _last: {
+            borderBottomRadius: "md",
+          },
         },
       },
       th: {
-        color: mode("darkGrey", "white")(props),
         border: mode("none", "md"),
         borderColor: mode("transparent", `whiteAlpha.200`)(props),
         backgroundColor: mode(`${props.colorScheme}.100`, "darkTeal")(props),

package/src/theme/components/tabs.ts

@@ -1,7 +1,10 @@
 import { tabsAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode, type StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
+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";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -16,7 +19,7 @@ const config = helpers.defineMultiStyleConfig({
       alignItems: "center",
       gap: 0.5,
       width: props.isFitted ? "fit-content" : "100%",
-      ...getTablistColorSchemeProps(props),
+      borderRadius: "xl",
     },
     tab: {
       display: "flex",
@@ -27,40 +30,63 @@ const config = helpers.defineMultiStyleConfig({
       width: props.isFitted ? "fit-content" : "100%",
       height: "100%",
       whiteSpace: "nowrap",
-      ...getTabColorSchemeProps(props),
-
+      borderRadius: "xl",
+      ...focusVisibleStyles(props),
+      _disabled: {
+        ...baseBackground("disabled", props),
+        ...baseText("disabled", props),
+      },
       _selected: {
-        boxShadow: "md",
         pointerEvents: "none",
-        ...getTabColorSchemeSelectedProps(props),
+        ...brandBackground("default", props),
+        ...brandText("default", props),
+        _hover: {
+          ...brandBackground("hover", props),
+          ...brandText("hover", props),
+        },
+        _active: {
+          ...brandBackground("active", props),
+          ...brandText("active", props),
+        },
       },
-      ...focusVisibleStyles(props),
-      _hover: getTabColorSchemeHoverProps(props),
-      _active: getTabColorSchemeActiveProps(props),
-      _disabled: getTabColorSchemeDisabledProps(props),
     },
-    tabpanel: {},
   }),
   variants: {
-    round: {
+    base: (props) => ({
       tablist: {
-        borderRadius: "42px",
+        ...baseBackground("default", props),
+        ...baseText("default", props),
+        ...baseBorder("default", props),
       },
       tab: {
-        borderRadius: "xl",
+        ...baseText("default", props),
+        _hover: {
+          ...baseBorder("hover", props),
+          outlineOffset: "-2px",
+        },
+        _accent: {
+          ...baseBackground("active", props),
+        },
       },
-    },
-    square: {
+    }),
+    accent: (props) => ({
       tablist: {
-        borderRadius: "sm",
+        backgroundColor: mode("accent.bg.light", "accent.bg.dark")(props),
+        ...accentText("default", props),
       },
       tab: {
-        borderRadius: "9px",
+        ...accentText("default", props),
+        _hover: {
+          ...accentBackground("hover", props),
+        },
+        _accent: {
+          ...accentBackground("active", props),
+        },
       },
-    },
+    }),
   },
   sizes: {
-    sm: {
+    xs: {
       tablist: {
         height: "30px",
         padding: "2px",
@@ -70,7 +96,7 @@ const config = helpers.defineMultiStyleConfig({
         paddingY: 0,
       },
     },
-    md: {
+    sm: {
       tablist: {
         height: "36px",
         padding: 0.5,
@@ -79,7 +105,7 @@ const config = helpers.defineMultiStyleConfig({
         paddingX: 2,
       },
     },
-    lg: {
+    md: {
       tablist: {
         height: "42px",
         padding: 0.5,
@@ -89,7 +115,7 @@ const config = helpers.defineMultiStyleConfig({
         paddingX: 2,
       },
     },
-    xl: {
+    lg: {
       tablist: {
         height: "54px",
         padding: "4px",
@@ -101,267 +127,35 @@ const config = helpers.defineMultiStyleConfig({
     },
   },
   defaultProps: {
-    size: "md",
-    variant: "round",
+    size: "sm",
+    variant: "base",
   },
 });
 
 export default config;
 
-const getTabColorSchemeProps = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        color: "white",
-      };
-    case "light":
-      return {
-        color: "darkGrey",
-      };
-    case "green":
-      return {
-        color: "darkTeal",
-      };
-    case "grey":
-      return {
-        color: "darkGrey",
-      };
-    case "base":
-      return {
-        color: mode("darkGrey", "white")(props),
-      };
-    case "accent":
-      return {
-        color: mode("darkTeal", "white")(props),
-      };
-    default:
-      return {};
-  }
-};
-
-const getTabColorSchemeSelectedProps = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "white",
-        color: "darkTeal",
-        _focus: {
-          boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
-        },
-        "&:focus:not(:focus-visible)": {
-          boxShadow: "none",
-        },
-        _focusVisible: {
-          boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
-        },
-        _hover: {
-          backgroundColor: "white",
-          color: "darkTeal",
-        },
-        _active: {
-          backgroundColor: "white",
-          color: "darkTeal",
-        },
-      };
-    case "base":
-      return {
-        backgroundColor: "pine",
-        color: "white",
-        _hover: {
-          backgroundColor: "darkTeal",
-          color: "white",
-        },
-        _active: {
-          backgroundColor: "darkTeal",
-          color: "white",
-        },
-      };
-    case "accent":
-      return {
-        backgroundColor: "pine",
-        color: "white",
-        _hover: {
-          backgroundColor: "darkTeal",
-          color: "white",
-        },
-        _active: {
-          backgroundColor: "darkTeal",
-          color: "white",
-        },
-      };
-    default:
-      return {
-        backgroundColor: "darkTeal",
-        color: "white",
-        _hover: {
-          backgroundColor: "darkTeal",
-          color: "white",
-        },
-        _active: {
-          backgroundColor: "darkTeal",
-          color: "white",
-        },
-      };
-  }
-};
-
-const getTabColorSchemeFocusProps = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`,
-      };
-    case "base":
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`,
-      };
-    case "accent":
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.azure}`,
-      };
-    default:
-      return {
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
-      };
-  }
-};
-
 const getTabColorSchemeHoverProps = (props: StyleFunctionProps) => {
   switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "pine",
-      };
-    case "light":
-      return {
-        backgroundColor: "silver",
-      };
-    case "green":
-      return {
-        backgroundColor: "coralGreen",
-      };
-    case "grey":
-      return {
-        backgroundColor: "silver",
-      };
     case "base":
       return {
-        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),
+        ...baseBorder("hover", props),
       };
     case "accent":
       return {
-        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
-        color: mode("darkTeal", "white")(props),
+        ...accentBackground("hover", props),
       };
-    default:
-      return {};
   }
 };
 
 const getTabColorSchemeActiveProps = (props: StyleFunctionProps) => {
   switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "celadon",
-        color: "white",
-      };
-    case "light":
-      return {
-        backgroundColor: "mint",
-        color: "darkGrey",
-      };
-    case "green":
-      return {
-        backgroundColor: "seaMist",
-        color: "darkTeal",
-      };
-    case "grey":
-      return {
-        backgroundColor: "lightGrey",
-        color: "darkGrey",
-      };
-    case "base":
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props),
-      };
-    case "accent":
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
-        color: mode("darkTeal", "white")(props),
-      };
-    default:
-      return {};
-  }
-};
-
-const getTabColorSchemeDisabledProps = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        color: "lightAlpha.200",
-      };
-    case "light":
-      return {
-        color: "silver",
-      };
-    case "green":
-      return {
-        color: "coralGreen",
-      };
-    case "grey":
-      return {
-        color: "steel",
-      };
-    case "base":
-      return {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      };
-    case "accent":
-      return {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      };
-    default:
-      return {};
-  }
-};
-
-const getTablistColorSchemeProps = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return { backgroundColor: "darkTeal", color: "white" };
-    case "light":
-      return {
-        backgroundColor: "white",
-        color: "darkGrey",
-        boxShadow: `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`,
-      };
-    case "green":
-      return { backgroundColor: "mint", color: "darkTeal" };
-    case "grey":
-      return {
-        backgroundColor: "platinum",
-        color: "darkGrey",
-      };
     case "base":
       return {
-        backgroundColor: mode("white", "transparent")(props),
-        color: "darkGrey",
-        boxShadow: mode(
-          `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`,
-          `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`,
-        )(props),
+        ...baseBackground("active", props),
       };
     case "accent":
       return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: "darkTeal",
+        ...accentBackground("active", props),
       };
-    default:
-      return {};
   }
 };

package/src/theme/components/travel-tag.ts

@@ -1,8 +1,7 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { anatomy, mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const parts = anatomy("travel-tag").parts(
   "container",
@@ -31,11 +30,9 @@ const config = helpers.defineMultiStyleConfig({
         backgroundColor: "silver",
       },
       "button&, a&": {
+        boxShadow: "sm",
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: props.theme.colors.blackAlpha[100],
-            baseShadow: "sm",
-          }),
+          boxShadow: "md",
         },
         ...focusVisibleStyles(props),
         _active: {

package/src/theme/foundations/colors.ts

@@ -1,10 +1,12 @@
 import tokens from "@vygruppen/spor-design-tokens";
 
 export type ColorsType = typeof tokens.color.alias &
-  typeof tokens.color.palette & { linjetag: typeof tokens.color.linjetag };
+  typeof tokens.color.palette &
+  typeof tokens.color.vyDigital & { linjetag: typeof tokens.color.linjetag };
 
 export const colors: ColorsType = {
   ...tokens.color.alias,
   ...tokens.color.palette,
+  ...tokens.color.vyDigital,
   linjetag: tokens.color.linjetag,
 };

package/src/theme/foundations/fonts.ts

@@ -1,7 +1,7 @@
 import tokens from "@vygruppen/spor-design-tokens";
 
 export const fonts = {
-  body: `${tokens.font.family.body}, sans-serif`,
-  heading: `${tokens.font.family.heading}, sans-serif`,
+  body: `${tokens.font.family.body}, arial, sans-serif`,
+  heading: `${tokens.font.family.heading}, arial, sans-serif`,
   mono: `${tokens.font.family.monospace}, monospace`,
 };

package/src/theme/index.ts

@@ -17,14 +17,17 @@ export const theme = {
 };
 
 export const brandTheme = {
-  [Brand.VyDigital]: {
-    colors: {
-      accent: foundations.colors.night,
-    },
-  },
+  [Brand.VyDigital]: {},
   [Brand.VyUtvikling]: {
     colors: {
-      accent: foundations.colors.darkGrey,
+      accent: {
+        surface: {
+          default: {
+            light: foundations.colors.seaMist,
+            dark: foundations.colors.darkGrey,
+          },
+        },
+      },
     },
   },
 };