@vygruppen/spor-react 11.3.10 → 12.0.1

package/src/theme/components/table.ts

@@ -1,161 +0,0 @@
-import { tableAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { baseBorder, baseText } from "../utils/base-utils";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const numericStyles = {
-  "&[data-is-numeric=true]": {
-    textAlign: "end",
-  },
-};
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    table: {
-      borderCollapse: "collapse",
-      ...baseText("default", props),
-      width: "100%",
-    },
-    th: {
-      fontWeight: "bold",
-      textAlign: "start",
-    },
-    td: {
-      textAlign: "start",
-    },
-    tfoot: {
-      tr: {
-        "&:last-of-type": {
-          th: { borderBottomWidth: 0 },
-        },
-      },
-    },
-    caption: {
-      marginTop: 4,
-      fontFamily: "heading",
-      textAlign: "center",
-      fontWeight: "bold",
-      color: "currentColor",
-    },
-  }),
-  variants: {
-    simple: (props) => ({
-      th: {
-        borderBottom: "sm",
-        borderColor: mode(`blackAlpha.200`, `whiteAlpha.300`)(props),
-        ...numericStyles,
-      },
-      td: {
-        borderBottom: "sm",
-        borderColor: mode(`blackAlpha.200`, `whiteAlpha.300`)(props),
-        ...numericStyles,
-      },
-    }),
-    outline: (props) => ({
-      tbody: {
-        tr: {
-          transitionDuration: "fast",
-          transitionProperty: "background-color, box-shadow",
-          _hover: {
-            ...baseBorder("hover", props),
-            outlineOffset: "-2px",
-            backgroundColor: mode(
-              props.colorScheme === "grey" ? "mint" : "coralGreen",
-              "whiteAlpha.200",
-            )(props),
-          },
-          _last: {
-            borderBottomRadius: "md",
-          },
-        },
-      },
-      th: {
-        border: mode("none", "md"),
-        borderColor: mode("transparent", `whiteAlpha.200`)(props),
-        backgroundColor: mode(`${props.colorScheme}.100`, "darkTeal")(props),
-        ...numericStyles,
-      },
-      td: {
-        border: mode("sm", "md"),
-        borderColor: mode(
-          props.colorScheme === "grey" ? "silver" : "blackAlpha.200",
-          "whiteAlpha.200",
-        )(props),
-        ...numericStyles,
-        _first: {
-          borderLeft: "none",
-        },
-      },
-      tr: {
-        _last: {
-          td: {
-            borderBottom: "none",
-          },
-        },
-      },
-    }),
-    unstyled: {},
-  },
-  sizes: {
-    sm: {
-      table: {
-        fontSize: ["mobile.xs", "desktop.xs"],
-      },
-      th: {
-        paddingX: 3,
-        paddingY: 1.5,
-      },
-      td: {
-        paddingX: 3,
-        paddingY: 1.5,
-      },
-      caption: {
-        paddingX: 3,
-        paddingY: 1.5,
-      },
-    },
-    md: {
-      table: {
-        fontSize: ["mobile.sm", "desktop.sm"],
-      },
-      th: {
-        paddingX: 3,
-        paddingY: 1.5,
-      },
-      td: {
-        paddingX: 3,
-        paddingY: 1.5,
-      },
-      caption: {
-        paddingX: 3,
-        paddingY: 1.5,
-      },
-    },
-    lg: {
-      table: {
-        fontSize: ["mobile.sm", "desktop.sm"],
-      },
-      th: {
-        paddingX: 3,
-        paddingY: "15px",
-      },
-      td: {
-        paddingX: 3,
-        paddingY: "15px",
-      },
-      caption: {
-        paddingX: 3,
-        paddingY: "15px",
-      },
-    },
-  },
-  defaultProps: {
-    variant: "simple",
-    size: "md",
-    colorScheme: "grey",
-  },
-});
-
-export default config;

package/src/theme/components/tabs.ts

