@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/theme/components/list.ts

@@ -1,23 +0,0 @@
-import { listAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(parts.keys);
-
-const baseStyle = definePartsStyle({
-  container: {
-    fontSize: ["mobile.sm", "desktop.sm"],
-  },
-  item: {
-    fontFamily: "body",
-  },
-  icon: {
-    marginEnd: "2",
-    display: "inline",
-    verticalAlign: "text-bottom",
-  },
-});
-
-export default defineMultiStyleConfig({
-  baseStyle,
-});

package/src/theme/components/listbox.ts

@@ -1,77 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { baseBorder } from "../utils/base-utils";
-import { ghostBackground, ghostText } from "../utils/ghost-utils";
-import { surface } from "../utils/surface-utils";
-import { outlineBorder } from "../utils/outline-utils";
-import { floatingBorder } from "../utils/floating-utils";
-
-const parts = anatomy("ListBox").parts(
-  "container",
-  "item",
-  "label",
-  "description",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      ...surface("default", props),
-      boxShadow: "sm",
-      overflowY: "auto",
-      maxHeight: "50vh",
-      width: "100%",
-      listStyle: "none",
-      borderBottomRadius: "sm",
-    },
-    item: {
-      paddingX: 2,
-      paddingY: 1,
-      marginY: 1,
-      marginX: 1,
-      borderRadius: "sm",
-      ...ghostText("default", props),
-      cursor: "pointer",
-      outline: "none",
-      _active: {
-        ...ghostBackground("active", props),
-      },
-      _focusVisible: {
-        ...outlineBorder("focus", props),
-      },
-      _hover: {
-        ...ghostBackground("hover", props),
-      },
-      _selected: {
-        ...ghostBackground("active", props),
-      },
-    },
-    label: {},
-    description: {
-      fontSize: ["mobile.xs", "desktop.xs"],
-      ...ghostText("default", props),
-      "[aria-selected='true'] &": {
-        ...ghostText("selected", props),
-      },
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      container: {
-        ...baseBorder("default", props),
-      },
-    }),
-    floating: (props) => ({
-      container: {
-        ...floatingBorder("default", props),
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});
-
-export default config;

package/src/theme/components/media-controller-button.ts

@@ -1,97 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
-import { baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground } from "../utils/ghost-utils";
-import { surface } from "../utils/surface-utils";
-
-const parts = anatomy("media-controller-button").parts("container", "icon");
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      fontSize: 30,
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      borderRadius: "round",
-      appearance: "none",
-      background: "transparent",
-      border: "none",
-      cursor: "pointer",
-      display: "flex",
-      padding: 1,
-      alignSelf: "center",
-      // The SVG icon color is set to the brand background color, due to how SVGs work
-      color: brandBackground("default", props).backgroundColor,
-      ...focusVisibleStyles(props),
-    },
-    icon: {
-      flex: "0 0 auto",
-      display: "block",
-      width: "1em",
-      height: "1em",
-    },
-  }),
-  variants: {
-    play: (props) => ({
-      container: {
-        padding: 0,
-        ...brandText("default", props),
-        ...brandBackground("default", props),
-        _hover: {
-          ...brandText("default", props),
-          ...brandBackground("hover", props),
-        },
-        _active: {
-          ...brandText("default", props),
-          ...brandBackground("active", props),
-        },
-
-        _disabled: {
-          pointerEvents: "none",
-          color: mode("icon.disabled.light", "icon.disabled.dark")(props),
-          ...surface("disabled", props),
-        },
-      },
-    }),
-    jumpSkip: (props) => ({
-      container: {
-        _hover: {
-          ...ghostBackground("hover", props),
-        },
-        _active: {
-          ...ghostBackground("active", props),
-        },
-        _disabled: {
-          pointerEvents: "none",
-          ...surface("disabled", props),
-          ...baseText("disabled", props),
-        },
-      },
-      icon: {
-        width: "0.71em",
-        height: "0.71em",
-      },
-    }),
-  },
-  sizes: {
-    sm: (props) => ({
-      container: {
-        fontSize: props.variant === "play" ? 24 : 42,
-        width: props.variant === "play" ? "2.625rem" : undefined,
-        height: props.variant === "play" ? "2.625rem" : undefined,
-      },
-    }),
-    lg: (props) => ({
-      container: {
-        fontSize: props.variant === "play" ? 38 : 60,
-        width: props.variant === "play" ? "3.75rem" : undefined,
-        height: props.variant === "play" ? "3.75rem" : undefined,
-      },
-    }),
-  },
-});
-
-export default config;

package/src/theme/components/modal.ts

