@vygruppen/spor-react 8.2.1 → 9.0.0

package/src/theme/utils/accent-utils.ts

@@ -0,0 +1,54 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { brandBackground } from "./brand-utils";
+import { State, Subset } from "./types";
+
+type AccentBackgroundState = Subset<
+  State,
+  "default" | "hover" | "active" | "selected"
+>;
+
+export function accentBackground(
+  state: AccentBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+      return brandBackground("default", props);
+    case "active":
+      return {
+        backgroundColor: mode(
+          "accent.surface.active.light",
+          "accent.surface.active.dark",
+        )(props),
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "accent.surface.hover.light",
+          "accent.surface.hover.dark",
+        )(props),
+      };
+    default:
+      return {
+        backgroundColor: mode(
+          "accent.surface.default.light",
+          "accent.surface.default.dark",
+        )(props),
+      };
+  }
+}
+
+type AccentTextState = Subset<State, "default" | "selected">;
+
+export function accentText(state: AccentTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "selected":
+      return {
+        color: mode("brand.text.light", "brand.text.dark")(props),
+      };
+    default:
+      return {
+        color: mode("accent.text.light", "accent.text.dark")(props),
+      };
+  }
+}

package/src/theme/utils/base-utils.ts

@@ -0,0 +1,94 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { brandBackground } from "./brand-utils";
+import { focusVisibleStyles } from "./focus-utils";
+import { surface } from "./surface-utils";
+import { State, Subset } from "./types";
+
+type BaseBackgroundState = Subset<
+  State,
+  "default" | "active" | "selected" | "hover" | "disabled"
+>;
+export function baseBackground(
+  state: BaseBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "active":
+      return {
+        backgroundColor: mode(
+          "base.surface.active.light",
+          "base.surface.active.dark",
+        )(props),
+      };
+    case "selected":
+      return brandBackground("default", props);
+    case "disabled":
+      return surface("disabled", props);
+    case "hover":
+    default:
+      return surface("default", props);
+  }
+}
+
+type BorderState = Subset<
+  State,
+  "hover" | "focus" | "disabled" | "selected" | "invalid" | "default"
+>;
+
+export function baseBorder(state: BorderState, props: StyleFunctionProps) {
+  switch (state) {
+    case "hover":
+      return {
+        outline: "2px solid",
+        outlineColor: mode(
+          "base.outline.hover.light",
+          "base.outline.hover.dark",
+        )(props),
+      };
+    case "focus": {
+      return focusVisibleStyles(props)._focusVisible;
+    }
+    case "disabled": {
+      return {
+        outline: "1px solid",
+        outlineColor: mode(
+          "outline.disabled.light",
+          "outline.disabled.dark",
+        )(props),
+      };
+    }
+    case "invalid": {
+      return {
+        outline: "2px solid",
+        outlineColor: mode("outline.error.light", "outline.error.dark")(props),
+      };
+    }
+    case "default":
+    default:
+      return {
+        outline: "1px solid",
+        outlineColor: mode(
+          "base.outline.default.light",
+          "base.outline.default.dark",
+        )(props),
+      };
+  }
+}
+
+type BaseTextState = Subset<State, "default" | "selected" | "disabled">;
+export function baseText(state: BaseTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "selected":
+      return {
+        color: mode("brand.text.light", "brand.text.dark")(props),
+      };
+    case "disabled":
+      return {
+        color: mode("text.disabled.light", "text.disabled.dark")(props),
+      };
+    default:
+      return {
+        color: mode("base.text.light", "base.text.dark")(props),
+      };
+  }
+}

package/src/theme/utils/bg-utils.ts

@@ -0,0 +1,19 @@
+import { mode } from "@chakra-ui/theme-tools";
+
+type Bg = "default" | "secondary" | "tertiary";
+export const bg = (bg: Bg, props: any) => {
+  switch (bg) {
+    case "default":
+      return {
+        backgroundColor: mode("bg.default.light", "bg.default.dark")(props),
+      };
+    case "secondary":
+      return {
+        backgroundColor: mode("bg.secondary.light", "bg.secondary.dark")(props),
+      };
+    case "tertiary":
+      return {
+        backgroundColor: mode("bg.tertiary.light", "bg.tertiary.dark")(props),
+      };
+  }
+};

package/src/theme/utils/brand-utils.ts

