@vygruppen/spor-react 4.0.3 → 4.1.1

package/src/stepper/StepperStep.tsx

@@ -1,43 +1,83 @@
-import { Flex, useMultiStyleConfig } from "@chakra-ui/react";
+import { useMultiStyleConfig } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
-import { Box } from "..";
+import { Box, Button } from "..";
 import { useStepper } from "./StepperContext";
 
 type StepperStepProps = {
   children: React.ReactNode;
   stepNumber: number;
+  variant: "base" | "accent";
 };
-export const StepperStep = ({ children, stepNumber }: StepperStepProps) => {
-  const { activeStep, onClick, colorScheme } = useStepper();
-  const variant = getVariant(stepNumber!, activeStep);
+export const StepperStep = ({
+  children,
+  stepNumber,
+  variant,
+}: StepperStepProps) => {
+  const { activeStep, onClick } = useStepper();
+  const state = getState(stepNumber!, activeStep);
   const style = useMultiStyleConfig("Stepper", {
+    state,
     variant,
-    colorScheme,
   });
 
+  const adjustedProps = getButtonStylesForState(state);
+
   return (
     <Box __css={style.stepContainer}>
       {stepNumber > 1 && (
         <DropdownRightFill18Icon marginX={5} display={["none", "block"]} />
       )}
 
-      <Flex
-        __css={style.stepButton}
-        alignItems="center"
-        as="button"
-        type="button"
-        disabled={variant === "disabled" || variant === "active"}
+      <Button
+        size={"xs"}
+        variant={
+          state === "active"
+            ? "primary"
+            : state === "completed"
+            ? "additional"
+            : "ghost"
+        }
+        {...adjustedProps}
         onClick={() => onClick(stepNumber)}
       >
-        <Box __css={style.stepNumber}>{stepNumber}</Box>
-        <Box __css={style.stepTitle}>{children}</Box>
-      </Flex>
+        {children}
+      </Button>
     </Box>
   );
 };
 
-const getVariant = (stepNumber: number, activeStep: number) => {
+const getButtonStylesForState = (
+  state: "completed" | "active" | "disabled",
+): Record<string, any> => {
+  switch (state) {
+    case "active":
+      return {
+        _hover: {},
+        boxShadow: "none",
+        _focus: {},
+        _active: {},
+        cursor: "auto",
+      };
+    case "completed":
+      return {
+        boxShadow: "none",
+      };
+    case "disabled":
+      return {
+        _disabled: {},
+        _hover: {},
+        _focus: {},
+        _active: {},
+        color: "dimGrey",
+        cursor: "auto",
+      };
+    default:
+      return {};
+  }
+};
+
+const getState = (stepNumber: number, activeStep: number) => {
   if (stepNumber < activeStep) {
     return "completed";
   }

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");