@vygruppen/spor-react 4.0.2 → 4.1.0

package/src/theme/components/button.ts

@@ -31,73 +31,54 @@ const config = defineStyleConfig({
     },
   },
   variants: {
-    control: (props) => ({
-      backgroundColor: mode("darkTeal", "mint")(props),
-      color: mode("white", "darkTeal")(props),
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 4px ${mode(
-            colors.darkTeal,
-            colors.seaMist
-          )(props)}, inset 0 0 0 6px currentColor`,
-        },
-        notFocus: { boxShadow: "none" },
-      }),
-      _hover: {
-        backgroundColor: mode("night", "coralGreen")(props),
-      },
-      _active: {
-        backgroundColor: mode("pine", "white")(props),
-      },
-    }),
     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: "primaryGreen",
-      color: "white",
+      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      color: mode("white", "darkTeal")(props),
       ...focusVisible({
         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" },
       }),
       _hover: {
-        backgroundColor: "pine",
+        backgroundColor: mode("darkTeal", "blueGreen")(props),
       },
       _active: {
-        backgroundColor: "azure",
+        backgroundColor: mode("greenHaze", "seaMist")(props),
       },
     }),
     secondary: (props) => ({
       // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
-      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      backgroundColor: mode("seaMist", "primaryGreen")(props),
       color: mode("darkTeal", "white")(props),
       // order is important here for now while we do not have global defined background color for darkMode
       _hover: {
-        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
+        backgroundColor: mode("coralGreen", "greenHaze")(props),
       },
       ...focusVisible({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure
+            colors.primaryGreen,
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.blackAlpha[300]
+            colors.darkTeal,
           )(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)}`,
           },
         },
@@ -106,44 +87,44 @@ const config = defineStyleConfig({
         },
       }),
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "darkTeal")(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)}`,
         },
       },
     }),
-    additional: (props) => ({
+    tertiary: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
       fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
         colors.blackAlpha[400],
-        colors.whiteAlpha[400]
+        colors.whiteAlpha[400],
       )(props)}`,
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
             borderWidth: 2,
-            borderColor: "greenHaze",
+            borderColor: "azure",
           }),
         },
         notFocus: {
           boxShadow: `inset 0 0 0 1px ${mode(
             colors.blackAlpha[400],
-            colors.whiteAlpha[400]
+            colors.whiteAlpha[400],
           )(props)}`,
         },
       }),
@@ -153,7 +134,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),
       },
@@ -174,13 +155,13 @@ const config = defineStyleConfig({
         },
       }),
       _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
         _disabled: {
           color: "blackAlpha.300",
         },
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
       },
     }),
     floating: (props) => ({
@@ -190,7 +171,7 @@ const config = defineStyleConfig({
         baseShadow: "sm",
       }),
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "whiteAlpha.400")(props),
       },
       _hover: {
         backgroundColor: mode("white", "whiteAlpha.200")(props),

package/src/theme/components/card.ts

@@ -58,7 +58,8 @@ type CardThemeProps = {
     | "green"
     | "teal"
     | "yellow"
-    | "orange";
+    | "orange"
+    | "red";
   size: "sm" | "lg";
 };
 
@@ -84,6 +85,11 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
         backgroundColor: "seaMist",
       };
     }
