diff --git a/.changeset/quiet-ducks-develop.md b/.changeset/quiet-ducks-develop.md new file mode 100644 index 0000000000..fc401ea533 --- /dev/null +++ b/.changeset/quiet-ducks-develop.md @@ -0,0 +1,9 @@ +--- +'@hashicorp/design-system-components': patch +--- + +`RadioCard` + +- Fixed selected border colors to match Figma and interactive states. +- Updated icon, label, and description colors to use `disabled-foreground` when + the `RadioCard` is disabled. diff --git a/packages/components/src/styles/components/form/radio-card.scss b/packages/components/src/styles/components/form/radio-card.scss index 350f61adba..c37aa2990a 100644 --- a/packages/components/src/styles/components/form/radio-card.scss +++ b/packages/components/src/styles/components/form/radio-card.scss @@ -7,7 +7,6 @@ // FORM > RADIO-CARD // - // RadioCard Group .hds-form-group--radio-cards { @@ -38,7 +37,8 @@ display: flex; flex-direction: column; background-color: var(--token-color-surface-primary); - border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary); + border: var(--token-form-radiocard-border-width) solid + var(--token-color-border-primary); border-radius: var(--token-form-radiocard-border-radius); box-shadow: var(--token-elevation-mid-box-shadow); cursor: pointer; @@ -64,12 +64,17 @@ &--checked, &.mock-checked { - border-color: var(--token-color-focus-action-internal); + border-color: var(--token-color-palette-blue-300); .hds-form-radio-card__control-wrapper { background-color: var(--token-color-surface-action); border-color: var(--token-color-border-action); } + + &:hover, + &.mock-hover { + border-color: var(--token-color-palette-blue-400); + } } &--disabled, @@ -83,6 +88,10 @@ background-color: var(--token-color-surface-interactive-disabled); border-color: var(--token-color-border-primary); } + + .hds-form-radio-card__content { + opacity: 0.5; + } } }