Skip to content

Commit 205cdd4

Browse files
committed
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`.
1 parent 78dcb0a commit 205cdd4

File tree

4 files changed

+14
-11
lines changed

4 files changed

+14
-11
lines changed

src/components/Card/Card.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
flex-direction: column;
1313
min-width: 0; // 1.
1414
color: var(--rui-local-color);
15-
border: theme.$border-width solid var(--rui-local-border-color, transparent);
15+
border: theme.$border-width solid var(--rui-local-border-color, theme.$border-color);
1616
border-radius: theme.$border-radius;
1717
background-color: var(--rui-local-background-color, theme.$background-color);
1818
}

src/components/Card/README.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -289,16 +289,17 @@ Separate your card actions with CardFooter. See
289289

290290
### Common Theming Options
291291

292-
| Custom Property | Description |
293-
|------------------------------------------------------|--------------------------------------------------------------|
294-
| `--rui-Card__padding` | Padding shared by card header, body and footer |
295-
| `--rui-Card__border-width` | Border width |
296-
| `--rui-Card__border-radius` | Corner radius |
297-
| `--rui-Card__background-color` | Card background color |
298-
| `--rui-Card--dense__padding` | Padding of dense card |
299-
| `--rui-Card--raised__box-shadow` | Box shadow of raised card |
300-
| `--rui-Card--disabled__background-color` | Card background color in disabled state |
301-
| `--rui-Card--disabled__opacity` | Card opacity in disabled state |
292+
| Custom Property | Description |
293+
|------------------------------------------|------------------------------------------------|
294+
| `--rui-Card__padding` | Padding shared by card header, body and footer |
295+
| `--rui-Card__border-width` | Border width |
296+
| `--rui-Card__border-color` | Border color |
297+
| `--rui-Card__border-radius` | Corner radius |
298+
| `--rui-Card__background-color` | Card background color |
299+
| `--rui-Card--dense__padding` | Padding of dense card |
300+
| `--rui-Card--raised__box-shadow` | Box shadow of raised card |
301+
| `--rui-Card--disabled__background-color` | Card background color in disabled state |
302+
| `--rui-Card--disabled__opacity` | Card opacity in disabled state |
302303

303304
### Theming Variants
304305

src/components/Card/_theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
$padding: var(--rui-Card__padding);
22
$border-width: var(--rui-Card__border-width);
3+
$border-color: var(--rui-Card__border-color);
34
$border-radius: var(--rui-Card__border-radius);
45
$background-color: var(--rui-Card__background-color);
56

src/theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -825,6 +825,7 @@
825825

826826
--rui-Card__padding: var(--rui-dimension-space-4);
827827
--rui-Card__border-width: var(--rui-dimension-border-width-1);
828+
--rui-Card__border-color: var(--rui-color-border-primary);
828829
--rui-Card__border-radius: var(--rui-dimension-radius-2);
829830
--rui-Card__background-color: var(--rui-color-background-layer-1);
830831
--rui-Card--dense__padding: var(--rui-dimension-space-2);

0 commit comments

Comments
 (0)