@@ -1,135 +0,0 @@
-import { tabsAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { accentBackground, accentText } from "../utils/accent-utils";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    root: {
-      display: "flex",
-      flexDirection: "column",
-    },
-    tablist: {
-      display: "flex",
-      alignItems: "center",
-      gap: 0.5,
-      width: props.isFitted ? "fit-content" : "100%",
-      borderRadius: "xl",
-    },
-    tab: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      transitionProperty: "common",
-      transitionDuration: "normal",
-      width: props.isFitted ? "fit-content" : "100%",
-      height: "100%",
-      whiteSpace: "nowrap",
-      borderRadius: "xl",
-      ...focusVisibleStyles(props),
-      _disabled: {
-        ...baseBackground("disabled", props),
-        ...baseText("disabled", props),
-      },
-      _selected: {
-        pointerEvents: "none",
-        ...brandBackground("default", props),
-        ...brandText("default", props),
-        _hover: {
-          ...brandBackground("hover", props),
-          ...brandText("hover", props),
-        },
-        _active: {
-          ...brandBackground("active", props),
-          ...brandText("active", props),
-        },
-      },
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      tablist: {
-        ...baseBackground("default", props),
-        ...baseText("default", props),
-        ...baseBorder("default", props),
-      },
-      tab: {
-        ...baseText("default", props),
-        _hover: {
-          ...baseBorder("hover", props),
-          outlineOffset: "-2px",
-        },
-        _accent: {
-          ...baseBackground("active", props),
-        },
-      },
-    }),
-    accent: (props) => ({
-      tablist: {
-        backgroundColor: mode("accent.bg.light", "accent.bg.dark")(props),
-        ...accentText("default", props),
-      },
-      tab: {
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-        },
-        _accent: {
-          ...accentBackground("active", props),
-        },
-      },
-    }),
-  },
-  sizes: {
-    xs: {
-      tablist: {
-        height: 5,
-        padding: "2px",
-      },
-      tab: {
-        paddingX: 2,
-        paddingY: 0,
-      },
-    },
-    sm: {
-      tablist: {
-        height: 6,
-        padding: 0.5,
-      },
-      tab: {
-        paddingX: 2,
-      },
-    },
-    md: {
-      tablist: {
-        height: 7,
-        padding: 0.5,
-      },
-      tab: {
-        fontWeight: "bold",
-        paddingX: 2,
-      },
-    },
-    lg: {
-      tablist: {
-        height: 8,
-        padding: "4px",
-      },
-      tab: {
-        fontWeight: "bold",
-        paddingX: 3,
-      },
-    },
-  },
-  defaultProps: {
-    size: "sm",
-    variant: "base",
-  },
-});
-
-export default config;

package/src/theme/components/textarea.ts

@@ -1,33 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import { inputBaseStyle, inputVariant } from "../utils/input-utils";
-
-const config = defineStyleConfig({
-  baseStyle: (props) => ({
-    ...inputBaseStyle(props).field,
-    minHeight: "calc(var(--label-height) + 4rem)",
-    verticalAlign: "top",
-    appearance: "none",
-    borderTop: "0.8rem solid transparent",
-    "&:not(:placeholder-shown)": {
-      "&:has(+ label)": {
-        borderTop: "var(--label-height) solid transparent", // use border in stead of padding to avoid problems with scrolling
-      },
-      "& + label": {
-        transform: "scale(0.825) translateY(-10px)",
-      },
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      ...inputVariant("base", props),
-    }),
-    floating: (props) => ({
-      ...inputVariant("floating", props),
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});
-
-export default config;

package/src/theme/components/toast.ts

@@ -1,28 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-
-const config = defineStyleConfig({
-  baseStyle: {
-    display: "flex",
-    alignItems: "center",
-    width: "fit-content",
-    maxWidth: "60ch",
-    minWidth: "40ch",
-    paddingX: 2,
-    paddingY: 1.5,
-    boxShadow: "sm",
-    borderRadius: "sm",
-  },
-  variants: {
-    success: {
-      backgroundColor: "seaMist",
-    },
-    info: {
-      backgroundColor: "lightBlue",
-    },
-    error: {
-      backgroundColor: "lightRed",
-    },
-  },
-});
-
-export default config;

package/src/theme/components/travel-tag.ts

@@ -1,256 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { surface } from "../utils/surface-utils";
-import { baseText } from "../utils/base-utils";
-
-const parts = anatomy("travel-tag").parts(
-  "container",
-  "iconContainer",
-  "icon",
-  "textContainer",
-  "title",
-  "description",
-  "deviationIcon",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      padding: 0.5,
-      width: "fit-content",
-      ...getDeviationContainerStyle(props),
-      transitionDuration: "fast",
-      transitionProperty: "common",
-      _disabled: {
-        ...surface("disabled", props),
-      },
-      "button&, a&": {
-        boxShadow: "sm",
-        _hover: {
-          boxShadow: "md",
-        },
-        ...focusVisibleStyles(props),
-        _active: {
-          opacity: 0.5,
-          boxShadow: "none",
-        },
-      },
-    },
-    iconContainer: {
-      padding: 0.5,
-      "[aria-disabled=true] &": {
-        ...surface("disabled", props),
-      },
-    },
-    textContainer: {
-      color: "darkGrey",
-      paddingRight: 0.5,
-      whiteSpace: "nowrap",
-      "[aria-disabled=true] &": {
-        ...baseText("disabled", props),
-      },
-    },
-    title: {
-      fontWeight: "bold",
-    },
-    description: {
-      fontWeight: "normal",
-    },
-    deviationIcon: {
-      ...getDeviationIconStyle(props),
-    },
-  }),
-  variants: {
-    "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: (props) => ({
-      container: {
-        backgroundColor: mode("white", "transparent")(props),
-        _disabled: {
-          backgroundColor: "white",
-        },
-      },
-      iconContainer: {
-        border: "none",
-        position: "relative",
-        left: -1,
-        backgroundColor: mode("white", "transparent")(props),
-        "[aria-disabled=true] &": {
-          backgroundColor: "transparent",
-          color: "osloGrey",
-        },
-      },
-      textContainer: {
-        position: "absolute",
-        left: 2,
-        bottom: -0.5,
-        "[aria-disabled=true] &": {
-          color: "osloGrey",
-        },
-      },
-      title: {
-        fontSize: "mobile.xs",
-        fontWeight: "normal",
-        color: mode("black", "white")(props),
-      },
-      description: {
-        display: "none",
-      },
-    }),
-    custom: (props) => ({
-      container: {
-        backgroundColor: props.foregroundColor,
-      },
-    }),
-  },
-  sizes: {
-    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",
-      },
-    },
-  },
-  defaultProps: {
-    size: "md",
-  },
-});
-
-export default config;
-
-const getDeviationContainerStyle = (props: StyleFunctionProps) => {
-  switch (props.deviationLevel) {
-    case "critical":
-      return {
-        border: "1px solid",
-        borderColor: getDeviationBorderColor(props),
-      };
-    case "major":
-      return {
-        border: "1px solid",
-        borderColor: getDeviationBorderColor(props),
-      };
-    default:
-      return {};
-  }
-};
-
-const getDeviationBorderColor = (props: StyleFunctionProps) => {
-  switch (props.deviationLevel) {
-    case "critical":
-      return "brightRed";
-    case "major":
-      return "golden";
-    default:
-      return "transparent";
-  }
-};
-
-const getDeviationIconStyle = (props: StyleFunctionProps) => {
-  return {
-    position: "absolute",
-    top: "0",
-    right: "0",
-    transform: "translate(50%, -50%)",
-    zIndex: "docked",
-    color:
-      deviationIconColor[
-        props.deviationLevel as keyof typeof deviationIconColor
-      ] || "inherit",
-  };
-};
-
-const deviationIconColor = {
-  critical: "brightRed",
-  info: "ocean",
-} as const;

