@vygruppen/spor-react 9.7.0 → 9.8.0

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

@@ -1,7 +1,5 @@
 import { defineStyleConfig } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
-import { baseBorder, baseText } from "../utils/base-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 
 const config = defineStyleConfig({
@@ -12,7 +10,6 @@ const config = defineStyleConfig({
     fontSize: "inherit",
     display: "block",
     borderRadius: "md",
-    // Except for white cards, all cards are light mode always
     color: "text.default.light",
     ...focusVisibleStyles(props),
     ...getColorSchemeBaseProps(props),
@@ -33,20 +30,14 @@ type CardThemeProps = {
     | "darkBlue"
     | "darkGreen"
     | "darkYellow";
-  theme: any;
-  colorMode: "light" | "dark";
 };
 
 const getColorSchemeBaseProps = (props: CardThemeProps) => {
   switch (props.colorScheme) {
     case "white":
       return {
-        ...baseBorder("default", props),
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
-        )(props),
-        color: "inherit",
+        backgroundColor: "white",
+        color: "darkGrey",
       };
     case "grey":
       return {
@@ -82,7 +73,6 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
     default:
       return {
         backgroundColor: colors[props.colorScheme]?.[100] ?? "default",
-        ...baseText("default", props),
       };
   }
 };

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

@@ -22,6 +22,7 @@ export function baseBackground(
       };
     case "selected":
       return brandBackground("default", props);
+
     case "disabled":
       return surface("disabled", props);
     case "hover":
@@ -32,7 +33,7 @@ export function baseBackground(
 
 type BorderState = Subset<
   State,
-  "hover" | "focus" | "disabled" | "selected" | "invalid" | "default"
+  "hover" | "focus" | "active" | "disabled" | "selected" | "invalid" | "default"
 >;
 
 export function baseBorder(state: BorderState, props: StyleFunctionProps) {
@@ -57,6 +58,12 @@ export function baseBorder(state: BorderState, props: StyleFunctionProps) {
         )(props),
       };
     }
+    case "active": {
+      return {
+        outline: "2px solid",
+        outlineColor: mode("base.outline.light", "base.outline.dark")(props),
+      };
+    }
     case "invalid": {
       return {
         outline: "2px solid",

package/src/card/PressableCard.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Box, BoxProps, useStyleConfig } from "@chakra-ui/react";
-
-type PressableCardProps = Omit<BoxProps, "as"> & {
-  variant: "floating" | "accent" | "base";
-  size?: "sm" | "lg";
-  as: "button" | "a" | "label";
-};
-
-/**
- * Renders a Pressable card.
- *
- * The most basic version looks like this:
- *
- * ```tsx
- * <PressableCard>
- *   Content
- * </PressableCard>
- * ```
- *
- * There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
- *
- * ```tsx
- * <PressableCard colorScheme="orange" size="lg">
- *   A smaller card
- * </PressableCard>
- * ```
- *
- * Pressable cards can also be rendered as button, link or label – like a li (list item) or an article.
- * You do this by specifying the `as` prop. If no `as` is specified, button is chosen as default:
- *
- *
- * ```tsx
- * <PressableCard colorScheme="green" as="section">
- *   This is now a <section /> element
- * </PressableCard>
- * ```
- */
-export const PressableCard = ({
-  children,
-  as = "button",
-  size = "sm",
-  variant = "base",
-  ...props
-}: PressableCardProps) => {
-  const styles = useStyleConfig("PressableCard", { variant, size });
-  return (
-    <Box as={as} __css={styles} {...props}>
-      {children}
-    </Box>
-  );
-};

package/src/card/StaticCard.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Box, useStyleConfig } from "@chakra-ui/react";
-/**
- * Renders a static card.
- *
- * The most basic version looks like this:
- *
- * ```tsx
- * <StaticCard colorScheme="white">
- *   Content
- * </StaticCard>
- * ```
- *
- * Static cards can also be rendered as whatever DOM element you want – like a li (list item) or an article. You do this by specifying the `as` prop:
- *
- * ```tsx
- * <StaticCard colorScheme="green" as="section">
- *   This is now a <section /> element
- * </StaticCard>
- * ```
- */
-export const StaticCard = ({ colorScheme, ...props }: any) => {
-  const styles = useStyleConfig("StaticCard", { colorScheme });
-  return <Box __css={styles} {...props} />;
-};