From 79631a351645f3499229290b47d867604adf3436 Mon Sep 17 00:00:00 2001
From: Kevin Buhmann <kbuhmann@vmware.com>
Date: Thu, 18 Aug 2022 13:03:41 -0500
Subject: [PATCH] fix(radio): use correct styles for disabled radio buttons

fixes #258

This is a backport of 2fcbbf0b78108f16c8397646000ce8d305488c60.
---
 projects/angular/src/forms/styles/_properties.forms.scss | 4 ++--
 projects/angular/src/forms/styles/_radio.clarity.scss    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/projects/angular/src/forms/styles/_properties.forms.scss b/projects/angular/src/forms/styles/_properties.forms.scss
index d4ce2b2d00..691b78b619 100644
--- a/projects/angular/src/forms/styles/_properties.forms.scss
+++ b/projects/angular/src/forms/styles/_properties.forms.scss
@@ -72,10 +72,10 @@
 
       // Radio
       --clr-forms-radio-label-color: var(--clr-forms-checkbox-label-color);
-      --clr-forms-radio-disabled-background-color: var(--clr-form-disabled-background-color);
+      --clr-forms-radio-disabled-background-color: var(--clr-color-neutral-700);
       --clr-forms-radio-disabled-mark-color: var(--clr-forms-checkbox-disabled-mark-color);
       --clr-forms-radio-selected-shadow: var(--clr-forms-checkbox-checked-shadow);
-      --clr-forms-radio-disabled-shadow: var(--clr-forms-checkbox-checked-shadow);
+      --clr-forms-radio-disabled-shadow: #{$clr-forms-radio-disabled-shadow};
       --clr-forms-radio-focused-shadow: 0 0 #{$clr-outline-blur} #{$clr-outline-spread} #{$clr-outline-color};
 
       // Range
diff --git a/projects/angular/src/forms/styles/_radio.clarity.scss b/projects/angular/src/forms/styles/_radio.clarity.scss
index 1f215fd343..0c5ac3ab8f 100644
--- a/projects/angular/src/forms/styles/_radio.clarity.scss
+++ b/projects/angular/src/forms/styles/_radio.clarity.scss
@@ -67,7 +67,7 @@
       //background-color around the dot
       @include css-var(
         box-shadow,
-        $clr-forms-radio-disabled-shadow,
+        clr-forms-radio-disabled-shadow,
         $clr-forms-radio-disabled-shadow,
         $clr-use-custom-properties
       );
@@ -76,14 +76,14 @@
     input[type='radio']:checked:disabled + label::before {
       @include css-var(
         background-color,
-        $clr-forms-radio-disabled-background-color,
+        clr-forms-radio-disabled-background-color,
         $clr-forms-radio-disabled-background-color,
         $clr-use-custom-properties
       );
       //background-color around the dot
       @include css-var(
         box-shadow,
-        $clr-forms-radio-checked-disabled-shadow,
+        clr-forms-radio-checked-disabled-shadow,
         $clr-forms-radio-checked-disabled-shadow,
         $clr-use-custom-properties
       );