@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/theme/components/accordion.ts

@@ -1,102 +0,0 @@
-import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground } from "../utils/ghost-utils";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      borderRadius: "sm",
-    },
-    button: {
-      transitionProperty:
-        "background-color, color, border-radius, box-shadow, opacity",
-      transitionDuration: "fast",
-      borderRadius: "sm",
-      display: "flex",
-      justifyContent: "space-between",
-      ...baseText("default", props),
-      textAlign: "left",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
-      fontFamily: "body",
-      fontWeight: "bold",
-      outlineOffset: "-2px",
-      paddingX: [2, null, 3],
-      paddingY: [1, null, 1.5],
-      minHeight: [6, null, 7],
-      ...focusVisibleStyles(props),
-      _disabled: {
-        pointerEvents: "none",
-        opacity: 0.4,
-      },
-    },
-    panel: {
-      paddingY: 2,
-      paddingX: [2, null, 3],
-      borderBottomRadius: "sm",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
-    },
-    icon: {
-      fontSize: "1.25em",
-    },
-  }),
-  variants: {
-    ghost: (props) => ({
-      button: {
-        _hover: {
-          ...ghostBackground("hover", props),
-        },
-        _active: {
-          ...ghostBackground("active", props),
-        },
-      },
-    }),
-    base: (props) => ({
-      container: {
-        ...baseBorder("default", props),
-      },
-      button: {
-        _expanded: {
-          borderBottomRadius: "none",
-        },
-        _hover: {
-          ...baseBorder("hover", props),
-          outlineOffset: 0,
-        },
-        _active: {
-          ...baseBackground("active", props),
-          ...baseBorder("default", props),
-        },
-      },
-    }),
-    floating: (props) => ({
-      container: {
-        ...floatingBackground("default", props),
-        ...floatingBorder("default", props),
-        boxShadow: "sm",
-      },
-      button: {
-        _expanded: {
-          borderBottomRadius: "none",
-        },
-        _hover: {
-          ...floatingBackground("hover", props),
-          ...floatingBorder("hover", props),
-          outlineOffset: 1,
-        },
-        _active: {
-          ...ghostBackground("active", props),
-          ...floatingBorder("default", props),
-        },
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});
-
-export default config;

package/src/theme/components/alert-expandable.ts

@@ -1,125 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-
-const parts = anatomy("alertExpandable").parts("container", "accordion");
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
-    container: {
-      paddingX: 3,
-      paddingY: 2,
-      fontSize: "inherit",
-      transitionProperty: "outline, border-radius",
-      transitionDuration: "fast",
-      _expanded: {
-        borderBottomRadius: "none",
-      },
-      _hover: {
-        outline: "2px solid",
-      },
-    },
-  },
-  variants: {
-    info: {
-      accordion: {
-        outlineColor: "cloudy",
-      },
-      container: {
-        _hover: {
-          backgroundColor: "cloudy",
-          outlineColor: "sky",
-        },
-        _active: {
-          backgroundColor: "icyBlue",
-        },
-        _focus: {
-          outlineColor: "greenHaze",
-        },
-      },
-    },
-    success: {
-      accordion: {
-        outlineColor: "coralGreen",
-      },
-      container: {
-        _hover: {
-          backgroundColor: "coralGreen",
-          outlineColor: "blueGreen",
-        },
-        _active: {
-          backgroundColor: "mint",
-        },
-        _focus: {
-          outlineColor: "greenHaze",
-        },
-      },
-    },
-    warning: {
-      accordion: {
-        outlineColor: "primrose",
-      },
-      container: {
-        _hover: {
-          backgroundColor: "primrose",
-          outlineColor: "banana",
-        },
-        _focus: {
-          outlineColor: "greenHaze",
-        },
-        _active: {
-          backgroundColor: "cornSilk",
-        },
-      },
-    },
-    "alt-transport": {
-      accordion: {
-        outlineColor: "burntYellow",
-      },
-      container: {
-        _hover: {
-          backgroundColor: "burntYellow",
-          outlineColor: "golden",
-        },
-        _focus: {
-          outlineColor: "greenHaze",
-        },
-        _active: {
-          backgroundColor: "sunshine",
-        },
-      },
-    },
-    error: {
-      accordion: {
-        outlineColor: "salmon",
-      },
-      container: {
-        _hover: {
-          backgroundColor: "salmon",
-          outlineColor: "apricot",
-        },
-        _active: {
-          backgroundColor: "pink",
-        },
-        _focus: {
-          outlineColor: "greenHaze",
-        },
-      },
-    },
-    service: {
-      container: {
-        _hover: {
-          outlineColor: "blueGreen",
-        },
-        _active: {
-          backgroundColor: "pine",
-        },
-      },
-    },
-  },
-  defaultProps: {
-    variant: "info",
-  },
-});
-
-export default config;

