@vygruppen/spor-react 9.8.3 → 9.10.0

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

@@ -1,60 +1,99 @@
-import { defineStyleConfig } from "@chakra-ui/react";
+import {
+  createMultiStyleConfigHelpers,
+  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 { anatomy } from "@chakra-ui/theme-tools";
+import { outlineBorder } from "../utils/outline-utils";
 
-const config = defineStyleConfig({
+const parts = anatomy("radio-card").parts("container", "checked", "radioInput");
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
   baseStyle: (props: any) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "sm",
-    ...focusVisibleStyles(props),
-    _checked: {
-      outline: "1px solid",
-      outlineColor: "greenHaze",
-      ...floatingBackground("active", props),
-      _hover: {
-        ...floatingBackground("active", props),
+    container: {
+      appearance: "none",
+      border: "none",
+      overflow: "hidden",
+      fontSize: "inherit",
+      display: "block",
+      cursor: "pointer",
+      borderRadius: "sm",
+      ...focusVisibleStyles(props),
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      _disabled: {
+        pointerEvents: "none",
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props),
       },
     },
-    _disabled: {
-      pointerEvents: "none",
-      ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
-      ...baseText("disabled", props),
+    checked: {
+      outline: "2px solid",
+      ...outlineBorder("focus", props),
+      ...floatingBackground("active", props),
+    },
+    radioInput: {
+      appearance: "none",
+      position: "absolute",
+      opacity: 0,
+      zIndex: -1,
     },
   }),
   variants: {
     base: (props) => ({
-      ...baseBackground("default", props),
-      ...baseBorder("default", props),
-      _hover: {
-        ...baseBackground("hover", props),
-        ...baseBorder("hover", props),
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        _hover: {
+          ...baseBackground("hover", props),
+          ...baseBorder("hover", props),
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props),
+        },
       },
-      _active: {
-        ...baseBackground("active", props),
+      checked: {
+        _hover: {
+          ...baseBorder("hover", props),
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props),
+        },
       },
     }),
     floating: (props) => ({
-      ...floatingBackground("default", props),
-      boxShadow: "sm",
-      _hover: {
-        ...floatingBackground("hover", props),
-        ...floatingBorder("hover", props),
-        boxShadow: "md",
-      },
-      _active: {
-        ...floatingBackground("active", props),
-        ...floatingBorder("active", props),
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        boxShadow: "sm",
+        _hover: {
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          boxShadow: "md",
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props),
+        },
       },
-      _checked: {
+      checked: {
+        cursor: "normal",
+
         _hover: {
-          outline: "1px solid",
-          outlineColor: "silver",
+          ...floatingBorder("hover", props),
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props),
         },
       },
     }),

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

@@ -60,8 +60,11 @@ export function baseBorder(state: BorderState, props: StyleFunctionProps) {
     }
     case "active": {
       return {
-        outline: "2px solid",
-        outlineColor: mode("base.outline.light", "base.outline.dark")(props),
+        outline: "1px solid",
+        outlineColor: mode(
+          "base.outline.default.light",
+          "base.outline.default.dark",
+        )(props),
       };
     }
     case "invalid": {

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

@@ -25,14 +25,14 @@ export function floatingBackground(
       return {
         backgroundColor: mode(
           "floating.surface.hover.light",
-          "floating.surface.hover.dark",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
         )(props),
       };
     case "default":
       return {
         backgroundColor: mode(
-          "floating.surface.default.light",
-          "floating.surface.default.dark",
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
         )(props),
       };
   }

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

@@ -29,7 +29,10 @@ export function ghostBackground(
       };
     case "selected": {
       return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+        backgroundColor: mode(
+          "ghost.surface.selected.light",
+          "ghost.surface.selected.dark",
+        )(props),
       };
     }
     case "default":
@@ -38,3 +41,18 @@ export function ghostBackground(
       };
   }
 }
+
+type GhostTextState = Subset<State, "default" | "selected">;
+
+export function ghostText(state: GhostTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "selected":
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props),
+      };
+    default:
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props),
+      };
+  }
+}

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

@@ -0,0 +1,26 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+
+type OutlineBorderState = Subset<State, "default" | "error" | "focus">;
+export function outlineBorder(
+  state: OutlineBorderState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "error":
+      return {
+        outlineColor: mode("outline.error.light", "outline.error.dark")(props),
+      };
+    case "focus":
+      return {
+        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
+      };
+    default:
+      return {
+        outlineColor: mode(
+          "outline.default.light",
+          "outline.default.dark",
+        )(props),
+      };
+  }
+}

package/src/theme/utils/types.ts

@@ -5,7 +5,9 @@ export type State =
   | "focus"
   | "selected"
   | "invalid"
-  | "disabled";
+  | "disabled"
+  | "error"
+  | "focus";
 
 // Helper type to extract subset of union types
 export type Subset<T, U extends T> = T extends U ? T : never;