From f412d87a7db90c483de18fc33b5569f2b6ee963a Mon Sep 17 00:00:00 2001 From: mkrause Date: Sun, 17 Nov 2024 16:40:40 +0100 Subject: [PATCH] [Switch] Add transitions for Switch thumb and track colors. --- src/components/forms/controls/Switch/Switch.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/forms/controls/Switch/Switch.module.scss b/src/components/forms/controls/Switch/Switch.module.scss index 799d874..a4772a8 100644 --- 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: ''; inherits: true; initial-value: bk.$color-grey-600; } -// @property --bk-switch-thumb-color { syntax: ''; inherits: true; initial-value: bk.$color-grey-400; } +/* Give these custom properties types to allow them to be animated */ @property --bk-switch-pos { syntax: ''; inherits: true; initial-value: 50%; } +@property --bk-switch-track-color { syntax: ''; inherits: true; initial-value: transparent; } +@property --bk-switch-thumb-color { syntax: ''; inherits: true; initial-value: transparent; } @layer baklava.components { .bk-switch {