From 4311dc9afe93c3ad654abc9061e9853e6dc3d4f1 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/_datatable.scss | 12 ++++++++---- .../src/variables/components/_form-check.scss | 9 ++++++--- .../src/variables/components/_form-select.scss | 12 ++++++++---- .../variables/components/_form-validation.scss | 18 ++++++++++++------ .../src/variables/components/_stepper.scss | 6 ++++-- 8 files changed, 53 insertions(+), 24 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/_datatable.scss b/packages/styles/src/variables/components/_datatable.scss index 23d7f45706..9e135ec510 100644 --- a/packages/styles/src/variables/components/_datatable.scss +++ b/packages/styles/src/variables/components/_datatable.scss @@ -43,7 +43,11 @@ $datatable-progressbar-backgroundcolor: color.$gray-10; $datatable-progressbar-activecolor: color.$yellow; // DEPRECATED -$datatable-sort-asc-icon: url('#{icons.get-colored-svg-url('2112', color.$gray-80)}'); -$datatable-sort-desc-icon: url('#{icons.get-colored-svg-url('2113', color.$gray-80)}'); -$datatable-sort-unset-icon: url('#{icons.get-colored-svg-url('2127', color.$gray-80)}'); -$datatable-editable-icon: url('#{icons.get-colored-svg-url('3193', color.$gray-80)}'); +$_datatable-sort-asc-icon: icons.get-colored-svg-url('2112', color.$gray-80); +$_datatable-sort-desc-icon: icons.get-colored-svg-url('2113', color.$gray-80); +$_datatable-sort-unset-icon: icons.get-colored-svg-url('2127', color.$gray-80); +$_datatable-editable-icon: icons.get-colored-svg-url('3193', color.$gray-80); +$datatable-sort-asc-icon: url('#{$_datatable-sort-asc-icon}'); +$datatable-sort-desc-icon: url('#{$_datatable-sort-desc-icon}'); +$datatable-sort-unset-icon: url('#{$_datatable-sort-unset-icon}'); +$datatable-editable-icon: url('#{$_datatable-editable-icon}'); diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss index a108168130..d123f7c427 100644 --- a/packages/styles/src/variables/components/_form-check.scss +++ b/packages/styles/src/variables/components/_form-check.scss @@ -126,14 +126,17 @@ $form-check-input-checked-color: forms.$input-focus-border-color !default; $form-check-input-checked-bg-color: transparent !default; $form-check-input-checked-border-color: $form-check-input-checked-color !default; $form-check-input-checked-bg-icon: 3035 !default; -$form-check-input-checked-bg-image: url('#{icons.get-colored-svg-url($form-check-input-checked-bg-icon, $form-check-input-checked-color)}') !default; +$_form-check-input-checked-bg-image: icons.get-colored-svg-url($form-check-input-checked-bg-icon, $form-check-input-checked-color); +$form-check-input-checked-bg-image: url('#{$_form-check-input-checked-bg-image}') !default; $form-check-radio-checked-bg-icon: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 6 6'%3E%3Ccircle r='2'%3E%3C/circle%3E%3C/svg%3E" !default; -$form-check-radio-checked-bg-image: url('#{icons.add-fill-color($form-check-radio-checked-bg-icon, $form-check-input-checked-color)}') !default; +$_form-check-radio-checked-bg-image: icons.add-fill-color($form-check-radio-checked-bg-icon, $form-check-input-checked-color); +$form-check-radio-checked-bg-image: url('#{$_form-check-radio-checked-bg-image}') !default; $form-check-input-indeterminate-color: $form-check-input-checked-color !default; $form-check-input-indeterminate-bg-color: transparent !default; $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-color !default; $form-check-input-indeterminate-bg-icon: 2039 !default; -$form-check-input-indeterminate-bg-image: url('#{icons.get-colored-svg-url($form-check-input-indeterminate-bg-icon, $form-check-input-indeterminate-color)}') !default; +$_form-check-input-indeterminate-bg-image: icons.get-colored-svg-url($form-check-input-indeterminate-bg-icon, $form-check-input-indeterminate-color); +$form-check-input-indeterminate-bg-image: url('#{$_form-check-input-indeterminate-bg-image}') !default; $form-check-inline-margin-end: spacing.$size-large !default; $form-check-label-cursor: pointer !default; $form-check-label-color: forms.$form-label-color !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; diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss index 1f81269a34..8f7a72468c 100644 --- a/packages/styles/src/variables/components/_stepper.scss +++ b/packages/styles/src/variables/components/_stepper.scss @@ -39,7 +39,9 @@ $stepper-link-hover-color: $stepper-link-color; $stepper-indicator-hover-outline: spacing.$size-line solid var(--post-focus-color); $stepper-indicator-font-size: type.$font-size-16; $stepper-link-current-font-size: type.$font-size-16; -$stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepper-indicator-color)}'); -$stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url('2105',$stepper-indicator-hover-color)}'); +$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url(2105, $stepper-indicator-color); +$_stepper-indicator-hover-check-icon: icon-fn.get-colored-svg-url(2105, $stepper-indicator-hover-color); +$stepper-indicator-check-icon: url('#{$_stepper-indicator-check-icon}'); +$stepper-indicator-hover-check-icon: url('#{$_stepper-indicator-hover-check-icon}'); $stepper-indicator-height: $stepper-indicator-size; $stepper-indicator-check-icon-size: $stepper-indicator-check-size;