package/src/theme/foundations/borders.ts

@@ -1,11 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const borders = {
-  none: "0",
-  sm: `${tokens.size.stroke.sm} solid`,
-  "sm-dashed": `${tokens.size.stroke.sm} dashed`,
-  md: `${tokens.size.stroke.md} solid`,
-  "md-dashed": `${tokens.size.stroke.md} dashed`,
-  lg: `${tokens.size.stroke.lg} solid`,
-  "lg-dashed": `${tokens.size.stroke.lg} dashed`,
-};

package/src/theme/foundations/colors.ts

@@ -1,12 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export type ColorsType = typeof tokens.color.alias &
-  typeof tokens.color.palette &
-  typeof tokens.color.vyDigital & { linjetag: typeof tokens.color.linjetag };
-
-export const colors: ColorsType = {
-  ...tokens.color.alias,
-  ...tokens.color.palette,
-  ...tokens.color.vyDigital,
-  linjetag: tokens.color.linjetag,
-};

package/src/theme/foundations/config.ts

@@ -1,5 +0,0 @@
-export const config = {
-  cssVarPrefix: "spor",
-  initialColorMode: "light",
-  useSystemColorMode: false,
-};

package/src/theme/foundations/fontSizes.ts

@@ -1,29 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const fontSizes = {
-  "2xs": tokens.size.font.xs.mobile,
-  xs: tokens.size.font.sm.mobile,
-  sm: tokens.size.font.md.mobile,
-  md: tokens.size.font.lg.mobile,
-  lg: tokens.size.font.xl.mobile,
-  xl: tokens.size.font.xxl.mobile,
-  "2xl": tokens.size.font.xl.desktop,
-  "3xl": tokens.size.font.xxl.desktop,
-
-  mobile: {
-    xs: tokens.size.font.xs.mobile,
-    sm: tokens.size.font.sm.mobile,
-    md: tokens.size.font.md.mobile,
-    lg: tokens.size.font.lg.mobile,
-    xl: tokens.size.font.xl.mobile,
-    xxl: tokens.size.font.xxl.mobile,
-  },
-  desktop: {
-    xs: tokens.size.font.xs.desktop,
-    sm: tokens.size.font.sm.desktop,
-    md: tokens.size.font.md.desktop,
-    lg: tokens.size.font.lg.desktop,
-    xl: tokens.size.font.xl.desktop,
-    xxl: tokens.size.font.xxl.desktop,
-  },
-};

package/src/theme/foundations/fontWeights.ts

@@ -1,5 +0,0 @@
-export const fontWeights = {
-  light: 300,
-  medium: 400,
-  bold: 700,
-};

package/src/theme/foundations/fonts.ts

@@ -1,7 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const fonts = {
-  body: `${tokens.font.family.body}, arial, sans-serif`,
-  heading: `${tokens.font.family.heading}, arial, sans-serif`,
-  mono: `${tokens.font.family.monospace}, monospace`,
-};

package/src/theme/foundations/index.ts

@@ -1,15 +0,0 @@
-export * from "./borders";
-export * from "./breakpoints";
-export * from "./colors";
-export * from "./config";
-export * from "./fonts";
-export * from "./fontSizes";
-export * from "./fontWeights";
-export * from "./lineHeights";
-export * from "./radii";
-export * from "./shadows";
-export * from "./sizes";
-export * from "./spacing";
-export * from "./textStyles";
-export * from "./zIndices";
-export * from "./styles";