diff --git a/src/component/checkbox/style/_scheme.scss b/src/component/checkbox/style/_scheme.scss index 402a17de8..d0981eeef 100644 --- a/src/component/checkbox/style/_scheme.scss +++ b/src/component/checkbox/style/_scheme.scss @@ -20,6 +20,7 @@ + label { @include before { @include color.background(active blue-france); + @include color.background-image(border active blue-france, (), checkbox-background-image()); @include color.data-uri-svg(text inverted blue-france, (), $checkbox-svg, false); } } diff --git a/src/component/radio/style/_tool.scss b/src/component/radio/style/_tool.scss index 576ee1ca4..fad7f5fb3 100644 --- a/src/component/radio/style/_tool.scss +++ b/src/component/radio/style/_tool.scss @@ -5,7 +5,9 @@ @use 'sass:math'; -@function radio-background-image($checked: true, $size: md) { +@function radio-background-image($checked: true, $size: md, $index: 1) { + $color1: '$color##{$index}'; + $color2: '$color##{$index + 1}'; $max: 12; @if $size == sm { $max: 8; @@ -13,13 +15,13 @@ @if $checked { $in: $max * 0.5; - @return 'radial-gradient(transparent #{$max - 2}px, $color#1 #{$max - 1}px, transparent #{$max}px), radial-gradient($color#2 #{$in - 1}px, transparent #{$in}px)'; + @return 'radial-gradient(transparent #{$max - 2}px, #{$color1} #{$max - 1}px, transparent #{$max}px), radial-gradient(#{$color2} #{$in - 1}px, transparent #{$in}px)'; } @else { - @return 'radial-gradient(transparent #{$max - 2}px, $color#1 #{$max - 1}px, transparent #{$max}px)'; + @return 'radial-gradient(transparent #{$max - 2}px, #{$color1} #{$max - 1}px, transparent #{$max}px)'; } } @function radio-rich-background-image($checked: true) { - @return 'linear-gradient(0deg, $color#3, $color#3), linear-gradient(0deg, $color#3, $color#3), linear-gradient(0deg, $color#3, $color#3), linear-gradient(0deg, $color#3, $color#3), #{radio-background-image($checked, sm)}'; + @return 'linear-gradient(0deg, $color#1, $color#1), linear-gradient(0deg, $color#1, $color#1), linear-gradient(0deg, $color#1, $color#1), linear-gradient(0deg, $color#1, $color#1), #{radio-background-image($checked, sm, 2)}'; } diff --git a/src/component/radio/style/scheme/_default.scss b/src/component/radio/style/scheme/_default.scss index 5f70ecd83..8d8dd4b8a 100644 --- a/src/component/radio/style/scheme/_default.scss +++ b/src/component/radio/style/scheme/_default.scss @@ -11,7 +11,7 @@ #{selector.ns-group(radio)} { input[type="radio"] { & + label { - @include color.background-image((action-high blue-france), (legacy:$legacy), radio-background-image(false)); + @include color.background-image((border action-high blue-france), (legacy:$legacy), radio-background-image(false)); } @include disabled.selector { @@ -22,7 +22,7 @@ &:checked { + label { - @include color.background-image((action-high blue-france) (action-high blue-france), (legacy:$legacy), radio-background-image(true)); + @include color.background-image((border active blue-france) (active blue-france), (legacy:$legacy), radio-background-image(true)); } @include disabled.selector { @@ -43,7 +43,7 @@ } &:checked + label { - @include color.background-image((border plain error) (action-high blue-france), (legacy:$legacy), radio-background-image(true)); + @include color.background-image((border plain error) (active blue-france), (legacy:$legacy), radio-background-image(true)); } } } @@ -57,7 +57,7 @@ } &:checked + label { - @include color.background-image((border plain success) (action-high blue-france), (legacy:$legacy), radio-background-image(true)); + @include color.background-image((border plain success) (active blue-france), (legacy:$legacy), radio-background-image(true)); } } } @@ -71,7 +71,7 @@ } &:checked + label { - @include color.background-image((border plain info) (action-high blue-france), (legacy:$legacy), radio-background-image(true)); + @include color.background-image((border plain info) (active blue-france), (legacy:$legacy), radio-background-image(true)); } } } diff --git a/src/component/radio/style/scheme/_rich.scss b/src/component/radio/style/scheme/_rich.scss index 538922566..00a62450f 100644 --- a/src/component/radio/style/scheme/_rich.scss +++ b/src/component/radio/style/scheme/_rich.scss @@ -16,13 +16,13 @@ input[type="radio"] { + label { - @include color.background-image((action-high blue-france) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); + @include color.background-image((border default grey) (border action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(false)}'); @include color.background((background default grey), (legacy: $legacy)); } @include disabled.selector { + label { - @include color.background-image((disabled grey) (disabled grey) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); + @include color.background-image((border default grey) (disabled grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); } ~ #{selector.ns(radio-rich__pictogram)} { @@ -34,7 +34,7 @@ &:checked { + label { - @include color.background-image((action-high blue-france) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); + @include color.background-image((border active blue-france) (border active blue-france) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); } ~ #{selector.ns(radio-rich__pictogram)} { @@ -43,7 +43,7 @@ @include disabled.selector { + label { - @include color.background-image((disabled grey) (disabled grey) (text disabled grey), (legacy: $legacy), '#{radio-rich-background-image(true)}'); + @include color.background-image((text disabled grey) (disabled grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(true)}'); } ~ #{selector.ns(radio-rich__pictogram)} { @@ -59,11 +59,11 @@ #{ns(radio-rich)} { input[type="radio"] { & + label { - @include color.background-image((border plain error) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); + @include color.background-image((border default grey) (border plain error), (legacy: $legacy), '#{radio-rich-background-image(false)}'); } &:checked + label { - @include color.background-image((border plain error) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); + @include color.background-image((action-high blue-france) (border plain error) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); } } } @@ -73,11 +73,11 @@ #{ns(radio-rich)} { input[type="radio"] { & + label { - @include color.background-image((border plain success) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); + @include color.background-image((border default grey) (border plain success), (legacy: $legacy), '#{radio-rich-background-image(false)}'); } &:checked + label { - @include color.background-image((border plain success) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); + @include color.background-image((action-high blue-france) (border plain success) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); } } } @@ -87,11 +87,11 @@ #{ns(radio-rich)} { input[type="radio"] { & + label { - @include color.background-image((border plain info) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); + @include color.background-image((border default grey) (border plain info), (legacy: $legacy), '#{radio-rich-background-image(false)}'); } &:checked + label { - @include color.background-image((border plain info) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); + @include color.background-image((action-high blue-france) (border plain info) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}'); } } } @@ -101,11 +101,11 @@ input[type="radio"] { @include disabled.selector { & + label { - @include color.background-image((disabled grey) (disabled grey) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); + @include color.background-image((border default grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(false)}'); } &:checked + label { - @include color.background-image((disabled grey) (disabled grey) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(true)}'); + @include color.background-image((border default grey) (disabled grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(true)}'); } } } diff --git a/src/component/radio/style/scheme/_sm.scss b/src/component/radio/style/scheme/_sm.scss index 50161017b..012e27d1c 100644 --- a/src/component/radio/style/scheme/_sm.scss +++ b/src/component/radio/style/scheme/_sm.scss @@ -10,7 +10,7 @@ #{ns-group(radio)}--sm { input[type="radio"] { + label { - @include color.background-image((action-high blue-france), (legacy:$legacy), radio-background-image(false, sm)); + @include color.background-image((border action-high blue-france), (legacy:$legacy), radio-background-image(false, sm)); } @include disabled.selector() { @@ -21,7 +21,7 @@ &:checked { + label { - @include color.background-image((action-high blue-france) (action-high blue-france), (legacy:$legacy), radio-background-image(true, sm)); + @include color.background-image((border active blue-france) (active blue-france), (legacy:$legacy), radio-background-image(true, sm)); } @include disabled.selector { @@ -42,7 +42,7 @@ } &:checked + label { - @include color.background-image((border plain error, action-high blue-france), (legacy:$legacy), radio-background-image(true, sm)); + @include color.background-image((border plain error) (active blue-france), (legacy:$legacy), radio-background-image(true, sm)); } } } @@ -56,7 +56,7 @@ } &:checked + label { - @include color.background-image((border plain success) (action-high blue-france), (legacy:$legacy), radio-background-image(true, sm)); + @include color.background-image((border plain success) (active blue-france), (legacy:$legacy), radio-background-image(true, sm)); } } } @@ -70,7 +70,7 @@ } &:checked + label { - @include color.background-image((border plain info) (action-high blue-france), (legacy:$legacy), radio-background-image(true, sm)); + @include color.background-image((border plain info) (active blue-france), (legacy:$legacy), radio-background-image(true, sm)); } } } diff --git a/src/component/toggle/style/_scheme.scss b/src/component/toggle/style/_scheme.scss index c1d431c66..47b5c92c9 100644 --- a/src/component/toggle/style/_scheme.scss +++ b/src/component/toggle/style/_scheme.scss @@ -13,7 +13,7 @@ @include before { @include color.text(active blue-france, (legacy:$legacy)); - @include color.data-uri-svg(action-high blue-france, (legacy: $legacy), $toggle-unchecked-svg); + @include color.data-uri-svg(border action-high blue-france, (legacy: $legacy), $toggle-unchecked-svg); } @include after { @@ -31,11 +31,11 @@ ~ #{ns(toggle__label)} { @include before { - @include color.data-uri-svg((action-high blue-france) (action-high blue-france), (legacy: $legacy), $toggle-checked-svg); + @include color.data-uri-svg((border active blue-france) (border active blue-france), (legacy: $legacy), $toggle-checked-svg); } @include after { - @include color.data-uri-svg(action-high blue-france, (legacy: $legacy), $toggle-svg); + @include color.data-uri-svg(active blue-france, (legacy: $legacy), $toggle-svg); } } } @@ -96,7 +96,7 @@ &:checked { ~ #{ns(toggle__label)} { @include before { - @include color.data-uri-svg((border plain error) (action-high blue-france), (legacy: $legacy), $toggle-checked-svg); + @include color.data-uri-svg((border plain error) (active blue-france), (legacy: $legacy), $toggle-checked-svg); } } } @@ -122,7 +122,7 @@ &:checked { ~ #{ns(toggle__label)} { @include before { - @include color.data-uri-svg((border plain success) (action-high blue-france), (legacy: $legacy), $toggle-checked-svg); + @include color.data-uri-svg((border plain success) (active blue-france), (legacy: $legacy), $toggle-checked-svg); } } }