package/src/theme/components/alert-service.ts

@@ -1,98 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-
-const parts = anatomy("alertService").parts(
-  "container",
-  "outerBox",
-  "notificationText",
-  "serviceMessageContent",
-);
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
-    container: {
-      paddingX: 0,
-      paddingY: 2,
-      fontSize: "inherit",
-      transitionProperty: "outline, border-radius",
-      transitionDuration: "fast",
-      borderTopRadius: "none",
-      borderBottomRadius: "md",
-      _hover: {
-        outline: "2px solid",
-      },
-    },
-    outerBox: {
-      outline: "1px solid",
-      borderBottomRadius: "md",
-      borderTopRadius: "none",
-      width: "100%",
-    },
-    notificationText: {
-      fontWeight: "400",
-      fontSize: "1rem",
-      pr: "0.375rem",
-    },
-    serviceMessageContent: {
-      paddingX: "0.75rem",
-      paddingTop: "0.375rem",
-      paddingBottom: "0.9375rem",
-    },
-  },
-  variants: {
-    "global-deviation": {
-      container: {
-        _hover: {
-          backgroundColor: "teal.600",
-          outlineColor: "teal.600",
-        },
-        _focus: {
-          outlineColor: "green.500",
-        },
-        _active: {
-          backgroundColor: "teal.400",
-          outlineColor: "pine",
-        },
-        color: "white",
-      },
-      outerBox: {
-        outlineColor: "blueGreen",
-        backgroundColor: "darkTeal",
-      },
-      notificationText: {
-        color: "white",
-      },
-      serviceMessageContent: {
-        color: "white",
-      },
-    },
-    service: {
-      container: {
-        _hover: {
-          backgroundColor: "teal.600",
-          outlineColor: "teal.600",
-        },
-        _focus: {
-          outlineColor: "green.500",
-        },
-        _active: {
-          backgroundColor: "teal.400",
-          outlineColor: "pine",
-        },
-        color: "white",
-      },
-      outerBox: {
-        outlineColor: "blueGreen",
-        backgroundColor: "darkTeal",
-      },
-      notificationText: {
-        color: "white",
-      },
-      serviceMessageContent: {
-        color: "white",
-      },
-    },
-  },
-});
-
-export default config;

package/src/theme/components/alert.ts

@@ -1,71 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-
-const parts = anatomy("alert").parts("container", "icon", "closeButton");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
-    container: {
-      borderRadius: "sm",
-      color: "darkGrey",
-      paddingX: 3,
-      paddingY: 2,
-      display: "flex",
-      position: "relative",
-      textStyle: "sm",
-    },
-    icon: {
-      marginRight: 1,
-    },
-    closeButton: {
-      position: "absolute",
-      top: 1,
-      right: 1,
-      color: "darkGrey",
-    },
-  },
-  variants: {
-    success: {
-      container: {
-        backgroundColor: "seaMist",
-      },
-    },
-    info: {
-      container: {
-        backgroundColor: "lightBlue",
-      },
-    },
-    warning: {
-      container: {
-        backgroundColor: "blonde",
-      },
-    },
-    error: {
-      container: {
-        backgroundColor: "lightRed",
-      },
-    },
-    "alt-transport": {
-      container: {
-        backgroundColor: "banana",
-      },
-    },
-    "global-deviation": {
-      container: {
-        backgroundColor: "blonde",
-      },
-    },
-    service: {
-      container: {
-        backgroundColor: "darkTeal",
-        color: "white",
-      },
-    },
-  },
-  defaultProps: {
-    variant: "info",
-  },
-});
-
-export default config;