@@ -1,96 +0,0 @@
-import { modalAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { type PartsStyleObject } from "@chakra-ui/theme-tools";
-import { baseText } from "../utils/base-utils";
-import { bg } from "../utils/bg-utils";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    overlay: {
-      backgroundColor: "blackAlpha.600",
-      zIndex: "modal",
-    },
-    dialogContainer: {
-      display: "flex",
-      zIndex: "modal",
-      justifyContent: "center",
-      alignItems: props.isCentered ? "center" : "flex-start",
-      overflow: props.scrollBehavior === "inside" ? "hidden" : "auto",
-    },
-    dialog: {
-      borderRadius: "md",
-      ...bg("default", props),
-      ...baseText("default", props),
-      marginY: "3.75rem",
-      zIndex: "modal",
-      maxHeight:
-        props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined,
-      boxShadow: "md",
-    },
-    header: {
-      paddingX: 5,
-      paddingTop: 6,
-      paddingBottom: 2,
-      fontWeight: "bold",
-      fontFamily: "body",
-    },
-    closeButton: {
-      position: "absolute",
-      color: "inherit",
-      top: 3,
-      insetEnd: 3,
-    },
-    body: {
-      paddingX: 5,
-      paddingBottom: 6,
-      flex: 1,
-      overflow: props.scrollBehavior === "inside" ? "auto" : undefined,
-    },
-    footer: {
-      paddingX: 3,
-      paddingBottom: 3,
-    },
-  }),
-  sizes: {
-    xs: getSize("xs"),
-    sm: getSize("sm"),
-    md: getSize("md"),
-    lg: getSize("lg"),
-    xl: getSize("xl"),
-    "2xl": getSize("2xl"),
-    "3xl": getSize("3xl"),
-    "4xl": getSize("4xl"),
-    "5xl": getSize("5xl"),
-    "6xl": getSize("6xl"),
-    full: getSize("full"),
-  },
-  defaultProps: {
-    size: "md",
-  },
-});
-
-export default config;
-
-/**
- * Since the `maxWidth` prop references theme.sizes internally,
- * we can leverage that to size our modals.
- */
-function getSize(value: string): PartsStyleObject<typeof parts> {
-  if (value === "full") {
-    return {
-      dialog: {
-        maxWidth: "100vw",
-        minHeight: "100vh",
-        "@supports(min-height: -webkit-fill-available)": {
-          minHeight: "-webkit-fill-available",
-        },
-        marginY: 0,
-      },
-    };
-  }
-  return {
-    dialog: { maxWidth: value },
-  };
-}

package/src/theme/components/numeric-stepper.ts

@@ -1,65 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-
-const parts = anatomy("NumericStepper").parts(
-  "container",
-  "button",
-  "text",
-  "input",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-    },
-    input: {
-      fontSize: "sm",
-      fontWeight: "bold",
-      marginX: 1,
-      paddingX: 1,
-      borderRadius: "xs",
-      textAlign: "center",
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      ...baseText("default", props),
-      ...baseBackground("default", props),
-
-      _disabled: {
-        pointerEvents: "none",
-        opacity: 0.5,
-      },
-
-      _hover: {
-        ...baseBorder("default", props),
-      },
-
-      _active: {
-        ...baseBackground("active", props),
-      },
-
-      ...focusVisibleStyles(props),
-    },
-    text: {
-      fontSize: "sm",
-      fontWeight: "bold",
-      marginX: 1,
-      paddingX: 1,
-      textAlign: "center",
-      width: "4ch",
-      ...baseText("default", props),
-    },
-    button: {
-      minWidth: "24px",
-      minHeight: "24px",
-    },
-  }),
-});
-
-export default config;

package/src/theme/components/pagination.ts

@@ -1,74 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy } from "@chakra-ui/theme-tools";
-import { ghostBackground } from "../utils/ghost-utils";
-import { baseText } from "../utils/base-utils";
-
-const parts = anatomy("Pagination").parts(
-  "listItem",
-  "link",
-  "activeButton",
-  "disabled",
-  "icon",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props: any) => ({
-    activeButton: {
-      fontWeight: "bold",
-      ...commonStyles,
-      ...ghostBackground("active", props),
-      _hover: {
-        ...ghostBackground("hover", props),
-        borderRadius: 50,
-      },
-      _active: {
-        borderRadius: 50,
-        ...ghostBackground("active", props),
-      },
-    },
-    disabled: {
-      ...commonStyles,
-      cursor: "not-allowed",
-      pointerEvents: "none",
-      boxShadow: "none",
-      ...baseText("disabled", props),
-    },
-    listItem: {
-      display: "flex",
-    },
-    link: {
-      ...commonStyles,
-      ...ghostBackground("default", props),
-      ...baseText("default", props),
-      _hover: {
-        ...ghostBackground("hover", props),
-        borderRadius: 50,
-        _disabled: {
-          ...baseText("disabled", props),
-        },
-      },
-      _active: {
-        borderRadius: 50,
-        ...ghostBackground("active", props),
-      },
-    },
-    icon: {
-      bottom: "-0.03em !important",
-    },
-  }),
-});
-
-const commonStyles = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 5,
-  height: 5,
-  backgroundImage: "none",
-  borderRadius: 50,
-  fontSize: "xs",
-};
-
-export default config;

package/src/theme/components/popover.ts

