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

✨ feat(preference): mode contrasté windows & animation réduite [DS-3773] #929

Merged
merged 20 commits into from
Jun 4, 2024
Merged

✨ feat(preference): mode contrasté windows & animation réduite [DS-3773] #929

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
6e23d29
feat(preference): ajout mixins de preference
keryanS Mar 27, 2024
83c060e
feat(contrast): ajout de versions contrastées
keryanS Mar 29, 2024
e4c95e6
fix(contrast): multiple composants
keryanS Apr 16, 2024
b25cd97
feat(preference): contraste multiples composants
keryanS Apr 24, 2024
3b506de
feat(contrast): summary tag core
keryanS Apr 26, 2024
4657b65
feat(contrast): modal tile transcription artwork
keryanS Apr 29, 2024
a922855
feat(contrast) logo artwork
keryanS Apr 29, 2024
82255d5
fix(contrast): review composants
keryanS May 2, 2024
0235eaf
fix(contrast): tag, tab, link, tile
keryanS May 2, 2024
792d934
fix: majuscule sur le nom des variables de couleurs
keryanS May 21, 2024
f9bd1df
Update src/component/alert/style/_module.scss
keryanS May 21, 2024
42ddf9f
fix: propriétés inutiles
keryanS May 21, 2024
0449b9b
fix: nom variables en minuscule
keryanS May 21, 2024
f6b7a17
fix: lint
keryanS May 21, 2024
e6012b7
fix(contrast): header link button message range toggle translate
keryanS May 24, 2024
a0f0bb3
Merge branch 'dev-1.12.0' into feat/preference-high-contrast
keryanS May 30, 2024
17cf0c6
fix(tile, card): button icon disabled
keryanS May 30, 2024
20c4699
Merge branch 'dev-1.12.0' into feat/preference-high-contrast
keryanS May 31, 2024
2a30095
fix(preference, table): ajout contraste sur table v2 et notice
keryanS May 31, 2024
a79321d
Merge branch 'dev-1.12.0' into feat/preference-high-contrast
keryanS Jun 4, 2024
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
4 changes: 4 additions & 0 deletions module/preference/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@forward 'mixin/contrast';
@forward 'mixin/forced-colors';
@forward 'mixin/motion';
@forward 'mixin/transparency';
17 changes: 17 additions & 0 deletions module/preference/mixin/_contrast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/// Mixin de contraste
/// @param {string} $contrast - more ou less
/// @example scss -
/// pour un contraste plus élevé :
/// @include contrast() {
/// // your styles
/// }
/// ou pour un contraste moins élevé :
/// @include contrast(less) {
/// // your styles
/// }

@mixin contrast($contrast: more) {
keryanS marked this conversation as resolved.
Show resolved Hide resolved
@media (prefers-contrast: $contrast) {
@content;
}
}
13 changes: 13 additions & 0 deletions module/preference/mixin/_forced-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/// Mixin de contraste pour le windows high contrast mode
/// @param {string} $active - active ou none
/// @example scss -
/// pour un contraste plus élevé
/// @include forced-colors() {
/// // your styles
/// }

@mixin forced-colors($active: active) {
keryanS marked this conversation as resolved.
Show resolved Hide resolved
@media (-ms-high-contrast: $active), (forced-colors: $active) {
@content;
}
}
11 changes: 11 additions & 0 deletions module/preference/mixin/_motion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/// Mixin pour reduire les animations
/// @example scss -
/// @include reduce-motion() {
/// // your styles
/// }

@mixin reduce-motion() {
@media (prefers-reduced-motion: reduce) {
@content;
}
}
13 changes: 13 additions & 0 deletions module/preference/mixin/_transparency.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/// Mixin de préférence de transparence
/// @param {string} $active - active ou none
/// @example scss -
/// // pour une réduction de la transparence
/// @include reduce-transparency() {
/// // your styles
/// }

@mixin reduce-transparency($active: active) {
@media (prefers-reduced-transparency: reduce) {
@content;
}
}
17 changes: 17 additions & 0 deletions src/component/accordion/style/_module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
////

@use 'module/animate';
@use 'module/preference';

