@vygruppen/spor-react 6.2.3 → 7.0.1

package/src/theme/components/datepicker.ts

@@ -2,7 +2,7 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy, cssVar, mode } from "@chakra-ui/theme-tools";
 import { colors, zIndices } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisible } from "../utils/focus-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const parts = anatomy("datepicker").parts(
   "wrapper",
@@ -40,6 +40,9 @@ const config = helpers.defineMultiStyleConfig({
       _disabled: {
         pointerEvents: "none",
       },
+      _focusWithin: {
+        ...focusVisibleStyles(props)._focusVisible,
+      },
     },
     inputLabel: {
       fontSize: "mobile.xs",
@@ -55,7 +58,10 @@ const config = helpers.defineMultiStyleConfig({
     },
     calendarTriggerButton: {
       backgroundColor: mode("white", "night")(props),
-      boxShadow: "none",
+      boxShadow: getBoxShadowString({
+        borderColor: mode("darkGrey", "white")(props),
+        borderWidth: 1,
+      }),
       width: 8,
       display: "flex",
       alignItems: "center",
@@ -76,21 +82,7 @@ const config = helpers.defineMultiStyleConfig({
       _active: {
         backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
-      ...focusVisible({
-        focus: {
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-          }),
-        },
-        notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 1,
-          }),
-        },
-      }),
+      ...focusVisibleStyles(props),
       _invalid: {
         boxShadow: getBoxShadowString({
           borderColor: "brightRed",
@@ -110,7 +102,6 @@ const config = helpers.defineMultiStyleConfig({
         baseShadow: "md",
       }),
     },
-
     weekdays: {
       color: mode("darkGrey", "white")(props),
     },
@@ -132,27 +123,11 @@ const config = helpers.defineMultiStyleConfig({
       _hover: {
         backgroundColor: mode("seaMist", "pine")(props),
       },
-      ...focusVisible({
-        focus: {
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            borderColor: mode("greenHaze", "azure")(props),
-          }),
-        },
-        notFocus: {
-          boxShadow: "none",
-          _hover: {
-            boxShadow: getBoxShadowString({
-              borderWidth: 2,
-              borderColor: "osloGrey",
-            }),
-          },
-          _active: {
-            color: mode("darkGrey", "white")(props),
-          },
-        },
-      }),
+      _focusVisible: {
+        outlineColor: "greenHaze",
+        outlineWidth: 2,
+        outlineStyle: "solid",
+      },
       _active: {
         backgroundColor: "seaMist",
         boxShadow: "none",
@@ -177,13 +152,6 @@ const config = helpers.defineMultiStyleConfig({
           borderWidth: 1,
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
         }),
-        _focus: {
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            borderColor: mode("greenHaze", "azure")(props),
-          }),
-        },
       },
       "&[data-unavailable]": {
         pointerEvents: "none",
@@ -203,12 +171,6 @@ const config = helpers.defineMultiStyleConfig({
             borderWidth: 2,
           }),
         },
-        _focusWithin: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-          }),
-        },
         _invalid: {
           boxShadow: getBoxShadowString({
             borderColor: "brightRed",
@@ -262,13 +224,6 @@ const config = helpers.defineMultiStyleConfig({
             baseShadow: "sm",
           }),
         },
-        _focusWithin: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-            baseShadow: "sm",
-          }),
-        },
         _invalid: {
           boxShadow: getBoxShadowString({
             borderColor: "brightRed",
@@ -315,12 +270,6 @@ const config = helpers.defineMultiStyleConfig({
             borderWidth: 2,
           }),
         },
-        _focusWithin: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-          }),
-        },
         _invalid: {
           boxShadow: getBoxShadowString({
             borderColor: "brightRed",

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",
@@ -24,28 +23,21 @@ const config = helpers.defineMultiStyleConfig({
       position: "fixed",
       ...getPositionProps(props),
       _disabled: {
-        backgroundColor: "whiteAlpha.400",
-        color: "white",
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
       },
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2,
-            baseShadow: "md",
-          }),
-        },
-        notFocus: {
-          boxShadow: "md",
-        },
-      }),
+      ...focusVisibleStyles(props),
       _hover: {
         backgroundColor: "seaMist",
+        _disabled: {
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        },
       },
       zIndex: "sticky",
     },
     icon: {
-      mr: props.isTextVisible ? 1 : 0,
+      marginRight: props.isTextVisible ? 1 : 0,
     },
     text: {
       display: "flex",
@@ -64,15 +56,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 +80,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 +98,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 +112,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