Merge pull request #24 from fortanix/mkrause/241117-switch-transitions

[Switch] Add transitions for Switch thumb and track colors
fortanix · Nov 18, 2024 · 6377483 · 6377483
2 parents 94ec559 + f412d87
commit 6377483
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/components/forms/controls/Switch/Switch.module.scss b/src/components/forms/controls/Switch/Switch.module.scss
@@ -1,10 +1,10 @@
 
 @use '../../../../styling/defs.scss' as bk;
 
-/* Note: `light-dark()` does not seem to be animatable in Chrome 125, even with `@property` */
-// @property --bk-switch-track-color { syntax: '<color>'; inherits: true; initial-value: bk.$color-grey-600; }
-// @property --bk-switch-thumb-color { syntax: '<color>'; inherits: true; initial-value: bk.$color-grey-400; }
+/* Give these custom properties types to allow them to be animated */
 @property --bk-switch-pos { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
+@property --bk-switch-track-color { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --bk-switch-thumb-color { syntax: '<color>'; inherits: true; initial-value: transparent; }
 
 @layer baklava.components {
   .bk-switch {