Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐛 fix(radio, radio-rich, toggle, checkbox): met a jour les tokens de couleur [DS-3471] #760

Merged
merged 9 commits into from
Nov 10, 2023
Merged

🐛 fix(radio, radio-rich, toggle, checkbox): met a jour les tokens de couleur [DS-3471] #760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
81438af
🐛 fix(consent): coche les cookies obligatoires par defaut [DS-3524] (…
zellerbaptiste Aug 28, 2023
615fe69
fix(radio): met a jour les tokens de couleur
zellerbaptiste Sep 4, 2023
de9bc1a
feat(radio): met a jour les tokens
zellerbaptiste Sep 5, 2023
437b6f0
feat(toggle): met a jour les tokens
zellerbaptiste Sep 5, 2023
41d78cc
feat(checkbox): met a jour les tokens
zellerbaptiste Sep 5, 2023
f0e2e0f
feat(toggle): retour de PR
zellerbaptiste Sep 5, 2023
752e83d
fix(radio): retour arriere sur les couleurs de texte
zellerbaptiste Sep 11, 2023
e717ff9
fix(radio): ordre des token de couleurs
keryanS Nov 9, 2023
21a105c
Merge branch 'dev-1.11.0' into fix/radio-active-color
keryanS Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/component/checkbox/style/_scheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand Down
10 changes: 6 additions & 4 deletions src/component/radio/style/_tool.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,23 @@

@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;
}

@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)}';
}
10 changes: 5 additions & 5 deletions src/component/radio/style/scheme/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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));
}
}
}
Expand All @@ -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));
}
}
}
Expand All @@ -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));
}
}
}
Expand Down
24 changes: 12 additions & 12 deletions src/component/radio/style/scheme/_rich.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)} {
Expand All @@ -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)} {
Expand All @@ -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)} {
Expand All @@ -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)}');
}
}
}
Expand All @@ -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)}');
}
}
}
Expand All @@ -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)}');
}
}
}
Expand All @@ -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)}');
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/component/radio/style/scheme/_sm.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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 {
Expand All @@ -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));
}
}
}
Expand All @@ -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));
}
}
}
Expand All @@ -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));
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/component/toggle/style/_scheme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

@include before {
@include color.text(active blue-france, (legacy:$legacy));
zellerbaptiste marked this conversation as resolved.
Show resolved Hide resolved
@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 {
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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);
}
}
}
Expand All @@ -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);
}
}
}
Expand Down