@vygruppen/spor-react 11.3.10 → 12.0.1

package/src/theme/recipes/badge.ts

@@ -0,0 +1,104 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const badgeRecipie = defineRecipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "fit-content",
+    gap: "0.5",
+  },
+  variants: {
+    colorPalette: {
+      neutral: {
+        backgroundColor: "surface.color.neutral",
+        color: "alert.neutral.text",
+        "& svg": {
+          color: "alert.neutral.icon",
+        },
+      },
+      grey: {
+        backgroundColor: "surface.color.grey",
+        color: "alert.neutral.text",
+        "& svg": {
+          color: "alert.neutral.icon",
+        },
+      },
+      green: {
+        backgroundColor: "surface.color.green",
+        color: "alert.success.text",
+        "& svg": {
+          color: "alert.success.icon",
+        },
+      },
+      blue: {
+        backgroundColor: "surface.color.blue",
+        color: "alert.info.text",
+        "& svg": {
+          color: "alert.info.icon",
+        },
+      },
+      cream: {
+        backgroundColor: "surface.color.cream",
+        color: "alert.important.text",
+        "& svg": {
+          color: "alert.important.icon",
+        },
+      },
+      yellow: {
+        backgroundColor: "surface.color.yellow",
+        color: "alert.alt.text",
+        "& svg": {
+          color: "alert.alt.icon",
+        },
+      },
+      orange: {
+        backgroundColor: "surface.color.orange",
+        color: "alert.error.text.secondary",
+        "& svg": {
+          color: "alert.error.icon.secondary",
+        },
+      },
+      red: {
+        backgroundColor: "surface.color.red",
+        color: "alert.error.text",
+        "& svg": {
+          color: "alert.error.icon",
+        },
+      },
+    },
+    size: {
+      sm: {
+        fontSize: "desktop.xs",
+        paddingX: "0.5",
+        paddingY: "0",
+        fontWeight: "normal",
+        borderRadius: "xxs",
+      },
+      md: {
+        fontSize: "desktop.xs",
+        paddingX: "1",
+        paddingY: "0.5",
+        fontWeight: "bold",
+        borderRadius: "xs",
+      },
+      lg: {
+        fontSize: "desktop.sm",
+        paddingX: "1.5",
+        paddingY: "0.5",
+        fontWeight: "bold",
+        borderRadius: "xs",
+      },
+    },
+    attached: {
+      true: {
+        borderBottomRadius: "none",
+      },
+    },
+  },
+  defaultVariants: {
+    colorPalette: "grey",
+    size: "md",
+    attached: false,
+  },
+});

package/src/theme/recipes/button.ts

