@vygruppen/spor-react 3.7.5 → 3.7.7

package/src/button/FloatingActionButton.tsx

@@ -11,7 +11,16 @@ import React, { useEffect } from "react";
 const MotionBox = motion(Box);
 
 type FloatingActionButtonProps = BoxProps & {
-  variant?: "green" | "light" | "dark";
+  variant?:
+   /** @deprecated dark is deprecated please use accent*/ 
+    "green" 
+   /** @deprecated dark is deprecated please use accent*/
+  | "light"
+   /** @deprecated dark is deprecated please use accent*/ 
+  | "dark"
+  | "accent"
+  | "base"
+  | "brand"
   placement?: "bottom right" | "bottom left" | "top right" | "top left";
   icon: React.ReactNode;
   children: React.ReactNode;

package/src/tab/Tabs.tsx

@@ -9,7 +9,17 @@ export type TabsProps = Exclude<
   ChakraTabsProps,
   "colorScheme" | "variant" | "orientation" | "size"
 > & {
-  colorScheme: "dark" | "light" | "green" | "grey";
+  colorScheme: 
+  /** @deprecated dark is deprecated please use accent*/
+  | "dark"
+  /** @deprecated light is deprecated please use default*/
+  | "light"
+  /** @deprecated green is deprecated please use accent*/
+  | "green"   
+  /** @deprecated grey is deprecated please use default*/
+  | "grey"
+  | "base" 
+  | "accent" ;
   /** Defaults to `md` */
   size?: "sm" | "md" | "lg" | "xl";
   /** Defaults to `round` */

package/src/theme/components/breadcrumb.ts

@@ -1,7 +1,10 @@
 import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/styled-system";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -15,10 +18,10 @@ const baseStyleLink = defineStyle((props) => ({
   color: "inherit",
   textDecoration: "none",
   textStyle: "xs",
+  paddingX: 0.5,
+  borderRadius: "xs",
   "&:not([aria-current=page])": {
     cursor: "pointer",
-    paddingX: 0.5,
-    borderRadius: "xs",
     _hover: {
       backgroundColor: mode("seaMist", "pine")(props),
     },
@@ -30,8 +33,8 @@ const baseStyleLink = defineStyle((props) => ({
         }),
       },
       notFocus: {
-        notFocus: { boxShadow: "none" },
-      }
+        boxShadow: "none",
+      },
     }),
     _active: {
       backgroundColor: mode("mint", "whiteAlpha.200")(props),

package/src/theme/components/button.ts

@@ -11,7 +11,9 @@ const config = defineStyleConfig({
     fontWeight: "bold",
     transitionProperty: "common",
     transitionDuration: "normal",
-    px: 3,
+    textWrap: "wrap",
+    paddingX: 3,
+    paddingY: 1,
     _focus: {
       boxShadow: 0,
       outline: 0,
@@ -36,7 +38,7 @@ const config = defineStyleConfig({
         focus: {
           boxShadow: `inset 0 0 0 4px ${mode(
             colors.darkTeal,
-            colors.seaMist,
+            colors.seaMist
           )(props)}, inset 0 0 0 6px currentColor`,
         },
         notFocus: { boxShadow: "none" },
@@ -57,10 +59,10 @@ const config = defineStyleConfig({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure,
+            colors.azure
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.darkGrey,
+            colors.darkGrey
           )(props)}`,
         },
         notFocus: { boxShadow: "none" },
@@ -84,18 +86,18 @@ const config = defineStyleConfig({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure,
+            colors.azure
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.blackAlpha[300],
+            colors.blackAlpha[300]
           )(props)}`,
           _hover: {
             boxShadow: `inset 0 0 0 2px ${mode(
               colors.greenHaze,
-              colors.azure,
+              colors.azure
             )(props)}, inset 0 0 0 4px ${mode(
               colors.white,
-              colors.blackAlpha[500],
+              colors.blackAlpha[500]
             )(props)}`,
           },
         },
@@ -107,18 +109,18 @@ const config = defineStyleConfig({
         backgroundColor: mode("mint", "whiteAlpha.300")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
           colors.greenHaze,
-          colors.azure,
+          colors.azure
         )(props)}, inset 0 0 0 4px ${mode(
           colors.white,
-          colors.blackAlpha[600],
+          colors.blackAlpha[600]
         )(props)}`,
         _hover: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure,
+            colors.azure
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.blackAlpha[600],
+            colors.blackAlpha[600]
           )(props)}`,
         },
       },
@@ -149,7 +151,7 @@ const config = defineStyleConfig({
       fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
         colors.blackAlpha[400],
-        colors.whiteAlpha[400],
+        colors.whiteAlpha[400]
       )(props)}`,
       ...focusVisible({
         focus: {
@@ -161,7 +163,7 @@ const config = defineStyleConfig({
         notFocus: {
           boxShadow: `inset 0 0 0 1px ${mode(
             colors.blackAlpha[400],
-            colors.whiteAlpha[400],
+            colors.whiteAlpha[400]
           )(props)}`,
         },
       }),
@@ -171,7 +173,7 @@ const config = defineStyleConfig({
       _active: {
         boxShadow: `inset 0 0 0 1px ${mode(
           colors.blackAlpha[400],
-          colors.whiteAlpha[300],
+          colors.whiteAlpha[300]
         )(props)}`,
         backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
@@ -260,7 +262,7 @@ const config = defineStyleConfig({
       minHeight: 5,
       minWidth: 5,
       fontSize: "16px",
-      px: 2,
+      paddingX: 2,
     },
   },
   defaultProps: {

package/src/theme/components/card.ts

@@ -2,6 +2,7 @@ import { defineStyleConfig } from "@chakra-ui/react";
 import { colors } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import { mode } from "@chakra-ui/theme-tools";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -22,7 +23,7 @@ const config = defineStyleConfig({
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
             isInset: false,
           }),
@@ -61,13 +62,18 @@ type CardThemeProps = {
   size: "sm" | "lg";
 };
 
-function getColorSchemeBaseProps({ colorScheme }: CardThemeProps): {
-  backgroundColor: string;
-} {
+const getColorSchemeBaseProps= (props: CardThemeProps) => {
+  const { colorScheme, size } = props;
+  const baseShadow = size === "lg" ? "md" : "sm";
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "white",
+        backgroundColor: mode("white", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: "silver",
+          isInset: false,
+        }),
       };
     case "grey":
       return {
@@ -116,12 +122,14 @@ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
   }
 }
 
-function getColorSchemeHoverProps({ colorScheme, size }: CardThemeProps) {
+const getColorSchemeHoverProps = (props: CardThemeProps) => {
+  const { colorScheme, size } = props;
   const baseShadow = size === "lg" ? "lg" : "md";
   switch (colorScheme) {
     case "white":
       return {
-        boxShadow: getBoxShadowString({
+        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        boxShadow: getBoxShadowString({   
           baseShadow,
           borderColor: colors.steel,
           isInset: false,
@@ -146,13 +154,13 @@ function getColorSchemeHoverProps({ colorScheme, size }: CardThemeProps) {
       };
   }
 }
-
-function getColorSchemeActiveProps({ colorScheme, size }: CardThemeProps) {
+const getColorSchemeActiveProps = (props: CardThemeProps) => {
+  const { colorScheme, size } = props;
   const baseShadow = size === "lg" ? "sm" : "none";
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "teal")(props),
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.silver,

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/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: {