@vygruppen/spor-react 11.3.10 → 12.0.1

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

@@ -0,0 +1,192 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { travelTagAnatomy } from "./anatomy";
+
+export const travelTagSlotRecipe = defineSlotRecipe({
+  slots: travelTagAnatomy.keys(),
+  className: "spor-travel-tag",
+  base: {
+    container: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      padding: 0.5,
+      width: "fit-content",
+      transitionDuration: "fast",
+      transitionProperty: "common",
+      "button&, a&": {
+        boxShadow: "sm",
+        _hover: {
+          boxShadow: "md",
+        },
+        _active: {
+          opacity: 0.5,
+          boxShadow: "none",
+        },
+      },
+    },
+    textContainer: {
+      color: "darkGrey",
+      paddingRight: 0.5,
+      whiteSpace: "nowrap",
+    },
+    title: {
+      fontWeight: "bold",
+      color: "brand.text.inverted",
+      "[aria-disabled=true] &": {
+        color: "text.disabled",
+      },
+    },
+    description: {
+      fontWeight: "normal",
+      "[aria-disabled=true] &": {
+        color: "text.disabled",
+      },
+    },
+    deviationIcon: {
+      position: "absolute",
+      top: "0",
+      right: "0",
+      transform: "translate(50%, -50%)",
+      zIndex: "docked",
+    },
+  },
+  variants: {
+    deviationLevel: {
+      critical: {
+        container: {
+          border: "1px solid",
+          borderColor: "error.text",
+        },
+        deviationIcon: {
+          color: "brightRed",
+        },
+      },
+      major: {
+        container: {
+          border: "1px solid",
+          borderColor: "golden",
+        },
+      },
+      minor: {},
+      info: {
+        deviationIcon: {
+          color: "ocean",
+        },
+      },
+      none: {},
+    },
+    variant: {
+      "local-train": {
+        container: {
+          backgroundColor: "linjetag.lokaltogLight",
+        },
+      },
+      "region-train": {
+        container: {
+          backgroundColor: "linjetag.regiontogLight",
+        },
+      },
+      "region-express-train": {
+        container: {
+          backgroundColor: "linjetag.regionEkspressLight",
+        },
+      },
+      "long-distance-train": {
+        container: {
+          backgroundColor: "linjetag.fjerntogLight",
+        },
+      },
+      "airport-express-train": {
+        container: {
+          backgroundColor: "linjetag.flytogLight",
+        },
+      },
+      "vy-bus": {
+        container: {
+          backgroundColor: "linjetag.vyBussLight",
+        },
+      },
+      "local-bus": {
+        container: {
+          backgroundColor: "linjetag.lokalbussLight",
+        },
+      },
+      ferry: {
+        container: {
+          backgroundColor: "linjetag.fergeLight",
+        },
+      },
+      subway: {
+        container: {
+          backgroundColor: "linjetag.tbaneLight",
+        },
+      },
+      tram: {
+        container: {
+          backgroundColor: "linjetag.trikkLight",
+        },
+      },
+      "alt-transport": {
+        container: {
+          backgroundColor: "linjetag.altTransportLight",
+        },
+      },
+      walk: {
+        textContainer: {
+          position: "absolute",
+          left: "1.3rem",
+          bottom: 0,
+        },
+        title: {
+          fontSize: "mobile.xs",
+          fontWeight: "normal",
+          color: "text",
+        },
+        description: {
+          display: "none",
+        },
+      },
+    },
+    size: {
+      sm: {
+        container: {
+          borderRadius: "sm",
+        },
+        iconContainer: {
+          borderRadius: "xs",
+        },
+        textContainer: {
+          marginLeft: 1,
+          fontSize: "mobile.sm",
+        },
+      },
+      md: {
+        container: {
+          borderRadius: "sm",
+        },
+        iconContainer: {
+          borderRadius: "0.5625rem", // 9px
+        },
+        textContainer: {
+          marginLeft: 1.5,
+          fontSize: "mobile.sm",
+        },
+      },
+      lg: {
+        container: {
+          borderRadius: "sm",
+        },
+        iconContainer: {
+          borderRadius: "0.5625rem", // 9px
+        },
+        textContainer: {
+          marginLeft: 2,
+          fontSize: "mobile.md",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

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

@@ -0,0 +1,50 @@
+import { defineAnimationStyles } from "@chakra-ui/react";
+
+export const animationStyles = defineAnimationStyles({
+  "slide-fade-in": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      "&[data-placement^=top]": {
+        animationName: "slide-from-bottom, fade-in",
+      },
+      "&[data-placement^=bottom]": {
+        animationName: "slide-from-top, fade-in",
+      },
+      "&[data-placement^=left]": {
+        animationName: "slide-from-right, fade-in",
+      },
+      "&[data-placement^=right]": {
+        animationName: "slide-from-left, fade-in",
+      },
+    },
+  },
+  "slide-fade-out": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      "&[data-placement^=top]": {
+        animationName: "slide-to-bottom, fade-out",
+      },
+      "&[data-placement^=bottom]": {
+        animationName: "slide-to-top, fade-out",
+      },
+      "&[data-placement^=left]": {
+        animationName: "slide-to-right, fade-out",
+      },
+      "&[data-placement^=right]": {
+        animationName: "slide-to-left, fade-out",
+      },
+    },
+  },
+  "scale-fade-in": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      animationName: "scale-in, fade-in",
+    },
+  },
+  "scale-fade-out": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      animationName: "scale-out, fade-out",
+    },
+  },
+});

