@vygruppen/spor-react 11.3.10 → 12.0.1

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

@@ -0,0 +1,92 @@
+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({
+  slots: stepperAnatomy.keys(),
+  className: "spor-stepper",
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: ["space-between", null, "center"],
+      minHeight: ["3rem", null, "3.75rem"],
+      overflowX: "auto",
+      width: "100%",
+      "& svg": {
+        color: {
+          _light: "blackAlpha.700",
+          _dark: "whiteAlpha.700",
+        },
+      },
+    },
+    container: {
+      paddingX: [2, null, null, 0],
+      maxWidth: "container.lg",
+      marginX: "auto",
+      width: "100%",
+    },
+    innerContainer: {
+      overflow: "hidden",
+      display: ["flex", null, "none"],
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 3,
+    },
+    title: {
+      overflow: "hidden",
+      fontWeight: "bold",
+      WebkitLineClamp: 2,
+      display: "-webkit-box",
+      textAlign: "center",
+      maxWidth: "80%",
+    },
+    stepContainer: {
+      display: "flex",
+      alignItems: "center",
+    },
+    stepTitle: {
+      textStyle: "sm",
+      whiteSpace: "nowrap",
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        root: {
+          backgroundColor: "transparent",
+        },
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.bg",
+        },
+        stepButton: {
+          color: {
+            _light: "blackAlpha.900",
+            _dark: "whiteAlpha.900",
+          },
+          _disabled: {
+            color: coreText("disabled").color,
+          },
+          _currentStep: {
+            color: accentText("default").color,
+          },
+          _hover: {
+            backgroundColor: accentBackground("hover").backgroundColor,
+            _disabled: {
+              backgroundColor: "transparent",
+            },
+          },
+        },
+        backButton: {
+          _hover: {
+            ...brandBackground("hover"),
+          },
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,147 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { switchAnatomy } from "./anatomy";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const switchSlotRecipe = defineSlotRecipe({
+  slots: switchAnatomy.keys(),
+  className: "spor-switch",
+  base: {
+    root: {
+      display: "inline-flex",
+      gap: "2.5",
+      alignItems: "center",
+      position: "relative",
+      verticalAlign: "middle",
+      "--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
+      "--switch-x": {
+        base: "var(--switch-diff)",
+        _rtl: "calc(var(--switch-diff) * -1)",
+      },
+    },
+    thumb: {
+      position: "absolute",
+      transitionProperty: "translate",
+      transitionDuration: "fast",
+      borderRadius: "2xl",
+      display: "flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      width: "var(--switch-height)",
+      height: "var(--switch-height)",
+      backgroundColor: "core.icon",
+
+      _disabled: {
+        backgroundColor: "icon.disabled",
+        _checked: {
+          backgroundColor: "icon.disabled",
+        },
+      },
+      _checked: {
+        translate: "var(--switch-x) 0",
+        backgroundColor: "brand.icon",
+      },
+    },
+
+    label: {
+      display: "block",
+      textAlign: "start",
+      marginEnd: 3,
+      opacity: 1,
+      bottom: 4,
+      _disabled: {
+        opacity: "0.5",
+      },
+    },
+    control: {
+      boxSizing: "content-box",
+      padding: 0.5,
+
+      display: "inline-flex",
+      gap: 1.5,
+      flexShrink: 0,
+      justifyContent: "flex-start",
+      cursor: "switch",
+      borderRadius: "xl",
+      position: "relative",
+      width: "var(--switch-width)",
+      height: "var(--switch-height)",
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      outline: "1px solid",
+      outlineColor: "core.outline.default",
+      backgroundColor: "core.background",
+      _hover: {
+        outline: "2px solid",
+        outlineColor: "core.outline.hover",
+        _checked: {
+          outlineColor: "transparent",
+          backgroundColor: "brand.surface.hover",
+        },
+      },
+
+      _focusVisible: {
+        outlineWidth: "2px",
+        outlineColor: "outline.focus",
+        outlineStyle: "solid",
+      },
+
+      _checked: {
+        backgroundColor: "brand.surface",
+        _focusVisible: {
+          outlineStyle: "double",
+          outlineWidth: `calc(3 * ${tokens.size.stroke.md})`, // space for double outline
+        },
+      },
+      _disabled: {
+        pointerEvents: "none",
+        backgroundColor: "core.disabled",
+        outlineColor: "outline.disabled",
+
+        _checked: {
+          backgroundColor: "icon.disabled",
+          outlineColor: "transparent",
+        },
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error",
+        outlineOffset: "2px",
+      },
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          "--switch-width": "3.3rem",
+          "--switch-height": "1.5rem",
+        },
+        control: {
+          borderRadius: "lg",
+          padding: "0.12rem",
+        },
+      },
+      md: {
+        root: {
+          "--switch-width": "4.1rem",
+          "--switch-height": "1.8rem",
+        },
+        control: {
+          borderRadius: "xl",
+          padding: 0.5,
+        },
+      },
+      lg: {
+        root: {
+          "--switch-width": "4.8rem",
+          "--switch-height": "2.25rem",
+        },
+        control: {
+          borderRadius: "2xl",
+          padding: 0.5,
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,200 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { tableAnatomy } from "./anatomy";
+
+const numericStyles = {
+  "&[data-is-numeric=true]": {
+    textAlign: "right",
+  },
+};
+
+export const tableSlotRecipe = defineSlotRecipe({
+  className: "spor-table",
+  slots: tableAnatomy.keys(),
+  base: {
+    root: {
+      tableLayout: "fixed",
+      borderCollapse: "collapse",
+      width: "100%",
+    },
+    columnHeader: {
+      fontWeight: "bold",
+      textAlign: "start",
+      borderBottom: "sm",
+      borderColor: "outline.disabled",
+      ...numericStyles,
+      paddingX: 1.5,
+      paddingY: 1,
+    },
+    row: {
+      borderBottom: "sm",
+      borderColor: "outline.disabled",
+      ...numericStyles,
+    },
+    cell: {
+      ...numericStyles,
+      paddingX: 1.5,
+      paddingY: 1,
+    },
+    footer: {
+      fontWeight: "medium",
+    },
+  },
+
+  variants: {
+    colorPalette: {
+      green: {
+        root: {
+          backgroundColor: "bg",
+        },
+        header: {
+          backgroundColor: "bg.tertiary",
+        },
+        columnHeader: {
+          color: "text.secondary",
+        },
+      },
+      grey: {
+        root: {
+          backgroundColor: "bg",
+        },
+        columnHeader: {
+          color: "brand.text.inverted",
+          backgroundColor: "surface.disabled",
+          _hover: {
+            backgroundColor: "surface.disabled",
+          },
+        },
+      },
+      white: {
+        root: {
+          backgroundColor: "bg",
+        },
+        columnHeader: {
+          color: "text",
+          backgroundColor: "bg",
+        },
+      },
+    },
+    variant: {
+      ghost: {
+        header: {
+          backgroundColor: "none",
+        },
+        columnHeader: {
+          borderLeft: "none",
+          borderBottom: "sm",
+          borderColor: "outline.disabled",
+          backgroundColor: "none",
+          color: "text",
+        },
+
+        cell: {
+          borderBottom: "sm",
+          borderColor: "outline.disabled",
+          ...numericStyles,
+          _first: {
+            borderLeft: "none",
+          },
+        },
+      },
+
+      core: {
+        table: {
+          borderRadius: "md",
+          overflow: "hidden",
+          border: "sm",
+          borderColor: "outline.disabled",
+        },
+        cell: {
+          borderLeft: "sm",
+          borderColor: "outline.disabled",
+          ...numericStyles,
+          _first: {
+            borderLeft: "none",
+          },
+        },
+        header: {
+          border: "none",
+        },
+        columnHeader: {
+          borderBottom: "sm",
+          borderLeft: "sm",
+          borderLeftColor: "outline.disabled",
+          ...numericStyles,
+          _first: {
+            borderLeft: "none",
+          },
+        },
+        row: {
+          ...numericStyles,
+          borderBottom: "sm",
+          borderColor: "outline.disabled",
+          _last: {
+            borderBottom: "none",
+          },
+        },
+      },
+    },
+
+    size: {
+      sm: {
+        table: {
+          fontSize: "mobile.sm",
+        },
+        cell: {
+          paddingX: 1,
+          paddingY: 0.5,
+          fontSize: "mobile.sm",
+        },
+        columnHeader: {
+          paddingX: 1,
+          paddingY: 0.5,
+        },
+        caption: {
+          paddingX: 1,
+          paddingY: 0.5,
+        },
+      },
+      md: {
+        table: {
+          fontSize: "mobile.md",
+        },
+        cell: {
+          paddingX: 1.5,
+          paddingY: 1,
+          fontSize: "mobile.md",
+        },
+
+        columnHeader: {
+          paddingX: 1.5,
+          paddingY: 1,
+          fontSize: "mobile.md",
+        },
+        caption: {
+          paddingX: 1.5,
+          paddingY: 1,
+          fontSize: "mobile.md",
+        },
+      },
+      lg: {
+        table: {
+          fontSize: "mobile.md",
+        },
+        cell: {
+          paddingX: 3,
+          paddingY: 3,
+          fontSize: "mobile.md",
+        },
+        columnHeader: {
+          paddingX: 3,
+          paddingY: 2,
+          fontSize: "mobile.md",
+        },
+        caption: {
+          paddingX: 3,
+          paddingY: 2,
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,169 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { tabsAnatomy } from "./anatomy";
+
+export const tabsSlotRecipe = defineSlotRecipe({
+  slots: tabsAnatomy.keys(),
+  className: "spor-tabs",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+    },
+    list: {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5,
+      borderRadius: "xl",
+      width: "fit-content",
+    },
+    trigger: {
+      display: "flex",
+      cursor: "pointer",
+      justifyContent: "center",
+      alignItems: "center",
+      transitionProperty: "common",
+      transitionDuration: "normal",
+      height: "100%",
+      whiteSpace: "nowrap",
+      borderRadius: "xl",
+    },
+  },
+  variants: {
+    fitted: {
+      true: {
+        list: {
+          display: "flex",
+          width: "auto",
+        },
+        trigger: {
+          flex: 1,
+          textAlign: "center",
+          justifyContent: "center",
+        },
+      },
+    },
+    justify: {
+      start: {
+        list: {
+          justifyContent: "flex-start",
+        },
+      },
+      center: {
+        list: {
+          justifyContent: "center",
+        },
+      },
+      end: {
+        list: {
+          justifyContent: "flex-end",
+        },
+      },
+    },
+    variant: {
+      core: {
+        list: {
+          backgroundColor: "core.surface",
+          color: "core.text",
+          border: "sm",
+        },
+        trigger: {
+          color: "core.text",
+          border: "md",
+          borderColor: "transparent",
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.surface.hover",
+            outlineOffset: "-2px",
+          },
+          _active: {
+            backgroundColor: "brand.surface.active",
+            color: "brand.text",
+            outline: "none",
+          },
+          _selected: {
+            backgroundColor: "brand.surface",
+            color: "brand.text",
+          },
+          _disabled: {
+            backgroundColor: "surface.disabled",
+            color: "brand.text.disabled",
+          },
+        },
+      },
+      accent: {
+        list: {
+          backgroundColor: "accent.bg",
+          color: "accent.text",
+        },
+        trigger: {
+          color: "accent.text",
+          _disabled: {
+            backgroundColor: "surface.disabled",
+            color: "accent.text.disabled",
+          },
+          _hover: {
+            backgroundColor: "accent.surface.hover",
+            _active: {
+              backgroundColor: "brand.surface.active",
+              color: "brand.text",
+            },
+          },
+          _selected: {
+            backgroundColor: "brand.surface",
+            color: "brand.text",
+            _hover: {
+              backgroundColor: "brand.surface.hover",
+              color: "brand.text",
+            },
+          },
+        },
+      },
+    },
+    size: {
+      xs: {
+        list: {
+          height: 5,
+          padding: "0.1rem",
+        },
+        trigger: {
+          paddingX: 2,
+          paddingY: 0,
+        },
+      },
+      sm: {
+        list: {
+          height: 6,
+          padding: 0.5,
+        },
+        trigger: {
+          paddingX: 2,
+        },
+      },
+      md: {
+        list: {
+          height: 7,
+          padding: 0.5,
+        },
+        trigger: {
+          fontWeight: "bold",
+          paddingX: 2,
+        },
+      },
+      lg: {
+        list: {
+          height: 8,
+          padding: "0.2rem",
+        },
+        trigger: {
+          fontWeight: "bold",
+          fontSize: "sm",
+          paddingX: 3,
+          _focus: {
+            border: "md",
+            borderColor: "accent.surface",
+          },
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,56 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { toastAnatomy } from "./anatomy";
+
+export const toastSlotRecipe = defineSlotRecipe({
+  slots: toastAnatomy.keys(),
+  className: "chakra-toast",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      position: "relative",
+      alignItems: "center",
+      gap: "0.75rem",
+      padding: "0.563rem 0.75rem",
+      translate: "var(--x) var(--y)",
+      opacity: "var(--opacity)",
+      willChange: "translate, opacity, scale",
+
+      borderRadius: "sm",
+      transition:
+        "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
+      transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
+      _closed: {
+        transition: "translate 400ms, scale 400ms, opacity 200ms",
+        transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)",
+      },
+      boxShadow: "xl",
+
+      color: "text",
+      "&[data-type=success]": {
+        backgroundColor: "alert.success.surface",
+        "& svg": {
+          color: "primaryGreen",
+        },
+      },
+      "&[data-type=error]": {
+        backgroundColor: "alert.error.surface",
+        "& svg": {
+          color: "brightRed",
+        },
+      },
+
+      "&[data-type=info]": {
+        backgroundColor: "alert.info.surface",
+        "& svg": {
+          color: "darkBlue",
+        },
+      },
+    },
+
+    title: {
+      textStyle: "sm",
+      marginEnd: "2",
+    },
+  },
+});