@vygruppen/spor-react 3.7.6 → 3.8.0

package/src/theme/components/fab.ts

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { anatomy, mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
 
@@ -89,6 +89,81 @@ const config = helpers.defineMultiStyleConfig({
         _active: { color: "darkTeal", backgroundColor: "lightGrey" },
       },
     },
+    brand: (props) => ({
+      container: {
+        backgroundColor: mode("darkTeal", "mint")(props),
+        color: mode("white", "darkTeal")(props),
+        _active: { backgroundColor: mode("pine", "white")(props) },
+        _hover: {
+          backgroundColor: mode("night", "seaMist")(props),
+        },
+        ...focusVisible({
+          focus: {
+            boxShadow: mode(
+            `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.darkTeal}, inset 0 0 0 6px ${props.theme.colors.white}`, 
+            `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.darkTeal}`
+            )(props),
+            outline: "none",
+          },
+          notFocus: {
+            boxShadow: "md",
+          },
+        }),
+      },
+    }),
+    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)
+        },
+        _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)
+        },
+        ...focusVisible({
+          focus: {
+            boxShadow: mode(
+            `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.white}, inset 0 0 0 6px ${props.theme.colors.darkGrey}`, 
+            `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.brightRed }, inset 0 0 0 6px ${props.theme.colors.white}`
+            )(props),
+            outline: "none",
+          },
+          notFocus: {
+            boxShadow: "md",
+          },
+        }),
+      },
+    }),
+    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)
+        },
+        _hover: {
+          backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
+          color: mode("darkTeal", "white")(props)
+        },
+        ...focusVisible({
+          focus: {
+            boxShadow: mode(
+            `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.mint}, inset 0 0 0 6px ${props.theme.colors.azure}`, 
+            `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.pine}, inset 0 0 0 6px ${props.theme.colors.azure}`
+            )(props),
+            outline: "none",
+          },
+          notFocus: {
+            boxShadow: "md",
+          },
+        }),
+      },
+    }),
   },
   defaultProps: {
     variant: "dark",

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

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy } from "@chakra-ui/theme-tools";
+import { StyleFunctionProps, anatomy, mode } from "@chakra-ui/theme-tools";
 import travelTagStyles from "./travel-tag";
 
 const parts = anatomy("info-tag").parts(
@@ -20,6 +20,9 @@ const config = helpers.defineMultiStyleConfig({
       ...travelTagStyles.baseStyle!(props).iconContainer,
       padding: 1,
     },
+    textContainer: {
+      color: mode("darkGrey", "white")(props),
+    },
   }),
   sizes: {
     ...travelTagStyles.sizes,
@@ -45,5 +48,17 @@ const config = helpers.defineMultiStyleConfig({
   defaultProps: {
     size: "md",
   },
+ variants: {
+    "walk": (props)  => ({
+      iconContainer: {
+        backgroundColor: mode("white", "transparent")(props),
+        boxShadow: mode(
+          `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.black[200]}`, 
+          `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.whiteAlpha[400]}`
+          )(props),
+      },
+    }),
+  }
 });
 export default config;
+

package/src/theme/components/line-icon.ts

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 
 const parts = anatomy("line-tag").parts("iconContainer", "icon");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -77,8 +77,9 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
     },
