chore(styles): implemented PR feedback

swisspost · Oct 3, 2024 · 6096c76 · 6096c76
1 parent d35d080
commit 6096c76
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -18,7 +18,7 @@ const meta: MetaComponent = {
     },
   },
   args: {
-    labelPosition: 'before',
+    labelPosition: 'after',
     label: 'Notifications',
     hiddenLabel: false,
     checked: false,

diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
@@ -223,7 +223,15 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
     $color: tokens.get('switch', 'focus-stroke'),
     $style: tokens.get('switch', 'focus-border-style')
   ) {
-    border-radius: tokens.get('switch', 'focus-border-radius');
+    width: fit-content;
+
+    &:not(:has(> input[aria-label])) {
+      border-radius: tokens.get('switch', 'focus-border-radius');
+    }
+
+    &:has(> input[aria-label]) {
+      border-radius: tokens.get('switch', 'border-radius-round');
+    }
   }
 
   .form-check-input {
@@ -288,7 +296,7 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
         border-color: tokens.get('switch', 'handle-selected-stroke');
       }
 
-      & + .form-check-label {
+      + .form-check-label {
         color: tokens.get('switch', 'text-selected-fg');
       }
     }
@@ -335,7 +343,7 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
           GrayText;
       }
 
-      & + .form-check-label {
+      + .form-check-label {
         color: tokens.get('switch', 'text-disabled-fg');
       }
 
@@ -381,12 +389,13 @@ $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' x
       border-color: tokens.get('switch', 'handle-hover-stroke');
     }
 
-    &::before {
-      background-color: transparent;
+    &:checked::before {
+      background-color: tokens.get('switch', 'element-hover-bg');
     }
 
     @include utility-mx.high-contrast-mode {
       border-color: Highlight;
+
       &::after {
         background-color: CanvasText;
       }