@vygruppen/spor-react 6.2.3 → 7.0.1

package/src/theme/components/modal.ts

@@ -28,9 +28,9 @@ const config = helpers.defineMultiStyleConfig({
       boxShadow: "md",
     },
     header: {
-      px: 5,
-      pt: 6,
-      pb: 2,
+      paddingX: 5,
+      paddingTop: 6,
+      paddingBottom: 2,
       fontWeight: "bold",
       fontFamily: "body",
     },
@@ -41,14 +41,14 @@ const config = helpers.defineMultiStyleConfig({
       insetEnd: 3,
     },
     body: {
-      px: 5,
-      pb: 6,
+      paddingX: 5,
+      paddingBottom: 6,
       flex: 1,
       overflow: props.scrollBehavior === "inside" ? "auto" : undefined,
     },
     footer: {
-      px: 3,
-      pb: 3,
+      paddingX: 3,
+      paddingBottom: 3,
     },
   }),
   sizes: {

package/src/theme/components/popover.ts

@@ -1,8 +1,7 @@
 import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { cssVar, mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisible } from "../utils/focus-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const $popperBg = cssVar("popper-bg");
 const $arrowBg = cssVar("popper-arrow-bg");
@@ -22,7 +21,7 @@ const config = helpers.defineMultiStyleConfig({
       [$arrowShadowColor.variable]: `colors.blackAlpha.300`,
       color: "white",
       borderRadius: "sm",
-      p: 1.5,
+      padding: 1.5,
       zIndex: "inherit",
       maxWidth: "20em",
       _focus: {
@@ -40,14 +39,7 @@ const config = helpers.defineMultiStyleConfig({
       position: "absolute",
       color: "white",
       hover: "whiteAlpha.100",
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({ borderColor: "azure" }),
-        },
-        notFocus: {
-          boxShadow: "none",
-        },
-      }),
+      ...focusVisibleStyles(props),
       _active: {
         backgroundColor: "whiteAlpha.200",
       },
@@ -62,14 +54,14 @@ const config = helpers.defineMultiStyleConfig({
   sizes: {
     sm: {
       content: {
-        px: 1.5,
-        py: 1,
+        paddingX: 1.5,
+        paddingY: 1,
       },
     },
     lg: {
       content: {
-        px: 3,
-        py: 2,
+        paddingX: 3,
+        paddingY: 2,
       },
     },
   },

package/src/theme/components/progress-indicator.ts

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 
 const parts = anatomy("progress-indicator").parts(
   "root",
@@ -29,14 +29,10 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
       circle: {
-        fill: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        fill: mode("blackAlpha.200", "whiteAlpha.200")(props),
       },
     },
   }),
-
-  variants: {
-    base: (props) => ({}),
-  },
   defaultProps: {
     variant: "base",
   },

package/src/theme/components/radio.ts

@@ -1,10 +1,11 @@
 import { radioAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       _hover: {
         "input:enabled + .chakra-radio__control": {
@@ -28,10 +29,8 @@ const config = helpers.defineMultiStyleConfig({
       borderColor: "primaryGreen",
       borderRadius: "50%",
 
-      _focus: {
-        backgroundColor: "seaMist",
-        borderColor: "azure",
-      },
+      ...focusVisibleStyles(props),
+
       _disabled: {
         backgroundColor: "lightGrey",
         borderColor: "steel",
@@ -48,17 +47,12 @@ const config = helpers.defineMultiStyleConfig({
           borderRadius: "50%",
           background: "currentColor",
         },
-
-        _focus: {
-          backgroundColor: "white",
-          color: "azure",
-        },
         _disabled: {
           backgroundColor: "lightGrey",
           borderColor: "steel",
         },
       },
     },
-  },
+  }),
 });
 export default config;

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 { default as Input } from "./input";
 
 const parts = selectAnatomy.extend("root");
 
@@ -19,7 +19,7 @@ const config = helpers.defineMultiStyleConfig({
         left: 3,
         zIndex: 2,
         position: "absolute",
-        my: 2,
+        marginY: 2,
         transformOrigin: "top left",
         transform: [
           "scale(0.825) translateY(-12px)",

package/src/theme/components/stepper.ts

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 
 const parts = anatomy("stepper").parts(
   "root",
@@ -18,30 +18,30 @@ const parts = anatomy("stepper").parts(
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
+  baseStyle: {
     root: {
       display: "flex",
       alignItems: "center",
-      justifyContent: ["space-between", "center"],
-      minHeight: ["48px", "60px"],
+      justifyContent: ["space-between", null, "center"],
+      minHeight: ["48px", null, "60px"],
       overflowX: "auto",
       width: "100%",
     },
     container: {
-      px: [2, 2, 0],
+      paddingX: [2, null, null, 0],
       maxWidth: "container.lg",
-      mx: "auto",
+      marginX: "auto",
       width: "100%",
     },
     innerContainer: {
       overflow: "hidden",
-      display: ["flex", "none"],
+      display: ["flex", null, "none"],
       alignItems: "center",
       justifyContent: "space-between",
     },
     backButton: {
       borderRadius: "xs",
-      px: 0,
+      paddingX: 0,
       width: "auto",
       minWidth: "auto",
     },
@@ -51,7 +51,7 @@ const config = helpers.defineMultiStyleConfig({
       WebkitLineClamp: 2,
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
-      ml: 2,
+      marginLeft: 2,
       textAlign: "right",
     },
     stepContainer: {
@@ -62,9 +62,9 @@ const config = helpers.defineMultiStyleConfig({
       textStyle: "sm",
       whiteSpace: "nowrap",
     },
-  }),
+  },
   variants: {
-    base: (props) => ({
+    base: () => ({
       root: {
         backgroundColor: "transparent",
       },

package/src/theme/components/switch.ts

@@ -3,7 +3,7 @@ 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 { focusVisible } from "../utils/focus-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const $width = cssVar("switch-track-width");
 const $height = cssVar("switch-track-height");
@@ -53,38 +53,7 @@ const config = helpers.defineMultiStyleConfig({
             borderColor: colors.whiteAlpha[400],
           }),
         )({ colorMode }),
-
-        ...focusVisible({
-          focus: {
-            boxShadow: mode(
-              getBoxShadowString([
-                {
-                  borderColor: "white",
-                  borderWidth: 2,
-                  isInset: false,
-                },
-                {
-                  borderColor: "primaryGreen",
-                  borderWidth: 4,
-                  isInset: false,
-                },
-              ]),
-              getBoxShadowString({
-                borderColor: "coralGreen",
-                borderWidth: 2,
-                isInset: false,
-              }),
-            )({ colorMode }),
-          },
-          notFocus: {
-            boxShadow: mode(
-              "none",
-              getBoxShadowString({
-                borderColor: colors.whiteAlpha[400],
-              }),
-            )({ colorMode }),
-          },
-        }),
+        ...focusVisibleStyles({ colorMode }),
         _hover: {
           backgroundColor: "steel",
           boxShadow: mode(
@@ -94,35 +63,6 @@ const config = helpers.defineMultiStyleConfig({
         },
         _checked: {
           backgroundColor: mode("darkTeal", "celadon")({ colorMode }),
-          ...focusVisible({
-            focus: {
-              boxShadow: mode(
-                getBoxShadowString([
-                  {
-                    borderColor: "white",
-                    borderWidth: 2,
-                    isInset: false,
-                  },
-                  {
-                    borderColor: "primaryGreen",
-                    borderWidth: 4,
-                    isInset: false,
-                  },
-                ]),
-                getBoxShadowString({
-                  borderWidth: 2,
-                  borderColor: "coralGreen",
-                  isInset: false,
-                }),
-              )({ colorMode }),
-            },
-            notFocus: {
-              boxShadow: mode(
-                "none",
-                getBoxShadowString({ borderColor: colors.white }),
-              )({ colorMode }),
-            },
-          }),
 
           _hover: {
             backgroundColor: mode("pine", "river")({ colorMode }),
@@ -161,10 +101,6 @@ const config = helpers.defineMultiStyleConfig({
         boxShadow: getBoxShadowString({
           borderColor: colors.blackAlpha["400"],
         }),
-        _focus: {
-          backgroundColor: "platinum",
-          boxShadow: `0 0 0 2px ${colors.greenHaze}`,
-        },
         _hover: {
           backgroundColor: "white",
         },
@@ -173,10 +109,6 @@ const config = helpers.defineMultiStyleConfig({
           _hover: {
             backgroundColor: "mint",
           },
-          _focus: {
-            backgroundColor: "white",
-            boxShadow: `0 0 0 4px ${colors.greenHaze}, 0 0 0 2px ${colors.white}`,
-          },
         },
       },
       thumb: {
@@ -196,7 +128,7 @@ const config = helpers.defineMultiStyleConfig({
       },
       track: {
         borderRadius: "24px",
-        p: "2px",
+        padding: "2px",
       },
     },
     md: {
@@ -206,7 +138,7 @@ const config = helpers.defineMultiStyleConfig({
       },
       track: {
         borderRadius: "30px",
-        p: "3px",
+        padding: "3px",
       },
     },
     lg: {
@@ -216,7 +148,7 @@ const config = helpers.defineMultiStyleConfig({
       },
       track: {
         borderRadius: "36px",
-        p: "3px",
+        padding: "3px",
       },
     },
   },

package/src/theme/components/table.ts

@@ -106,16 +106,16 @@ const config = helpers.defineMultiStyleConfig({
         fontSize: ["mobile.xs", "desktop.xs"],
       },
       th: {
-        px: 3,
-        py: 1.5,
+        paddingX: 3,
+        paddingY: 1.5,
       },
       td: {
-        px: 3,
-        py: 1.5,
+        paddingX: 3,
+        paddingY: 1.5,
       },
       caption: {
-        px: 3,
-        py: 1.5,
+        paddingX: 3,
+        paddingY: 1.5,
       },
     },
     md: {
@@ -123,16 +123,16 @@ const config = helpers.defineMultiStyleConfig({
         fontSize: ["mobile.sm", "desktop.sm"],
       },
       th: {
-        px: 3,
-        py: 1.5,
+        paddingX: 3,
+        paddingY: 1.5,
       },
       td: {
-        px: 3,
-        py: 1.5,
+        paddingX: 3,
+        paddingY: 1.5,
       },
       caption: {
-        px: 3,
-        py: 1.5,
+        paddingX: 3,
+        paddingY: 1.5,
       },
     },
     lg: {
@@ -140,16 +140,16 @@ const config = helpers.defineMultiStyleConfig({
         fontSize: ["mobile.sm", "desktop.sm"],
       },
       th: {
-        px: 3,
-        py: "15px",
+        paddingX: 3,
+        paddingY: "15px",
       },
       td: {
-        px: 3,
-        py: "15px",
+        paddingX: 3,
+        paddingY: "15px",
       },
       caption: {
-        px: 3,
-        py: "15px",
+        paddingX: 3,
+        paddingY: "15px",
       },
     },
   },

package/src/theme/components/tabs.ts

@@ -1,6 +1,7 @@
 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";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -33,11 +34,7 @@ const config = helpers.defineMultiStyleConfig({
         pointerEvents: "none",
         ...getTabColorSchemeSelectedProps(props),
       },
-      _focus: getTabColorSchemeFocusProps(props),
-      ":focus:not(:focus-visible)": {
-        boxShadow: "none",
-      },
-      _focusVisible: getTabColorSchemeFocusProps(props),
+      ...focusVisibleStyles(props),
       _hover: getTabColorSchemeHoverProps(props),
       _active: getTabColorSchemeActiveProps(props),
       _disabled: getTabColorSchemeDisabledProps(props),
@@ -66,40 +63,40 @@ const config = helpers.defineMultiStyleConfig({
     sm: {
       tablist: {
         height: "30px",
-        p: "2px",
+        padding: "2px",
       },
       tab: {
-        px: 2,
-        py: 0,
+        paddingX: 2,
+        paddingY: 0,
       },
     },
     md: {
       tablist: {
         height: "36px",
-        p: 0.5,
+        padding: 0.5,
       },
       tab: {
-        px: 2,
+        paddingX: 2,
       },
     },
     lg: {
       tablist: {
         height: "42px",
-        p: 0.5,
+        padding: 0.5,
       },
       tab: {
         fontWeight: "bold",
-        px: 2,
+        paddingX: 2,
       },
     },
     xl: {
       tablist: {
         height: "54px",
-        p: "4px",
+        padding: "4px",
       },
       tab: {
         fontWeight: "bold",
-        px: 3,
+        paddingX: 3,
       },
     },
   },

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

@@ -2,7 +2,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 { focusVisible } from "../utils/focus-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const parts = anatomy("travel-tag").parts(
   "container",
@@ -37,20 +37,7 @@ const config = helpers.defineMultiStyleConfig({
             baseShadow: "sm",
           }),
         },
-        ...focusVisible({
-          focus: {
-            outline: "none",
-            borderColor: "transparent",
-            boxShadow: getBoxShadowString({
-              borderWidth: 2,
-              borderColor: "darkGrey",
-            }),
-          },
-          notFocus: {
-            boxShadow: "none",
-            borderColor: getDeviationBorderColor(props),
-          },
-        }),
+        ...focusVisibleStyles(props),
         _active: {
           opacity: 0.5,
           boxShadow: "none",

package/src/theme/utils/focus-util.ts

@@ -0,0 +1,10 @@
+import { mode } from "@chakra-ui/theme-tools";
+
+export const focusVisibleStyles = (props: any) => ({
+  _focusVisible: {
+    outlineWidth: "2px",
+    outlineColor: mode("greenHaze", "azure")(props),
+    outlineStyle: "solid",
+    outlineOffset: "1px",
+  },
+});

package/tsconfig.json

@@ -3,6 +3,6 @@
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "rootDir": ".",
-  },
+    "rootDir": "."
+  }
 }

package/src/theme/utils/focus-utils.ts

@@ -1,16 +0,0 @@
-import { SystemStyleObject } from "@chakra-ui/theme-tools";
-
-type FocusArgs = {
-  /** The styles applied for when the element is not focused */
-  notFocus: SystemStyleObject;
-  /** The styles applied for when the element is focused */
-  focus: SystemStyleObject;
-};
-/**
- * A helper function for applying focus styles in such a way that they work with Safari – which doesn't support :focus-visible.
- */
-export const focusVisible = ({ notFocus, focus }: FocusArgs) => ({
-  _focus: focus,
-  _focusVisible: focus,
-  "&[data-focus]:not([data-focus-visible])": notFocus,
-});