@vygruppen/spor-react 6.2.2 → 7.0.0

package/src/theme/components/drawer.ts

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

package/src/theme/components/fab.ts

@@ -1,7 +1,6 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy, mode, StyleFunctionProps } 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("fab").parts("container", "icon", "text");
 
@@ -11,9 +10,9 @@ const config = helpers.defineMultiStyleConfig({
     container: {
       display: "flex",
       alignItems: "center",
-      py: 2,
-      pl: 2,
-      pr: props.isTextVisible ? 3 : 2,
+      paddingY: 2,
+      paddingLeft: 2,
+      paddingRight: props.isTextVisible ? 3 : 2,
       cursor: "pointer",
       overflowX: "hidden",
       whiteSpace: "nowrap",
@@ -27,25 +26,14 @@ const config = helpers.defineMultiStyleConfig({
         backgroundColor: "whiteAlpha.400",
         color: "white",
       },
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2,
-            baseShadow: "md",
-          }),
-        },
-        notFocus: {
-          boxShadow: "md",
-        },
-      }),
+      ...focusVisibleStyles(props),
       _hover: {
         backgroundColor: "seaMist",
       },
       zIndex: "sticky",
     },
     icon: {
-      mr: props.isTextVisible ? 1 : 0,
+      marginRight: props.isTextVisible ? 1 : 0,
     },
     text: {
       display: "flex",
@@ -64,15 +52,6 @@ const config = helpers.defineMultiStyleConfig({
         _hover: {
           backgroundColor: "night",
         },
-        ...focusVisible({
-          focus: {
-            boxShadow: `${props.theme.shadows.md}, inset 0 0 0 4px ${props.theme.colors.darkTeal}, inset 0 0 0 6px ${props.theme.colors.white}`,
-            outline: "none",
-          },
-          notFocus: {
-            boxShadow: "md",
-          },
-        }),
       },
     }),
     light: {
@@ -97,18 +76,6 @@ const config = helpers.defineMultiStyleConfig({
         _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) => ({
@@ -127,18 +94,6 @@ const config = helpers.defineMultiStyleConfig({
           )(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) => ({
@@ -153,18 +108,6 @@ const config = helpers.defineMultiStyleConfig({
           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",
-          },
-        }),
       },
     }),
   },

package/src/theme/components/form-label.ts

@@ -4,7 +4,7 @@ const config = defineStyleConfig({
   baseStyle: {
     fontSize: "mobile.sm",
     marginEnd: 3,
-    mb: 2,
+    marginBottom: 2,
     transitionProperty: "common",
     transitionDuration: "normal",
     opacity: 1,

package/src/theme/components/form.ts

@@ -17,7 +17,7 @@ const config = helpers.defineMultiStyleConfig({
       color: mode("brightRed", "lightRed")(props),
     },
     helperText: {
-      mt: 2,
+      marginTop: 2,
       color: mode("dimGrey", "whiteAlpha.600")(props),
       lineHeight: "normal",
       fontSize: "sm",

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

@@ -1,10 +1,9 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { focusVisible } from "../utils/focus-utils";
-import { srOnly } from "../utils/sr-utils";
-import { baseBorder, floatingBorder } from "../utils/border-utils";
 import { baseBackground, floatingBackground } from "../utils/background-utils";
-import { PartsStyleInterpolation } from "@chakra-ui/styled-system";
+import { baseBorder, floatingBorder } from "../utils/border-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
+import { srOnly } from "../utils/sr-utils";
 
 const parts = anatomy("InfoSelect").parts(
   "container",
@@ -36,15 +35,7 @@ const config = helpers.defineMultiStyleConfig({
       _hover: {
         ...baseBorder("hover", props),
       },
-      ...focusVisible({
-        focus: {
-          ...baseBorder("focus", props),
-          outline: "none",
-        },
-        notFocus: {
-          ...baseBorder("default", props),
-        },
-      }),
+      ...focusVisibleStyles(props),
       _disabled: {
         color: "whiteAlpha.400",
         ...baseBackground("disabled", props),
@@ -53,30 +44,18 @@ const config = helpers.defineMultiStyleConfig({
       },
       _active: {
         ...baseBackground("active", props),
-        ...baseBorder("focus", props),
-      },
-      _expanded: {
-        ...baseBorder("focus", props),
       },
       _invalid: {
         ...baseBorder("invalid", props),
         _hover: {
           ...baseBorder("hover", props),
         },
-        ...focusVisible({
-          focus: {
-            ...baseBorder("focus", props),
-          },
-          notFocus: {
-            ...baseBorder("invalid", props),
-          },
-        }),
       },
     },
     arrowIcon: {},
   }),
   variants: {
-    base: (props) => ({}),
+    base: () => ({}),
     floating: (props) => ({
       button: {
         ...floatingBackground("default", props),
@@ -85,15 +64,6 @@ const config = helpers.defineMultiStyleConfig({
           ...floatingBorder("hover", props),
           ...floatingBackground("hover", props),
         },
-        ...focusVisible({
-          focus: {
-            ...floatingBorder("focus", props),
-            outline: "none",
-          },
-          notFocus: {
-            ...floatingBorder("default", props),
-          },
-        }),
         _active: {
           ...floatingBorder("active", props),
           ...floatingBackground("active", props),

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

@@ -1,5 +1,5 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { StyleFunctionProps, anatomy, mode } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 import travelTagStyles from "./travel-tag";
 
 const parts = anatomy("info-tag").parts(

package/src/theme/components/input.ts

@@ -2,7 +2,7 @@ import { inputAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { 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 helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -18,7 +18,7 @@ const config = helpers.defineMultiStyleConfig({
       transitionProperty: "common",
       transitionDuration: "fast",
       position: "relative",
-      px: 3,
+      paddingX: 3,
       height: "54px",
       fontSize: "mobile.md",
 
@@ -37,19 +37,11 @@ const config = helpers.defineMultiStyleConfig({
           borderWidth: 2,
         }),
       },
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-          }),
-        },
-        notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-          }),
-        },
-      }),
+      _focusVisible: {
+        ...focusVisibleStyles(props)._focusVisible,
+        outlineOffset: -2,
+      },
+
       _disabled: {
         backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
         boxShadow: getBoxShadowString({
@@ -68,20 +60,6 @@ const config = helpers.defineMultiStyleConfig({
             borderWidth: 2,
           }),
         },
-        ...focusVisible({
-          focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("greenHaze", "azure")(props),
-              borderWidth: 2,
-            }),
-          },
-          notFocus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2,
-            }),
-          },
-        }),
       },
       " + label": {
         fontSize: ["mobile.sm", "desktop.sm"],
@@ -89,13 +67,13 @@ const config = helpers.defineMultiStyleConfig({
         left: props.paddingLeft || props.pl || 3,
         zIndex: 2,
         position: "absolute",
-        my: 2,
+        marginY: 2,
         transition: ".1s ease-out",
         transformOrigin: "top left",
         cursor: "text",
       },
       "&:not(:placeholder-shown)": {
-        pt: "16px",
+        paddingTop: "16px",
         "& + label": {
           transform: "scale(0.825) translateY(-10px)",
         },

package/src/theme/components/link.ts

@@ -1,10 +1,9 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { 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 config = defineStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     transitionProperty: "common",
     transitionDuration: "fast",
     transitionTimingFunction: "ease-out",
@@ -27,6 +26,8 @@ const config = defineStyleConfig({
       borderRadius: "xs",
     },
 
+    ...focusVisibleStyles(props),
+
     svg: {
       display: "inline-block",
       width: "1.125em",
@@ -34,25 +35,10 @@ const config = defineStyleConfig({
       position: "relative",
       bottom: "-0.2em",
     },
-  },
+  }),
   variants: {
     primary: (props) => ({
       color: mode("pine", "coralGreen")(props),
-      ...focusVisible({
-        focus: {
-          backgroundColor: mode("pine", "white")(props),
-          color: mode("white", "pine")(props),
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            isInset: false,
-          }),
-        },
-        notFocus: {
-          color: "pine",
-          backgroundColor: "transparent",
-          boxShadow: "none",
-        },
-      }),
       _hover: {
         color: mode("darkTeal", "white")(props),
         backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
@@ -64,16 +50,6 @@ const config = defineStyleConfig({
     }),
     secondary: (props) => ({
       color: mode("darkGrey", "white")(props),
-      ...focusVisible({
-        focus: {
-          backgroundColor: mode("darkGrey", "white")(props),
-          color: mode("white", "darkTeal")(props),
-        },
-        notFocus: {
-          boxShadow: "none",
-          backgroundColor: "transparent",
-        },
-      }),
       _hover: {
         backgroundColor: mode("blackAlpha.100", "whiteAlpha.200")(props),
         color: mode("darkGrey", "white")(props),

package/src/theme/components/listbox.ts

@@ -2,8 +2,8 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-import { baseBackground, ghostBackground } from "../utils/background-utils";
-import { baseBorder } from "../utils/border-utils";
+import { ghostBackground } from "../utils/background-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const parts = anatomy("ListBox").parts(
   "container",
@@ -41,12 +41,10 @@ const config = helpers.defineMultiStyleConfig({
       _active: {
         ...ghostBackground("active", props),
       },
-      _focus: {
-        ...ghostBackground("focus", props),
-      },
       _hover: {
         ...ghostBackground("hover", props),
       },
+      ...focusVisibleStyles(props),
       _selected: {
         ...ghostBackground("selected", props),
       },

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

@@ -1,13 +1,12 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy } 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("media-controller-button").parts("container", "icon");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       fontSize: 30,
       transitionProperty: "common",
@@ -21,6 +20,7 @@ const config = helpers.defineMultiStyleConfig({
       padding: 1,
       alignSelf: "center",
       color: "primaryGreen",
+      ...focusVisibleStyles(props),
     },
     icon: {
       flex: "0 0 auto",
@@ -28,7 +28,7 @@ const config = helpers.defineMultiStyleConfig({
       width: "1em",
       height: "1em",
     },
-  },
+  }),
   variants: {
     play: {
       container: {
@@ -39,34 +39,7 @@ const config = helpers.defineMultiStyleConfig({
         _active: {
           color: "greenHaze",
         },
-        ...focusVisible({
-          focus: {
-            position: "relative",
-            outline: "none",
-            _after: {
-              content: '""',
-              display: "block",
-              zIndex: 2,
-              margin: 0.5,
-              borderRadius: "round",
-              borderWidth: 2,
-              borderColor: "white",
-              borderStyle: "solid",
-              pointerEvents: "none",
-              position: "absolute",
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-              outline: "none",
-            },
-          },
-          notFocus: {
-            _after: {
-              display: "none",
-            },
-          },
-        }),
+
         _disabled: {
           color: "silver",
           _hover: {
@@ -80,18 +53,6 @@ const config = helpers.defineMultiStyleConfig({
     },
     jumpSkip: {
       container: {
-        ...focusVisible({
-          focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 2,
-            }),
-            outline: "none",
-          },
-          notFocus: {
-            boxShadow: "none",
-          },
-        }),
         _hover: {
           backgroundColor: "seaMist",
         },
@@ -130,5 +91,3 @@ const config = helpers.defineMultiStyleConfig({
 });
 
 export default config;
-
-// 3341 minus hund

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",
@@ -33,10 +33,6 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
   }),
-
-  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)",