From e3933ad22e05f2a3bdb1545c435f940ca8a2a5fc Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Mon, 5 Feb 2024 14:45:43 -0500 Subject: [PATCH 1/2] fix(material/slide-toggle): m3 slide-toggle track --- .../theming/_custom-tokens.scss | 5 ++++ src/material/core/tokens/m2/mat/_switch.scss | 5 ++++ src/material/slide-toggle/slide-toggle.scss | 24 +++++++++++++++++++ 3 files changed, 34 insertions(+) diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index ba0bdbbe129d..77ff0e21dc30 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -1110,6 +1110,11 @@ unselected-handle-horizontal-margin: 0 8px, unselected-with-icon-handle-horizontal-margin: 0 4px, unselected-pressed-handle-horizontal-margin: 0 2px, + + visible-track-opacity: 1, + hidden-track-opacity: 0, + visible-track-transition: opacity 75ms, + hidden-track-transition: opacity 75ms, ), ()); } diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss index c43ac181b7f6..aa81eb11e54a 100644 --- a/src/material/core/tokens/m2/mat/_switch.scss +++ b/src/material/core/tokens/m2/mat/_switch.scss @@ -19,6 +19,11 @@ $prefix: (mat, switch); unselected-handle-horizontal-margin: 0, unselected-with-icon-handle-horizontal-margin: 0, unselected-pressed-handle-horizontal-margin: 0, + + visible-track-opacity: 1, + hidden-track-opacity: 1, + visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), + hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), ); } diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index 592aa54613ac..c19fa58fd715 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -127,6 +127,30 @@ margin 75ms cubic-bezier(0.4, 0, 0.2, 1); } +@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) { + .mdc-switch--selected .mdc-switch__track { + &::before { + @include token-utils.create-token-slot(opacity, hidden-track-opacity); + @include token-utils.create-token-slot(transition, hidden-track-transition); + } + &::after { + @include token-utils.create-token-slot(opacity, visible-track-opacity); + @include token-utils.create-token-slot(transition, visible-track-transition); + } + } + + .mdc-switch--unselected .mdc-switch__track { + &::before { + @include token-utils.create-token-slot(opacity, visible-track-opacity); + @include token-utils.create-token-slot(transition, visible-track-transition); + } + &::after { + @include token-utils.create-token-slot(opacity, hidden-track-opacity); + @include token-utils.create-token-slot(transition, hidden-track-transition); + } + } +} + @include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) { .mat-mdc-slide-toggle { .mdc-switch--unselected .mdc-switch__handle { From 44e81b0b691d4268883439b0ea61bf1c919e2273 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Mon, 5 Feb 2024 14:53:19 -0500 Subject: [PATCH 2/2] fixup! fix(material/slide-toggle): m3 slide-toggle track --- src/material-experimental/theming/_custom-tokens.scss | 7 ++++++- src/material/core/tokens/m2/mat/_switch.scss | 7 +++++++ src/material/slide-toggle/slide-toggle.scss | 7 +++++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 77ff0e21dc30..4cd241255df7 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -1110,7 +1110,12 @@ unselected-handle-horizontal-margin: 0 8px, unselected-with-icon-handle-horizontal-margin: 0 4px, unselected-pressed-handle-horizontal-margin: 0 2px, - + // The hidden and visible track represent whichever track is visible or + // hidden in the ui. This could be the .mdc-switch__track :before or + // :after depending on whether the switch is selected or unselected. + // + // The m2 slide-toggle uses transforms to hide & show the tracks while + // the m3 slide-toggle uses opacity. visible-track-opacity: 1, hidden-track-opacity: 0, visible-track-transition: opacity 75ms, diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss index aa81eb11e54a..6b95cf7c2e2a 100644 --- a/src/material/core/tokens/m2/mat/_switch.scss +++ b/src/material/core/tokens/m2/mat/_switch.scss @@ -20,6 +20,13 @@ $prefix: (mat, switch); unselected-with-icon-handle-horizontal-margin: 0, unselected-pressed-handle-horizontal-margin: 0, + // The hidden and visible track represent whichever track is visible or + // hidden in the ui. This could be the .mdc-switch__track :before or + // :after depending on whether the switch is selected or unselected. + // + // The m2 slide-toggle uses transforms to hide & show the tracks while + // the m3 slide-toggle uses opacity. + visible-track-opacity: 1, hidden-track-opacity: 1, visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index c19fa58fd715..e5b4217f2131 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -127,6 +127,13 @@ margin 75ms cubic-bezier(0.4, 0, 0.2, 1); } +// The hidden and visible track represent whichever track is visible or +// hidden in the ui. This could be the .mdc-switch__track :before or +// :after depending on whether the switch is selected or unselected. +// +// The m2 slide-toggle uses transforms to hide & show the tracks while +// the m3 slide-toggle uses opacity. + @include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) { .mdc-switch--selected .mdc-switch__track { &::before {