@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/theme/tokens/keyframes.ts

@@ -0,0 +1,255 @@
+export const keyframes = {
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)",
+    },
+    "100%": {
+      transform: "rotate(360deg)",
+    },
+  },
+  pulse: {
+    "50%": {
+      opacity: "0.5",
+    },
+  },
+  ping: {
+    "75%, 100%": {
+      transform: "scale(2)",
+      opacity: "0",
+    },
+  },
+  bounce: {
+    "0%, 100%": {
+      transform: "translateY(-25%)",
+      animationTimingFunction: "cubic-bezier(0.8,0,1,1)",
+    },
+    "50%": {
+      transform: "none",
+      animationTimingFunction: "cubic-bezier(0,0,0.2,1)",
+    },
+  },
+  "bg-position": {
+    from: {
+      backgroundPosition: "var(--animate-from, 1rem) 0",
+    },
+    to: {
+      backgroundPosition: "var(--animate-to, 0) 0",
+    },
+  },
+  position: {
+    from: {
+      insetInlineStart: "var(--animate-from-x)",
+      insetBlockStart: "var(--animate-from-y)",
+    },
+    to: {
+      insetInlineStart: "var(--animate-to-x)",
+      insetBlockStart: "var(--animate-to-y)",
+    },
+  },
+  "circular-progress": {
+    "0%": {
+      strokeDasharray: "1, 400",
+      strokeDashoffset: "0",
+    },
+    "50%": {
+      strokeDasharray: "400, 400",
+      strokeDashoffset: "-100%",
+    },
+    "100%": {
+      strokeDasharray: "400, 400",
+      strokeDashoffset: "-260%",
+    },
+  },
+  "expand-height": {
+    from: {
+      height: "0",
+    },
+    to: {
+      height: "var(--height)",
+    },
+  },
+  "collapse-height": {
+    from: {
+      height: "var(--height)",
+    },
+    to: {
+      height: "0",
+    },
+  },
+  "expand-width": {
+    from: {
+      width: "auto",
+    },
+    to: {
+      width: "var(--width)",
+    },
+  },
+  "collapse-width": {
+    from: {
+      width: "var(--width)",
+    },
+    to: {
+      width: "auto",
+    },
+  },
+  "fade-in": {
+    from: {
+      opacity: 0,
+    },
+    to: {
+      opacity: 1,
+    },
+  },
+  "fade-out": {
+    from: {
+      opacity: 1,
+    },
+    to: {
+      opacity: 0,
+    },
+  },
+  "slide-from-left-full": {
+    from: {
+      translate: "-100% 0",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-from-right-full": {
+    from: {
+      translate: "100% 0",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-from-top-full": {
+    from: {
+      translate: "0 -100%",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-from-bottom-full": {
+    from: {
+      translate: "0 100%",
+    },
+    to: {
+      translate: "0 0",
+    },
+  },
+  "slide-to-left-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "-100% 0",
+    },
+  },
+  "slide-to-right-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "100% 0",
+    },
+  },
+  "slide-to-top-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "0 -100%",
+    },
+  },
+  "slide-to-bottom-full": {
+    from: {
+      translate: "0 0",
+    },
+    to: {
+      translate: "0 100%",
+    },
+  },
+  "slide-from-top": {
+    "0%": {
+      translate: "0 -0.5rem",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-from-bottom": {
+    "0%": {
+      translate: "0 0.5rem",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-from-left": {
+    "0%": {
+      translate: "-0.5rem 0",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-from-right": {
+    "0%": {
+      translate: "0.5rem 0",
+    },
+    to: {
+      translate: "0",
+    },
+  },
+  "slide-to-top": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "0 -0.5rem",
+    },
+  },
+  "slide-to-bottom": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "0 0.5rem",
+    },
+  },
+  "slide-to-left": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "-0.5rem 0",
+    },
+  },
+  "slide-to-right": {
+    "0%": {
+      translate: "0",
+    },
+    to: {
+      translate: "0.5rem 0",
+    },
+  },
+  "scale-in": {
+    from: {
+      scale: "0.95",
+    },
+    to: {
+      scale: "1",
+    },
+  },
+  "scale-out": {
+    from: {
+      scale: "1",
+    },
+    to: {
+      scale: "0.95",
+    },
+  },
+};

package/src/theme/tokens/letter-spacings.ts

@@ -0,0 +1,19 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const letterSpacings = defineTokens.letterSpacings({
+  tighter: {
+    value: "-0.05em",
+  },
+  tight: {
+    value: "-0.025em",
+  },
+  wide: {
+    value: "0.025em",
+  },
+  wider: {
+    value: "0.05em",
+  },
+  widest: {
+    value: "0.1em",
+  },
+});

package/src/theme/tokens/line-heights.ts

