@vygruppen/spor-react 6.2.3 → 7.0.0

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",
@@ -28,9 +28,9 @@ const config = helpers.defineMultiStyleConfig({
       width: "100%",
     },
     container: {
-      px: [2, 2, 0],
+      paddingX: [2, 2, 0],
       maxWidth: "container.lg",
-      mx: "auto",
+      marginX: "auto",
       width: "100%",
     },
     innerContainer: {
@@ -41,7 +41,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     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: {
@@ -64,7 +64,7 @@ const config = helpers.defineMultiStyleConfig({
     },
   }),
   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,
-});