Merge branch 'main' into chart-color-per-data-point

Author: arjunlalb

projects/components/src/radio/radio-group.component.scss

@@ -58,6 +58,20 @@
     .radio-button-label {
       @include body-2-regular($gray-7);
     }
+
+    &.disabled {
+      &.mat-radio-checked .mat-radio-container .mat-radio-outer-circle {
+        background: $gray-3;
+      }
+
+      .mat-radio-container .mat-radio-outer-circle {
+        background: $gray-1;
+      }
+
+      .radio-button-label {
+        color: $gray-5;
+      }
+    }
   }
 
   .radio-button:last-child {

projects/components/src/radio/radio-group.component.ts

@@ -15,7 +15,12 @@ import { RadioOption } from './radio-option';
       (change)="this.onRadioChange($event)"
       [disabled]="this.disabled"
     >
-      <mat-radio-button *ngFor="let option of options" class="radio-button" [value]="option.value">
+      <mat-radio-button
+        *ngFor="let option of options"
+        class="radio-button"
+        [ngClass]="{ disabled: this.disabled }"
+        [value]="option.value"
+      >
         <ht-label class="radio-button-label" [label]="option.label"></ht-label>
       </mat-radio-button>
     </mat-radio-group>