@@ -0,0 +1,42 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+
+type BrandBackgroundState = Subset<State, "default" | "hover" | "active">;
+
+export function brandBackground(
+  state: BrandBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "active":
+      return {
+        backgroundColor: mode(
+          "brand.surface.active.light",
+          "brand.surface.active.dark",
+        )(props),
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "brand.surface.hover.light",
+          "brand.surface.hover.dark",
+        )(props),
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "brand.surface.default.light",
+          "brand.surface.default.dark",
+        )(props),
+      };
+  }
+}
+
+type BrandTextState = Subset<State, "hover" | "active" | "default">;
+
+export function brandText(state: BrandTextState, props: StyleFunctionProps) {
+  return {
+    color: mode("brand.text.light", "brand.text.dark")(props),
+  };
+}

package/src/theme/utils/floating-utils.ts

@@ -0,0 +1,64 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { brandBackground } from "./brand-utils";
+import { State, Subset } from "./types";
+
+type FloatingBackgroundState = Subset<
+  State,
+  "default" | "hover" | "active" | "selected"
+>;
+
+export function floatingBackground(
+  state: FloatingBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "selected":
+      return brandBackground("default", props);
+    case "active":
+      return {
+        backgroundColor: mode(
+          "floating.surface.active.light",
+          "floating.surface.active.dark",
+        )(props),
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "floating.surface.hover.light",
+          "floating.surface.hover.dark",
+        )(props),
+      };
+    case "default":
+      return {
+        backgroundColor: mode(
+          "floating.surface.default.light",
+          "floating.surface.default.dark",
+        )(props),
+      };
+  }
+}
+
+type FloatingBorderState = Subset<State, "default" | "hover" | "active">;
+export function floatingBorder(
+  state: FloatingBorderState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "hover":
+      return {
+        outline: "1px solid",
+        outlineColor: mode(
+          "floating.outline.hover.light",
+          "floating.outline.hover.dark",
+        )(props),
+      };
+    default:
+      return {
+        outline: "1px solid",
+        outlineColor: mode(
+          "floating.outline.default.light",
+          "floating.outline.default.dark",
+        )(props),
+      };
+  }
+}

package/src/theme/utils/{focus-util.ts → focus-utils.ts}