package/src/theme/tokens/animations.ts

@@ -0,0 +1,22 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const animations = defineTokens.animations({
+  spin: {
+    value: "spin 1s linear infinite",
+  },
+  ping: {
+    value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+  },
+  pulse: {
+    value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+  },
+  bounce: {
+    value: "bounce 1s infinite",
+  },
+  expandWidthBounce: {
+    value: "expand-width-bounce 0.6s ease-in-out",
+  },
+  collapseWidth: {
+    value: "collapse-width 0.3s ease-in-out",
+  },
+});

package/src/theme/tokens/aspect-ratios.ts

@@ -0,0 +1,22 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const aspectRatios = defineTokens.aspectRatios({
+  square: {
+    value: "1 / 1",
+  },
+  landscape: {
+    value: "4 / 3",
+  },
+  portrait: {
+    value: "3 / 4",
+  },
+  wide: {
+    value: "16 / 9",
+  },
+  ultrawide: {
+    value: "18 / 5",
+  },
+  golden: {
+    value: "1.618 / 1",
+  },
+});

package/src/theme/tokens/blurs.ts

@@ -0,0 +1,28 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const blurs = defineTokens.blurs({
+  none: {
+    value: " ",
+  },
+  sm: {
+    value: "4px",
+  },
+  md: {
+    value: "8px",
+  },
+  lg: {
+    value: "12px",
+  },
+  xl: {
+    value: "16px",
+  },
+  "2xl": {
+    value: "24px",
+  },
+  "3xl": {
+    value: "40px",
+  },
+  "4xl": {
+    value: "64px",
+  },
+});

package/src/theme/tokens/borders.ts

