From c3a9e7a20e11848ae425c8debd5c3064eb411ea4 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Sat, 19 Oct 2024 22:21:18 +0200 Subject: [PATCH] refactor(css,react): rewrite existing data-color components to use generic color vars --- packages/css/accordion.css | 42 ++------- packages/css/alert.css | 14 ++- packages/css/avatar.css | 30 +------ packages/css/badge.css | 29 +------ packages/css/button.css | 85 ++++--------------- packages/css/card.css | 47 +++------- packages/css/link.css | 19 +---- packages/css/spinner.css | 2 +- packages/css/tag.css | 41 +++------ .../src/components/Card/Card.stories.tsx | 2 +- packages/react/src/components/Card/Card.tsx | 10 ++- 11 files changed, 67 insertions(+), 254 deletions(-) diff --git a/packages/css/accordion.css b/packages/css/accordion.css index cb0cb3a665..c79eeedb71 100644 --- a/packages/css/accordion.css +++ b/packages/css/accordion.css @@ -1,13 +1,13 @@ .ds-accordion-group { - --dsc-accordion-background: var(--ds-color-neutral-background-default); + --dsc-accordion-background: var(--ds-color-background-default); --dsc-accordion-border-radius: var(--ds-border-radius-md); - --dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle); + --dsc-accordion-border: 1px solid var(--ds-color-border-subtle); --dsc-accordion-chevron-gap: var(--ds-spacing-2); --dsc-accordion-chevron-size: var(--ds-spacing-6); --dsc-accordion-chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E"); - --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-default); - --dsc-accordion-heading-background--open: var(--ds-color-neutral-background-subtle); - --dsc-accordion-heading-background: var(--ds-color-neutral-background-default); + --dsc-accordion-heading-background--hover: var(--ds-color-surface-default); + --dsc-accordion-heading-background--open: var(--ds-color-background-subtle); + --dsc-accordion-heading-background: var(--ds-color-background-default); --dsc-accordion-padding: var(--ds-spacing-2) var(--ds-spacing-4); --dsc-accordion-size: var(--ds-sizing-14); @@ -26,38 +26,6 @@ border-bottom-right-radius: var(--dsc-accordion-border-radius); } } - - &[data-color='subtle'] { - --dsc-accordion-background: var(--ds-color-neutral-background-subtle); - --dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle); - --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-hover); - --dsc-accordion-heading-background--open: var(--ds-color-neutral-surface-default); - --dsc-accordion-heading-background: var(--ds-color-neutral-background-subtle); - } - - &[data-color='brand1'] { - --dsc-accordion-background: var(--ds-color-brand1-background-subtle); - --dsc-accordion-border: 1px solid var(--ds-color-brand1-border-subtle); - --dsc-accordion-heading-background--hover: var(--ds-color-brand1-surface-hover); - --dsc-accordion-heading-background--open: var(--ds-color-brand1-surface-default); - --dsc-accordion-heading-background: var(--ds-color-brand1-surface-default); - } - - &[data-color='brand2'] { - --dsc-accordion-background: var(--ds-color-brand2-background-subtle); - --dsc-accordion-border: 1px solid var(--ds-color-brand2-border-subtle); - --dsc-accordion-heading-background--hover: var(--ds-color-brand2-surface-hover); - --dsc-accordion-heading-background--open: var(--ds-color-brand2-surface-default); - --dsc-accordion-heading-background: var(--ds-color-brand2-surface-default); - } - - &[data-color='brand3'] { - --dsc-accordion-background: var(--ds-color-brand3-background-subtle); - --dsc-accordion-border: 1px solid var(--ds-color-brand3-border-subtle); - --dsc-accordion-heading-background--hover: var(--ds-color-brand3-surface-hover); - --dsc-accordion-heading-background--open: var(--ds-color-brand3-surface-default); - --dsc-accordion-heading-background: var(--ds-color-brand3-surface-default); - } } .ds-accordion__item { diff --git a/packages/css/alert.css b/packages/css/alert.css index fe28d6aaae..643b1f0d9d 100644 --- a/packages/css/alert.css +++ b/packages/css/alert.css @@ -33,24 +33,20 @@ /** * Colors */ + &[data-color] { + --dsc-alert-background: var(--ds-color-surface-default); + --dsc-alert-border-color: var(--ds-color-border-default); + --dsc-alert-icon-color: var(--ds-color-text-subtle); + } &[data-color='warning'] { - --dsc-alert-border-color: var(--ds-color-warning-border-default); - --dsc-alert-icon-color: var(--ds-color-warning-text-subtle); - --dsc-alert-background: var(--ds-color-warning-surface-default); --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E"); } &[data-color='success'] { - --dsc-alert-background: var(--ds-color-success-surface-default); - --dsc-alert-border-color: var(--ds-color-success-border-default); - --dsc-alert-icon-color: var(--ds-color-success-text-subtle); --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E"); } &[data-color='danger'] { - --dsc-alert-background: var(--ds-color-danger-surface-default); - --dsc-alert-border-color: var(--ds-color-danger-border-default); - --dsc-alert-icon-color: var(--ds-color-danger-text-subtle); --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E"); } } diff --git a/packages/css/avatar.css b/packages/css/avatar.css index 05ce7ec1bb..4221ca516a 100644 --- a/packages/css/avatar.css +++ b/packages/css/avatar.css @@ -1,6 +1,6 @@ .ds-avatar { - --dsc-avatar-background: var(--ds-color-accent-base-default); - --dsc-avatar-color: var(--ds-color-accent-contrast-default); + --dsc-avatar-background: var(--ds-color-base-default); + --dsc-avatar-color: var(--ds-color-contrast-default); --dsc-avatar-size: var(--ds-sizing-12); --dsc-avatar-padding: var(--ds-spacing-2); --dsc-avatar-border-radius: var(--ds-border-radius-full); @@ -54,32 +54,6 @@ --dsc-avatar-border-radius: var(--ds-border-radius-sm); } - &[data-color='accent'] { - --dsc-avatar-background: var(--ds-color-accent-base-default); - --dsc-avatar-color: var(--ds-color-accent-contrast-default); - } - - &[data-color='neutral'] { - --dsc-avatar-background: var(--ds-color-neutral-base-default); - --dsc-avatar-color: var(--ds-color-neutral-contrast-default); - } - - &[data-color='brand1'] { - --dsc-avatar-background: var(--ds-color-brand1-base-default); - --dsc-avatar-color: var(--ds-color-brand1-contrast-default); - } - - &[data-color='brand2'] { - --dsc-avatar-background: var(--ds-color-brand2-base-default); - --dsc-avatar-color: var(--ds-color-brand2-contrast-default); - } - - &[data-color='brand3'] { - --dsc-avatar-background: var(--ds-color-brand3-base-default); - --dsc-avatar-color: var(--ds-color-brand3-contrast-default); - } - - /* TODO: Sizes */ &[data-size='xs'] { font-size: var(--ds-body-xs-font-size); } diff --git a/packages/css/badge.css b/packages/css/badge.css index 704c304062..05371bdb22 100644 --- a/packages/css/badge.css +++ b/packages/css/badge.css @@ -1,6 +1,6 @@ .ds-badge { - --dsc-badge-background: var(--ds-color-accent-base-default); - --dsc-badge-color: var(--ds-color-accent-contrast-default); + --dsc-badge-background: var(--ds-color-base-default); + --dsc-badge-color: var(--ds-color-contrast-default); --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2)); --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2)); @@ -26,31 +26,6 @@ font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */ } - &[data-color='info'] { - --dsc-badge-background: var(--ds-color-info-base-default); - --dsc-badge-color: var(--ds-color-info-contrast-default); - } - - &[data-color='success'] { - --dsc-badge-background: var(--ds-color-success-base-default); - --dsc-badge-color: var(--ds-color-success-contrast-default); - } - - &[data-color='warning'] { - --dsc-badge-background: var(--ds-color-warning-base-default); - --dsc-badge-color: var(--ds-color-warning-contrast-default); - } - - &[data-color='danger'] { - --dsc-badge-background: var(--ds-color-danger-base-default); - --dsc-badge-color: var(--ds-color-danger-contrast-default); - } - - &[data-color='neutral'] { - --dsc-badge-background: var(--ds-color-neutral-surface-default); - --dsc-badge-color: var(--ds-color-neutral-text-default); - } - /* If placement is present, we are floating */ &[data-placement]::before { position: absolute; diff --git a/packages/css/button.css b/packages/css/button.css index 7b01cc64b9..3c662e3396 100644 --- a/packages/css/button.css +++ b/packages/css/button.css @@ -1,8 +1,8 @@ .ds-button { - --dsc-button-background--active: var(--ds-color-accent-base-active); - --dsc-button-background--hover: var(--ds-color-accent-base-hover); - --dsc-button-background: var(--ds-color-accent-base-default); - --dsc-button-color: var(--ds-color-accent-contrast-default); + --dsc-button-background--active: var(--ds-color-base-active); + --dsc-button-background--hover: var(--ds-color-base-hover); + --dsc-button-background: var(--ds-color-base-default); + --dsc-button-color: var(--ds-color-contrast-default); --dsc-button-font-size: var(--ds-font-size-5); --dsc-button-gap: var(--ds-spacing-2); --dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4); @@ -60,78 +60,23 @@ * Variants */ &[data-variant='secondary'] { - --dsc-button-background--active: var(--ds-color-accent-surface-hover); - --dsc-button-background--hover: var(--ds-color-accent-surface-default); + --dsc-button-background--active: var(--ds-color-surface-hover); + --dsc-button-background--hover: var(--ds-color-surface-default); --dsc-button-background: transparent; - --dsc-button-border-color: var(--ds-color-accent-border-strong); - --dsc-button-color--active: var(--ds-color-accent-text-default); - --dsc-button-color--hover: var(--ds-color-accent-text-default); - --dsc-button-color: var(--ds-color-accent-text-subtle); + --dsc-button-border-color: var(--ds-color-border-strong); + --dsc-button-color--active: var(--ds-color-text-default); + --dsc-button-color--hover: var(--ds-color-text-default); + --dsc-button-color: var(--ds-color-text-subtle); } &[data-variant='tertiary'] { - --dsc-button-background--active: var(--ds-color-accent-surface-hover); - --dsc-button-background--hover: var(--ds-color-accent-surface-default); + --dsc-button-background--active: var(--ds-color-surface-hover); + --dsc-button-background--hover: var(--ds-color-surface-default); --dsc-button-background: transparent; --dsc-button-border-color: var(--dsc-button-tertiary-border-color); - --dsc-button-color--active: var(--ds-color-accent-text-default); - --dsc-button-color--hover: var(--ds-color-accent-text-default); - --dsc-button-color: var(--ds-color-accent-text-subtle); - } - - /** - * Colors - */ - &[data-color='neutral'] { - --dsc-button-background--active: var(--ds-color-neutral-base-active); - --dsc-button-background--hover: var(--ds-color-neutral-base-hover); - --dsc-button-background: var(--ds-color-neutral-base-default); - --dsc-button-color: var(--ds-color-neutral-contrast-default); - } - - &[data-color='neutral'][data-variant='secondary'] { - --dsc-button-background--active: var(--ds-color-neutral-surface-hover); - --dsc-button-background--hover: var(--ds-color-neutral-surface-default); - --dsc-button-background: transparent; - --dsc-button-border-color: var(--ds-color-neutral-border-strong); - --dsc-button-color--active: var(--ds-color-neutral-text-default); - --dsc-button-color--hover: var(--ds-color-neutral-text-default); - --dsc-button-color: var(--ds-color-neutral-text-subtle); - } - - &[data-color='neutral'][data-variant='tertiary'] { - --dsc-button-background--active: var(--ds-color-neutral-surface-hover); - --dsc-button-background--hover: var(--ds-color-neutral-surface-default); - --dsc-button-background: transparent; - --dsc-button-color--active: var(--ds-color-neutral-text-default); - --dsc-button-color--hover: var(--ds-color-neutral-text-default); - --dsc-button-color: var(--ds-color-neutral-text-subtle); - } - - &[data-color='danger'] { - --dsc-button-background--active: var(--ds-color-danger-base-active); - --dsc-button-background--hover: var(--ds-color-danger-base-hover); - --dsc-button-background: var(--ds-color-danger-base-default); - --dsc-button-color: var(--ds-color-danger-contrast-default); - } - - &[data-color='danger'][data-variant='secondary'] { - --dsc-button-background--active: var(--ds-color-danger-surface-hover); - --dsc-button-background--hover: var(--ds-color-danger-surface-default); - --dsc-button-background: transparent; - --dsc-button-border-color: var(--ds-color-danger-border-strong); - --dsc-button-color--active: var(--ds-color-danger-text-default); - --dsc-button-color--hover: var(--ds-color-danger-text-default); - --dsc-button-color: var(--ds-color-danger-text-subtle); - } - - &[data-color='danger'][data-variant='tertiary'] { - --dsc-button-background--active: var(--ds-color-danger-surface-hover); - --dsc-button-background--hover: var(--ds-color-danger-surface-default); - --dsc-button-background: transparent; - --dsc-button-color--active: var(--ds-color-danger-text-default); - --dsc-button-color--hover: var(--ds-color-danger-text-default); - --dsc-button-color: var(--ds-color-danger-text-subtle); + --dsc-button-color--active: var(--ds-color-text-default); + --dsc-button-color--hover: var(--ds-color-text-default); + --dsc-button-color: var(--ds-color-text-subtle); } /** diff --git a/packages/css/card.css b/packages/css/card.css index 51ea19eaee..9df6366300 100644 --- a/packages/css/card.css +++ b/packages/css/card.css @@ -1,10 +1,13 @@ .ds-card { - --dsc-card-background--active: var(--ds-color-neutral-surface-default); - --dsc-card-background--hover: var(--ds-color-neutral-background-subtle); - --dsc-card-background: var(--ds-color-neutral-background-default); - --dsc-card-border-color: var(--ds-color-neutral-border-subtle); + --dsc-card-background--active: var(--ds-color-surface-default); + --dsc-card-background--hover: var(--ds-color-background-subtle); + --dsc-card-background: var(--ds-color-surface-default); + &[data-color='neutral'] { + --dsc-card-background: var(--ds-color-background-default); + } + --dsc-card-border-color: var(--ds-color-border-subtle); --dsc-card-border: 1px solid var(--dsc-card-border-color); - --dsc-card-color: var(--ds-color-neutral-text-default); + --dsc-card-color: var(--ds-color-text-default); --dsc-card-gap: var(--ds-spacing-3); --dsc-card-padding: var(--ds-spacing-6); @@ -59,35 +62,11 @@ padding: 0; /* Let Card.Block own the padding */ } - &[data-color='subtle'] { - --dsc-card-background--active: var(--ds-color-neutral-surface-hover); - --dsc-card-background--hover: var(--ds-color-neutral-surface-default); - --dsc-card-background: var(--ds-color-neutral-background-subtle); - --dsc-card-border-color: var(--ds-color-neutral-border-subtle); - } - - &[data-color='brand1'] { - --dsc-card-background--active: var(--ds-color-brand1-surface-active); - --dsc-card-background--hover: var(--ds-color-brand1-surface-hover); - --dsc-card-background: var(--ds-color-brand1-surface-default); - --dsc-card-border-color: var(--ds-color-brand1-border-subtle); - --dsc-card-color: var(--ds-color-brand1-text-default); - } - - &[data-color='brand2'] { - --dsc-card-background--active: var(--ds-color-brand2-surface-active); - --dsc-card-background--hover: var(--ds-color-brand2-surface-hover); - --dsc-card-background: var(--ds-color-brand2-surface-default); - --dsc-card-border-color: var(--ds-color-brand2-border-subtle); - --dsc-card-color: var(--ds-color-brand2-text-default); - } - - &[data-color='brand3'] { - --dsc-card-background--active: var(--ds-color-brand3-surface-active); - --dsc-card-background--hover: var(--ds-color-brand3-surface-hover); - --dsc-card-background: var(--ds-color-brand3-surface-default); - --dsc-card-border-color: var(--ds-color-brand3-border-subtle); - --dsc-card-color: var(--ds-color-brand3-text-default); + &[data-subtle=''], + &[data-subtle='true'] { + --dsc-card-background--active: var(--ds-color-surface-hover); + --dsc-card-background--hover: var(--ds-color-surface-default); + --dsc-card-background: var(--ds-color-background-subtle); } } diff --git a/packages/css/link.css b/packages/css/link.css index 49c14d47c8..e816d6a1f4 100644 --- a/packages/css/link.css +++ b/packages/css/link.css @@ -1,11 +1,11 @@ .ds-link { - --dsc-link-background--active: var(--ds-color-accent-surface-default); + --dsc-link-background--active: var(--ds-color-surface-default); --dsc-link-background--focus: var(--ds-color-focus-outer); - --dsc-link-color--active: var(--ds-color-accent-text-default); + --dsc-link-color--active: var(--ds-color-text-default); --dsc-link-color--focus: var(--ds-color-focus-inner); - --dsc-link-color--hover: var(--ds-color-accent-text-default); + --dsc-link-color--hover: var(--ds-color-text-default); --dsc-link-color--visited: var(--ds-global-purple-12); - --dsc-link-color: var(--ds-color-accent-text-subtle); + --dsc-link-color: var(--ds-color-text-subtle); --dsc-link-text-decoration-thickness--hover: max(2px, 0.125rem, 0.12em); --dsc-link-text-decoration-thickness: max(1px, 0.0625rem); @@ -19,17 +19,6 @@ vertical-align: middle; /* Align img or svg icon with text */ } - /** - * Colors - */ - &[data-color='neutral'] { - --dsc-link-background--active: var(--ds-color-neutral-surface-default); - --dsc-link-color--active: var(--ds-color-neutral-text-subtle); - --dsc-link-color--hover: var(--ds-color-neutral-text-subtle); - --dsc-link-color--visited: var(--ds-global-purple-12); - --dsc-link-color: var(--ds-color-neutral-text-default); - } - /** * States */ diff --git a/packages/css/spinner.css b/packages/css/spinner.css index 279cbe34ac..db669efb7d 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -1,6 +1,6 @@ .ds-spinner { --dsc-spinner-background: var(--ds-color-neutral-surface-default); - --dsc-spinner-stroke: var(--ds-color-neutral-border-default); + --dsc-spinner-stroke: var(--ds-color-border-default); --dsc-spinner-animation-duration: 2s; animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration); diff --git a/packages/css/tag.css b/packages/css/tag.css index 968aaa75c8..57f24eab2d 100644 --- a/packages/css/tag.css +++ b/packages/css/tag.css @@ -1,6 +1,6 @@ .ds-tag { - --dsc-tag-background: var(--ds-color-neutral-surface-default); - --dsc-tag-color: var(--ds-color-neutral-text-default); + --dsc-tag-background: var(--ds-color-surface-default); + --dsc-tag-color: var(--ds-color-text-default); --dsc-tag-min-height: var(--ds-sizing-8); --dsc-tag-padding: 0 var(--ds-spacing-2); @@ -16,38 +16,19 @@ width: max-content; word-break: break-word; - &[data-color='info'] { - --dsc-tag-background: var(--ds-color-info-surface-default); - --dsc-tag-color: var(--ds-color-info-text-default); - } - - &[data-color='success'] { - --dsc-tag-background: var(--ds-color-success-surface-default); - --dsc-tag-color: var(--ds-color-success-text-default); - } + @composes ds-body-text--short-md from './base/base.css'; - &[data-color='warning'] { - --dsc-tag-background: var(--ds-color-warning-surface-default); - --dsc-tag-color: var(--ds-color-warning-text-default); - } + &[data-size='sm'] { + --dsc-tag-padding: 0 var(--ds-spacing-2); + --dsc-tag-min-height: var(--ds-sizing-7); - &[data-color='danger'] { - --dsc-tag-background: var(--ds-color-danger-surface-default); - --dsc-tag-color: var(--ds-color-danger-text-default); + @composes ds-body-text--short-sm from './base/base.css'; } - &[data-color='brand1'] { - --dsc-tag-background: var(--ds-color-brand1-surface-default); - --dsc-tag-color: var(--ds-color-brand1-text-default); - } - - &[data-color='brand2'] { - --dsc-tag-background: var(--ds-color-brand2-surface-default); - --dsc-tag-color: var(--ds-color-brand2-text-default); - } + &[data-size='lg'] { + --dsc-tag-padding: 0 var(--ds-spacing-3); + --dsc-tag-min-height: var(--ds-sizing-9); - &[data-color='brand3'] { - --dsc-tag-background: var(--ds-color-brand3-surface-default); - --dsc-tag-color: var(--ds-color-brand3-text-default); + @composes ds-body-text--short-lg from './base/base.css'; } } diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx index e5ca0bd45f..badf246531 100644 --- a/packages/react/src/components/Card/Card.stories.tsx +++ b/packages/react/src/components/Card/Card.stories.tsx @@ -65,7 +65,7 @@ export const Variants: StoryFn = () => ( - + katt diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx index fdfdd395ce..601aea9a23 100644 --- a/packages/react/src/components/Card/Card.tsx +++ b/packages/react/src/components/Card/Card.tsx @@ -9,7 +9,12 @@ export type CardProps = { * Changes background & border color * @default neutral */ - color?: 'neutral' | 'subtle' | 'brand1' | 'brand2' | 'brand3'; + color?: 'neutral' | 'brand1' | 'brand2' | 'brand3'; + /** + * Uses more subtle versions of the selected color + * @default false + */ + subtle?: boolean; /** * Change the default rendered element for the one passed as a child, merging their props and behavior. * @default false @@ -29,7 +34,7 @@ export type CardProps = { * */ export const Card = forwardRef(function Card( - { asChild = false, color = 'neutral', className, ...rest }, + { asChild = false, color = 'neutral', subtle = false, className, ...rest }, ref, ) { const Component = asChild ? Slot : 'div'; @@ -58,6 +63,7 @@ export const Card = forwardRef(function Card(