From a128b44c7a22ab98506529e7ddcfa320393dcc41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Sch=C3=A4r?= <59233938+schaertim@users.noreply.github.com> Date: Thu, 29 Aug 2024 10:23:02 +0200 Subject: [PATCH] fix(styles): refactor icons declarations --- .changeset/warm-walls-stare.md | 5 +++++ .../src/variables/components/_accordion.scss | 9 ++++++--- .../src/variables/components/_close.scss | 6 ++++-- .../src/variables/components/_form-check.scss | 1 - .../src/variables/components/_form-select.scss | 12 ++++++++---- .../variables/components/_form-validation.scss | 18 ++++++++++++------ 6 files changed, 35 insertions(+), 16 deletions(-) create mode 100644 .changeset/warm-walls-stare.md diff --git a/.changeset/warm-walls-stare.md b/.changeset/warm-walls-stare.md new file mode 100644 index 0000000000..8ec7a47d0a --- /dev/null +++ b/.changeset/warm-walls-stare.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Refactored icon declarations to comply with Angular 18's new build system requirements. diff --git a/packages/styles/src/variables/components/_accordion.scss b/packages/styles/src/variables/components/_accordion.scss index c6214c4ad2..3ff261af71 100644 --- a/packages/styles/src/variables/components/_accordion.scss +++ b/packages/styles/src/variables/components/_accordion.scss @@ -50,9 +50,12 @@ $accordion-button-hover-color: color.$black !default; $accordion-button-font-weight: type.$font-weight-bold !default; $accordion-button-line-height: type.$line-height-copy !default; $accordion-icon-width: spacing.$size-large !default; -$accordion-button-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-color)}'); -$accordion-button-active-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-active-color)}'); -$accordion-hcm-icon: url('#{icons.get-colored-svg-url(2113, color.$white)}'); +$_accordion-button-icon: icons.get-colored-svg-url(2113, $accordion-button-color); +$_accordion-button-active-icon: icons.get-colored-svg-url(2113, $accordion-button-active-color); +$_accordion-hcm-icon: icons.get-colored-svg-url(2113, color.$white); +$accordion-button-icon: url('#{$_accordion-button-icon}'); +$accordion-button-active-icon: url('#{$_accordion-button-active-icon}'); +$accordion-hcm-icon: url('#{$_accordion-hcm-icon}'); $accordion-header-font-curve: 'regular' !default; $accordion-heading-margin: spacing.$size-bigger-big 0 0 !default; $accordion-heading-font-curve: $accordion-header-font-curve !default; diff --git a/packages/styles/src/variables/components/_close.scss b/packages/styles/src/variables/components/_close.scss index 18e063a0ec..3d90175653 100644 --- a/packages/styles/src/variables/components/_close.scss +++ b/packages/styles/src/variables/components/_close.scss @@ -15,7 +15,9 @@ $btn-close-width: spacing.$size-large !default; $btn-close-height: $btn-close-width !default; $btn-close-padding-x: spacing.$size-regular !default; $btn-close-color: color.$black !default; -$btn-close-bg: url('#{icons.get-colored-svg-url('2043', $btn-close-color)}') !default; -$btn-close-hcm-bg: url('#{icons.get-colored-svg-url('2043', color.$white)}') !default; +$_btn-close-bg: icons.get-colored-svg-url(2043, $btn-close-color); +$_btn-close-hcm-bg: icons.get-colored-svg-url(2043, color.$white); +$btn-close-bg: url('#{$_btn-close-bg}') !default; +$btn-close-hcm-bg: url('#{$_btn-close-hcm-bg}') !default; $btn-close-opacity: 0.5 !default; $btn-close-hover-opacity: 0.75 !default; diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss index bd9edd9d08..7ce716a88c 100644 --- a/packages/styles/src/variables/components/_form-check.scss +++ b/packages/styles/src/variables/components/_form-check.scss @@ -107,7 +107,6 @@ $form-switch-disabled-border-color: color.$gray-40 !default; $form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default; // DEPRECATED - $form-switch-padding-start: 0 !default; $form-switch-bg-image: url("data:image/svg+xml,") !default; $form-switch-border-radius: $form-switch-width !default; diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss index 574b5bd16d..f243bf7fd4 100644 --- a/packages/styles/src/variables/components/_form-select.scss +++ b/packages/styles/src/variables/components/_form-select.scss @@ -7,7 +7,11 @@ $form-select-disabled-color: forms.$input-disabled-color; $form-select-disabled-bg: forms.$input-disabled-bg; $form-select-disabled-border-color: color.$gray-40; $form-select-indicator-color: color.$black; -$form-select-indicator: url('#{icons.get-colored-svg-url('2113', $form-select-indicator-color)}') !default; -$form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-border-color)}') !default; -$form-select-indicator-hcm-dark: url('#{icons.get-colored-svg-url('2113', color.$white)}') !default; -$form-select-indicator-hcm-light: url('#{icons.get-colored-svg-url('2113', color.$black)}') !default; +$_form-select-indicator: icons.get-colored-svg-url(2113, $form-select-indicator-color); +$_form-select-indicator-disabled: icons.get-colored-svg-url(2113, $form-select-disabled-border-color); +$_form-select-indicator-hcm-dark: icons.get-colored-svg-url(2113, color.$white); +$_form-select-indicator-hcm-light: icons.get-colored-svg-url(2113, color.$black); +$form-select-indicator: url('#{$_form-select-indicator}') !default; +$form-select-indicator-disabled: url('#{$_form-select-indicator-disabled}') !default; +$form-select-indicator-hcm-dark: url('#{$_form-select-indicator-hcm-dark}') !default; +$form-select-indicator-hcm-light: url('#{$_form-select-indicator-hcm-light}') !default; \ No newline at end of file diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss index 6df46f5530..4b84c6920d 100644 --- a/packages/styles/src/variables/components/_form-validation.scss +++ b/packages/styles/src/variables/components/_form-validation.scss @@ -11,12 +11,18 @@ $form-feedback-margin-top: 0 !default; $form-feedback-font-size: type.$font-size-12 !default; $form-feedback-valid-color: color.$gray-60 !default; $form-feedback-invalid-color: color.$error !default; -$form-feedback-icon-valid: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default; -$form-feedback-icon-valid-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default; -$form-feedback-icon-valid-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default; -$form-feedback-icon-invalid: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default; -$form-feedback-icon-invalid-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default; -$form-feedback-icon-invalid-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default; +$_form-feedback-icon-valid: icons.get-colored-svg-url(2105, color.$success); +$_form-feedback-icon-valid-hcm-dark: icons.get-colored-svg-url(2105, color.$white); +$_form-feedback-icon-valid-hcm-light: icons.get-colored-svg-url(2105, color.$black); +$_form-feedback-icon-invalid: icons.get-colored-svg-url(2104, color.$error); +$_form-feedback-icon-invalid-hcm-dark: icons.get-colored-svg-url(2104, color.$white); +$_form-feedback-icon-invalid-hcm-light: icons.get-colored-svg-url(2104, color.$black); +$form-feedback-icon-valid: url('#{$_form-feedback-icon-valid}') !default; +$form-feedback-icon-valid-hcm-dark: url('#{$_form-feedback-icon-valid-hcm-dark}') !default; +$form-feedback-icon-valid-hcm-light: url('#{$_form-feedback-icon-valid-hcm-light}') !default; +$form-feedback-icon-invalid: url('#{$_form-feedback-icon-invalid}') !default; +$form-feedback-icon-invalid-hcm-dark: url('#{$_form-feedback-icon-invalid-hcm-dark}') !default; +$form-feedback-icon-invalid-hcm-light: url('#{$_form-feedback-icon-invalid-hcm-light}') !default; // Design System custom variables $form-feedback-padding-x: spacing.$size-regular !default;