+    
+    walk: (props) => ({
 
-    walk: {
       iconContainer: {
         backgroundColor: "white",
         borderWidth: 1,
@@ -86,12 +87,12 @@ const config = helpers.defineMultiStyleConfig({
         borderColor: "blackAlpha.200",
       },
       icon: {
-        color: "darkGrey",
+        color: mode("darkGrey", "white")(props),
         "[aria-disabled=true] &": {
           color: "osloGrey",
         },
       },
-    },
+    }),
   },
   sizes: {
     sm: {

package/src/theme/components/link.ts

@@ -14,7 +14,7 @@ const config = defineStyleConfig({
     backgroundPosition: "0 100%",
     backgroundRepeat: "no-repeat",
     borderRadius: "none",
-    pb: "2px",
+    padding: "2px",
     color: "inherit",
     display: "inline",
     position: "relative",
@@ -37,12 +37,12 @@ const config = defineStyleConfig({
   },
   variants: {
     primary: (props) => ({
-      color: mode("pine", "seaMist")(props),
+      color: mode("pine", "coralGreen")(props),
       ...focusVisible({
         focus: {
-          backgroundColor: "transparent",
+          backgroundColor: mode("pine", "white")(props),
+          color: mode("white", "pine")(props),
           boxShadow: getBoxShadowString({
-            borderColor: "azure",
             borderWidth: 2,
             isInset: false,
           }),
@@ -54,34 +54,20 @@ const config = defineStyleConfig({
         },
       }),
       _hover: {
-        color: "white",
-        backgroundColor: "pine",
-        boxShadow: getBoxShadowString({
-          borderColor: "pine",
-          borderWidth: 2,
-          isInset: false,
-        }),
+        color: mode("darkTeal", "white")(props),
+        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
       },
       _active: {
-        color: "white",
-        backgroundColor: "azure",
-        boxShadow: getBoxShadowString({
-          borderColor: "azure",
-          borderWidth: 2,
-          isInset: false,
-        }),
+        color: mode("pine", "white")(props),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
       },
     }),
     secondary: (props) => ({
       color: mode("darkGrey", "white")(props),
       ...focusVisible({
         focus: {
-          backgroundColor: "transparent",
-          boxShadow: getBoxShadowString({
-            borderColor: "azure",
-            borderWidth: 2,
-            isInset: false,
-          }),
+          backgroundColor: mode("darkGrey", "white")(props),
+          color: mode("white", "darkTeal")(props)
         },
         notFocus: {
           boxShadow: "none",
@@ -89,20 +75,12 @@ const config = defineStyleConfig({
         },
       }),
       _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("seaMist", "pine")(props),
-          borderWidth: 2,
-          isInset: false,
-        }),
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
+        color: mode("darkGrey", "white")(props)
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("mint", "whiteAlpha.200")(props),
-          borderWidth: 2,
-          isInset: false,
-        }),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+        color: mode("darkGrey", "white")(props)
       },
     }),
     /**

package/src/theme/components/modal.ts

@@ -1,6 +1,6 @@
 import { modalAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import type { PartsStyleObject } from "@chakra-ui/theme-tools";
+import { mode, type PartsStyleObject } from "@chakra-ui/theme-tools";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -19,8 +19,8 @@ const config = helpers.defineMultiStyleConfig({
     },
     dialog: {
       borderRadius: "md",
-      background: "white",
-      color: "inherit",
+      background: mode("white", "night")(props),
+      color: mode("inherit", "white")(props),
       my: "3.75rem",
       zIndex: "modal",
       maxHeight:
@@ -36,6 +36,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     closeButton: {
       position: "absolute",
+      color: "inherit",
       top: 3,
       insetEnd: 3,
     },

package/src/theme/components/tabs.ts

@@ -1,6 +1,6 @@
 import { tabsAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { mode, type StyleFunctionProps } from "@chakra-ui/theme-tools";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -129,6 +129,14 @@ const getTabColorSchemeProps = (props: StyleFunctionProps) => {
       return {
         color: "darkGrey",
       };
+    case "base":
+      return {
+        color: mode("darkGrey", "white")(props),
+      };
+    case "accent":
+      return {
+        color: mode("darkTeal", "white")(props),
+      };
     default:
       return {};
   }
@@ -158,6 +166,32 @@ const getTabColorSchemeSelectedProps = (props: StyleFunctionProps) => {
           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",
@@ -180,6 +214,14 @@ const getTabColorSchemeFocusProps = (props: StyleFunctionProps) => {
       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}`,
@@ -205,6 +247,16 @@ const getTabColorSchemeHoverProps = (props: StyleFunctionProps) => {
       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)
+      };
+    case "accent":
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+        color: mode("darkTeal", "white")(props)
+      };
     default:
       return {};
   }
@@ -232,6 +284,16 @@ const getTabColorSchemeActiveProps = (props: StyleFunctionProps) => {
         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 {};
   }
@@ -255,6 +317,14 @@ const getTabColorSchemeDisabledProps = (props: StyleFunctionProps) => {
       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 {};
   }
@@ -277,6 +347,17 @@ const getTablistColorSchemeProps = (props: StyleFunctionProps) => {
         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),
+      };
+    case "accent":
+      return { 
+        backgroundColor: mode("mint", "whiteAlpha.100")(props), 
+        color: "darkTeal" 
+      };
     default:
       return {};
   }

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

@@ -1,6 +1,6 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { anatomy } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
 
@@ -138,9 +138,9 @@ const config = helpers.defineMultiStyleConfig({
         backgroundColor: "linjetag.altTransportLight",
       },
     },
-    walk: {
+    walk: (props) => ({
       container: {
-        backgroundColor: "white",
+        backgroundColor: mode("white", "transparent")(props),
         _disabled: {
           backgroundColor: "white",
         },
@@ -149,6 +149,7 @@ const config = helpers.defineMultiStyleConfig({
         border: "none",
         position: "relative",
         left: -1,
+        backgroundColor: mode("white", "transparent")(props),
         "[aria-disabled=true] &": {
           backgroundColor: "transparent",
           color: "osloGrey",
@@ -165,11 +166,12 @@ const config = helpers.defineMultiStyleConfig({
       title: {
         fontSize: "mobile.xs",
         fontWeight: "normal",
+        color: mode("black", "white")(props)
       },
       description: {
         display: "none",
       },
-    },
+    }),
   },
   sizes: {
     sm: {