Merge pull request #2445 from hashicorp/jt-fix-radio-card-styles

Fix `RadioCard` styles and interactive states
hashicorp · Sep 25, 2024 · d2a59eb · d2a59eb
2 parents e6b4955 + 383513d
commit d2a59eb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/.changeset/quiet-ducks-develop.md 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
@@ -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;
+    }
   }
 }