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

fix(styles): HCM on form validation icons #4319

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+133 −62
Open

fix(styles): HCM on form validation icons #4319

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
09d7688
fix(styles): HCM on form validation icons
leagrdv Dec 17, 2024
f2de445
Merge branch 'main' into 4284-hcm-align-form-validation-icon-color-in…
leagrdv Dec 17, 2024
edeea51
changes from PR comments
leagrdv Dec 17, 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
5 changes: 5 additions & 0 deletions .changeset/metal-geese-swim.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': patch
---

Fixed colors of validation icon in HCM on form elements.
8 changes: 1 addition & 7 deletions packages/styles/src/components/form-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,13 +192,7 @@ input.form-control {
}
}

&.is-valid:not(:disabled) {
background-image: forms.$valid-icon;
}

&.is-invalid:not(:disabled) {
background-image: forms.$invalid-icon;
}
@include forms-mx.validation-icons;
}

.form-label:has(+ input.form-control[disabled]) {
Expand Down
63 changes: 40 additions & 23 deletions packages/styles/src/components/form-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
@forward './../variables/options';

@use './../mixins/utilities';
@use './../mixins/forms';
@use './../functions/forms' as forms-fx;
@use './../functions/tokens';
@use './../tokens/components';
@use './../tokens/elements';
@use './../variables/components/forms';

tokens.$default-map: components.$post-select;

Expand All @@ -26,7 +27,7 @@ tokens.$default-map: components.$post-select;
border-color: tokens.get('select-color-enabled-border');
border-radius: tokens.get('select-border-radius');
color: tokens.get('select-color-enabled-fg');
@include forms.select-bg-image('enabled');
background-image: forms-fx.select-arrow-icon('enabled');

&:disabled {
opacity: 1;
Expand All @@ -36,7 +37,7 @@ tokens.$default-map: components.$post-select;
border-style: tokens.get('select-border-style-disabled');

&:not([multiple]) {
@include forms.select-bg-image('disabled');
background-image: forms-fx.select-arrow-icon('disabled');
}
}

Expand All @@ -45,7 +46,7 @@ tokens.$default-map: components.$post-select;
background-color: tokens.get('select-color-selected-bg');
color: tokens.get('select-color-selected-fg');
border-color: tokens.get('select-color-selected-border');
@include forms.select-bg-image('selected');
background-image: forms-fx.select-arrow-icon('selected');

@include utilities.focus-style;

Expand All @@ -60,7 +61,7 @@ tokens.$default-map: components.$post-select;
border-color: tokens.get('select-color-hover-border');

&:not([multiple]) {
@include forms.select-bg-image('hover');
background-image: forms-fx.select-arrow-icon('hover');
}

@include utilities.high-contrast-mode {
Expand Down Expand Up @@ -90,31 +91,47 @@ tokens.$default-map: components.$post-select;
}

&.is-valid:not(:disabled) {
@include forms.select-bg-image('enabled', 'valid');
background-image: forms-fx.select-arrow-icon('enabled'), forms.$valid-icon;

&:focus {
@include forms.select-bg-image('selected', 'valid');
background-image: forms-fx.select-arrow-icon('selected'), forms.$valid-icon;
}

&:hover {
&:not([multiple]) {
@include forms.select-bg-image('hover', 'valid');
background-image: forms-fx.select-arrow-icon('hover'), forms.$valid-icon;
}
}

@include utilities.high-contrast-mode-dark() {
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0') !important;
}

@include utilities.high-contrast-mode-light() {
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#333333') !important;
}
}

&.is-invalid:not(:disabled) {
@include forms.select-bg-image('enabled', 'invalid');
background-image: forms-fx.select-arrow-icon('enabled'), forms.$invalid-icon;

&:focus {
@include forms.select-bg-image('selected', 'invalid');
background-image: forms-fx.select-arrow-icon('selected'), forms.$invalid-icon;
}

&:hover {
&:not([multiple]) {
@include forms.select-bg-image('hover', 'invalid');
background-image: forms-fx.select-arrow-icon('hover'), forms.$invalid-icon;
}
}

@include utilities.high-contrast-mode-dark() {
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0') !important;
}

@include utilities.high-contrast-mode-light() {
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333') !important;
}
}

&[multiple],
Expand All @@ -127,11 +144,11 @@ tokens.$default-map: components.$post-select;
}

&.is-valid:not(:disabled) {
@include forms.select-bg-image($validation: 'valid');
background-image: forms.$valid-icon;
}

&.is-invalid:not(:disabled) {
@include forms.select-bg-image($validation: 'invalid');
background-image: forms.$invalid-icon;
}
}
}
Expand Down Expand Up @@ -224,43 +241,43 @@ tokens.$default-map: components.$post-select;

