@vygruppen/spor-react 12.4.4 → 12.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.4",
+  "version": "12.4.6",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -66,7 +66,7 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.0.1",
+    "@vygruppen/eslint-config": "1.1.0",
     "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {

package/src/linjetag/InfoTag.tsx

@@ -52,7 +52,6 @@ export const InfoTag = ({
   const recipe = useSlotRecipe({ key: "infoTag" });
 
   const styles = recipe({
-    variant,
     size,
     ...customProps,
   });

package/src/linjetag/LineIcon.tsx

@@ -24,7 +24,7 @@ type VariantProps = DefaultVariantProps | CustomVariantProps;
 export type LineIconProps = Exclude<BoxProps, "variant"> &
   VariantProps &
   PropsWithChildren<LineIconVariantProps> & {
-    size: TagProps["size"];
+    size?: TagProps["size"];
     foregroundColor?: string;
     backgroundColor?: string;
     disabled?: boolean;

package/src/linjetag/types.ts

@@ -17,7 +17,7 @@ export type Size = "sm" | "md" | "lg";
 export type TagType = "info" | "travel";
 
 export type TagProps = VariantProps & {
-  size: Size;
+  size?: Size;
   title: string;
   description?: string;
 };

package/src/theme/recipes/close-button.ts

@@ -1,7 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
 
-import { ghostBackground } from "../utils/ghost-utils";
-
 export const closeButtonRecipe = defineRecipe({
   base: {
     transitionProperty: "common",
@@ -11,12 +9,12 @@ export const closeButtonRecipe = defineRecipe({
     color: "darkGrey",
     fontWeight: "normal",
     _hover: {
-      ...ghostBackground("hover"),
+      background: "ghost.surface.hover",
       _disabled: {
         color: "dimGrey",
       },
       _active: {
-        ...ghostBackground("active"),
+        background: "ghost.surface.active",
       },
     },
   },

package/src/theme/recipes/link.ts

@@ -1,7 +1,5 @@
 import { defineRecipe } from "@chakra-ui/react";
 
-import { coreText } from "../utils/core-utils";
-
 export const linkRecipe = defineRecipe({
   base: {
     transitionProperty: "common",
@@ -42,7 +40,7 @@ export const linkRecipe = defineRecipe({
   variants: {
     variant: {
       primary: {
-        ...coreText("default"),
+        color: "core.text",
         _hover: {
           color: "text.default",
           _active: {
@@ -51,10 +49,10 @@ export const linkRecipe = defineRecipe({
         },
       },
       secondary: {
-        ...coreText("highlight"),
+        color: "text.hightlight",
         padding: "2px",
         _hover: {
-          ...coreText("highlight"),
+          color: "text.hightlight",
           _active: {
             color: "text.disabled",
           },

package/src/theme/slot-recipes/accordion.ts

@@ -1,8 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
 
-import { coreBorder, coreText } from "../utils/core-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { ghostBackground } from "../utils/ghost-utils";
 import { accordionAnatomy } from "./anatomy";
 
 export const accordionSlotRecipe = defineSlotRecipe({
@@ -20,7 +18,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
       borderRadius: "sm",
       display: "flex",
       justifyContent: "space-between",
-      ...coreText("default"),
+      color: "core.text",
       textAlign: "left",
       width: "full",
       alignItems: "center",
@@ -72,58 +70,64 @@ export const accordionSlotRecipe = defineSlotRecipe({
   variants: {
     variant: {
       ghost: {
-        root: {
+        item: {
           outline: "none",
         },
         itemTrigger: {
           "&:hover": {
-            ...ghostBackground("hover"),
+            background: "ghost.surface.hover",
           },
           "&:active": {
-            ...ghostBackground("active"),
+            backgroundColor: "ghost.surface.active",
           },
         },
       },
       core: {
         item: {
-          ...coreBorder("default"),
+          outline: "solid",
+          outlineWidth: tokens.size.stroke.sm,
+          outlineColor: "core.outline",
         },
         itemTrigger: {
           _expanded: {
             borderBottomRadius: "none",
           },
           "&:hover": {
-            ...coreBorder("hover"),
+            outlineWidth: tokens.size.stroke.md,
+            outlineColor: "core.outline",
+            outline: "2px solid",
+
             outlineOffset: 0,
           },
           "&:active": {
             backgroundColor: "core.surface.active",
-            ...coreBorder("default"),
+            outlineWidth: tokens.size.stroke.sm,
+            outline: "none",
           },
         },
       },
       floating: {
         item: {
-          ...floatingBackground("default"),
-          ...floatingBorder("default"),
+          outline: "1px solid",
+          outlineWidth: tokens.size.stroke.sm,
           boxShadow: "sm",
+          outlineColor: "floating.outline",
         },
         itemTrigger: {
           _expanded: {
             borderBottomRadius: "none",
           },
           "&:hover": {
+            outlineWidth: tokens.size.stroke.md,
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+
             outlineOffset: 1,
-            ...floatingBackground("hover"),
-            ...floatingBorder("hover"),
-            "&:active": {
-              backgroundColor: "floating.surface.active",
-              ...floatingBorder("default"),
-            },
           },
           "&:active": {
             backgroundColor: "floating.surface.active",
-            ...floatingBorder("default"),
+            outlineWidth: tokens.size.stroke.sm,
+            outline: "none",
           },
         },
       },

package/src/theme/slot-recipes/checkbox.ts

@@ -1,8 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 import tokens from "@vygruppen/spor-design-tokens";
 
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { coreBackground, coreText } from "../utils/core-utils";
 import { checkboxAnatomy } from "./anatomy";
 
 export const checkboxSlotRecipe = defineSlotRecipe({
@@ -14,13 +12,11 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       gap: 1.5,
       _hover: {
         "& > input:enabled:not([aria-invalid]) + .spor-checkbox__control": {
-          ...coreBackground("hover"),
-          borderColor: brandBackground("hover").backgroundColor,
+          borderColor: "core.outline.hover",
         },
         "& > input:enabled:checked:not([aria-invalid]) + .spor-checkbox__control":
           {
-            ...brandBackground("hover"),
-            borderColor: brandBackground("hover").backgroundColor,
+            background: "brand.surface.hover",
           },
       },
     },
@@ -44,19 +40,18 @@ export const checkboxSlotRecipe = defineSlotRecipe({
       border: "2px solid",
       borderColor: "core.outline",
       borderRadius: "xs",
-      ...coreBackground("default"),
 
       _checked: {
-        ...brandText("default"),
-        ...brandBackground("default"),
-        borderColor: brandBackground("default").backgroundColor,
+        color: "brand.icon",
+        borderColor: "brand.surface",
+        background: "brand.surface",
         _focus: {
           borderColor: "brand.surface.active",
         },
 
         _disabled: {
-          ...coreBackground("disabled"),
-          ...coreText("disabled"),
+          background: "surface.disabled",
+          color: "text.disabled",
           borderColor: "currentColor",
         },
 
@@ -66,11 +61,10 @@ export const checkboxSlotRecipe = defineSlotRecipe({
         },
       },
       _disabled: {
-        ...coreBackground("disabled"),
-        borderColor: coreText("disabled").color,
+        // borderColor: coreText("disabled").color,
+        borderColor: "text.disabled",
       },
       _invalid: {
-        ...coreBackground("default"),
         borderColor: "outline.error",
       },
       _focus: {

package/src/theme/slot-recipes/info-tag.ts

@@ -26,13 +26,17 @@ export const infoTagSlotRecipe = defineSlotRecipe({
   },
   variants: {
     variant: {
-      walk: {
-        iconContainer: {
-          icon: {
-            color: "text",
-          },
-        },
-      },
+      walk: {},
+      ferry: {},
+      subway: {},
+      tram: {},
+      "local-train": {},
+      "region-train": {},
+      "region-express-train": {},
+      "long-distance-train": {},
+      "airport-express-train": {},
+      "vy-bus": {},
+      "local-bus": {},
     },
     size: {
       ...travelTagSlotRecipe.variants?.size,

package/src/theme/slot-recipes/native-select.ts

@@ -1,7 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
 import { inputRecipe } from "../recipes/input";
-import { coreText } from "../utils/core-utils";
 import { NativeSelectAnatomy } from "./anatomy";
 
 export const nativeSelectSlotRecipe = defineSlotRecipe({
@@ -34,7 +33,7 @@ export const nativeSelectSlotRecipe = defineSlotRecipe({
       color: "currentColor",
       fontSize: "sm",
       _disabled: {
-        ...coreText("disabled"),
+        color: "text.disabled",
       },
     },
   },

package/src/theme/slot-recipes/pagination.ts

@@ -1,7 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { coreBackground, coreText } from "../utils/core-utils";
-import { ghostBackground } from "../utils/ghost-utils";
 import { paginationAnatomy } from "./anatomy";
 
 export const paginationSlotRecipe = defineSlotRecipe({
@@ -16,13 +14,12 @@ export const paginationSlotRecipe = defineSlotRecipe({
       width: "5",
       fontSize: "xs",
       borderRadius: "xl",
-      ...coreText("default"),
+      color: "core.text",
       cursor: "pointer",
-      ...coreBackground("default"),
       _hover: {
-        ...ghostBackground("hover"),
+        background: "ghost.surface.hover",
         _active: {
-          ...ghostBackground("active"),
+          background: "ghost.surface.active",
         },
       },
       _selected: {

package/src/theme/slot-recipes/stepper.ts

@@ -1,8 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { accentBackground, accentText } from "../utils/accent-utils";
-import { brandBackground } from "../utils/brand-utils";
-import { coreText } from "../utils/core-utils";
 import { stepperAnatomy } from "./anatomy";
 
 export const stepperSlotRecipe = defineSlotRecipe({
@@ -70,13 +67,13 @@ export const stepperSlotRecipe = defineSlotRecipe({
             _dark: "whiteAlpha.900",
           },
           _disabled: {
-            color: coreText("disabled").color,
+            color: "core.text",
           },
           _currentStep: {
-            color: accentText("default").color,
+            color: "accent.text",
           },
           _hover: {
-            backgroundColor: accentBackground("hover").backgroundColor,
+            backgroundColor: "accent.surface.hover",
             _disabled: {
               backgroundColor: "transparent",
             },
@@ -84,7 +81,7 @@ export const stepperSlotRecipe = defineSlotRecipe({
         },
         backButton: {
           _hover: {
-            ...brandBackground("hover"),
+            backgroundColor: "brand.surface.hover",
           },
         },
       },

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

@@ -1,47 +0,0 @@
-import { brandBackground } from "./brand-utils";
-import { State, Subset } from "./types";
-
-type AccentBackgroundState = Subset<
-  State,
-  "default" | "hover" | "active" | "selected"
->;
-
-export function accentBackground(state: AccentBackgroundState) {
-  switch (state) {
-    case "selected": {
-      return brandBackground("default");
-    }
-    case "active": {
-      return {
-        backgroundColor: "accent.surface.active",
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: "accent.surface.hover",
-      };
-    }
-    default: {
-      return {
-        backgroundColor: "accent.surface",
-      };
-    }
-  }
-}
-
-type AccentTextState = Subset<State, "default" | "selected">;
-
-export function accentText(state: AccentTextState) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "brand.text",
-      };
-    }
-    default: {
-      return {
-        color: "accent.text",
-      };
-    }
-  }
-}

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

@@ -1,20 +0,0 @@
-type Bg = "default" | "secondary" | "tertiary";
-export const bg = (bg: Bg) => {
-  switch (bg) {
-    case "default": {
-      return {
-        backgroundColor: "bg",
-      };
-    }
-    case "secondary": {
-      return {
-        backgroundColor: "bg.secondary",
-      };
-    }
-    case "tertiary": {
-      return {
-        backgroundColor: "bg.tertiary",
-      };
-    }
-  }
-};

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

@@ -1,29 +0,0 @@
-import { State, Subset } from "./types";
-
-type BrandBackgroundState = Subset<State, "default" | "hover" | "active">;
-
-export function brandBackground(state: BrandBackgroundState) {
-  switch (state) {
-    case "active": {
-      return {
-        backgroundColor: "brand.surface.active",
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: "brand.surface.hover",
-      };
-    }
-    default: {
-      return {
-        backgroundColor: "brand.surface",
-      };
-    }
-  }
-}
-
-export function brandText() {
-  return {
-    color: "brand.text",
-  };
-}

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

@@ -1,101 +0,0 @@
-import { brandBackground } from "./brand-utils";
-import { surface } from "./surface-utils";
-import { State, Subset } from "./types";
-
-type coreBackgroundState = Subset<
-  State,
-  "default" | "active" | "selected" | "hover" | "disabled"
->;
-export function coreBackground(state: coreBackgroundState) {
-  switch (state) {
-    case "active": {
-      return brandBackground("active");
-    }
-    case "selected": {
-      return brandBackground("default");
-    }
-
-    case "disabled": {
-      return surface("disabled");
-    }
-
-    default: {
-      return { backgroundColor: "transparent" };
-    }
-  }
-}
-
-type BorderState = Subset<
-  State,
-  "hover" | "focus" | "active" | "disabled" | "selected" | "invalid" | "default"
->;
-
-export function coreBorder(state: BorderState) {
-  switch (state) {
-    case "hover": {
-      return {
-        outline: "2px solid",
-        outlineColor: "core.outline",
-      };
-    }
-
-    case "disabled": {
-      return {
-        outline: "1px solid",
-        outlineColor: "outline.disabled",
-      };
-    }
-    case "active": {
-      return {
-        outline: "1px solid",
-        outlineColor: "core.outline",
-      };
-    }
-    case "invalid": {
-      return {
-        outline: "2px solid",
-        outlineColor: "outline.error",
-      };
-    }
-    default: {
-      return {
-        outline: "1px solid",
-        outlineColor: "core.outline",
-      };
-    }
-  }
-}
-
-type coreTextState = Subset<
-  State,
-  "default" | "selected" | "disabled" | "highlight" | "active"
->;
-export function coreText(state: coreTextState) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "brand.text",
-      };
-    }
-    case "active": {
-      return {
-        color: "brand.text",
-      };
-    }
-    case "highlight": {
-      return {
-        color: "text.highlight",
-      };
-    }
-    case "disabled": {
-      return {
-        color: "text.disabled",
-      };
-    }
-    default: {
-      return {
-        color: "core.text",
-      };
-    }
-  }
-}

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

@@ -1,69 +0,0 @@
-import { brandBackground } from "./brand-utils";
-import { State, Subset } from "./types";
-
-type FloatingBackgroundState = Subset<
-  State,
-  "default" | "hover" | "active" | "focus"
->;
-
-export function floatingBackground(state: FloatingBackgroundState) {
-  switch (state) {
-    case "focus": {
-      return brandBackground("default");
-    }
-    case "active": {
-      return {
-        backgroundColor: "floating.surface.active",
-      };
-    }
-    case "hover": {
-      return {
-        backgroundColor: {
-          _light: "floating.surface.hover",
-          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-        },
-      };
-    }
-    case "default": {
-      return {
-        backgroundColor: {
-          _light: "bg",
-          _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-        },
-      };
-    }
-  }
-}
-
-type FloatingBorderState = Subset<
-  State,
-  "default" | "hover" | "active" | "focus"
->;
-export function floatingBorder(state: FloatingBorderState) {
-  switch (state) {
-    case "hover": {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline.hover",
-      };
-    }
-    case "focus": {
-      return {
-        outline: "1px solid",
-        outlineColor: "outline.focus",
-      };
-    }
-    case "active": {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline.active",
-      };
-    }
-    default: {
-      return {
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-      };
-    }
-  }
-}

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

@@ -1,49 +0,0 @@
-import { State, Subset } from "./types";
-
-type GhostBackgroundState = Subset<
-  State,
-  "default" | "hover" | "active" | "selected"
->;
-
-/** 👻👻👻👻👻👻👻👻👻👻👻👻👻👻 */
-export function ghostBackground(state: GhostBackgroundState) {
-  switch (state) {
-    case "hover": {
-      return {
-        backgroundColor: "ghost.surface.hover",
-      };
-    }
-    case "active": {
-      return {
-        backgroundColor: "ghost.surface.active",
-      };
-    }
-    case "selected": {
-      return {
-        backgroundColor: "ghost.surface.selected",
-      };
-    }
-    case "default": {
-      return {
-        backgroundColor: "transparent",
-      };
-    }
-  }
-}
-
-type GhostTextState = Subset<State, "default" | "selected">;
-
-export function ghostText(state: GhostTextState) {
-  switch (state) {
-    case "selected": {
-      return {
-        color: "ghost.text",
-      };
-    }
-    default: {
-      return {
-        color: "ghost.text",
-      };
-    }
-  }
-}