@vygruppen/spor-react 11.3.10 → 12.0.1

package/src/theme/recipes/pressable-card.ts

@@ -0,0 +1,83 @@
+import { defineRecipe } from "../../util";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const pressableCardRecipe = defineRecipe({
+  base: {
+    appearance: "none",
+    border: "none",
+    overflow: "hidden",
+    fontSize: "inherit",
+    display: "block",
+    borderRadius: "md",
+    cursor: "pointer",
+    transitionProperty: "common",
+
+    transitionDuration: "fast",
+
+    _disabled: {
+      outline: "none",
+      pointerEvents: "none",
+      background: "surface.disabled",
+      color: "text.disabled",
+    },
+  },
+
+  variants: {
+    variant: {
+      floating: {
+        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
+        shadowColor: "surface.disabled",
+
+        border: "sm",
+        borderColor: "floating.outline",
+
+        backgroundColor: "floating.surface",
+        _hover: {
+          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
+          backgroundColor: "floating.surface.hover",
+
+          borderColor: "floating.outline.hover",
+
+          _active: {
+            boxShadow: "none",
+            backgroundColor: "floating.surface.active",
+            borderColor: "floating.outline.active",
+          },
+        },
+      },
+      core: {
+        outlineColor: "core.outline",
+        outlineWidth: tokens.size.stroke.sm,
+        outlineStyle: "solid",
+        backgroundColor: "core.surface",
+
+        _hover: {
+          outlineColor: "core.outline.hover",
+          outlineWidth: tokens.size.stroke.md,
+          outlineStyle: "solid",
+          _active: {
+            backgroundColor: "core.surface.active",
+            outlineWidth: tokens.size.stroke.sm,
+          },
+        },
+      },
+      accent: {
+        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
+        shadowColor: "surface.disabled",
+        background: "alert.success.surface",
+        _hover: {
+          background: "alert.success.surface.hover",
+
+          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
+          _active: {
+            background: "alert.success.surface.active",
+            boxShadow: "none",
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "core",
+  },
+});

package/src/theme/recipes/progress-loader.ts

@@ -0,0 +1,14 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const progressLoaderRecipe = defineRecipe({
+  base: {
+    minWidth: "100px",
+
+    "& path[id$='-track']": {
+      stroke: { _light: "coralGreen", _dark: "greenHaze" },
+    },
+    "& path[id$='-progress']": {
+      stroke: { _light: "greenHaze", _dark: "coralGreen" },
+    },
+  },
+});

package/src/theme/recipes/separator.ts

@@ -0,0 +1,85 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const separatorRecipe = defineRecipe({
+  className: "spor-separator",
+  base: {
+    borderColor: "outline.disabled",
+    display: "block",
+    borderRadius: "xl",
+  },
+  variants: {
+    variant: {
+      solid: {
+        borderStyle: "solid",
+      },
+      dashed: {
+        width: "100%",
+        borderWidth: "0px",
+      },
+    },
+    size: {
+      sm: {
+        borderBottomWidth: "1px",
+        height: "1px",
+      },
+      md: {
+        borderBottomWidth: "2px",
+        height: "2px",
+      },
+      lg: {
+        borderBottomWidth: "3px",
+        height: "3px",
+      },
+    },
+    orientation: {
+      horizontal: {
+        width: "100%",
+      },
+      vertical: {
+        height: "100%",
+        borderLeftWidth: "1px",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "dashed",
+      size: "sm",
+      css: {
+        background:
+          "linear-gradient(to left, var(--spor-colors-outline-disabled), var(--spor-colors-outline-disabled) 1px, transparent 1px, transparent 4px)",
+        backgroundSize: "4px 1px",
+        backgroundRepeat: "repeat-x",
+      },
+    },
+    {
+      variant: "dashed",
+      size: "md",
+      css: {
+        background:
+          "linear-gradient(to left, var(--spor-colors-outline-disabled), var(--spor-colors-outline-disabled) 3px, transparent 3px, transparent 6px)",
+        backgroundSize: "9px 2px",
+        backgroundRepeat: "repeat-x",
+      },
+    },
+    {
+      variant: "dashed",
+      size: "lg",
+      css: {
+        background:
+          "linear-gradient(to left, var(--spor-colors-outline-disabled), var(--spor-colors-outline-disabled) 3px, transparent 3px, transparent 9px)",
+        backgroundSize: "9px 3px",
+        backgroundRepeat: "repeat-x",
+      },
+    },
+    {
+      variant: "dashed",
+      orientation: "vertical",
+      css: {
+        background: "0",
+        width: "0%",
+        height: "100%",
+      },
+    },
+  ],
+});

package/src/theme/recipes/skeleton.ts

@@ -0,0 +1,57 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const skeletonRecipe = defineRecipe({
+  className: "chakra-skeleton",
+  variants: {
+    loading: {
+      true: {
+        borderRadius: "xs",
+        boxShadow: "none",
+        backgroundClip: "padding-box",
+        cursor: "default",
+        color: "transparent",
+        pointerEvents: "none",
+        userSelect: "none",
+        flexShrink: "0",
+        "&::before, &::after, *": {
+          visibility: "hidden",
+        },
+      },
+      false: {
+        background: "unset",
+        animation: "fade-in var(--fade-duration, 0.1s) ease-out !important",
+      },
+    },
+    variant: {
+      pulse: {
+        background: {
+          _light: "silver",
+          _dark: "darkGrey",
+        },
+        animation: "pulse",
+        animationDuration: "var(--duration, 1.2s)",
+      },
+      shine: {
+        "--animate-from": "200%",
+        "--animate-to": "-200%",
+        "--start-color": {
+          _light: "colors.lightGrey",
+          _dark: "colors.dimGrey",
+        },
+
+        "--end-color": {
+          _light: "colors.platinum",
+          _dark: "colors.darkGrey",
+        },
+        backgroundImage:
+          "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
+        backgroundSize: "400% 100%",
+        animation: "bg-position var(--duration, 5s) ease-in-out infinite",
+      },
+      none: {
+        animation: "none",
+        background: "steel",
+      },
+    },
+  },
+});

package/src/theme/recipes/static-card.ts

@@ -0,0 +1,39 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const staticCardRecipe = defineRecipe({
+  base: {
+    borderRadius: "md",
+  },
+  variants: {
+    colorPalette: {
+      white: {
+        backgroundColor: "surface.color.neutral",
+        color: "text",
+      },
+      grey: {
+        backgroundColor: "surface.color.grey",
+      },
+      yellow: {
+        backgroundColor: "surface.color.cream",
+      },
+      darkYellow: {
+        backgroundColor: "surface.color.yellow",
+      },
+      red: {
+        backgroundColor: "surface.color.red",
+      },
+      green: {
+        backgroundColor: "surface.color.green",
+      },
+      blue: {
+        backgroundColor: "surface.color.blue",
+      },
+      orange: {
+        backgroundColor: "surface.color.orange",
+      },
+    },
+  },
+  defaultVariants: {
+    colorPalette: "white",
+  },
+});

package/src/theme/recipes/textarea.ts

@@ -0,0 +1,27 @@
+import { defineRecipe } from "@chakra-ui/react";
+import { inputRecipe } from "./input";
+
+export const textareaRecipe = defineRecipe({
+  className: "spor-textarea",
+  base: {
+    ...inputRecipe.base,
+    paddingTop: 0,
+    minHeight: "calc(var(--label-height) + 4rem)",
+    verticalAlign: "top",
+    appearance: "none",
+    borderTop: "0.8rem solid transparent",
+    "&:focus-visible, &:not(:placeholder-shown)": {
+      borderTop: "var(--label-height) solid transparent",
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        ...inputRecipe.variants?.variant.core,
+      },
+      floating: {
+        ...inputRecipe.variants?.variant.floating,
+      },
+    },
+  },
+});

package/src/theme/semantic-tokens/colors.ts

@@ -0,0 +1,22 @@
+import { defineSemanticTokens } from "@chakra-ui/react";
+import vyDigitalJson from "@vygruppen/spor-design-tokens/tokens/color/vy-digital.json";
+import VyUtviklingJson from "@vygruppen/spor-design-tokens/tokens/color/vy-utvikling.json";
+import cargonetJson from "@vygruppen/spor-design-tokens/tokens/color/cargonet.json";
+
+export enum Brand {
+  VyDigital = "VyDigital",
+  VyUtvikling = "VyUtvikling",
+  CargoNet = "CargoNet",
+}
+
+export const vyDigitalColors = defineSemanticTokens.colors({
+  ...vyDigitalJson.color.vyDigital,
+});
+
+export const vyUtviklingColors = defineSemanticTokens.colors({
+  ...VyUtviklingJson.color.vyUtvikling,
+});
+
+export const cargonetColors = defineSemanticTokens.colors({
+  ...cargonetJson.color.cargonet,
+});

package/src/theme/semantic-tokens/index.ts

@@ -0,0 +1,24 @@
+import { Brand } from "../brand";
+import { cargonetColors, vyUtviklingColors, vyDigitalColors } from "./colors";
+import { radii } from "./radii";
+import { shadows } from "./shadows";
+
+const baseSemanticTokens = {
+  shadows,
+  radii,
+};
+
+export const semanticTokens = {
+  [Brand.VyUtvikling]: {
+    ...baseSemanticTokens,
+    colors: vyUtviklingColors,
+  },
+  [Brand.CargoNet]: {
+    ...baseSemanticTokens,
+    colors: cargonetColors,
+  },
+  [Brand.VyDigital]: {
+    ...baseSemanticTokens,
+    colors: vyDigitalColors,
+  },
+};

package/src/theme/semantic-tokens/radii.ts

@@ -0,0 +1,14 @@
+import { defineSemanticTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const radii = defineSemanticTokens.radii({
+  none: { value: tokens.size["border-radius"].none },
+  xxs: { value: tokens.size["border-radius"].xxs },
+  xs: { value: tokens.size["border-radius"].xs },
+  sm: { value: tokens.size["border-radius"].sm },
+  md: { value: tokens.size["border-radius"].md },
+  lg: { value: tokens.size["border-radius"].lg },
+  xl: { value: tokens.size["border-radius"].xl },
+  "2xl": { value: tokens.size["border-radius"]["2xl"] },
+  round: { value: "50%" },
+});

package/src/theme/semantic-tokens/shadows.ts

@@ -0,0 +1,17 @@
+import { defineSemanticTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const shadows = defineSemanticTokens.shadows({
+  none: {
+    value: "none",
+  },
+  sm: {
+    value: tokens.depth.shadow.sm.value,
+  },
+  md: {
+    value: tokens.depth.shadow.md.value,
+  },
+  lg: {
+    value: tokens.depth.shadow.lg.value,
+  },
+});

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

@@ -0,0 +1,131 @@
+import { coreBorder, coreText } from "../utils/core-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { ghostBackground } from "../utils/ghost-utils";
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { accordionAnatomy } from "./anatomy";
+
+export const accordionSlotRecipe = defineSlotRecipe({
+  className: "spor-accordion",
+  slots: accordionAnatomy.keys(),
+  base: {
+    root: {
+      borderRadius: "sm",
+    },
+    item: {
+      borderRadius: "sm",
+      overflowAnchor: "none",
+    },
+    itemTrigger: {
+      borderRadius: "sm",
+      display: "flex",
+      justifyContent: "space-between",
+      ...coreText("default"),
+      textAlign: "left",
+      width: "full",
+      alignItems: "center",
+      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontFamily: "body",
+      fontWeight: "bold",
+      outlineOffset: "-2px",
+      paddingX: [2, null, 3],
+      paddingY: [1, null, 1.5],
+      minHeight: [6, null, 7],
+      cursor: "pointer",
+      _disabled: {
+        pointerEvents: "none",
+        opacity: 0.4,
+      },
+    },
+    itemContent: {
+      borderBottomRadius: "sm",
+      fontSize: ["mobile.sm", null, "desktop.sm"],
+      color: "text",
+      height: "auto",
+      overflow: "hidden",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate",
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate",
+      },
+    },
+    itemBody: {
+      paddingY: 2,
+      paddingX: [2, null, 3],
+    },
+    itemIndicator: {
+      transition: "rotate 0.2s",
+      transformOrigin: "center",
+
+      _open: {
+        rotate: "180deg",
+      },
+      _icon: {
+        width: "1.2em",
+        height: "1.2em",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      ghost: {
+        root: {
+          outline: "none",
+        },
+        itemTrigger: {
+          "&:hover": {
+            ...ghostBackground("hover"),
+          },
+          "&:active": {
+            ...ghostBackground("active"),
+          },
+        },
+      },
+      core: {
+        item: {
+          ...coreBorder("default"),
+        },
+        itemTrigger: {
+          _expanded: {
+            borderBottomRadius: "none",
+          },
+          "&:hover": {
+            ...coreBorder("hover"),
+            outlineOffset: 0,
+          },
+          "&:active": {
+            backgroundColor: "core.surface.active",
+            ...coreBorder("default"),
+          },
+        },
+      },
+      floating: {
+        item: {
+          ...floatingBackground("default"),
+          ...floatingBorder("default"),
+          boxShadow: "sm",
+        },
+        itemTrigger: {
+          _expanded: {
+            borderBottomRadius: "none",
+          },
+          "&:hover": {
+            outlineOffset: 1,
+            ...floatingBackground("hover"),
+            ...floatingBorder("hover"),
+            "&:active": {
+              backgroundColor: "floating.surface.active",
+              ...floatingBorder("default"),
+            },
+          },
+          "&:active": {
+            backgroundColor: "floating.surface.active",
+            ...floatingBorder("default"),
+          },
+        },
+      },
+    },
+  },
+});

package/src/theme/slot-recipes/alert-expandable.ts

@@ -0,0 +1,133 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { alertSlotRecipe } from "./alert";
+import { alertExpandableAnatomy } from "./anatomy";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const alertExpandableSlotRecipe = defineSlotRecipe({
+  className: "spor-alert-expandable",
+  slots: alertExpandableAnatomy.keys(),
+  base: {
+    itemTrigger: {
+      paddingX: "2 !important",
+      _expanded: {
+        borderBottomRadius: "none",
+      },
+    },
+    itemContent: {
+      fontSize: "xs !important",
+      paddingTop: "1 !important",
+    },
+    root: {
+      border: "sm",
+    },
+  },
+  variants: {
+    variant: {
+      important: {
+        itemContent: {
+          color: "alert.important.text.secondary",
+        },
+        itemTrigger: {
+          _hover: {
+            bg: "alert.important.surface.hover",
+            outlineColor: "alert.important.outline.hover",
+            _active: {
+              bg: "alert.important.surface.active",
+            },
+          },
+        },
+        root: {
+          borderColor: "alert.important.outline",
+          bg: "alert.important.surface",
+        },
+        title: {
+          color: "alert.important.text",
+        },
+      },
+      success: {
+        itemContent: {
+          color: "alert.success.text.secondary",
+        },
+        itemTrigger: {
+          _hover: {
+            bg: "alert.success.surface.hover",
+            outlineColor: "alert.success.outline.hover",
+            _active: {
+              bg: "alert.success.surface.active",
+            },
+          },
+        },
+        root: {
+          borderColor: "alert.success.outline",
+          bg: "alert.success.surface",
+        },
+        title: {
+          color: "alert.success.text",
+        },
+      },
+      alt: {
+        itemContent: {
+          color: "alert.alt.text.secondary",
+        },
+        itemTrigger: {
+          _hover: {
+            bg: "alert.alt.surface.hover",
+            outlineColor: "alert.alt.outline.hover",
+            _active: {
+              bg: "alert.alt.surface.active",
+            },
+          },
+        },
+        root: {
+          borderColor: "alert.alt.outline",
+          bg: "alert.alt.surface",
+        },
+        title: {
+          color: "alert.alt.text",
+        },
+      },
+      info: {
+        itemContent: {
+          color: "alert.info.text.secondary",
+        },
+        itemTrigger: {
+          _hover: {
+            bg: "alert.info.surface.hover",
+            outlineColor: "alert.info.outline.hover",
+            _active: {
+              bg: "alert.info.surface.active",
+            },
+          },
+        },
+        root: {
+          borderColor: "alert.info.outline",
+          bg: "alert.info.surface",
+        },
+        title: {
+          color: "alert.info.text",
+        },
+      },
+      error: {
+        itemContent: {
+          color: "alert.error.text.secondary",
+        },
+        itemTrigger: {
+          _hover: {
+            bg: "alert.error.surface.hover",
+            outlineColor: "alert.error.outline.hover",
+            _active: {
+              bg: "alert.error.surface.active",
+            },
+          },
+        },
+        root: {
+          borderColor: "alert.error.outline",
+          bg: "alert.error.surface",
+        },
+        title: {
+          color: "alert.error.text",
+        },
+      },
+    },
+  },
+});