#{ns(accordion)} {
position: relative;
Expand Down Expand Up @@ -34,6 +35,7 @@
text-align: left;
@include margin(0);
@include animate.caret();
@include icon-forced-color(ButtonText, false, after);

@include after {
@include margin-right(0);
Expand All @@ -48,11 +50,26 @@

transition: visibility 0.3s, padding 0.3s;

@include preference.reduce-motion {
transition: none;
zellerbaptiste marked this conversation as resolved.
Show resolved Hide resolved
}

&--expanded {
@include padding-top(4v);
@include padding-bottom(6v);
}
}

@include preference.forced-colors {
border-top: 1px solid;
border-bottom: 1px solid;
}

& + #{ns(accordion)} {
@include preference.forced-colors {
border-top: none;
}
}
}

#{ns-group(accordions)} {
Expand Down
10 changes: 10 additions & 0 deletions src/component/alert/style/_module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
////

@use 'module/spacing';
@use 'module/preference';

#{ns(alert)} {
@include relative();
Expand All @@ -19,11 +20,20 @@
@include margin(4v 2v);
}

@include preference.forced-colors {
outline: 1px solid;
@include before {
background-color: canvastext;
keryanS marked this conversation as resolved.
Show resolved Hide resolved
left: 8px;
}
}

&__title {
@include title-style(h6);
}

#{ns(btn--close)} {
forced-color-adjust: auto;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

c'est pas la valeur pas défaut ?
=> inutile il me semble

@include absolute(1v,1v);
@include nest-btn(sm, only, close-line, null, false);
}
Expand Down
4 changes: 4 additions & 0 deletions src/component/badge/style/module/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
////

@use 'module/spacing';
@use 'module/preference';

@include build-badge();

Expand All @@ -14,6 +15,9 @@
@include max-width(100%);
text-transform: uppercase;
border-radius: spacing.space(1v);
@include preference.forced-colors {
outline: 1px solid;
}

&--sm {
@include nest-badge(sm, left, null, null, false);
Expand Down
3 changes: 2 additions & 1 deletion src/component/button/style/_setting.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,6 @@ $btn-settings:(
places: only left right,
display: flex,
align-on-content: true,
blank: true
blank: true,
forced-color: ButtonText
);
17 changes: 17 additions & 0 deletions src/component/button/style/module/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,23 @@
/// @group button
////

@use 'module/preference';

@include build-btn() {
@include font-weight(medium);
@include icon-forced-color(ButtonText);
}

button#{ns(btn)} {
@include preference.forced-colors {
border: 1px solid ButtonText;
}
}

a[href]#{ns(btn)} {
@include icon-forced-color(LinkText);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Les boutons avec markup a href ne devraient-ils pas avoir une bordure comme les autres boutons en mode haut contraste ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Il vaut mieux, je pense, privilégier la compréhension que le design. Donc le traiter comme un lien.

}

a:not([href])#{ns(btn)} {
@include icon-forced-color(grayText);
keryanS marked this conversation as resolved.
Show resolved Hide resolved
}
7 changes: 7 additions & 0 deletions src/component/callout/style/_module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
////

@use 'module/spacing';
@use 'module/preference';

#{ns(callout)} {
@include relative();
Expand All @@ -16,6 +17,12 @@
background-position: 0 0;
background-repeat: no-repeat;

@include preference.forced-colors {
border-left: 4px solid;
@include padding-left(5v);
@include padding-left(11v, md);
}

/**
* Inclusion de l'icône (optionnel)
*/
Expand Down
19 changes: 19 additions & 0 deletions src/component/card/style/module/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
/// @group card
////

@use 'module/preference';

#{ns(card)} {
&__content {
order: 1;
Expand All @@ -21,10 +23,21 @@
@include icon(arrow-right-line, sm, after) {
@include margin-left(2v);
}
@include icon-forced-color(LinkText, true, after);

@include preference.forced-colors {
text-decoration: underline;
text-underline-offset: 5px;
}

&:not([href]) {
@include icon-forced-color(grayText, null, after);
keryanS marked this conversation as resolved.
Show resolved Hide resolved
}
}