package/src/theme/components/badge.ts

@@ -1,109 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-
-const config = defineStyleConfig({
-  baseStyle: ({ colorScheme }) => ({
-    borderStyle: "solid",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: ["mobile.xs", "desktop.xs"],
-    borderRadius: "xl",
-    fontWeight: "bold",
-    paddingLeft: [2, 3],
-    paddingRight: [2, 3],
-    minHeight: [4, 5],
-    ...getColorScheme(colorScheme as ColorScheme),
-  }),
-  variants: {
-    solid: {
-      borderWidth: 0,
-    },
-    outline: {
-      borderWidth: 1,
-    },
-  },
-  defaultProps: {
-    variant: "solid",
-    colorScheme: "grey",
-  },
-});
-
-export default config;
-
-function getColorScheme(colorScheme: ColorScheme) {
-  let styles = colorCombinations[colorScheme];
-  if (!styles && process.env.NODE_ENV === "development") {
-    console.warn(`Invalid color scheme ${colorScheme} provided.`);
-    styles = colorCombinations.grey;
-  }
-  return styles;
-}
-
-type ColorScheme =
-  | "yellow"
-  | "light-yellow"
-  | "red"
-  | "light-green"
-  | "dark-green"
-  | "orange"
-  | "light-blue"
-  | "dark-blue"
-  | "grey"
-  | "white";
-type ColorSpec = {
-  backgroundColor: string;
-  color: string;
-  borderColor?: string;
-};
-const colorCombinations: Record<ColorScheme, ColorSpec> = {
-  yellow: {
-    backgroundColor: "banana",
-    borderColor: "darkGrey",
-    color: "darkGrey",
-  },
-  "light-yellow": {
-    backgroundColor: "blonde",
-    borderColor: "golden",
-    color: "darkGrey",
-  },
-  red: {
-    backgroundColor: "lightRed",
-    borderColor: "brightRed",
-    color: "darkGrey",
-  },
-  "light-green": {
-    backgroundColor: "seaMist",
-    borderColor: "darkTeal",
-    color: "darkTeal",
-  },
-  "dark-green": {
-    backgroundColor: "celadon",
-    borderColor: "blueGreen",
-    color: "white",
-  },
-  orange: {
-    backgroundColor: "champagne",
-    borderColor: "pumpkin",
-    color: "darkGrey",
-  },
-  "light-blue": {
-    backgroundColor: "lightBlue",
-    borderColor: "ocean",
-    color: "darkBlue",
-  },
-  "dark-blue": {
-    backgroundColor: "darkBlue",
-    borderColor: "sky",
-    color: "white",
-  },
-  grey: {
-    backgroundColor: "platinum",
-    borderColor: "darkGrey",
-    color: "darkGrey",
-  },
-  white: {
-    backgroundColor: "white",
-    borderColor: "silver",
-    color: "darkGrey",
-  },
-};

package/src/theme/components/breadcrumb.ts