@@ -0,0 +1,124 @@
+import { defineRecipe } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const buttonRecipe = defineRecipe({
+  className: "spor-button",
+  base: {
+    border: 0,
+    borderRadius: "xl",
+    display: "flex",
+    gap: "1",
+    alignItems: "center",
+    justifyContent: "center",
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    cursor: "pointer",
+    textWrap: "wrap",
+    paddingX: 3,
+    paddingY: 1,
+    _disabled: {
+      cursor: "not-allowed",
+      pointerEvents: "none",
+      boxShadow: "none",
+      color: "text.disabled",
+      background: "surface.disabled",
+    },
+    _focus: {
+      outlineOffset: tokens.size.stroke.md,
+    },
+  },
+  variants: {
+    variant: {
+      primary: {
+        background: "brand.surface",
+        color: "brand.text",
+        _hover: {
+          background: "brand.surface.hover",
+          _active: {
+            background: "brand.surface.active",
+          },
+        },
+      },
+      secondary: {
+        background: "accent.surface",
+        color: "accent.text",
+        _hover: {
+          background: "accent.surface.hover",
+          _active: {
+            background: "accent.surface.active",
+          },
+        },
+      },
+      tertiary: {
+        color: "core.text",
+        outline: "solid",
+        outlineWidth: tokens.size.stroke.sm,
+        outlineColor: "core.outline",
+        _hover: {
+          outlineWidth: tokens.size.stroke.md,
+          outlineColor: "core.outline.hover",
+          _active: {
+            background: "core.surface.active",
+            outlineWidth: tokens.size.stroke.sm,
+            outlineColor: "core.outline",
+          },
+        },
+        _focus: {
+          outlineWidth: tokens.size.stroke.sm,
+        },
+      },
+      ghost: {
+        color: "ghost.text",
+        _hover: {
+          background: "ghost.surface.hover",
+          _active: {
+            background: "ghost.surface.active",
+          },
+        },
+      },
+      floating: {
+        color: "floating.text",
+        border: "sm",
+        borderColor: "floating.outline",
+        boxShadow:
+          "0px 1px 3px 0px var(--spor-colors-surface-disabled, rgba(0, 0, 0, 0.10))",
+        _hover: {
+          borderColor: "floating.outline.hover",
+
+          _active: {
+            background: "core.surface.active",
+            boxShadow: "none",
+            borderColor: "floating.outline",
+          },
+        },
+      },
+    },
+    size: {
+      xs: {
+        minHeight: 5,
+        minWidth: 5,
+        paddingY: 0.5,
+        fontSize: "xs",
+        fontWeight: "normal",
+      },
+      sm: {
+        minHeight: 6,
+        minWidth: 6,
+        fontSize: "xs",
+        fontWeight: "normal",
+      },
+      md: {
+        minHeight: 7,
+        minWidth: 7,
+        fontSize: "sm",
+        fontWeight: "bold",
+      },
+      lg: {
+        minHeight: 8,
+        minWidth: 8,
+        fontSize: "sm",
+        fontWeight: "bold",
+      },
+    },
+  },
+});

package/src/theme/recipes/choice-chip.ts

@@ -0,0 +1,144 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const choiceChipRecipe = defineRecipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    boxAlign: "center",
+    fontSize: "xs",
+    cursor: "pointer",
+    transitionProperty: "all",
+    borderRadius: "xl",
+    transitionDuration: "fast",
+    height: 6,
+    paddingInlineStart: "2",
+    paddingInlineEnd: "2",
+
+    outline: "1px solid",
+    outlineColor: "base.outline",
+    _checked: {
+      backgroundColor: "brand.surface",
+      borderRadius: "sm",
+      outline: "none",
+      color: "brand.text",
+      _hover: {
+        backgroundColor: "brand.surface.hover",
+        _active: {
+          backgroundColor: "brand.surface.active",
+        },
+      },
+    },
+
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "outline.focus",
+      outlineOffset: "1px",
+    },
+
+    _disabled: {
+      pointerEvents: "none",
+      boxShadow: "none",
+      backgroundColor: "surface.disabled",
+      color: "text.disabled",
+      outline: "none",
+
+      _hover: {
+        backgroundColor: "core.surface.disabled",
+        boxShadow: "none",
+        color: "core.text.disabled",
+      },
+      _checked: {
+        cursor: "not-allowed",
+        boxShadow: "none",
+        color: "core.text.disabled",
+        backgroundColor: "core.surface.disabled",
+        _hover: {
+          backgroundColor: "core.surface.disabled",
+          boxShadow: "none",
+          color: "core.text.disabled",
+        },
+      },
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        color: "core.text",
+        outlineColor: "core.outline",
+
+        _hover: {
+          outline: "2px solid",
+          outlineColor: "core.outline.hover",
+
+          _active: {
+            outline: "1px solid",
+            outlineColor: "core.outline",
+            backgroundColor: "core.surface.active",
+          },
+        },
+      },
+      accent: {
+        backgroundColor: "accent.surface",
+        color: "accent.text",
+        outline: "none",
+
+        _hover: {
+          backgroundColor: "accent.surface.hover",
+
+          _active: {
+            backgroundColor: "accent.surface.active",
+          },
+        },
+      },
+      floating: {
+        backgroundColor: "floating.surface",
+        outline: "1px solid",
+        outlineColor: "floating.outline",
+        color: "floating.text",
+
+        boxShadow: "sm",
+        _hover: {
+          backgroundColor: "floating.surface.hover",
+          outline: "1px solid",
+          outlineColor: "floating.outline.hover",
+
+          _active: {
+            backgroundColor: "floating.surface.active",
+            outline: "1px solid",
+            outlineColor: "floating.outline",
+          },
+        },
+      },
+    },
+    size: {
+      xs: {
+        _checked: {
+          borderRadius: "0.563rem",
+        },
+        height: 5,
+        paddingX: 1.5,
+      },
+      sm: {
+        _checked: {
+          borderRadius: "sm",
+        },
+        height: 6,
+        paddingX: 2,
+      },
+      md: {
+        _checked: {
+          borderRadius: "sm",
+        },
+        height: 7,
+        paddingX: 2,
+      },
+      lg: {
+        _checked: {
+          borderRadius: "md",
+        },
+        height: 8,
+        paddingX: 3,
+      },
+    },
+  },
+});

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

