From 2173baebb8ea82e3ebe07c6dd596b01f2280a798 Mon Sep 17 00:00:00 2001 From: Dilyana Dimova Date: Wed, 9 Mar 2022 18:26:25 +0200 Subject: [PATCH 1/4] style(switch): update fluent switch styles --- .../components/switch/_switch-theme.scss | 54 +++++++++++++------ .../styles/themes/schemas/dark/_switch.scss | 27 +++++++--- .../styles/themes/schemas/light/_switch.scss | 51 +++++++++++------- 3 files changed, 89 insertions(+), 43 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 541f07f892c..d49c264cf16 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -18,10 +18,13 @@ /// /// @param {Color} $thumb-on-color [null] - The color of the thumb when the switch is on. /// @param {Color} $track-on-color [null] - The color of the track when the switch is on. +/// @param {Color} $track-on-hover-color [null] - The color of the track when the switch is on and hovered. /// @param {Color} $thumb-off-color [null] - The color of the thumb when the switch is off. /// @param {Color} $track-off-color [null] - The color of the track when the switch is off. /// @param {Color} $thumb-disabled-color [null] - The color of the thumb when the switch is disabled. +/// @param {Color} $thumb-on-disabled-color [null] - The color of the thumb when the switch is on and disabled. /// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled. +/// @param {Color} $track-on-disabled-color [null] - The color of the track when the switch is on and disabled. /// @param {Color} $label-color [null] - The color of the switch label /// @param {Color} $label-disabled-color [null] - The color of the switch label when the switch is disabled /// @param {box-shadow} $resting-shadow [null] - The shadow used for the thumb in resting state of the switch. @@ -57,12 +60,15 @@ $thumb-on-color: null, $track-on-color: null, + $track-on-hover-color: null, $thumb-off-color: null, $track-off-color: null, $track-disabled-color: null, + $track-on-disabled-color: null, $thumb-disabled-color: null, + $thumb-on-disabled-color: null, $label-color: null, $label-disabled-color: null, @@ -127,12 +133,15 @@ thumb-on-color: $thumb-on-color, track-on-color: $track-on-color, + track-on-hover-color: $track-on-hover-color, thumb-off-color: $thumb-off-color, track-off-color: $track-off-color, track-disabled-color: $track-disabled-color, + track-on-disabled-color: $track-on-disabled-color, thumb-disabled-color: $thumb-disabled-color, + thumb-on-disabled-color: $thumb-on-disabled-color, label-color: $label-color, label-disabled-color: $label-disabled-color, @@ -291,6 +300,18 @@ border-color: var-get($theme, 'border-hover-color'); } } + + @if $variant == 'fluent' { + &:hover { + %switch-composite-thumb { + background: var-get($theme, 'border-hover-color'); + } + + %switch-composite-thumb--x { + background: var-get($theme, 'thumb-on-color'); + } + } + } } %switch-composite--x { @@ -301,6 +322,12 @@ &:focus { border-color: var-get($theme, 'border-on-hover-color'); } + + @if $variant == 'fluent' { + &:hover { + background: var-get($theme, 'track-on-hover-color'); + } + } } %switch-composite--disabled { @@ -367,22 +394,6 @@ } %igx-switch--focused { - @if $variant == 'fluent' { - position: relative; - $focus-outline-offset-top: rem(2px); - $focus-outline-offset-left: rem(2px); - - &::after { - content: ''; - position: absolute; - top: -$focus-outline-offset-top; - left: -$focus-outline-offset-left; - box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); - width: calc(100% + (#{$focus-outline-offset-left} * 2)); - height: calc(100% + (#{$focus-outline-offset-top} * 2)); - } - } - @if $variant == 'bootstrap' { %switch-composite { border-color: var-get($theme, 'focus-fill-color'); @@ -431,6 +442,17 @@ background: var-get($theme, 'thumb-on-color'); } } + + @if $variant == 'fluent' { + %switch-composite--x { + border-color: var-get($theme, 'border-disabled-color'); + background: var-get($theme, 'track-on-disabled-color'); + } + + %switch-composite-thumb--x { + background: var-get($theme, 'thumb-on-disabled-color'); + } + } } %switch-ripple--focused { diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss index 6e96c50f2f4..42887a0836d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss @@ -28,10 +28,13 @@ $dark-switch: extend($light-switch, $base-dark-switch); /// Generates a dark fluent switch schema based on a mix of $fluent-switch and $base-dark-switch. /// @type {Map} /// @property {Map} border-color [color: ('grays', 500)] - The border color of the switch. -/// @property {Map} border-hover-color [color: ('grays', 800)] - The border color of the switch on hover. +/// @property {Map} border-on-hover-color [color('primary', 200)] - The border color of the on-switch. /// @property {Map} border-disabled-color [color: ('grays', 200)] - The border color of the disabled switch. -/// @property {Map} track-disabled-color [color: ('grays', 200)] - The color of the track when the switch is disabled. -/// @property {Map} thumb-on-color [color: ('grays', 900)] - The color of the thumb when the switch is on. +/// @property {Color} track-on-disabled-color [color: ('grays', 200)] - The color of the track when the switch is on and disabled. +/// @property {Color} track-on-hover-color [color: ('primary', 200)] - The color of the track when the switch is on and hovered. +/// @property {Map} thumb-off-color [color: ('grays', 500)] - The color of the thumb when the switch is off. +/// @property {Map} thumb-disabled-color [color: ('grays', 200)] - The color of the thumb when the switch is disabled. +/// /// @requires {function} extend /// @requires $fluent-switch /// @requires $base-dark-switch @@ -40,20 +43,28 @@ $dark-fluent-switch: extend($fluent-switch, $base-dark-switch, ( color: ('grays', 500) ), - border-hover-color:( - color: ('grays', 800) + thumb-off-color: ( + color: ('grays', 500) + ), + + border-on-hover-color:( + color: ('primary', 200) + ), + + track-on-hover-color:( + color: ('primary', 200) ), border-disabled-color:( color: ('grays', 200) ), - track-disabled-color: ( + thumb-disabled-color: ( color: ('grays', 200) ), - thumb-on-color: ( - color: ('grays', 900) + track-on-disabled-color:( + color: ('grays', 200) ), )); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss index 91c6a551cee..93e93bf7a75 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -86,17 +86,20 @@ $light-switch: extend( /// Generates a fluent switch schema. /// @type {Map} /// -/// @property {Map} border-color [color('grays', 500)] - The border color of the switch. +/// @property {Map} border-color [color('grays', 700)] - The border color of the switch. /// @property {Map} border-hover-color [color('grays', 800)] - The border color of the switch on hover. -/// @property {Map} border-disabled-color [color('grays', 300)] - The border color of the disabled switch. +/// @property {Map} border-disabled-color [color('grays', 400)] - The border color of the disabled switch. /// @property {Map} border-on-color [color('primary', 500)] - The border color of the on-switch. -/// @property {Map} border-on-hover-color [color('primary', 500)] - The border color of the on-switch. +/// @property {Map} border-on-hover-color [color('primary', 800)] - The border color of the on-switch. /// -/// @property {Map} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 900)] - The color of the thumb when the switch is off. -/// @property {Map} track-on-color [color: ('secondary', 500)] - The color of the track when the switch is on. +/// @property {Color} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. +/// @property {Map} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. +/// @property {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. /// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. -/// @property {Map} focus-outline-color [color: ('grays', 800)] - The focus outlined color. +/// @property {Color} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered. +/// @property {Color} track-on-disabled-color [color: ('grays', 400)] - The color of the track when the switch is on and disabled. +/// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. +/// @property {Color} thumb-disabled-color [color: ('grays', 100)] - The color of the thumb when the switch is on and disabled. /// /// @property {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @@ -109,43 +112,53 @@ $fluent-switch: extend( ( variant: 'fluent', - focus-outline-color: ( - color: ('grays', 800) + border-color: ( + color: ('grays', 700), ), - border-color: ( - color: ('grays', 500), + thumb-off-color: ( + color: ('grays', 700), ), + track-off-color: transparent, + border-hover-color:( color: ('grays', 800), ), - border-disabled-color:( - color: ('grays', 300), + track-on-color: ( + color: ('primary', 500), ), border-on-color:( color: ('primary', 500) ), + track-on-hover-color:( + color: ('primary', 800) + ), + border-on-hover-color:( - color: ('primary', 500) + color: ('primary', 800) ), thumb-on-color: ( color: ('grays', 50) ), - thumb-off-color: ( - color: ('grays', 900), + track-on-disabled-color:( + color: ('grays', 400) ), - track-on-color: ( - color: ('secondary', 500), + thumb-on-disabled-color:( + color: ('grays', 100) ), - track-off-color: transparent, + border-disabled-color:( + color: ('grays', 400), + ), + + track-disabled-color: transparent, ) ); From 7269e39f819b0bba494b870acb83e52816e7ddc8 Mon Sep 17 00:00:00 2001 From: Dilyana Dimova Date: Wed, 9 Mar 2022 18:36:45 +0200 Subject: [PATCH 2/4] style(switch): bring back focus styles --- .../styles/components/switch/_switch-theme.scss | 16 ++++++++++++++++ .../styles/themes/schemas/light/_switch.scss | 5 +++++ 2 files changed, 21 insertions(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index d49c264cf16..1b8e99aad69 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -394,6 +394,22 @@ } %igx-switch--focused { + @if $variant == 'fluent' { + position: relative; + $focus-outline-offset-top: rem(2px); + $focus-outline-offset-left: rem(2px); + + &::after { + content: ''; + position: absolute; + top: -$focus-outline-offset-top; + left: -$focus-outline-offset-left; + box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); + width: calc(100% + (#{$focus-outline-offset-left} * 2)); + height: calc(100% + (#{$focus-outline-offset-top} * 2)); + } + } + @if $variant == 'bootstrap' { %switch-composite { border-color: var-get($theme, 'focus-fill-color'); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss index 93e93bf7a75..9974808122f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -100,6 +100,7 @@ $light-switch: extend( /// @property {Color} track-on-disabled-color [color: ('grays', 400)] - The color of the track when the switch is on and disabled. /// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. /// @property {Color} thumb-disabled-color [color: ('grays', 100)] - The color of the thumb when the switch is on and disabled. +/// @property {Map} focus-outline-color [color: ('grays', 800)] - The focus outlined color. /// /// @property {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @@ -112,6 +113,10 @@ $fluent-switch: extend( ( variant: 'fluent', + focus-outline-color: ( + color: ('grays', 800) + ), + border-color: ( color: ('grays', 700), ), From 0e4702de64ac8acca014af9e82e2330b0b0481f0 Mon Sep 17 00:00:00 2001 From: Dilyana Dimova Date: Thu, 10 Mar 2022 08:36:56 +0200 Subject: [PATCH 3/4] style(switch): fix switch focus border styles --- .../components/switch/_switch-theme.scss | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 1b8e99aad69..7e5dc216a1b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -395,21 +395,23 @@ %igx-switch--focused { @if $variant == 'fluent' { - position: relative; - $focus-outline-offset-top: rem(2px); - $focus-outline-offset-left: rem(2px); - - &::after { - content: ''; - position: absolute; - top: -$focus-outline-offset-top; - left: -$focus-outline-offset-left; - box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); - width: calc(100% + (#{$focus-outline-offset-left} * 2)); - height: calc(100% + (#{$focus-outline-offset-top} * 2)); + %switch-composite { + position: relative; + $focus-outline-offset-top: rem(2px); + $focus-outline-offset-left: rem(2px); + + &::after { + content: ''; + position: absolute; + top: -$focus-outline-offset-top; + left: -$focus-outline-offset-left; + box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color'); + width: calc(100% + (#{$focus-outline-offset-left} * 2)); + height: calc(100% + (#{$focus-outline-offset-top} * 2)); + } } } - + @if $variant == 'bootstrap' { %switch-composite { border-color: var-get($theme, 'focus-fill-color'); From 8edfdd233f690fa8bff8b347957c04126c33c1a3 Mon Sep 17 00:00:00 2001 From: Dilyana Dimova Date: Thu, 10 Mar 2022 16:03:33 +0200 Subject: [PATCH 4/4] style(switch): update styles for material and bootstrap switches --- .../components/switch/_switch-theme.scss | 16 +-- .../styles/themes/schemas/dark/_switch.scss | 29 +++-- .../styles/themes/schemas/light/_switch.scss | 105 +++++++++++------- 3 files changed, 86 insertions(+), 64 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 7e5dc216a1b..5d02d8959cf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -450,25 +450,19 @@ } %igx-switch--disabled-checked { - @if $variant == 'bootstrap' { + @if $variant != 'indigo-design' { %switch-composite--x { - background: var-get($theme, 'focus-fill-color'); - border-color: var-get($theme, 'focus-fill-color'); + background: var-get($theme, 'track-on-disabled-color'); } %switch-composite-thumb--x { - background: var-get($theme, 'thumb-on-color'); + background: var-get($theme, 'thumb-on-disabled-color'); } } - @if $variant == 'fluent' { + @if $variant == 'bootstrap' or $variant == 'fluent'{ %switch-composite--x { - border-color: var-get($theme, 'border-disabled-color'); - background: var-get($theme, 'track-on-disabled-color'); - } - - %switch-composite-thumb--x { - background: var-get($theme, 'thumb-on-disabled-color'); + border-color: var-get($theme, 'track-on-disabled-color'); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss index 42887a0836d..744fbac8234 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_switch.scss @@ -9,7 +9,7 @@ /// Generates a base dark switch schema. /// @type {Map} -/// @prop {Map} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. +/// @prop {Color} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. /// @see $default-palette $base-dark-switch: ( thumb-disabled-color: ( @@ -27,13 +27,13 @@ $dark-switch: extend($light-switch, $base-dark-switch); /// Generates a dark fluent switch schema based on a mix of $fluent-switch and $base-dark-switch. /// @type {Map} -/// @property {Map} border-color [color: ('grays', 500)] - The border color of the switch. -/// @property {Map} border-on-hover-color [color('primary', 200)] - The border color of the on-switch. -/// @property {Map} border-disabled-color [color: ('grays', 200)] - The border color of the disabled switch. +/// @property {Color} border-color [color: ('grays', 500)] - The border color of the switch. +/// @property {Color} border-on-hover-color [color('primary', 200)] - The border color of the on-switch. +/// @property {Color} border-disabled-color [color: ('grays', 200)] - The border color of the disabled switch. /// @property {Color} track-on-disabled-color [color: ('grays', 200)] - The color of the track when the switch is on and disabled. /// @property {Color} track-on-hover-color [color: ('primary', 200)] - The color of the track when the switch is on and hovered. -/// @property {Map} thumb-off-color [color: ('grays', 500)] - The color of the thumb when the switch is off. -/// @property {Map} thumb-disabled-color [color: ('grays', 200)] - The color of the thumb when the switch is disabled. +/// @property {Color} thumb-off-color [color: ('grays', 500)] - The color of the thumb when the switch is off. +/// @property {Color} thumb-disabled-color [color: ('grays', 200)] - The color of the thumb when the switch is disabled. /// /// @requires {function} extend /// @requires $fluent-switch @@ -70,7 +70,8 @@ $dark-fluent-switch: extend($fluent-switch, $base-dark-switch, ( /// Generates a dark bootstrap switch schema based on a mix of $bootstrap-switch and $base-dark-switch. /// @type {Map} -/// @property {Map} thumb-on-color [color: ('grays', 900)] - The color of the thumb when the switch is on. +/// @property {Color} thumb-on-color [color: ('grays', 900)] - The color of the thumb when the switch is on. +/// @property {Color} thumb-on-disabled-color [color: ('grays', 900)] - The color of the thumb when the switch is on and disabled. /// @requires {function} extend /// @requires $bootstrap-switch /// @requires $base-dark-switch @@ -80,22 +81,26 @@ $dark-bootstrap-switch: extend( thumb-on-color: ( color: ('grays', 900) ), + + thumb-on-disabled-color: ( + color: ('grays', 900) + ), ) ); /// Generates a dark indigo switch schema. /// @type {Map} -/// @property {Map} thumb-on-color [color: 'surface'] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [color: ('grays', 900)] - The color of the track when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. -/// @property {Map} track-off-color [transparent] - The color of the track when the switch is off. +/// @property {Color} thumb-on-color [color: 'surface'] - The color of the thumb when the switch is on. +/// @property {Color} track-on-color [color: ('grays', 900)] - The color of the track when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. +/// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. /// /// @property {Color} border-color [color: ('grays', 700)] - The border color of the switch. /// @property {Color} border-hover-color [color: ('grays', 700)] - The border color of the switch on hover. /// @property {Color} border-disabled-color [color: ('grays', 400)] - The border color of the disabled switch. /// @property {Color} border-on-color [color: ('grays', 900)] - The border color of the on-switch. /// @property {Color} border-on-hover-color [color: ('grays', 900)] - The border color of the on-switch. -/// @property {Map} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled +/// @property {Color} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled /// @requires {function} extend /// @requires $indigo-switch $dark-indigo-switch: extend( diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss index 9974808122f..9f7c159db6a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_switch.scss @@ -11,14 +11,16 @@ /// Generates a light switch schema. /// @type {Map} /// -/// @property {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 200)] - The color of the thumb when the switch is off. -/// @property {Map} track-off-color [color: ('grays', 600)] - The color of the track when the switch is off. -/// @property {Map} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. -/// @property {Map} track-disabled-color [color: ('grays', 300)] - The color of the track when the switch is disabled. -/// @property {Map} label-color [color: ('grays', 900)] - The color of the switch label -/// @property {Map} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled +/// @property {Color} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on. +/// @property {Color} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 50)] - The color of the thumb when the switch is off. +/// @property {Color} track-off-color [color: ('grays', 500)] - The color of the track when the switch is off. +/// @property {Color} thumb-disabled-color [color: ('grays', 200)] - The color of the thumb when the switch is disabled. +/// @property {Color} thumb-on-disabled-color [color: ('secondary', 100)] - The color of the thumb when the switch is on and disabled. +/// @property {Color} track-disabled-color [color: ('grays', 300)] - The color of the track when the switch is disabled. +/// @property {Color} track-on-disabled-color [color: ('secondary', 50)] - The color of the track when the switch is on and disabled. +/// @property {Color} label-color [color: ('grays', 900)] - The color of the switch label +/// @property {Color} label-disabled-color [color: ('grays', 400)] - The color of the switch label when the switch is disabled /// @property {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state. /// @property {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state. /// @property {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state. @@ -58,19 +60,27 @@ $light-switch: extend( ), thumb-off-color: ( - color: ('grays', 200) + color: ('grays', 50) ), track-disabled-color: ( - color: ('grays', 300, .54) + color: ('grays', 300) + ), + + track-on-disabled-color: ( + color: ('secondary', 50) ), track-off-color: ( - color: ('grays', 600) + color: ('grays', 500) ), thumb-disabled-color: ( - color: ('grays', 400), + color: ('grays', 200), + ), + + thumb-on-disabled-color: ( + color: ('secondary', 100), ), label-color: ( @@ -86,21 +96,22 @@ $light-switch: extend( /// Generates a fluent switch schema. /// @type {Map} /// -/// @property {Map} border-color [color('grays', 700)] - The border color of the switch. -/// @property {Map} border-hover-color [color('grays', 800)] - The border color of the switch on hover. -/// @property {Map} border-disabled-color [color('grays', 400)] - The border color of the disabled switch. -/// @property {Map} border-on-color [color('primary', 500)] - The border color of the on-switch. -/// @property {Map} border-on-hover-color [color('primary', 800)] - The border color of the on-switch. +/// @property {Color} border-color [color('grays', 700)] - The border color of the switch. +/// @property {Color} border-hover-color [color('grays', 800)] - The border color of the switch on hover. +/// @property {Color} border-disabled-color [color('grays', 400)] - The border color of the disabled switch. +/// @property {Color} border-on-color [color('primary', 500)] - The border color of the on-switch. +/// @property {Color} border-on-hover-color [color('primary', 800)] - The border color of the on-switch. /// /// @property {Color} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. -/// @property {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 700)] - The color of the thumb when the switch is off. +/// @property {Color} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. /// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. /// @property {Color} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered. /// @property {Color} track-on-disabled-color [color: ('grays', 400)] - The color of the track when the switch is on and disabled. /// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. -/// @property {Color} thumb-disabled-color [color: ('grays', 100)] - The color of the thumb when the switch is on and disabled. -/// @property {Map} focus-outline-color [color: ('grays', 800)] - The focus outlined color. +/// @property {Color} thumb-disabled-color [color: ('grays', 400)] - The color of the thumb when the switch is disabled. +/// @property {Color} thumb-on-disabled-color [color: ('grays', 100)] - The color of the thumb when the switch is on and disabled. +/// @property {Color} focus-outline-color [color: ('grays', 800)] - The focus outlined color. /// /// @property {Number} border-radius-track [10px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @@ -155,6 +166,10 @@ $fluent-switch: extend( color: ('grays', 400) ), + thumb-disabled-color:( + color: ('grays', 400) + ), + thumb-on-disabled-color:( color: ('grays', 100) ), @@ -169,13 +184,15 @@ $fluent-switch: extend( /// Generates a bootstrap switch schema. /// @type {Map} -/// @property {Map} focus-outline-color [color: ('primary', 100)] - The focus outlined color. -/// @property {Map} focus-fill-color [color: ('primary', 200)] - The focus fill color. -/// @property {Map} border-color [color('grays', 400)] - The border color of the switch. -/// @property {Map} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. -/// @property {Map} thumb-off-color [color: ('grays', 400)] - The color of the thumb when the switch is off. -/// @property {Map} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. -/// @property {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. +/// @property {Color} focus-outline-color [color: ('primary', 100)] - The focus outlined color. +/// @property {Color} focus-fill-color [color: ('primary', 200)] - The focus fill color. +/// @property {Color} border-color [color('grays', 400)] - The border color of the switch. +/// @property {Color} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. +/// @property {Color} thumb-off-color [color: ('grays', 400)] - The color of the thumb when the switch is off. +/// @property {Color} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. +/// @property {Color} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. +/// @property {Color} track-on-disabled-color [color: ('primary', 200)] - The color of the track when the switch is on and disabled. +/// @property {Color} thumb-on-disabled-color [color: ('grays', 50)] - The color of the thumb when the switch is on and disabled. /// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. /// @property {Number} border-radius-track [32px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [32px] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. @@ -213,34 +230,40 @@ $bootstrap-switch: extend( color: ('grays', 300), ), + thumb-on-disabled-color: ( + color: ('grays', 50) + ), + track-on-color: ( color: ('primary', 500), ), - track-disabled-color: transparent, + track-on-disabled-color:( + color: ('primary', 200) + ) ) ); /// Generates an indigo switch schema. /// @type {Map} /// -/// @property {Map} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. -/// @property {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. -/// @property {Map} thumb-off-color [color: ('grays', 600)] - The color of the thumb when the switch is off. +/// @property {Color} thumb-on-color [color: ('grays', 50)] - The color of the thumb when the switch is on. +/// @property {Color} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on. +/// @property {Color} thumb-off-color [color: ('grays', 600)] - The color of the thumb when the switch is off. /// @property {Color} track-off-color [transparent] - The color of the track when the switch is off. -/// @property {Map} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. +/// @property {Color} thumb-disabled-color [color: ('grays', 300)] - The color of the thumb when the switch is disabled. /// @property {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled. /// -/// @property {Map} border-color [color: ('grays', 600)] - The border color of the switch. -/// @property {Map} border-hover-color [color: ('grays', 600)] - The border color of the switch on hover. -/// @property {Map} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. -/// @property {Map} border-on-color [color: ('primary', 500)] - The border color of the on-switch. -/// @property {Map} border-on-hover-color [color: ('primary', 500)] - The border color of the on-switch. -/// @property {Map} label-disabled-color [color: ('grays', 300)] - The color of the switch label when the switch is disabled +/// @property {Color} border-color [color: ('grays', 600)] - The border color of the switch. +/// @property {Color} border-hover-color [color: ('grays', 600)] - The border color of the switch on hover. +/// @property {Color} border-disabled-color [color: ('grays', 300)] - The border color of the disabled switch. +/// @property {Color} border-on-color [color: ('primary', 500)] - The border color of the on-switch. +/// @property {Color} border-on-hover-color [color: ('primary', 500)] - The border color of the on-switch. +/// @property {Color} label-disabled-color [color: ('grays', 300)] - The color of the switch label when the switch is disabled /// @property {Number} border-radius-track [8px] - The border radius used for switch track. Can be a fraction between 0 and 1, pixels, or percent. /// @property {Number} border-radius-thumb [1] - The border radius used for switch thumb. Can be a fraction between 0 and 1, pixels, or percent. -/// @property {Map} focus-outline-color [color: ('grays', 300)] - The focus outlined color. -/// @property {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state. +/// @property {Color} focus-outline-color [color: ('grays', 300)] - The focus outlined color. +/// @property {Color} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state. /// /// @requires {function} extend /// @requires $light-switch