@@ -1,60 +0,0 @@
-import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { baseBackground, baseBorder } from "../utils/base-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground } from "../utils/ghost-utils";
-
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(parts.keys);
-
-export default defineMultiStyleConfig({
-  baseStyle: definePartsStyle((props) => ({
-    link: {
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      transitionTimingFunction: "ease-out",
-      color: "inherit",
-      textDecoration: "none",
-      textStyle: "xs",
-      paddingX: 0.5,
-      borderRadius: "xs",
-      "&:not([aria-current=page])": {
-        cursor: "pointer",
-        ...focusVisibleStyles(props),
-      },
-    },
-    list: {
-      flexWrap: "wrap",
-      alignItems: "flex-start",
-    },
-  })),
-  variants: {
-    base: (props) => ({
-      link: {
-        "&:not([aria-current=page])": {
-          _hover: {
-            ...baseBorder("default", props),
-          },
-          _active: {
-            ...baseBackground("active", props),
-          },
-        },
-      },
-    }),
-    ghost: (props) => ({
-      link: {
-        "&:not([aria-current=page])": {
-          _hover: {
-            ...ghostBackground("hover", props),
-          },
-          _active: {
-            ...ghostBackground("active", props),
-          },
-        },
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});

package/src/theme/components/button.ts

@@ -1,125 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground } from "../utils/ghost-utils";
-import { surface } from "../utils/surface-utils";
-import { accentBackground, accentText } from "../utils/accent-utils";
-
-const config = defineStyleConfig({
-  baseStyle: (props) => ({
-    border: 0,
-    borderRadius: "xl",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transitionProperty: "common",
-    transitionDuration: "normal",
-    textWrap: "wrap",
-    paddingX: 3,
-    paddingY: 1,
-    ...focusVisibleStyles(props),
-    _disabled: {
-      cursor: "not-allowed",
-      pointerEvents: "none",
-      boxShadow: "none",
-      ...surface("disabled", props),
-      ...baseText("disabled", props),
-    },
-  }),
-  variants: {
-    primary: (props) => ({
-      ...brandBackground("default", props),
-      ...brandText("default", props),
-      _hover: {
-        ...brandBackground("hover", props),
-      },
-      _active: {
-        ...brandBackground("active", props),
-      },
-    }),
-    secondary: (props) => ({
-      ...accentBackground("default", props),
-      ...accentText("default", props),
-      _hover: {
-        ...accentBackground("hover", props),
-      },
-      _active: {
-        ...accentBackground("active", props),
-      },
-    }),
-    tertiary: (props) => ({
-      ...baseBackground("default", props),
-      ...baseText("default", props),
-      ...baseBorder("default", props),
-      _hover: {
-        ...baseBorder("hover", props),
-      },
-      _active: {
-        ...baseBorder("default", props),
-        ...baseBackground("active", props),
-      },
-    }),
-    ghost: (props) => ({
-      ...ghostBackground("default", props),
-      ...baseText("default", props),
-      _hover: {
-        ...ghostBackground("hover", props),
-        _disabled: {
-          ...baseText("disabled", props),
-        },
-      },
-      _active: {
-        ...ghostBackground("active", props),
-      },
-    }),
-    floating: (props) => ({
-      ...floatingBackground("default", props),
-      ...floatingBorder("default", props),
-      boxShadow: "sm",
-      _hover: {
-        ...floatingBackground("hover", props),
-        ...floatingBorder("hover", props),
-        boxShadow: "md",
-      },
-      _active: {
-        ...floatingBackground("active", props),
-        boxShadow: "sm",
-      },
-    }),
-  },
-  sizes: {
-    lg: {
-      minHeight: 8,
-      minWidth: 8,
-      fontSize: "sm",
-      fontWeight: "bold",
-    },
-    md: {
-      minHeight: 7,
-      minWidth: 7,
-      fontSize: "sm",
-      fontWeight: "bold",
-    },
-    sm: {
-      minHeight: 6,
-      minWidth: 6,
-      fontSize: "xs",
-      fontWeight: "normal",
-    },
-    xs: {
-      minHeight: 5,
-      minWidth: 5,
-      paddingY: 0.5,
-      fontSize: "xs",
-      fontWeight: "normal",
-    },
-  },
-  defaultProps: {
-    variant: "primary",
-    size: "md",
-  },
-});
-
-export default config;