Radio: Add semi dark border to selected radio button (#3808)

kirbydesign · Feb 27, 2025 · 9a7be0d · 9a7be0d
1 parent 24ad7a0
commit 9a7be0d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/libs/designsystem/radio/src/radio.component.scss b/libs/designsystem/radio/src/radio.component.scss
@@ -4,7 +4,7 @@
 @use '@kirbydesign/core/src/scss/utils';
 
 $radio-icon-size: utils.size('m');
-$radio-icon-mark-size: 60%;
+$radio-icon-mark-size: 12px;
 $spacing-to-edge: map.get(utils.$checkbox-radio-spacing, 'to-edge');
 $spacing-to-label: map.get(utils.$checkbox-radio-spacing, 'to-label');
 
@@ -101,7 +101,6 @@ ion-radio {
     }
   }
   @include interaction-state.apply-active {
-    --color: transparent;
     --color-checked: #{interaction-state.get-state-color('success')};
 
     &::part(container) {
@@ -165,13 +164,17 @@ ion-radio {
   }
 
   &.radio-checked {
-    --border-width: 0px;
-
     &:not(:focus, .radio-disabled) {
       &::part(container) {
         box-shadow: utils.get-elevation(4);
       }
     }
+
+    &:not(.radio-disabled) {
+      &::part(container) {
+        border-color: var(--kirby-semi-dark);
+      }
+    }
   }
 }
 

diff --git a/libs/designsystem/radio/src/radio.component.spec.ts b/libs/designsystem/radio/src/radio.component.spec.ts
@@ -149,7 +149,8 @@ describe('RadioComponent', () => {
         it('should have correct icon styling', () => {
           expect(radioIcon).toHaveComputedStyle({
             'background-color': getColor('white'),
-            'border-width': '0px',
+            'border-width': '1px',
+            'border-color': getColor('semi-dark'),
             'box-shadow': getElevation(4),
           });
         });
@@ -202,8 +203,8 @@ describe('RadioComponent', () => {
             opacity: '1',
           });
           expect(radioIcon).toHaveComputedStyle({
-            'background-color': getColor('semi-light'),
-            'border-width': '0px',
+            'border-width': '1px',
+            'border-color': getColor('medium'),
             'box-shadow': 'none',
           });
         });