@vygruppen/spor-react 9.8.3 → 9.9.0

package/src/layout/PressableCard.tsx

@@ -9,7 +9,7 @@ import {
 
 type PressableCardProps = BoxProps & {
   /** Defaults to "base"  */
-  variant: "floating" | "accent" | "base";
+  variant?: "floating" | "accent" | "base";
 };
 
 /**
@@ -43,7 +43,7 @@ type PressableCardProps = BoxProps & {
  */
 
 export const PressableCard = forwardRef<PressableCardProps, As>(
-  ({ children, variant = "base", ...props }, ref) => {
+  ({ children, variant = "floating", ...props }, ref) => {
     const styles = useStyleConfig("PressableCard", {
       variant,
     });

package/src/layout/StaticCard.tsx

@@ -70,7 +70,6 @@ export const StaticCard = forwardRef<StaticCardProps, As>(
     return (
       <Box __css={styles} {...props} ref={ref}>
         {children}
-        <Card />
       </Box>
     );
   },

package/src/theme/components/alert.ts

@@ -22,6 +22,7 @@ const config = helpers.defineMultiStyleConfig({
       position: "absolute",
       top: 1,
       right: 1,
+      color: "darkGrey",
     },
   },
   variants: {

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

@@ -19,18 +19,28 @@ const config = helpers.defineMultiStyleConfig({
     container: {},
     label: {
       position: "relative",
+      fontSize: ["mobile.xs", "desktop.sm"],
       ...(props.isLabelSrOnly ? srOnly : {}),
     },
+    innerButton: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "start",
+    },
     button: {
+      display: "flex",
       appearance: "none",
+      width: "100%",
+      height: "54px",
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,
       paddingX: 3,
-      display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
+      h: 8,
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props),
@@ -48,6 +58,7 @@ const config = helpers.defineMultiStyleConfig({
         ...baseBorder("invalid", props),
       },
     },
+    placeholder: {},
     arrowIcon: {},
   }),
   variants: {

package/src/theme/components/listbox.ts

@@ -2,7 +2,7 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { baseBorder } from "../utils/base-utils";
-import { ghostBackground } from "../utils/ghost-utils";
+import { ghostBackground, ghostText } from "../utils/ghost-utils";
 import { surface } from "../utils/surface-utils";
 
 const parts = anatomy("ListBox").parts(
@@ -32,7 +32,7 @@ const config = helpers.defineMultiStyleConfig({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: mode("darkGrey", "white")(props),
+      ...ghostText("default", props),
       cursor: "pointer",
       outline: "none",
       _active: {
@@ -45,15 +45,15 @@ const config = helpers.defineMultiStyleConfig({
         ...ghostBackground("selected", props),
       },
       _selected: {
-        ...ghostBackground("selected", props),
+        ...ghostBackground("active", props),
       },
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: mode("dimGrey", "silver")(props),
+      ...ghostText("default", props),
       "[aria-selected='true'] &": {
-        color: mode("lightGrey", "platinum")(props),
+        ...ghostText("selected", props),
       },
     },
   }),

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

@@ -13,9 +13,14 @@ const config = defineStyleConfig({
     display: "block",
     borderRadius: "md",
     cursor: "pointer",
-    ...focusVisibleStyles(props),
+    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",

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),
+      };
+  }
+}