+    case "red": {
+      return {
+        backgroundColor: "pink",
+      };
+    }
     default:
       return {
         backgroundColor: colors[colorScheme]?.[100] ?? "platinum",

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

@@ -18,7 +18,9 @@ const config = defineStyleConfig({
     ...focusVisible({
       focus: {
         outline: "none",
-        boxShadow: getBoxShadowString({ borderColor: mode("greenHaze", "azure")(props) }),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+        }),
         outlineOffset: "2px",
       },
       notFocus: {

package/src/theme/components/datepicker.ts

@@ -14,7 +14,7 @@ const parts = anatomy("datepicker").parts(
   "weekend",
   "dateCell",
   "inputLabel",
-  "dateTimeSegment"
+  "dateTimeSegment",
 );
 
 const $arrowBackground = cssVar("popper-arrow-bg");
@@ -50,7 +50,7 @@ const config = helpers.defineMultiStyleConfig({
     dateTimeSegment: {
       color: mode(
         "darkGrey",
-        props.isPlaceholder ? "whiteAlpha.400" : "white"
+        props.isPlaceholder ? "whiteAlpha.400" : "white",
       )(props),
     },
     calendarTriggerButton: {

package/src/theme/components/divider.ts

@@ -1,37 +1,37 @@
-import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system"
-import { mode } from "@chakra-ui/theme-tools"
+import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system";
+import { mode } from "@chakra-ui/theme-tools";
 
-const baseStyle = defineStyle(props => ({
-  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
-}))
+const baseStyle = defineStyle((props) => ({
+  borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props),
+}));
 
 const variantSolid = defineStyle({
   borderStyle: "solid",
-})
+});
 
 const variantDashed = defineStyle({
   borderStyle: "dashed",
-})
+});
 
 const variants = {
   solid: variantSolid,
   dashed: variantDashed,
-}
+};
 
 const sizes = {
   sm: {
-    borderWidth: '1px',
-    borderRadius: '0.5px',
+    borderWidth: "1px",
+    borderRadius: "0.5px",
   },
   md: {
-    borderWidth: '2px',
-    borderRadius: '1px',
+    borderWidth: "2px",
+    borderRadius: "1px",
   },
   lg: {
-    borderWidth: '3px',
-    borderRadius: '1.5px',
+    borderWidth: "3px",
+    borderRadius: "1.5px",
   },
-}
+};
 
 export default defineStyleConfig({
   baseStyle,
@@ -39,6 +39,6 @@ export default defineStyleConfig({
   sizes,
   defaultProps: {
     variant: "solid",
-    size: 'md',
+    size: "md",
   },
-})
+});

package/src/theme/components/fab.ts

