From 9e772059a903f0b63c685458b8ead4ae0fea15ab Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Sat, 26 Apr 2025 12:07:28 +0200 Subject: [PATCH] Introduce border color theming option for default `Card` New `--rui-Card__border-color` custom property has been introduced to define Card's default border color. The default value is border primary, so `Card`s are now bordered by default to be distinguishable on default `Paper`. --- src/components/Card/Card.module.scss | 2 +- src/components/Card/README.md | 21 +++++++++++---------- src/components/Card/_theme.scss | 1 + src/theme.scss | 1 + 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index cdfcf559f..2e2d4a79e 100644 --- a/src/components/Card/Card.module.scss +++ b/src/components/Card/Card.module.scss @@ -12,7 +12,7 @@ flex-direction: column; min-width: 0; // 1. color: var(--rui-local-color); - border: theme.$border-width solid var(--rui-local-border-color, transparent); + border: theme.$border-width solid var(--rui-local-border-color, theme.$border-color); border-radius: theme.$border-radius; background-color: var(--rui-local-background-color, theme.$background-color); } diff --git a/src/components/Card/README.md b/src/components/Card/README.md index b59653a09..80f94b25d 100644 --- a/src/components/Card/README.md +++ b/src/components/Card/README.md @@ -289,16 +289,17 @@ Separate your card actions with CardFooter. See ### Common Theming Options -| Custom Property | Description | -|------------------------------------------------------|--------------------------------------------------------------| -| `--rui-Card__padding` | Padding shared by card header, body and footer | -| `--rui-Card__border-width` | Border width | -| `--rui-Card__border-radius` | Corner radius | -| `--rui-Card__background-color` | Card background color | -| `--rui-Card--dense__padding` | Padding of dense card | -| `--rui-Card--raised__box-shadow` | Box shadow of raised card | -| `--rui-Card--disabled__background-color` | Card background color in disabled state | -| `--rui-Card--disabled__opacity` | Card opacity in disabled state | +| Custom Property | Description | +|------------------------------------------|------------------------------------------------| +| `--rui-Card__padding` | Padding shared by card header, body and footer | +| `--rui-Card__border-width` | Border width | +| `--rui-Card__border-color` | Border color | +| `--rui-Card__border-radius` | Corner radius | +| `--rui-Card__background-color` | Card background color | +| `--rui-Card--dense__padding` | Padding of dense card | +| `--rui-Card--raised__box-shadow` | Box shadow of raised card | +| `--rui-Card--disabled__background-color` | Card background color in disabled state | +| `--rui-Card--disabled__opacity` | Card opacity in disabled state | ### Theming Variants diff --git a/src/components/Card/_theme.scss b/src/components/Card/_theme.scss index 191365c4f..16f0b70c0 100644 --- a/src/components/Card/_theme.scss +++ b/src/components/Card/_theme.scss @@ -1,5 +1,6 @@ $padding: var(--rui-Card__padding); $border-width: var(--rui-Card__border-width); +$border-color: var(--rui-Card__border-color); $border-radius: var(--rui-Card__border-radius); $background-color: var(--rui-Card__background-color); diff --git a/src/theme.scss b/src/theme.scss index cb18b538c..30c5ba9d4 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -825,6 +825,7 @@ --rui-Card__padding: var(--rui-dimension-space-4); --rui-Card__border-width: var(--rui-dimension-border-width-1); + --rui-Card__border-color: var(--rui-color-border-primary); --rui-Card__border-radius: var(--rui-dimension-radius-2); --rui-Card__background-color: var(--rui-color-background-layer-1); --rui-Card--dense__padding: var(--rui-dimension-space-2);