@include target-blank {
@include icon(external-link-line, sm, after);
@include icon-forced-color(LinkText, null, after);
}
}

Expand Down Expand Up @@ -79,4 +92,10 @@
&#{ns(enlarge-link)}:not(&--no-icon) &__content {
@include padding-bottom(20v); // 8v (padding card) + 6v (icon) + 2v (padding end) + 4v (marge texte icon)
}

&#{ns(enlarge-link)} &__title a {
@include preference.forced-colors {
text-decoration: none;
}
}
}
5 changes: 5 additions & 0 deletions src/component/card/style/module/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@
/// @group card
////

@use 'module/preference';

#{ns(card)} {
@include display-flex(column);
@include relative();
@include preference.forced-colors {
border: 1px solid;
}

&#{ns(enlarge-link)} {
#{ns(card)}__title {
Expand Down
5 changes: 5 additions & 0 deletions src/component/card/style/module/_download.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@

#{ns(card__title a)} {
@include icon(download-line, null, after);
@include icon-forced-color(LinkText, null, after);

&:not([href]) {
@include icon-forced-color(grayText, null, after);
keryanS marked this conversation as resolved.
Show resolved Hide resolved
}
}

&#{ns(enlarge-link)} {
Expand Down
19 changes: 17 additions & 2 deletions src/component/checkbox/style/_module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

@use 'module/spacing';
@use 'module/selector';
@use 'module/preference';
@use 'module/disabled';

#{selector.ns(checkbox-group)} {
@include relative;
Expand All @@ -15,13 +17,22 @@
@include size(6v, 6v);
opacity: 0;

@include preference.forced-colors {
opacity: 1;

@include disabled.selector {
zellerbaptiste marked this conversation as resolved.
Show resolved Hide resolved
+ label {
color: GrayText;
}
}
}

+ label {
--data-uri-svg: none;
@include relative;
@include display-flex(row, center, flex-start, wrap);
@include margin-left(8v);

--data-uri-svg: none;

#{selector.ns(hint-text)} {
@include margin(0);
@include size(100%);
Expand All @@ -39,6 +50,10 @@
background-position: 0 0, spacing.space(1v) 0, 100% 0, 0 spacing.space(1v), 100% 100%, spacing.space(calc(100% - 1v)) 100%, 0 100%, 100% spacing.space(1v), center;
background-repeat: no-repeat;
// transition: background-color 0.1s, color 0.1s;

@include preference.forced-colors {
display: none;
}
}
}
}
Expand Down
9 changes: 9 additions & 0 deletions src/component/connect/style/module/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
////

@use 'module/spacing';
@use 'module/preference';

#{ns(connect)} {
@include relative;
Expand All @@ -14,6 +15,10 @@
@include enable-tint;
@include hover-tint;

@include preference.forced-colors {
border: 1px solid;
}

@include before('', block) {
@include absolute(50%, null, 0.25em, 0.75em, 2.5em, 3em);
@include margin-top(-1.5em);
Expand All @@ -30,6 +35,10 @@
line-height: 1;
@include z-index(over);
white-space: nowrap;

@include preference.forced-colors {
line-height: 1.1;
}
}

&__login {
Expand Down
6 changes: 6 additions & 0 deletions src/component/connect/style/module/_plus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
////

@use 'module/spacing';
@use 'module/preference';

#{ns(connect)} {
&--plus {
Expand All @@ -15,6 +16,11 @@
font-weight: bold;
line-height: 1;
transform: translate(5%, -17%);

@include preference.forced-colors {
forced-color-adjust: none;
color: buttonText;
keryanS marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
}
5 changes: 5 additions & 0 deletions src/component/consent/style/module/_banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
////

@use 'module/spacing';
@use 'module/preference';

#{ns(consent-banner)} {
@include fixed(null, null, 0, 0, 100%);
Expand All @@ -13,6 +14,10 @@
@include set-text-margin(0 0 4v);
@include set-title-margin(0 0 4v);

@include preference.forced-colors {
outline: 1px solid;
}

@include respond-from(md) {
@include padding(8v);
bottom: spacing.space(10v);
Expand Down
Loading