chore(styles): centered switch and added last missing token

swisspost · Sep 25, 2024 · 1b5e0cf · 1b5e0cf
1 parent d9234d3
commit 1b5e0cf
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/.changeset/dull-zoos-whisper.md b/.changeset/dull-zoos-whisper.md
@@ -2,4 +2,4 @@
 '@swisspost/design-system-styles': patch
 ---
 
-Added v2 styles for the ´switch´ component and utilised available tokens.
+Added v2 styles for the ´switch´ component utilizing tokens.
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
@@ -214,13 +214,16 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='htt
 $switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='m12.667 23.6-7.2-7.067 1.067-1.067 6.133 6.267L25.467 8.8l1.067 1.067z'/></svg>");
 
 .form-switch {
+  display: flex;
+  align-items: center;
+
   @include utility-mx.focus-style(
     $offset: tokens.get('switch', 'focus-outline-offset'),
     $width: tokens.get('switch', 'focus-border-width'),
-    $color: tokens.get('switch', 'focus-stroke')
+    $color: tokens.get('switch', 'focus-stroke'),
+    $style: tokens.get('switch', 'focus-border-style')
   ) {
     border-radius: tokens.get('switch', 'focus-border-radius');
-    border-style: tokens.get('switch', 'focus-border-style');
   }
 
   .form-check-input {