Make card outlines work as intended (#822)

Background Card outlines were inset, meaning they would disappear behind any images. That looked a bit wonky. Solution Set all outlines as outset instead of inset through the isInset: false flag.
nsbno · Sep 4, 2023 · f5fb6ae · f5fb6ae
1 parent 5b33fdc
commit f5fb6ae
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/.changeset/new-penguins-wait.md b/.changeset/new-penguins-wait.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+Card: Improve the way card outlines are generated
diff --git a/packages/spor-react/src/theme/components/card.ts b/packages/spor-react/src/theme/components/card.ts
@@ -24,6 +24,7 @@ const config = defineStyleConfig({
           boxShadow: getBoxShadowString({
             borderColor: "greenHaze",
             borderWidth: 2,
+            isInset: false,
           }),
           outline: "none",
           _active: getColorSchemeActiveProps(props),
@@ -37,6 +38,7 @@ const config = defineStyleConfig({
         backgroundColor: "platinum",
         boxShadow: getBoxShadowString({
           borderColor: "silver",
+          isInset: false,
         }),
         color: "osloGrey",
         pointerEvents: "none",
@@ -91,13 +93,15 @@ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: "silver",
+          isInset: false,
         }),
       };
     case "grey":
       return {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: "steel",
+          isInset: false,
         }),
       };
     default:
@@ -106,6 +110,7 @@ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors[colorScheme]?.[200] ?? "silver",
+          isInset: false,
         }),
       };
   }
@@ -119,13 +124,15 @@ function getColorSchemeHoverProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.steel,
+          isInset: false,
         }),
       };
     case "grey":
       return {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.osloGrey,
+          isInset: false,
         }),
       };
     default:
@@ -134,6 +141,7 @@ function getColorSchemeHoverProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors[colorScheme]?.[400] ?? colors.silver,
+          isInset: false,
         }),
       };
   }
@@ -148,6 +156,7 @@ function getColorSchemeActiveProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.silver,
+          isInset: false,
         }),
       };
     case "grey":
@@ -156,6 +165,7 @@ function getColorSchemeActiveProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.steel,
+          isInset: false,
         }),
       };
     default:
@@ -164,6 +174,7 @@ function getColorSchemeActiveProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors[colorScheme]?.[100] ?? colors.silver,
+          isInset: false,
         }),
       };
   }