fix(styles): refactor icons declarations

swisspost · Aug 29, 2024 · 4311dc9 · 4311dc9
1 parent 4c49103
commit 4311dc9
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 24 deletions.
diff --git a/.changeset/warm-walls-stare.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
diff --git 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
@@ -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;