@@ -1,68 +0,0 @@
-import { popoverAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { cssVar, mode } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-utils";
-
-const $popperBg = cssVar("popper-bg");
-const $arrowBg = cssVar("popper-arrow-bg");
-const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    popper: {
-      zIndex: "popover",
-    },
-    content: {
-      [$popperBg.variable]: mode(
-        "colors.surface.tertiary.light",
-        "colors.surface.tertiary.dark",
-      )(props),
-      backgroundColor: $popperBg.reference,
-      [$arrowBg.variable]: $popperBg.reference,
-      [$arrowShadowColor.variable]: "colors.blackAlpha.300",
-      color: "white", // TODO: Should this be a semantic token? Where does it fit in?
-      borderRadius: "sm",
-      padding: 1.5,
-      zIndex: "inherit",
-      maxWidth: "20em",
-    },
-    arrow: {
-      backgroundColor: "transparent",
-      boxShadow: "none",
-      clipPath:
-        "path('M 0 0 Q 2.4 6 0 12 Q 6 9.6 12 12 Q 9.6 6 12 0 Q 6 2.4 0 0 z')",
-    },
-    closeButton: {
-      position: "absolute",
-      color: "white",
-      ...focusVisibleStyles(props),
-      _hover: {
-        backgroundColor: "whiteAlpha.100",
-      },
-      _active: {
-        backgroundColor: "whiteAlpha.200",
-      },
-      borderRadius: "sm",
-      top: 2,
-      right: 1,
-    },
-  }),
-  sizes: {
-    sm: {
-      content: {
-        paddingX: 1.5,
-        paddingY: 1,
-      },
-    },
-    lg: {
-      content: {
-        paddingX: 3,
-        paddingY: 2,
-      },
-    },
-  },
-});
-
-export default config;

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

@@ -1,72 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { accentBackground, accentText } from "../utils/accent-utils";
-
-const config = defineStyleConfig({
-  baseStyle: (props) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "md",
-    cursor: "pointer",
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    "button&, a&, label&, &.is-clickable": {
-      ...focusVisibleStyles(props),
-    },
-    _disabled: {
-      ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
-      ...baseText("disabled", props),
-      outline: "none",
-      pointerEvents: "none",
-    },
-  }),
-  variants: {
-    base: (props) => ({
-      cursor: "pointer",
-      ...baseBorder("default", props),
-      _hover: {
-        ...baseBorder("hover", props),
-      },
-      _active: {
-        ...baseBackground("active", props),
-        ...baseBorder("active", props),
-      },
-    }),
-    accent: (props) => ({
-      ...accentText("default", props),
-      ...accentBackground("default", props),
-      boxShadow: "sm",
-      _hover: {
-        ...accentBackground("hover", props),
-        boxShadow: "md",
-      },
-      _active: {
-        ...accentBackground("active", props),
-        boxShadow: "none",
-      },
-    }),
-    floating: (props) => ({
-      ...floatingBackground("default", props),
-      ...floatingBorder("default", props),
-      boxShadow: "sm",
-      _hover: {
-        ...floatingBackground("hover", props),
-        ...floatingBorder("hover", props),
-        boxShadow: "md",
-      },
-      _active: {
-        ...floatingBorder("default", props),
-        ...floatingBackground("active", props),
-        boxShadow: "none",
-      },
-    }),
-  },
-});
-
-export default config;

package/src/theme/components/progress-bar.ts

@@ -1,47 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
-
-const parts = anatomy("progressBar").parts(
-  "container",
-  "background",
-  "progress",
-  "description",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      minWidth: "100px",
-    },
-    background: {
-      display: "flex",
-      backgroundColor: props.isActive
-        ? mode(
-            "brand.surface.default.dark",
-            "brand.surface.default.light",
-          )(props)
-        : undefined,
-      borderRadius: "sm",
-      justifyContent: "flex-start",
-      marginX: "auto",
-    },
-    progress: {
-      backgroundColor: props.isActive
-        ? mode("brand.surface.active.light", "brand.surface.active.dark")(props)
-        : mode("icon.disabled.light", "icon.disabled.dark")(props),
-      borderRadius: "sm",
-      maxWidth: "100%",
-      transition: "width .2s ease-out",
-    },
-    description: {
-      textAlign: "center",
-      marginTop: 2,
-      marginX: "auto",
-      fontWeight: "bold",
-    },
-  }),
-});
-
-export default config;

package/src/theme/components/progress-indicator.ts

@@ -1,44 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
-
-const parts = anatomy("progress-indicator").parts(
-  "root",
-  "container",
-  "progressDot",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    root: {
-      width: "100%",
-    },
-    container: {
-      display: "flex",
-      alignItems: "center",
-      gap: 1,
-      justifyContent: ["space-between", "center"],
-    },
-    progressDot: {
-      height: 1,
-      width: 1,
-      "&[aria-current='step']": {
-        circle: {
-          fill: mode(
-            "brand.surface.default.light",
-            "brand.surface.default.dark",
-          )(props),
-        },
-      },
-      circle: {
-        fill: mode("icon.disabled.light", "icon.disabled.dark")(props),
-      },
-    },
-  }),
-  defaultProps: {
-    variant: "base",
-  },
-});
-
-export default config;