@vygruppen/spor-react 4.0.1 → 4.0.3

package/src/linjetag/InfoTag.tsx

@@ -24,7 +24,7 @@ export type InfoTagProps = TagProps;
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 export const InfoTag = ({
   variant,

package/src/linjetag/LineIcon.tsx

@@ -23,7 +23,7 @@ export type LineIconProps = BoxProps & {
  * <LineIcon variant="subway" size="lg" />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 export const LineIcon = ({
   variant,

package/src/linjetag/TravelTag.tsx

@@ -58,7 +58,7 @@ export type TravelTagProps = TagProps &
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 export const TravelTag = forwardRef<TravelTagProps, As>(
   (

package/src/loader/DarkSpinner.tsx

@@ -1,6 +1,6 @@
-import { spinnerDarkData } from "@vygruppen/spor-loader";
+import { spinnerDarkData, spinnerLightData } from "@vygruppen/spor-loader";
 import React from "react";
-import { Box, BoxProps, Center } from "..";
+import { Box, BoxProps, Center, useColorMode } from "..";
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 
@@ -26,11 +26,13 @@ export const DarkSpinner = ({
   maxWidth,
   ...props
 }: DarkSpinnerProps) => {
+  const { colorMode } = useColorMode();
+  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData
   return (
     <Center flexDirection="column" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={spinnerDarkData} />}
+          {() => <Lottie animationData={spinnerData} />}
         </ClientOnly>
       </Box>
       {children && (

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

@@ -1,15 +1,15 @@
 import { anatomy } 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 { srOnly } from "../utils/sr-utils";
+import { baseBorder } from "../utils/border-utils";
+import { baseBackground } from "../utils/background-utils";
 
 const parts = anatomy("InfoSelect").parts(
   "container",
   "label",
   "button",
-  "arrowIcon"
+  "arrowIcon",
 );
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -31,57 +31,44 @@ const config = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      }),
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
-          borderWidth: 2,
-        }),
+        ...baseBorder("hover", props),
       },
       ...focusVisible({
         focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2,
-          }),
+          ...baseBorder("focus", props),
           outline: "none",
         },
         notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-          }),
+          ...baseBorder("default", props),
         },
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
+        color: "whiteAlpha.400",
+        ...baseBackground("disabled", props),
+        _hover: { ...baseBorder("disabled", props) },
+        _focus: { ...baseBorder("disabled", props) },
+      },
+      _active: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props),
+      },
+      _expanded: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props),
       },
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2,
-        }),
+        ...baseBorder("invalid", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 2,
-          }),
+          ...baseBorder("hover", props),
         },
         ...focusVisible({
           focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 2,
-            }),
+            ...baseBorder("focus", props),
           },
           notFocus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2,
-            }),
+            ...baseBorder("invalid", props),
           },
         }),
       },

package/src/theme/components/input.ts

@@ -45,13 +45,15 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" }),
+          boxShadow: getBoxShadowString({ borderColor: mode("darkGrey", "white")(props) }),
         },
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        }),
+        cursor: "not-allowed",
       },
       _invalid: {
         boxShadow: getBoxShadowString({
@@ -60,7 +62,7 @@ const config = helpers.defineMultiStyleConfig({
         }),
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2,
           }),
         },
@@ -100,6 +102,11 @@ const config = helpers.defineMultiStyleConfig({
     element: {
       height: "100%",
     },
+    group: {
+      ":has(:disabled)": {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      },
+    },
   }),
 });
 

package/src/theme/components/list.ts

@@ -1,21 +1,21 @@
 import { listAnatomy as parts } from "@chakra-ui/anatomy";
-import {
-  createMultiStyleConfigHelpers,
-  defineStyle,
-} from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleIcon = defineStyle({
-  marginEnd: "2",
-  display: "inline",
-  verticalAlign: "text-bottom",
-  fontFamily: "body",
-});
-
 const baseStyle = definePartsStyle({
-  icon: baseStyleIcon,
+  container: {
+    fontSize: ["mobile.sm", "desktop.sm"],
+  },
+  item: {
+    fontFamily: "body",
+  },
+  icon: {
+    marginEnd: "2",
+    display: "inline",
+    verticalAlign: "text-bottom",
+  },
 });
 
 export default defineMultiStyleConfig({

package/src/theme/components/listbox.ts

@@ -1,12 +1,14 @@
 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 } from "../utils/background-utils";
 
 const parts = anatomy("ListBox").parts(
   "container",
   "item",
   "label",
-  "description"
+  "description",
 );
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -14,7 +16,11 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      background: mode("white", "darkGrey")(props),
+      // avoiding extra div by blending a transparent color into darkGrey for dark mode
+      backgroundColor: mode(
+        "mint",
+        `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`,
+      )(props),
       boxShadow: "sm",
       overflowY: "auto",
       maxHeight: "50vh",
@@ -31,20 +37,20 @@ const config = helpers.defineMultiStyleConfig({
       color: mode("darkGrey", "white")(props),
       cursor: "pointer",
       _hover: {
-        backgroundColor: mode("seaMist", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "pine")(props),
         outline: "none",
       },
       _active: {
-        backgroundColor: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("mint", "pine")(props),
         outline: "none",
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("seaMist", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "pine")(props),
       },
       _selected: {
-        backgroundColor: mode("pine", "pine")(props),
-        color: mode("white", "white")(props),
+        ...baseBackground("selected", props),
+        color: "white",
       },
     },
     label: {},

package/src/theme/components/select.ts

@@ -1,6 +1,7 @@
-import { selectAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { default as Input } from "./input";
+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");
 
@@ -43,7 +44,7 @@ const config = helpers.defineMultiStyleConfig({
       strokeLinecap: "round",
       fontSize: "1.125rem",
       _disabled: {
-        opacity: 0.5,
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
       },
     },
   }),

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

@@ -0,0 +1,28 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+
+type State =
+  | "default"
+  | "hover"
+  | "active"
+  | "focus"
+  | "selected"
+  | "invalid"
+  | "disabled";
+export function baseBackground(state: State, props: StyleFunctionProps) {
+  switch (state) {
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+      };
+    case "selected":
+      return {
+        backgroundColor: "pine",
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode("silver", "whiteAlpha.100")(props),
+      };
+    default:
+      return {};
+  }
+}

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

@@ -0,0 +1,59 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { getBoxShadowString } from "./box-shadow-utils";
+
+type State =
+  | "default"
+  | "hover"
+  | "active"
+  | "focus"
+  | "selected"
+  | "invalid"
+  | "disabled";
+
+export function baseBorder(state: State, props: StyleFunctionProps) {
+  switch (state) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("darkGrey", "white")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "focus": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+        }),
+      };
+    }
+    case "disabled": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("platinum", "whiteAlpha.400")(props),
+        }),
+      };
+    }
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+        }),
+      };
+    case "invalid": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: "brightRed",
+          borderWidth: 2,
+        }),
+      };
+    }
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        }),
+      };
+  }
+}