From e0e24deda154bdf86325d76c2d638cdb82a9e865 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Tue, 11 Oct 2022 20:35:41 +0000 Subject: [PATCH 1/2] fix(material/slide-toggle): align colors with spec Note: the disabled state still isn't 100% right. There seems to be some opacity interaction going on that prevents matching the spec perfectly. --- .../slide-toggle/_slide-toggle-theme.scss | 44 +++++++++++-------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index eab59ddcaeb2..9fd9c15fc21c 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -11,12 +11,11 @@ // Generates all color mapping for the properties that only change based on the theme. @function _get-theme-base-map($is-dark) { $on-surface: if($is-dark, mdc-color-palette.$grey-100, mdc-color-palette.$grey-800); - $hairline: if($is-dark, mdc-color-palette.$grey-500, mdc-color-palette.$grey-300); - $on-surface-variant: if($is-dark, mdc-color-palette.$grey-200, mdc-color-palette.$grey-700); + $hairline: if($is-dark, mdc-color-palette.$grey-700, mdc-color-palette.$grey-300); + $on-surface-variant: if($is-dark, mdc-color-palette.$grey-500, mdc-color-palette.$grey-700); $on-surface-state-content: if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900); - $disabled-handle-color: mdc-color-palette.$grey-800; - $selected-icon-color: mdc-color-palette.$grey-100; - $icon-color: if($is-dark, mdc-color-palette.$grey-800, mdc-color-palette.$grey-100); + $disabled-handle-color: if($is-dark, #000, mdc-color-palette.$grey-800); + $icon-color: if($is-dark, mdc-color-palette.$grey-900, #fff); @return ( disabled-selected-handle-color: $disabled-handle-color, @@ -40,7 +39,7 @@ handle-surface-color: surface, unselected-handle-color: $on-surface-variant, - selected-icon-color: $selected-icon-color, + selected-icon-color: $icon-color, disabled-selected-icon-color: $icon-color, disabled-unselected-icon-color: $icon-color, unselected-icon-color: $icon-color, @@ -48,15 +47,22 @@ } // Generates the mapping for the properties that change based on the slide toggle color. -@function _get-theme-color-map($color-palette) { - $state-content: color.scale($color-palette, $blackness: 50%); - $inverse: color.scale($color-palette, $lightness: 75%); +@function _get-theme-color-map($color-palette, $is-dark) { + $primary: theming.get-color-from-palette($color-palette, 600); + $state-content: theming.get-color-from-palette($color-palette, 900); + $inverse: theming.get-color-from-palette($color-palette, 300); + + @if $is-dark { + $primary: theming.get-color-from-palette($color-palette, 300); + $state-content: theming.get-color-from-palette($color-palette, 200); + $inverse: theming.get-color-from-palette($color-palette, 600); + } @return ( - selected-focus-state-layer-color: $color-palette, - selected-handle-color: $color-palette, - selected-hover-state-layer-color: $color-palette, - selected-pressed-state-layer-color: $color-palette, + selected-focus-state-layer-color: $primary, + selected-handle-color: $primary, + selected-hover-state-layer-color: $primary, + selected-pressed-state-layer-color: $primary, selected-focus-handle-color: $state-content, selected-hover-handle-color: $state-content, @@ -71,9 +77,9 @@ @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $primary: theming.get-color-from-palette(map.get($config, primary)); - $accent: theming.get-color-from-palette(map.get($config, accent)); - $warn: theming.get-color-from-palette(map.get($config, warn)); + $primary: map.get($config, primary); + $accent: map.get($config, accent); + $warn: map.get($config, warn); $is-dark: map.get($config, is-dark); $foreground: map.get($config, foreground); @@ -90,15 +96,15 @@ } &.mat-primary { - @include mdc-switch-theme.theme(_get-theme-color-map($primary)); + @include mdc-switch-theme.theme(_get-theme-color-map($primary, $is-dark)); } &.mat-accent { - @include mdc-switch-theme.theme(_get-theme-color-map($accent)); + @include mdc-switch-theme.theme(_get-theme-color-map($accent, $is-dark)); } &.mat-warn { - @include mdc-switch-theme.theme(_get-theme-color-map($warn)); + @include mdc-switch-theme.theme(_get-theme-color-map($warn, $is-dark)); } } } From 753db53bdf97bb5c5033583fba02b2332906d9cc Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 12 Oct 2022 06:11:42 +0000 Subject: [PATCH 2/2] fixup! fix(material/slide-toggle): align colors with spec --- src/material/slide-toggle/_slide-toggle-theme.scss | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 9fd9c15fc21c..f119caa73444 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -48,15 +48,9 @@ // Generates the mapping for the properties that change based on the slide toggle color. @function _get-theme-color-map($color-palette, $is-dark) { - $primary: theming.get-color-from-palette($color-palette, 600); - $state-content: theming.get-color-from-palette($color-palette, 900); - $inverse: theming.get-color-from-palette($color-palette, 300); - - @if $is-dark { - $primary: theming.get-color-from-palette($color-palette, 300); - $state-content: theming.get-color-from-palette($color-palette, 200); - $inverse: theming.get-color-from-palette($color-palette, 600); - } + $primary: theming.get-color-from-palette($color-palette, if($is-dark, 300, 600)); + $state-content: theming.get-color-from-palette($color-palette, if($is-dark, 200, 900)); + $inverse: theming.get-color-from-palette($color-palette, if($is-dark, 600, 300)); @return ( selected-focus-state-layer-color: $primary,