Skip to content

Commit

Permalink
fix(styles): update valid/invalid icons in form fields (#4368)
Browse files Browse the repository at this point in the history
  • Loading branch information
@leagrdv
leagrdv authored Jan 10, 2025
1 parent a9aadb7 commit c71bf5c
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 38 deletions.
5 changes: 5 additions & 0 deletions .changeset/neat-jars-destroy.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': patch
---

Uniformized valid and invalid icons throughout form elements for consistency.
33 changes: 16 additions & 17 deletions packages/styles/src/components/form-select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
@use './../functions/tokens';
@use './../tokens/components';
@use './../tokens/elements';
@use './../variables/components/forms';

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

Expand Down Expand Up @@ -92,53 +91,53 @@ tokens.$default-map: components.$post-select;
}

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

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

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

&,
&:hover:not([multiple]),
&:focus {
@include utilities.high-contrast-mode-dark() {
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0');
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.success-icon(#e0e0e0);
}

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

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

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

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

&,
&:hover:not([multiple]),
&:focus {
@include utilities.high-contrast-mode-dark() {
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0');
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon(#e0e0e0);
}

@include utilities.high-contrast-mode-light() {
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333');
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon(#333);
}
}
}
Expand Down Expand Up @@ -261,26 +260,26 @@ tokens.$default-map: components.$post-select;
}

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

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

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

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

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

&:hover {
background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$invalid-icon;
background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms-fx.warning-icon();
}
}
}
Expand Down
16 changes: 4 additions & 12 deletions packages/styles/src/functions/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,18 +51,10 @@
@return $state;
}

@function encode-color($color) {
@return utilities.replace($color, '#', '%23');
@function success-icon($color: #107800) {
@return url('#{icons.get-colored-svg-url('success', $color)}');
}

@function valid-icon($color) {
$encoded-color: encode-color($color);
$icon: utilities.replace(forms.$valid-icon, '%23107800', $encoded-color);
@return $icon;
}

@function invalid-icon($color) {
$encoded-color: encode-color($color);
$icon: utilities.replace(forms.$invalid-icon, '%23B20000', $encoded-color);
@return $icon;
@function warning-icon($color: #b20000) {
@return url('#{icons.get-colored-svg-url('warning', $color)}');
}
12 changes: 6 additions & 6 deletions packages/styles/src/mixins/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,26 +34,26 @@
// Used on form elements to set the correct colored validation icon
@mixin validation-icons() {
&.is-valid:not(:disabled) {
background-image: forms.$valid-icon;
background-image: forms-fx.success-icon();

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

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

&.is-invalid:not(:disabled) {
background-image: forms.$invalid-icon;
background-image: forms-fx.warning-icon();

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

@include utilities.high-contrast-mode-light() {
background-image: forms-fx.invalid-icon('#333333');
background-image: forms-fx.warning-icon(#333);
}
}
}
Expand Down
3 changes: 0 additions & 3 deletions packages/styles/src/variables/components/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,3 @@ $form-range-height: $form-range-thumb-height + $form-range-thumb-focus-box-shado
$form-range-input-height-ie: 6rem !default;

$form-floating-height: $input-height-lg * $input-line-height-lg;

$valid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
$invalid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");

0 comments on commit c71bf5c

Please sign in to comment.