@@ -0,0 +1,19 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const lineHeights = defineTokens.lineHeights({
+  shorter: {
+    value: 1.25,
+  },
+  short: {
+    value: 1.375,
+  },
+  moderate: {
+    value: 1.5,
+  },
+  tall: {
+    value: 1.625,
+  },
+  taller: {
+    value: 2,
+  },
+});

package/src/theme/tokens/radii.ts

@@ -0,0 +1,13 @@
+import { defineTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const radii = defineTokens.radii({
+  none: { value: tokens.size["border-radius"].none },
+  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/tokens/sizes.ts

@@ -0,0 +1,51 @@
+import { defineTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+import { spacing } from "./spacing";
+
+export const largeSizes = defineTokens.sizes({
+  "3xs": { value: "14rem" },
+  "2xs": { value: "16rem" },
+  xs: { value: "20rem" },
+  sm: { value: "24rem" },
+  md: { value: "28rem" },
+  lg: { value: "32rem" },
+  xl: { value: "36rem" },
+  "2xl": { value: "42rem" },
+  "3xl": { value: "48rem" },
+  "4xl": { value: "56rem" },
+  "5xl": { value: "64rem" },
+  "6xl": { value: "72rem" },
+  "7xl": { value: "80rem" },
+  "8xl": { value: "90rem" },
+});
+
+const namedSizes = defineTokens.sizes({
+  max: { value: "max-content" },
+  min: { value: "min-content" },
+  fit: { value: "fit-content" },
+  prose: { value: "60ch" },
+  full: { value: "100%" },
+  dvh: { value: "100dvh" },
+  svh: { value: "100svh" },
+  lvh: { value: "100lvh" },
+  dvw: { value: "100dvw" },
+  svw: { value: "100svw" },
+  lvw: { value: "100lvw" },
+  vw: { value: "100vw" },
+  vh: { value: "100vh" },
+});
+
+const container = defineTokens.sizes({
+  base: { value: 0 },
+  sm: { value: tokens.size.breakpoint.sm },
+  md: { value: tokens.size.breakpoint.md },
+  lg: { value: tokens.size.breakpoint.lg },
+  xl: { value: tokens.size.breakpoint.xl },
+});
+
+export const sizes = {
+  ...largeSizes,
+  ...namedSizes,
+  ...spacing,
+  container,
+};

package/src/theme/tokens/spacing.ts

@@ -0,0 +1,20 @@
+import { defineTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const spacing = defineTokens.spacing({
+  0: { value: tokens.size.spacing["0"] },
+  0.5: { value: tokens.size.spacing["0.5"] },
+  1: { value: tokens.size.spacing["1"] },
+  1.5: { value: tokens.size.spacing["1.5"] },
+  2: { value: tokens.size.spacing["2"] },
+  3: { value: tokens.size.spacing["3"] },
+  4: { value: tokens.size.spacing["4"] },
+  5: { value: tokens.size.spacing["5"] },
+  6: { value: tokens.size.spacing["6"] },
+  7: { value: tokens.size.spacing["7"] },
+  8: { value: tokens.size.spacing["8"] },
+  9: { value: tokens.size.spacing["9"] },
+  10: { value: tokens.size.spacing["10"] },
+  11: { value: tokens.size.spacing["11"] },
+  12: { value: tokens.size.spacing["12"] },
+});

package/src/theme/tokens/text-styles.ts

@@ -0,0 +1,89 @@
+import { defineTextStyles } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const textStyles = defineTextStyles({
+  xxl: {
+    value: {
+      fontSize: [
+        tokens.font.style.xxl["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style.xxl["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style.xxl["font-family"],
+      lineHeight: tokens.font.style.xxl["line-height"],
+    },
+  },
+  "xl-display": {
+    value: {
+      fontSize: [
+        tokens.font.style["xl-display"]["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style["xl-display"]["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style["xl-display"]["font-family"],
+      lineHeight: tokens.font.style["xl-display"]["line-height"],
+    },
+  },
+  "xl-sans": {
+    value: {
+      fontSize: [
+        tokens.font.style["xl-sans"]["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style["xl-sans"]["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style["xl-sans"]["font-family"],
+      lineHeight: tokens.font.style["xl-sans"]["line-height"],
+    },
+  },
+  lg: {
+    value: {
+      fontSize: [
+        tokens.font.style.lg["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style.lg["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style.lg["font-family"],
+      lineHeight: tokens.font.style.lg["line-height"],
+    },
+  },
+  md: {
+    value: {
+      fontSize: [
+        tokens.font.style.md["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style.md["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style.md["font-family"],
+      lineHeight: tokens.font.style.md["line-height"],
+    },
+  },
+  sm: {
+    value: {
+      fontSize: [
+        tokens.font.style.sm["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style.sm["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style.sm["font-family"],
+      lineHeight: tokens.font.style.sm["line-height"],
+    },
+  },
+  xs: {
+    value: {
+      fontSize: [
+        tokens.font.style.xs["font-size"].mobile,
+        null,
+        null,
+        tokens.font.style.xs["font-size"].desktop,
+      ],
+      fontFamily: tokens.font.style.xs["font-family"],
+      lineHeight: tokens.font.style.xs["line-height"],
+    },
+  },
+});

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

@@ -0,0 +1,17 @@
+import { defineTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const zIndex = defineTokens.zIndex({
+  hide: { value: tokens.depth["z-index"].hide },
+  auto: { value: "auto" },
+  base: { value: tokens.depth["z-index"].base },
+  docked: { value: tokens.depth["z-index"].docked },
+  dropdown: { value: tokens.depth["z-index"].dropdown },
+  sticky: { value: tokens.depth["z-index"].sticky },
+  banner: { value: tokens.depth["z-index"].banner },
+  overlay: { value: tokens.depth["z-index"].overlay },
+  modal: { value: tokens.depth["z-index"].modal },
+  popover: { value: tokens.depth["z-index"].popover },
+  skipLink: { value: tokens.depth["z-index"].skipLink },
+  toast: { value: tokens.depth["z-index"].toast },
+});

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

@@ -1,4 +1,3 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { brandBackground } from "./brand-utils";
 import { State, Subset } from "./types";
 
@@ -7,48 +6,36 @@ type AccentBackgroundState = Subset<
   "default" | "hover" | "active" | "selected"
 >;
 
-export function accentBackground(
-  state: AccentBackgroundState,
-  props: StyleFunctionProps,
-) {
+export function accentBackground(state: AccentBackgroundState) {
   switch (state) {
     case "selected":
-      return brandBackground("default", props);
+      return brandBackground("default");
     case "active":
       return {
-        backgroundColor: mode(
-          "accent.surface.active.light",
-          "accent.surface.active.dark",
-        )(props),
+        backgroundColor: "accent.surface.active",
       };
     case "hover":
       return {
-        backgroundColor: mode(
-          "accent.surface.hover.light",
-          "accent.surface.hover.dark",
-        )(props),
+        backgroundColor: "accent.surface.hover",
       };
     default:
       return {
-        backgroundColor: mode(
-          "accent.surface.default.light",
-          "accent.surface.default.dark",
-        )(props),
+        backgroundColor: "accent.surface",
       };
   }
 }
 
 type AccentTextState = Subset<State, "default" | "selected">;
 
-export function accentText(state: AccentTextState, props: StyleFunctionProps) {
+export function accentText(state: AccentTextState) {
   switch (state) {
     case "selected":
       return {
-        color: mode("brand.text.light", "brand.text.dark")(props),
+        color: "brand.text",
       };
     default:
       return {
-        color: mode("accent.text.light", "accent.text.dark")(props),
+        color: "accent.text",
       };
   }
 }

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

@@ -1,19 +1,17 @@
-import { mode } from "@chakra-ui/theme-tools";
-
 type Bg = "default" | "secondary" | "tertiary";
-export const bg = (bg: Bg, props: any) => {
+export const bg = (bg: Bg) => {
   switch (bg) {
     case "default":
       return {
-        backgroundColor: mode("bg.default.light", "bg.default.dark")(props),
+        backgroundColor: "bg",
       };
     case "secondary":
       return {
-        backgroundColor: mode("bg.secondary.light", "bg.secondary.dark")(props),
+        backgroundColor: "bg.secondary",
       };
     case "tertiary":
       return {
-        backgroundColor: mode("bg.tertiary.light", "bg.tertiary.dark")(props),
+        backgroundColor: "bg.tertiary",
       };
   }
 };

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

@@ -1,42 +1,29 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { State, Subset } from "./types";
 
 type BrandBackgroundState = Subset<State, "default" | "hover" | "active">;
 
-export function brandBackground(
-  state: BrandBackgroundState,
-  props: StyleFunctionProps,
-) {
+export function brandBackground(state: BrandBackgroundState) {
   switch (state) {
     case "active":
       return {
-        backgroundColor: mode(
-          "brand.surface.active.light",
-          "brand.surface.active.dark",
-        )(props),
+        backgroundColor: "brand.surface.active",
       };
     case "hover":
       return {
-        backgroundColor: mode(
-          "brand.surface.hover.light",
-          "brand.surface.hover.dark",
-        )(props),
+        backgroundColor: "brand.surface.hover",
       };
     case "default":
     default:
       return {
-        backgroundColor: mode(
-          "brand.surface.default.light",
-          "brand.surface.default.dark",
-        )(props),
+        backgroundColor: "brand.surface",
       };
   }
 }
 
 type BrandTextState = Subset<State, "hover" | "active" | "default">;
 
-export function brandText(state: BrandTextState, props: StyleFunctionProps) {
+export function brandText(state: BrandTextState) {
   return {
-    color: mode("brand.text.light", "brand.text.dark")(props),
+    color: "brand.text",
   };
 }