@@ -100,8 +100,8 @@ const config = helpers.defineMultiStyleConfig({
         ...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.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",
           },
@@ -115,20 +115,23 @@ const config = helpers.defineMultiStyleConfig({
       container: {
         backgroundColor: mode("white", "whiteAlpha.100")(props),
         color: mode("darkGrey", "white")(props),
-        _active: { 
+        _active: {
           backgroundColor: mode("mint", "whiteAlpha.100")(props),
-          color: mode("darkGrey", "white")(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)
+          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.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",
           },
@@ -142,19 +145,19 @@ const config = helpers.defineMultiStyleConfig({
       container: {
         backgroundColor: mode("mint", "pine")(props),
         color: mode("darkTeal", "white")(props),
-        _active: { 
+        _active: {
           backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
-          color: mode("darkTeal", "white")(props)
+          color: mode("darkTeal", "white")(props),
         },
         _hover: {
           backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
-          color: mode("darkTeal", "white")(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.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",
           },

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

@@ -8,7 +8,7 @@ const parts = anatomy("info-tag").parts(
   "icon",
   "textContainer",
   "title",
-  "description"
+  "description",
 );
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -48,17 +48,16 @@ const config = helpers.defineMultiStyleConfig({
   defaultProps: {
     size: "md",
   },
- variants: {
-    "walk": (props)  => ({
+  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),
+          `${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/input.ts

@@ -45,13 +45,15 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: mode("darkGrey", "white")(props) }),
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+          }),
         },
       }),
       _disabled: {
         backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
         }),
         cursor: "not-allowed",
       },

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

@@ -77,9 +77,8 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
     },
-    
-    walk: (props) => ({
 
+    walk: (props) => ({
       iconContainer: {
         backgroundColor: "white",
         borderWidth: 1,

package/src/theme/components/media-controller-button.ts

@@ -131,4 +131,4 @@ const config = helpers.defineMultiStyleConfig({
 
 export default config;
 
-// 3341 minus hund
+// 3341 minus hund

package/src/theme/components/popover.ts

@@ -16,7 +16,7 @@ const config = helpers.defineMultiStyleConfig({
       zIndex: "popover",
     },
     content: {
-      [$popperBg.variable]: mode(`colors.darkTeal`, `colors.pine`)(props) ,
+      [$popperBg.variable]: mode(`colors.darkTeal`, `colors.pine`)(props),
       backgroundColor: $popperBg.reference,
       [$arrowBg.variable]: $popperBg.reference,
       [$arrowShadowColor.variable]: `colors.blackAlpha.300`,
@@ -43,7 +43,6 @@ const config = helpers.defineMultiStyleConfig({
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({ borderColor: "azure" }),
-      
         },
         notFocus: {
           boxShadow: "none",

package/src/theme/components/select.ts

@@ -1,7 +1,7 @@
-import {selectAnatomy} from "@chakra-ui/anatomy";
-import {createMultiStyleConfigHelpers} from "@chakra-ui/react";
-import {default as Input} from "./input";
-import {mode} from "@chakra-ui/theme-tools";
+import { selectAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { default as Input } from "./input";
+import { mode } from "@chakra-ui/theme-tools";
 
 const parts = selectAnatomy.extend("root");
 

package/src/theme/components/stepper.ts

@@ -12,7 +12,7 @@ const parts = anatomy("stepper").parts(
   "stepButton",
   "stepNumber",
   "stepTitle",
-  "closeButton"
+  "closeButton",
 );
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -20,7 +20,6 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
-      backgroundColor: getRootBackgroundColor(props),
       display: "flex",
       alignItems: "center",
       justifyContent: ["space-between", "center"],
@@ -39,7 +38,6 @@ const config = helpers.defineMultiStyleConfig({
       display: ["flex", "none"],
       alignItems: "center",
       justifyContent: "space-between",
-      color: getColor(props),
     },
     backButton: {
       borderRadius: "xs",
@@ -56,175 +54,30 @@ const config = helpers.defineMultiStyleConfig({
       ml: 2,
       textAlign: "right",
     },
-    stepCounter: {
-      whiteSpace: "nowrap",
-      textDecoration: "underline",
-    },
     stepContainer: {
       display: "flex",
       alignItems: "center",
     },
-    stepButton: {
-      color: "inherit",
-      display: "flex",
-      alignItems: "center",
-      padding: 1,
-      borderRadius: "xs",
-    },
-    stepNumber: {
-      borderRadius: "round",
-      border: "sm",
-      borderColor: "currentColor",
-      width: 4,
-      height: 4,
-      mr: 1,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontSize: ["mobile.xs", "desktop.xs"],
-    },
     stepTitle: {
       textStyle: "sm",
       whiteSpace: "nowrap",
     },
   }),
   variants: {
-    completed: (props) => ({
-      stepContainer: {
-        color: getColor(props),
-      },
-      stepButton: {
-        _hover: getHoverStyles(props),
-        _focus: getFocusStyles(props),
-        "&:focus:not(:focus-visible)": {
-          boxShadow: "none",
-        },
-        _focusVisible: getFocusStyles(props),
-        _active: getActiveStyles(props),
-      },
-    }),
-    active: (props) => ({
-      stepContainer: {
-        color: getColor(props),
-      },
-      stepButton: {
-        pointerEvents: "none",
-      },
-      stepNumber: getStepNumberStyles(props),
-      stepTitle: {
-        fontWeight: "bold",
+    base: (props) => ({
+      root: {
+        backgroundColor: "transparent",
       },
     }),
-    disabled: (props) => ({
-      stepContainer: {
-        color: getDisabledColor(props),
-      },
-      stepButton: {
-        pointerEvents: "none",
+    accent: (props) => ({
+      root: {
+        backgroundColor: mode("seaMist", "pine")(props),
       },
     }),
   },
   defaultProps: {
-    colorScheme: "green",
+    variant: "base",
   },
 });
 
 export default config;
-
-const getRootBackgroundColor = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "light":
-      return "white";
-    case "dark":
-      return "darkTeal";
-    case "green":
-    default:
-      return "seaMist";
-  }
-};
-
-const getColor = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "light":
-      return mode("darkGrey", "white")(props);
-    case "dark":
-      return "white";
-    case "green":
-    default:
-      return mode("darkTeal", "white")(props);
-  }
-};
-
-const getStepNumberStyles = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "white",
-        color: "darkTeal",
-      };
-    case "light":
-    case "green":
-    default:
-      return {
-        backgroundColor: mode("darkTeal", "white")(props),
-        color: mode("white", "darkTeal")(props),
-      };
-  }
-};
-
-const getDisabledColor = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return "whiteAlpha.400";
-    case "green":
-      return "dimGrey";
-    case "light":
-    default:
-      return "osloGrey";
-  }
-};
-
-const getHoverStyles = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return { backgroundColor: "pine" };
-    case "green":
-      return {
-        backgroundColor: mode("coralGreen", "primaryGreen")(props),
-      };
-    case "light":
-    default:
-      return {
-        backgroundColor: mode("seaMist", "primaryGreen")(props),
-      };
-  }
-};
-
-const getFocusStyles = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        outline: "none",
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`,
-      };
-    case "light":
-    case "green":
-    default:
-      return {
-        outline: "none",
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`,
-      };
-  }
-};
-
-const getActiveStyles = (props: StyleFunctionProps) => {
-  switch (props.colorScheme) {
-    case "light":
-      return { backgroundColor: "mint" };
-    case "dark":
-      return { backgroundColor: "celadon" };
-    case "green":
-    default:
-      return { color: "azure", backgroundColor: "transparent" };
-  }
-};