@@ -0,0 +1,26 @@
+import { defineTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const borders = defineTokens.borders({
+  none: {
+    value: "0",
+  },
+  sm: {
+    value: `${tokens.size.stroke.sm} solid`,
+  },
+  "sm-dashed": {
+    value: `${tokens.size.stroke.sm} dashed`,
+  },
+  md: {
+    value: `${tokens.size.stroke.md} solid`,
+  },
+  "md-dashed": {
+    value: `${tokens.size.stroke.md} dashed`,
+  },
+  lg: {
+    value: `${tokens.size.stroke.lg} solid`,
+  },
+  "lg-dashed": {
+    value: `${tokens.size.stroke.lg} dashed`,
+  },
+});

package/src/theme/{foundations → tokens}/breakpoints.ts

@@ -6,5 +6,4 @@ export const breakpoints = {
   md: tokens.size.breakpoint.md,
   lg: tokens.size.breakpoint.lg,
   xl: tokens.size.breakpoint.xl,
-  "2xl": tokens.size.breakpoint.xl,
 };

package/src/theme/tokens/colors.ts

@@ -0,0 +1,10 @@
+import { defineTokens } from "@chakra-ui/react";
+import linjetagJson from "@vygruppen/spor-design-tokens/tokens/color/linjetag.json";
+import paletteJson from "@vygruppen/spor-design-tokens/tokens/color/palette.json";
+import aliasJson from "@vygruppen/spor-design-tokens/tokens/color/alias.json";
+
+export const colors = defineTokens.colors({
+  ...aliasJson.color.alias,
+  ...paletteJson.color.palette,
+  linjetag: linjetagJson.color.linjetag,
+});

package/src/theme/tokens/config.ts

@@ -0,0 +1,10 @@
+export const config = {
+  preflight: true,
+  cssVarsPrefix: "spor",
+  cssVarsRoot: ":where(:root, :host)",
+  /* strictTokens: true, */ /* Should be turned on at some point */
+  conditions: {
+    off: "&:is([data-state=off])",
+    on: "&:is([data-state=on])",
+  },
+};

package/src/theme/tokens/cursor.ts

@@ -0,0 +1,28 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const cursor = defineTokens.cursor({
+  button: {
+    value: "pointer",
+  },
+  checkbox: {
+    value: "default",
+  },
+  disabled: {
+    value: "not-allowed",
+  },
+  menuitem: {
+    value: "default",
+  },
+  option: {
+    value: "default",
+  },
+  radio: {
+    value: "default",
+  },
+  slider: {
+    value: "default",
+  },
+  switch: {
+    value: "pointer",
+  },
+});

package/src/theme/tokens/durations.ts

@@ -0,0 +1,25 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const durations = defineTokens.durations({
+  fastest: {
+    value: "50ms",
+  },
+  faster: {
+    value: "100ms",
+  },
+  fast: {
+    value: "150ms",
+  },
+  moderate: {
+    value: "200ms",
+  },
+  slow: {
+    value: "300ms",
+  },
+  slower: {
+    value: "400ms",
+  },
+  slowest: {
+    value: "500ms",
+  },
+});

package/src/theme/tokens/easings.ts

@@ -0,0 +1,16 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const easings = defineTokens.easings({
+  "ease-in": {
+    value: "cubic-bezier(0.42, 0, 1, 1)",
+  },
+  "ease-out": {
+    value: "cubic-bezier(0, 0, 0.58, 1)",
+  },
+  "ease-in-out": {
+    value: "cubic-bezier(0.42, 0, 0.58, 1)",
+  },
+  "ease-in-smooth": {
+    value: "cubic-bezier(0.32, 0.72, 0, 1)",
+  },
+});

package/src/theme/tokens/font-sizes.ts

@@ -0,0 +1,30 @@
+import { defineTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const fontSizes = defineTokens.fontSizes({
+  "2xs": { value: tokens.size.font.xs.mobile },
+  xs: { value: tokens.size.font.sm.mobile },
+  sm: { value: tokens.size.font.md.mobile },
+  md: { value: tokens.size.font.lg.mobile },
+  lg: { value: tokens.size.font.xl.mobile },
+  xl: { value: tokens.size.font.xxl.mobile },
+  "2xl": { value: tokens.size.font.xl.desktop },
+  "3xl": { value: tokens.size.font.xxl.desktop },
+
+  mobile: {
+    xs: { value: tokens.size.font.xs.mobile },
+    sm: { value: tokens.size.font.sm.mobile },
+    md: { value: tokens.size.font.md.mobile },
+    lg: { value: tokens.size.font.lg.mobile },
+    xl: { value: tokens.size.font.xl.mobile },
+    xxl: { value: tokens.size.font.xxl.mobile },
+  },
+  desktop: {
+    xs: { value: tokens.size.font.xs.desktop },
+    sm: { value: tokens.size.font.sm.desktop },
+    md: { value: tokens.size.font.md.desktop },
+    lg: { value: tokens.size.font.lg.desktop },
+    xl: { value: tokens.size.font.xl.desktop },
+    xxl: { value: tokens.size.font.xxl.desktop },
+  },
+});

package/src/theme/tokens/font-weights.ts

@@ -0,0 +1,31 @@
+import { defineTokens } from "@chakra-ui/react";
+
+export const fontWeights = defineTokens.fontWeights({
+  thin: {
+    value: 100,
+  },
+  extralight: {
+    value: 200,
+  },
+  light: {
+    value: 300,
+  },
+  normal: {
+    value: 400,
+  },
+  medium: {
+    value: 500,
+  },
+  semibold: {
+    value: 600,
+  },
+  bold: {
+    value: 700,
+  },
+  extrabold: {
+    value: 800,
+  },
+  black: {
+    value: 900,
+  },
+});

package/src/theme/tokens/fonts.ts

@@ -0,0 +1,8 @@
+import { defineTokens } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const fonts = defineTokens.fonts({
+  body: { value: `${tokens.font.family.body}, arial, sans-serif` },
+  heading: { value: `${tokens.font.family.heading}, arial, sans-serif` },
+  mono: { value: `${tokens.font.family.monospace}, monospace` },
+});

package/src/theme/tokens/global-css.ts

@@ -0,0 +1,18 @@
+import { defineGlobalStyles } from "@chakra-ui/react";
+
+export const globalCss = defineGlobalStyles({
+  "html, body": {
+    color: "text",
+  },
+  svg: {
+    display: "initial",
+  },
+
+  ":is(button, [role='button'], a, input, textarea, select, video, audio):focus-visible":
+    {
+      outlineWidth: "2px !important",
+      outlineColor: "outline.focus !important",
+      outlineStyle: "solid !important",
+      outlineOffset: "1px !important",
+    },
+});

package/src/theme/tokens/index.ts

@@ -0,0 +1,37 @@
+import { aspectRatios } from "./aspect-ratios";
+import { animations } from "./animations";
+import { blurs } from "./blurs";
+import { borders } from "./borders";
+import { colors } from "./colors";
+import { durations } from "./durations";
+import { easings } from "./easings";
+import { fonts } from "./fonts";
+import { fontSizes } from "./font-sizes";
+import { fontWeights } from "./font-weights";
+import { letterSpacings } from "./letter-spacings";
+import { lineHeights } from "./line-heights";
+import { radii } from "./radii";
+import { spacing } from "./spacing";
+import { sizes } from "./sizes";
+import { zIndex } from "./z-index";
+import { cursor } from "./cursor";
+
+export const tokens = {
+  aspectRatios,
+  animations,
+  blurs,
+  borders,
+  colors,
+  durations,
+  easings,
+  fonts,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  lineHeights,
+  radii,
+  spacing,
+  sizes,
+  zIndex,
+  cursor,
+};