@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/theme/components/card-select.ts

@@ -1,117 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground, ghostText } from "../utils/ghost-utils";
-import { fontWeights } from "../foundations";
-
-const parts = anatomy("card-select").parts("trigger", "card");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    trigger: {
-      appearance: "none",
-      display: "flex",
-      alignItems: "center",
-      transitionProperty: "outline",
-      transitionDuration: "fast",
-      ...baseText("default", props),
-      ...focusVisibleStyles(props),
-    },
-    card: {
-      borderRadius: "sm",
-      boxShadow: "xs",
-      padding: 2,
-      ...baseText("default", props),
-      backgroundColor: mode(
-        "white",
-        `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
-      )(props),
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      trigger: {
-        ...baseBorder("default", props),
-        _hover: {
-          ...baseBorder("hover", props),
-        },
-        _active: {
-          ...baseBackground("active", props),
-          ...baseBorder("default", props),
-        },
-        _expanded: {
-          ...baseBackground("active", props),
-        },
-      },
-    }),
-    ghost: (props) => ({
-      trigger: {
-        _hover: {
-          ...ghostBackground("hover", props),
-        },
-        _active: {
-          ...ghostBackground("active", props),
-        },
-        _expanded: {
-          ...ghostBackground("active", props),
-          fontWeight: fontWeights.bold,
-        },
-      },
-    }),
-    floating: (props) => ({
-      trigger: {
-        boxShadow: "sm",
-        ...floatingBackground("default", props),
-        ...floatingBorder("default", props),
-        transition: "all .1s ease-out",
-        _hover: {
-          ...floatingBackground("hover", props),
-          ...floatingBorder("hover", props),
-        },
-        _active: {
-          ...floatingBackground("active", props),
-          ...floatingBorder("active", props),
-        },
-        _expanded: {
-          ...floatingBackground("active", props),
-        },
-      },
-      card: {},
-    }),
-  },
-  sizes: {
-    sm: {
-      trigger: {
-        paddingX: 1.5,
-        paddingY: 1,
-        minHeight: "1.25rem",
-        fontSize: "xs",
-        borderRadius: "lg",
-      },
-    },
-    md: {
-      trigger: {
-        paddingX: 2,
-        paddingY: 1.5,
-        minHeight: "2.625rem",
-        fontSize: "xs",
-        borderRadius: "lg",
-      },
-    },
-    lg: {
-      trigger: {
-        paddingX: 3,
-        paddingY: 2,
-        minHeight: "3.375rem",
-        fontSize: "sm",
-        borderRadius: "lg",
-      },
-    },
-  },
-});
-
-export default config;

package/src/theme/components/checkbox.ts

@@ -1,88 +0,0 @@
-import { checkboxAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { baseBackground, 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) => ({
-    container: {
-      _hover: {
-        "input:enabled:not([aria-invalid='true']) + .chakra-checkbox__control":
-          {
-            ...baseBackground("hover", props),
-            borderColor: brandBackground("hover", props).backgroundColor,
-          },
-        "input:enabled[aria-invalid='true'] + .chakra-checkbox__control": {
-          backgroundColor: mode("white", "inherit")(props),
-          borderColor: mode("outline.error.light", "outline.error.dark"),
-        },
-        "input:enabled:checked:not([aria-invalid='true']) + .chakra-checkbox__control":
-          {
-            ...brandBackground("hover", props),
-            borderColor: brandBackground("hover", props).backgroundColor,
-          },
-        "input:enabled:checked[aria-invalid='true'] + .chakra-checkbox__control":
-          {
-            borderColor: mode("outline.error.light", "outline.error.dark"),
-            backgroundColor: mode("outline.error.light", "outline.error.dark"),
-          },
-      },
-    },
-    icon: {
-      fontSize: "1em",
-      transitionProperty: "transform",
-      transitionDuration: "normal",
-      strokeWidth: "1.5px !important", // Required to make the default icon look correct
-    },
-    control: {
-      width: 4,
-      height: 4,
-      transitionProperty: "background, border-color",
-      transitionDuration: "normal",
-      border: "2px solid",
-      borderColor: mode(
-        "base.outline.default.light",
-        "base.outline.default.dark",
-      )(props),
-      borderRadius: "xs",
-      ...baseBackground("default", props),
-      ...focusVisibleStyles(props),
-
-      _checked: {
-        ...brandText("default", props),
-        ...brandBackground("default", props),
-        borderColor: brandBackground("default", props).backgroundColor,
-
-        _disabled: {
-          ...baseBackground("disabled", props),
-          ...baseText("disabled", props),
-          borderColor: "currentColor",
-        },
-
-        _invalid: {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed",
-        },
-      },
-
-      _disabled: {
-        ...baseBackground("disabled", props),
-        borderColor: baseText("disabled", props).color,
-      },
-      _invalid: {
-        ...baseBackground("default", props),
-        borderColor: "brightRed",
-      },
-    },
-    label: {
-      userSelect: "none",
-      _disabled: { opacity: 0.4 },
-    },
-  }),
-});
-
-export default config;

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

@@ -1,161 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy } from "@chakra-ui/theme-tools";
-import { accentBackground, accentText } from "../utils/accent-utils";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground } from "../utils/brand-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-
-const parts = anatomy("choice-chip").parts("container", "icon", "label");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      display: "inline-flex",
-      alignItems: "center",
-      fontSize: "xs",
-      cursor: "pointer",
-      transitionProperty: "all",
-      borderRadius: "xl",
-      transitionDuration: "fast",
-      _checked: {
-        outlineColor: "transparent",
-        ...accentText("selected", props),
-        ...accentBackground("selected", props),
-        _hover: {
-          ...brandBackground("hover", props),
-          ...baseText("selected", props),
-          outlineColor: "transparent",
-        },
-        _active: {
-          ...baseText("selected", props),
-          ...brandBackground("active", props),
-        },
-      },
-      _disabled: {
-        pointerEvents: "none",
-        boxShadow: "none",
-        ...baseText("disabled", props),
-        ...baseBackground("disabled", props),
-        _hover: {
-          ...baseBackground("disabled", props),
-          boxShadow: "none",
-          ...baseText("disabled", props),
-        },
-        _checked: {
-          cursor: "not-allowed",
-          boxShadow: "none",
-          ...baseText("disabled", props),
-          ...baseBackground("disabled", props),
-          _hover: {
-            ...baseBackground("disabled", props),
-            boxShadow: "none",
-            ...baseText("disabled", props),
-          },
-        },
-      },
-      "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
-    },
-    icon: {
-      marginRight: props.hasLabel ? 1 : 0,
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      container: {
-        ...baseBorder("default", props),
-        ...baseText("default", props),
-        _hover: {
-          ...baseText("default", props),
-          ...baseBorder("hover", props),
-        },
-        _active: {
-          ...baseBackground("active", props),
-          ...baseBorder("default", props),
-        },
-      },
-    }),
-    accent: (props) => ({
-      container: {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-          ...accentText("default", props),
-        },
-        _active: {
-          ...accentText("default", props),
-          ...accentBackground("active", props),
-        },
-      },
-      _active: {
-        ...accentText("default", props),
-        ...accentBackground("active", props),
-      },
-    }),
-    floating: (props) => ({
-      container: {
-        ...floatingBackground("default", props),
-        ...baseText("default", props),
-        ...floatingBorder("default", props),
-        boxShadow: "sm",
-        _hover: {
-          ...floatingBackground("hover", props),
-          ...floatingBorder("hover", props),
-          ...baseText("default", props),
-          boxShadow: "md",
-        },
-        _active: {
-          ...floatingBackground("active", props),
-          ...floatingBorder("active", props),
-          ...baseText("default", props),
-        },
-      },
-    }),
-  },
-  sizes: {
-    xs: {
-      container: {
-        _checked: {
-          borderRadius: "0.563rem",
-        },
-        height: 5,
-        paddingX: 1.5,
-      },
-    },
-    sm: {
-      container: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 6,
-        paddingX: 2,
-      },
-    },
-    md: {
-      container: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 7,
-        paddingX: 2,
-      },
-    },
-    lg: {
-      container: {
-        _checked: {
-          borderRadius: "md",
-        },
-        height: 8,
-        paddingX: 3,
-      },
-    },
-  },
-  defaultProps: {
-    size: "sm",
-  },
-});
-
-export default config;

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

@@ -1,48 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import { cssVar, mode } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground } from "../utils/ghost-utils";
-
-const $size = cssVar("close-button-size");
-
-const config = defineStyleConfig({
-  baseStyle: (props) => ({
-    w: [$size.reference],
-    h: [$size.reference],
-    transitionProperty: "common",
-    transitionDuration: "normal",
-    borderRadius: "md",
-    backgroundColor: "transparent",
-    color: mode("darkGrey", "white")(props),
-    fontWeight: "normal",
-    ...focusVisibleStyles(props),
-    _hover: {
-      ...ghostBackground("hover", props),
-      _disabled: {
-        color: "dimGrey",
-      },
-    },
-    _active: {
-      ...ghostBackground("active", props),
-    },
-  }),
-  sizes: {
-    lg: {
-      [$size.variable]: "40px",
-      fontSize: "xs",
-    },
-    md: {
-      [$size.variable]: "32px",
-      fontSize: "0.75rem",
-    },
-    sm: {
-      [$size.variable]: "24px",
-      fontSize: "0.625rem",
-    },
-  },
-  defaultProps: {
-    size: "md",
-  },
-});
-
-export default config;

package/src/theme/components/code.ts

@@ -1,17 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import Badge from "./badge";
-
-const { variants, defaultProps } = Badge;
-
-const config = defineStyleConfig({
-  baseStyle: {
-    fontFamily: "monospace",
-    fontSize: ["mobile.xs", "desktop.xs"],
-    borderRadius: "xs",
-    paddingX: 1,
-  },
-  variants,
-  defaultProps,
-});
-
-export default config;

package/src/theme/components/datepicker.ts

@@ -1,198 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, cssVar, mode } from "@chakra-ui/theme-tools";
-import { zIndices } from "../foundations";
-import { accentText } from "../utils/accent-utils";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { floatingBorder, floatingBackground } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground } from "../utils/ghost-utils";
-import { surface } from "../utils/surface-utils";
-
-const parts = anatomy("datepicker").parts(
-  "wrapper",
-  "calendarTriggerButton",
-  "arrow",
-  "calendarPopover",
-  "calendar",
-  "weekdays",
-  "weekend",
-  "dateCell",
-  "inputLabel",
-  "dateTimeSegment",
-  "cell",
-);
-
-const $arrowBackground = cssVar("popper-arrow-bg");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    wrapper: {
-      transitionProperty: "box-shadow",
-      transitionDuration: "fast",
-      borderRadius: "sm",
-      display: "flex",
-      flex: 1,
-      paddingY: 0.5,
-      alignItems: "center",
-      _hover: {
-        zIndex: zIndices.docked,
-      },
-      _disabled: {
-        pointerEvents: "none",
-        ...baseBackground("disabled", props),
-        ...baseBorder("disabled", props),
-        ...baseText("disabled", props),
-      },
-      _focusWithin: {
-        ...focusVisibleStyles(props)._focusVisible,
-      },
-    },
-    inputLabel: {
-      fontSize: "mobile.xs",
-      margin: 0,
-      cursor: "text",
-    },
-    dateTimeSegment: {
-      _focus: {
-        ...brandBackground("hover", props),
-        color: "white",
-      },
-    },
-    calendarTriggerButton: {
-      width: 8,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      transitionProperty: "box-shadow, background-color",
-      transitionSpeed: "fast",
-      position: "relative",
-      right: "9px",
-
-      ...focusVisibleStyles(props),
-      _hover: {
-        ...ghostBackground("hover", props),
-      },
-      _active: {
-        ...ghostBackground("active", props),
-      },
-      _invalid: {
-        ...baseBorder("invalid", props),
-      },
-    },
-    arrow: {
-      [$arrowBackground.variable]: surface("default", props).backgroundColor,
-    },
-    calendarPopover: {
-      ...floatingBackground("default", props),
-      ...baseText("default", props),
-      ...floatingBorder("default", props),
-      boxShadow: "md",
-    },
-    weekdays: {
-      ...baseText("default", props),
-    },
-    weekend: {
-      ...accentText("default", props),
-    },
-    cell: {
-      '&[aria-selected="true"] + [aria-selected="true"] > button': {
-        "&::before": {
-          content: '""',
-          display: "block",
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-          left: "-50%",
-          top: 0,
-          bottom: 0,
-          zIndex: -1,
-          ...brandBackground("default", props),
-        },
-      },
-    },
-    dateCell: {
-      ...ghostBackground("default", props),
-      ...baseText("default", props),
-      borderRadius: "50%",
-      position: "relative",
-      transition: ".1s ease-in-out",
-      userSelect: "none",
-      width: [6, 7],
-      height: [6, 7],
-      transitionProperty: "common",
-      transitionSpeed: "fast",
-
-      _hover: {
-        ...ghostBackground("hover", props),
-      },
-      ...focusVisibleStyles(props),
-      _active: {
-        ...ghostBackground("active", props),
-      },
-      _disabled: {
-        ...baseBackground("disabled", props),
-        ...baseText("disabled", props),
-        pointerEvents: "none",
-      },
-      _selected: {
-        ...brandBackground("default", props),
-        ...brandText("default", props),
-        _active: {
-          ...brandBackground("active", props),
-          ...brandText("active", props),
-        },
-      },
-      "&[data-today]": {
-        ...baseBorder("default", props),
-      },
-      "&[data-unavailable]": {
-        pointerEvents: "none",
-        ...baseBackground("disabled", props),
-        ...baseText("disabled", props),
-      },
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      wrapper: {
-        ...baseBorder("default", props),
-        ...baseBackground("default", props),
-
-        _hover: {
-          ...baseBorder("hover", props),
-        },
-        _invalid: {
-          ...baseBorder("invalid", props),
-        },
-      },
-    }),
-    floating: (props) => ({
-      wrapper: {
-        ...floatingBackground("default", props),
-        ...floatingBorder("default", props),
-        boxShadow: "sm",
-
-        _hover: {
-          ...floatingBorder("hover", props),
-        },
-        _invalid: {
-          ...baseBorder("invalid", props),
-        },
-      },
-    }),
-    ghost: (props) => ({
-      wrapper: {
-        _hover: {
-          ...baseBorder("hover", props),
-        },
-        _invalid: {
-          ...baseBorder("invalid", props),
-        },
-      },
-    }),
-  },
-});
-
-export default config;

package/src/theme/components/divider.ts

@@ -1,50 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
-
-const borderColor = mode("blackAlpha.300", "whiteAlpha.300");
-
-function getSizes(size: string) {
-  const sizes: Record<string, { height: string; dash: string; gap: string }> = {
-    sm: {
-      height: "1px",
-      dash: "1px",
-      gap: "4px",
-    },
-    md: {
-      height: "2px",
-      dash: "3px",
-      gap: "6px",
-    },
-    lg: {
-      height: "3px",
-      dash: "3px",
-      gap: "9px",
-    },
-  };
-  return sizes[size] || sizes["md"];
-}
-
-export default defineStyleConfig({
-  baseStyle: (props) => ({
-    borderColor: borderColor(props),
-  }),
-  variants: {
-    solid: {
-      borderStyle: "solid",
-    },
-    dashed: (props) => {
-      const { height, dash, gap } = getSizes(props.size);
-      return {
-        height: height,
-        backgroundImage: `linear-gradient(90deg, ${borderColor(props)}, ${borderColor(props)} ${dash}, transparent ${dash}, transparent ${gap})`,
-        backgroundPosition: "left bottom",
-        backgroundRepeat: "repeat-x",
-        backgroundSize: `${gap} ${height}`,
-      };
-    },
-  },
-  defaultProps: {
-    variant: "solid",
-    size: "md",
-  },
-});