@@ -0,0 +1,41 @@
+import { defineRecipe } from "@chakra-ui/react";
+import { ghostBackground } from "../utils/ghost-utils";
+
+export const closeButtonRecipe = defineRecipe({
+  base: {
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    borderRadius: "md",
+    backgroundColor: "transparent",
+    color: "darkGrey",
+    fontWeight: "normal",
+    _hover: {
+      ...ghostBackground("hover"),
+      _disabled: {
+        color: "dimGrey",
+      },
+      _active: {
+        ...ghostBackground("active"),
+      },
+    },
+  },
+  variants: {
+    size: {
+      lg: {
+        width: "40px",
+        height: "40px",
+        fontSize: "xs",
+      },
+      md: {
+        width: "32px",
+        height: "32px",
+        fontSize: "0.75rem",
+      },
+      sm: {
+        width: "24px",
+        height: "24px",
+        fontSize: "0.625rem",
+      },
+    },
+  },
+});

package/src/theme/recipes/code.ts

@@ -0,0 +1,14 @@
+import { defineRecipe } from "@chakra-ui/react";
+import { badgeRecipie } from "./badge";
+
+export const codeRecipie = defineRecipe({
+  base: {
+    fontFamily: "monospace",
+    fontSize: ["mobile.xs", "desktop.xs"],
+    borderRadius: "xs",
+    paddingX: 1,
+  },
+  variants: {
+    colorPalette: badgeRecipie.variants?.colorPalette ?? {},
+  },
+});

package/src/theme/recipes/group.ts

@@ -0,0 +1,19 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const groupRecipe = defineRecipe({
+  className: "spor-group",
+  base: {
+    fontSize: "lg",
+  },
+  variants: {
+    disabled: {
+      true: {
+        "& > *": {
+          pointerEvents: "none",
+          backgroundColor: "surface.disabled",
+          color: "text.disabled",
+        },
+      },
+    },
+  },
+});

package/src/theme/recipes/index.ts

@@ -0,0 +1,29 @@
+import { attachedInputsRecipe } from "./attached-inputs";
+import { badgeRecipie } from "./badge";
+import { buttonRecipe } from "./button";
+import { closeButtonRecipe } from "./close-button";
+import { codeRecipie } from "./code";
+import { inputRecipe } from "./input";
+import { linkRecipe } from "./link";
+import { pressableCardRecipe } from "./pressable-card";
+import { progressLoaderRecipe } from "./progress-loader";
+import { separatorRecipe } from "./separator";
+import { skeletonRecipe } from "./skeleton";
+import { staticCardRecipe } from "./static-card";
+import { textareaRecipe } from "./textarea";
+
+export const recipes = {
+  attachedInputs: attachedInputsRecipe,
+  badge: badgeRecipie,
+  button: buttonRecipe,
+  closeButton: closeButtonRecipe,
+  code: codeRecipie,
+  input: inputRecipe,
+  link: linkRecipe,
+  pressableCard: pressableCardRecipe,
+  progressLoader: progressLoaderRecipe,
+  seperator: separatorRecipe,
+  skeleton: skeletonRecipe,
+  staticCard: staticCardRecipe,
+  textarea: textareaRecipe,
+};