@@ -3,7 +3,7 @@ import { mode } from "@chakra-ui/theme-tools";
 export const focusVisibleStyles = (props: any) => ({
   _focusVisible: {
     outlineWidth: "2px",
-    outlineColor: mode("greenHaze", "azure")(props),
+    outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
     outlineStyle: "solid",
     outlineOffset: "1px",
   },

package/src/theme/utils/ghost-utils.ts

@@ -0,0 +1,40 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+
+type GhostBackgroundState = Subset<
+  State,
+  "default" | "hover" | "active" | "selected"
+>;
+
+/** 👻👻👻👻👻👻👻👻👻👻👻👻👻👻 */
+export function ghostBackground(
+  state: GhostBackgroundState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "hover": {
+      return {
+        backgroundColor: mode(
+          "ghost.surface.hover.light",
+          "ghost.surface.hover.dark",
+        )(props),
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: mode(
+          "ghost.surface.active.light",
+          "ghost.surface.active.dark",
+        )(props),
+      };
+    case "selected": {
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+      };
+    }
+    case "default":
+      return {
+        backgroundColor: "transparent",
+      };
+  }
+}

package/src/theme/utils/surface-utils.ts

@@ -0,0 +1,35 @@
+import { mode } from "@chakra-ui/theme-tools";
+
+type Surface = "default" | "secondary" | "tertiary" | "disabled";
+export const surface = (surface: Surface, props: any) => {
+  switch (surface) {
+    case "default":
+      return {
+        backgroundColor: mode(
+          "surface.default.light",
+          "surface.default.dark",
+        )(props),
+      };
+    case "secondary":
+      return {
+        backgroundColor: mode(
+          "surface.secondary.light",
+          "surface.secondary.dark",
+        )(props),
+      };
+    case "tertiary":
+      return {
+        backgroundColor: mode(
+          "surface.tertiary.light",
+          "surface.tertiary.dark",
+        )(props),
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode(
+          "surface.disabled.light",
+          "surface.disabled.dark",
+        )(props),
+      };
+  }
+};

package/src/tooltip/Tooltip.tsx

@@ -1,5 +1,4 @@
 import {
-  DarkMode,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -50,24 +49,22 @@ export const Tooltip = ({
   ...props
 }: TooltipProps) => {
   return (
-    <DarkMode>
-      <Popover
-        onClose={onClose}
-        isOpen={isOpen}
-        defaultIsOpen={defaultIsOpen}
-        placement={placement}
-        size={size}
-        arrowSize={12}
-        arrowShadowColor="none"
-        {...props}
-      >
-        <PopoverTrigger>{children}</PopoverTrigger>
-        <PopoverContent>
-          <PopoverArrow />
-          {withCloseButton && <PopoverCloseButton />}
-          <PopoverBody>{content}</PopoverBody>
-        </PopoverContent>
-      </Popover>
-    </DarkMode>
+    <Popover
+      onClose={onClose}
+      isOpen={isOpen}
+      defaultIsOpen={defaultIsOpen}
+      placement={placement}
+      size={size}
+      arrowSize={12}
+      arrowShadowColor="none"
+      {...props}
+    >
+      <PopoverTrigger>{children}</PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        {withCloseButton && <PopoverCloseButton />}
+        <PopoverBody>{content}</PopoverBody>
+      </PopoverContent>
+    </Popover>
   );
 };

package/src/typography/Heading.tsx

@@ -1,4 +1,8 @@
-import { HeadingProps as ChakraHeadingProps, Text } from "@chakra-ui/react";
+import {
+  HeadingProps as ChakraHeadingProps,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import React from "react";
 import { slugify } from "..";
 import type { textStyles } from "../theme/foundations";
@@ -45,5 +49,6 @@ export const Heading = ({
     externalId ?? (autoId && typeof props.children === "string")
       ? slugify(props.children as string)
       : undefined;
-  return <Text as={as} textStyle={variant} id={id} {...props} />;
+  const color = useColorModeValue("text.primary.light", "text.primary.dark");
+  return <Text as={as} textStyle={variant} id={id} color={color} {...props} />;
 };

package/src/util/externals.tsx

@@ -1,6 +1,5 @@
 /** This file works as a proxy for all Chakra UI exports */
 export {
-  Collapse,
   DarkMode,
   LightMode,
   Portal,

package/src/theme/utils/background-utils.ts

@@ -1,179 +0,0 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { State, Subset } from "./types";
-import { colors } from "../foundations";
-
-type BaseBackgroundState = Subset<
-  State,
-  "default" | "active" | "selected" | "hover" | "disabled"
->;
-export function baseBackground(
-  state: BaseBackgroundState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "active":
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-      };
-    case "selected":
-      return {
-        backgroundColor: mode("pine", "coralGreen")(props),
-      };
-    case "disabled":
-      return {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-      };
-    case "hover":
-      return {
-        backgroundColor: "transparent",
-      };
-    default:
-      return {
-        backgroundColor: "transparent",
-      };
-  }
-}
-
-type GhostBackgroundState = Subset<
-  State,
-  "default" | "hover" | "focus" | "active" | "selected"
->;
-
-export function ghostBackground(
-  state: GhostBackgroundState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "hover": {
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
-      };
-    }
-    case "active":
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
-      };
-    case "focus":
-      return {
-        backgroundColor: "transparent",
-      };
-    case "selected": {
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
-      };
-    }
-    case "default":
-    default:
-      return {
-        backgroundColor: "transparent",
-      };
-  }
-}
-
-type FloatingBackgroundState = Subset<
-  State,
-  "default" | "hover" | "focus" | "active" | "selected"
->;
-
-export function floatingBackground(
-  state: FloatingBackgroundState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "selected":
-      return {
-        backgroundColor: mode("mint", "pine")(props),
-      };
-    case "active":
-      return {
-        backgroundColor: mode(
-          "mint",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`,
-        )(props),
-      };
-    case "hover":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`,
-        )(props),
-      };
-    case "focus":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`,
-        )(props),
-      };
-    case "default":
-    default:
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`,
-        )(props),
-      };
-  }
-}
-
-type AccentBackgroundState = Subset<
-  State,
-  "default" | "hover" | "focus" | "active" | "selected"
->;
-
-export function accentBackground(
-  state: AccentBackgroundState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "selected":
-      return {
-        backgroundColor: mode("primaryGreen", "coralGreen")(props),
-      };
-    case "active":
-      return {
-        backgroundColor: mode("mint", "darkTeal")(props),
-      };
-    case "hover":
-      return {
-        backgroundColor: mode("coralGreen", "greenHaze")(props),
-      };
-    case "focus":
-      return {
-        backgroundColor: mode("greenHaze", "azure")(props),
-      };
-    case "default":
-    default:
-      return {
-        backgroundColor: mode("seaMist", "pine")(props),
-      };
-  }
-}
-
-type BrandBackgroundState = Subset<
-  State,
-  "default" | "hover" | "focus" | "active" | "selected"
->;
-
-export function brandBackground(
-  state: BrandBackgroundState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "selected":
-    case "active":
-      return {
-        backgroundColor: mode("greenHaze", "seaMist")(props),
-      };
-    case "hover":
-      return {
-        backgroundColor: mode("darkTeal", "blueGreen")(props),
-      };
-    case "focus":
-    case "default":
-    default:
-      return {
-        backgroundColor: mode("pine", "coralGreen")(props),
-      };
-  }
-}