[data-color-scheme='dark'] {
.form-select:not([multiple]) {
@include forms.select-bg-image('enabled', null, 'dark');
background-image: forms-fx.select-arrow-icon('enabled', 'dark');

&:disabled {
@include forms.select-bg-image('disabled', null, 'dark');
background-image: forms-fx.select-arrow-icon('disabled', 'dark');
}

&:not(:disabled) {
&:focus {
@include forms.select-bg-image('selected', null, 'dark');
background-image: forms-fx.select-arrow-icon('selected', 'dark');
}

&:hover {
@include forms.select-bg-image('hover', null, 'dark');
background-image: forms-fx.select-arrow-icon('hover', 'dark');
}
}

&.is-valid:not(:disabled) {
@include forms.select-bg-image('enabled', 'valid', 'dark');
background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$valid-icon;

&:focus {
@include forms.select-bg-image('selected', 'valid', 'dark');
background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$valid-icon;
}

&:hover {
@include forms.select-bg-image('hover', 'valid', 'dark');
background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$valid-icon;
}
}

&.is-invalid:not(:disabled) {
@include forms.select-bg-image('enabled', 'invalid', 'dark');
background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$invalid-icon;

&:focus {
@include forms.select-bg-image('selected', 'invalid', 'dark');
background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$invalid-icon;
}

&:hover {
@include forms.select-bg-image('hover', 'invalid', 'dark');
background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$invalid-icon;
}
}
}
Expand Down
8 changes: 1 addition & 7 deletions packages/styles/src/components/form-textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,7 @@ textarea.form-control {
}
}

&.is-valid:not(:disabled) {
background-image: forms.$valid-icon;
}

&.is-invalid:not(:disabled) {
background-image: forms.$invalid-icon;
}
@include forms-mx.validation-icons;
}

.form-label:has(+ textarea.form-control[disabled]) {
Expand Down
43 changes: 42 additions & 1 deletion packages/styles/src/functions/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
@use 'sass:map';

@use './color';
@use '../functions/tokens';
@use '../functions/icons';
@use '../functions/utilities';
@use '../variables/components/forms';

// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
@function get-background-svg-stroke(
$type,
$color,
Expand All @@ -25,3 +30,39 @@
$svg-additional-attributes + " fill='none' stroke='" + #{color.encode-uri-color($color)} + "' stroke-width='" +
$stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute + ' /%3e%3c/svg%3e';
}

@function select-arrow-icon($state: null, $mode: 'light') {
// Hardcoded colors because CSS variables cannot be used as fill color of background-image
$arrow-color-map: (
'enabled-light': #050400,
'enabled-dark': #fff,
'hover-light': #504f4b,
'hover-dark': #fff,
'selected-light': #050400,
'selected-dark': #fff,
'disabled-light': #696864,
'disabled-dark': #fff,
);

@if ($state) {
$state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
}

@return $state;
}

@function encode-color($color) {
@return utilities.replace($color, '#', '%23');
}

@function valid-icon($color) {
$encoded-color: encode-color($color);
$icon: utilities.replace(forms.$valid-icon, '%23107800', $encoded-color);
@return $icon;
Comment on lines +59 to +60
Copy link
Contributor

Choose a reason for hiding this comment

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

There is a function you can used for that in packages/styles/src/functions/_icons.scss. It is called add-fill-color.

Copy link
Contributor Author

@leagrdv leagrdv Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

The thing is my variable is not a svg but a url('...'). I tried removing the url() wrapper but I get an error in the console telling me it's invalid and missing a ; and I don't get why. Do you have any idea why I get an error with that? And if I try to use it as it in the fill function, it does not work.

}

@function invalid-icon($color) {
$encoded-color: encode-color($color);
$icon: utilities.replace(forms.$invalid-icon, '%23B20000', $encoded-color);
@return $icon;
}
41 changes: 22 additions & 19 deletions packages/styles/src/mixins/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@use './../variables/components/forms';
@use './../mixins/utilities';
@use './../functions/icons';
@use './../functions/forms' as forms-fx;
@use './../functions/utilities' as utilities-fx;

// Placeholder in input fields
Expand Down Expand Up @@ -30,29 +31,31 @@
}
}

@mixin select-bg-image($state: null, $validation: null, $mode: 'light') {
// Hardcoded colors because CSS variables cannot be used as fill color of background-image
$arrow-color-map: (
'enabled-light': #050400,
'enabled-dark': #fff,
'hover-light': #504f4b,
'hover-dark': #fff,
'selected-light': #050400,
'selected-dark': #fff,
'disabled-light': #696864,
'disabled-dark': #fff,
);
// Used on form-input and form-textarea to set the correct colored validation icon
@mixin validation-icons() {
&.is-valid:not(:disabled) {
background-image: forms.$valid-icon;

@if ($validation == 'valid') {
$validation: forms.$valid-icon;
} @else if ($validation == 'invalid') {
$validation: forms.$invalid-icon;
@include utilities.high-contrast-mode-dark() {
background-image: forms-fx.valid-icon('#e0e0e0');
}

@include utilities.high-contrast-mode-light() {
background-image: forms-fx.valid-icon('#333333');
}
}

@if ($state) {
$state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
&.is-invalid:not(:disabled) {
background-image: forms.$invalid-icon;

@include utilities.high-contrast-mode-dark() {
background-image: forms-fx.invalid-icon('#e0e0e0');
}

@include utilities.high-contrast-mode-light() {
background-image: forms-fx.invalid-icon('#333333');
}
}
background-image: $state, $validation;
}

@mixin textarea-resizer-svg($color) {
Expand Down
14 changes: 14 additions & 0 deletions packages/styles/src/mixins/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,20 @@
}
}

@mixin high-contrast-mode-dark() {
@media (forced-colors: active) and (prefers-color-scheme: dark),
(-ms-high-contrast: white-on-black) {
@content;
}
}

@mixin high-contrast-mode-light() {
@media (forced-colors: active) and (prefers-color-scheme: light),
(-ms-high-contrast: black-on-white) {
@content;
}
}

@mixin not-disabled-focus-hover {
&:focus,
&:not(:disabled):hover,
Expand Down
Loading