package/src/theme/recipes/input.ts

@@ -0,0 +1,89 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+/* FYI: The styling in this file is also used in Textarea */
+
+export const inputRecipe = defineRecipe({
+  base: {
+    appearance: "none",
+    width: "100%",
+    outline: "none",
+    border: 0,
+    borderRadius: "sm",
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    position: "relative",
+    paddingX: 3,
+    paddingTop: 3,
+    height: 8,
+    fontSize: "mobile.md",
+
+    _disabled: {
+      backgroundColor: "surface.disabled",
+      outline: "1px solid",
+      outlineColor: "outline.disabled",
+      pointerEvents: "none",
+    },
+    _invalid: {
+      outline: "2px solid",
+      outlineColor: "outline.error",
+      _active: {
+        outline: "2px solid",
+        outlineColor: "outline.error",
+      },
+      _focus: {
+        outline: "2px solid",
+        outlineColor: "outline.error",
+      },
+      _hover: {
+        outline: "2px solid",
+        outlineColor: "core.outline",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        backgroundColor: "transparent",
+        outline: "1px solid",
+        outlineColor: "core.outline",
+        _hover: {
+          outline: "2px solid",
+          outlineColor: "core.outline.hover",
+          _active: {
+            outline: "1px solid",
+            outlineColor: "outline.disabled",
+            backgroundColor: "core.surface.active",
+          },
+        },
+        _focus: {
+          outline: "2px solid",
+          outlineColor: "outline.focus",
+        },
+      },
+      floating: {
+        boxShadow: "sm",
+        bg: "floating.surface",
+        outline: "1px solid",
+        outlineColor: "floating.outline",
+
+        _hover: {
+          outline: "1px solid",
+          outlineColor: "floating.outline.hover",
+        },
+        _active: {
+          outline: "1px solid",
+          outlineColor: "floating.outline.active",
+          backgroundColor: "floating.surface.active",
+        },
+
+        focus: {
+          outline: "1px solid",
+          outlineColor: "outline.focus",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "core",
+  },
+});

package/src/theme/recipes/link.ts

@@ -0,0 +1,64 @@
+import { defineRecipe } from "@chakra-ui/react";
+import { coreText } from "../utils/core-utils";
+
+export const linkRecipe = defineRecipe({
+  base: {
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    transitionTimingFunction: "ease-out",
+    cursor: "pointer",
+    backgroundImage: "linear-gradient(currentColor, currentColor)",
+    backgroundSize: "100% 1px",
+    backgroundPosition: "0 100%",
+    backgroundRepeat: "no-repeat",
+    borderRadius: "none",
+    paddingX: "2px",
+    paddingY: "0",
+    color: "inherit",
+    display: "inline-flex",
+    gap: "0",
+    position: "relative",
+    boxDecorationBreak: "clone",
+    textUnderlineOffset: "0",
+
+    "&:focus, &:focus-visible, &:active, &:hover": {
+      backgroundImage: "none",
+      backgroundSize: "100%",
+      outline: "none",
+      borderRadius: "xs",
+    },
+
+    "& svg": {
+      display: "inline-block",
+      width: "1.125em",
+      height: "1.125em",
+      position: "relative",
+      bottom: "1px",
+      scale: "0.8",
+      marginRight: "-2px",
+    },
+  },
+  variants: {
+    variant: {
+      primary: {
+        ...coreText("default"),
+        _hover: {
+          color: "text.default",
+          _active: {
+            color: "text.disabled",
+          },
+        },
+      },
+      secondary: {
+        ...coreText("highlight"),
+        padding: "2px",
+        _hover: {
+          ...coreText("highlight"),
+          _active: {
+            color: "text.disabled",
+          },
+        },
+      },
+    },
+  },
+});

package/src/theme/recipes/nudge.ts

@@ -0,0 +1,12 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const nudgeActionsRecipe = defineRecipe({
+  base: {
+    display: "flex",
+    paddingTop: "1rem",
+    alignItems: "center",
+    gap: "0.5rem",
+    justifyContent: "between",
+    width: "100%",
+  },
+});