fix(styles): update icon url definitions (#3123)

swisspost · Jun 3, 2024 · a9cce57 · a9cce57
1 parent 3d3e18e
commit a9cce57
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 63 deletions.
diff --git a/.changeset/metal-rivers-suffer.md b/.changeset/metal-rivers-suffer.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed an issue with icon URL declarations when building styles with esbuild.
diff --git a/packages/styles/src/mixins/_animation.scss b/packages/styles/src/mixins/_animation.scss
@@ -36,13 +36,10 @@
   &:not(:disabled):not(.disabled) > span {
     &::after {
       @if ($stroke-width == null) {
-        background-image: url(icons.get-colored-svg-url($icon-name, $color));
+        background-image: url('#{icons.get-colored-svg-url($icon-name, $color)}');
       } @else {
-        background-image: url(icons.add-stroke-color(
-          icons.get-colored-svg-url($icon-name, $color),
-          $color,
-          $stroke-width
-        ));
+        $icon: icons.get-colored-svg-url($icon-name, $color);
+        background-image: url('#{icons.add-stroke-color($icon, $color, $stroke-width)}');
       }
     }
   }

diff --git a/packages/styles/src/mixins/_form-checks.scss b/packages/styles/src/mixins/_form-checks.scss
@@ -12,23 +12,14 @@
 
 @mixin form-check-icons($color) {
   &[type='radio']:checked {
-    background-image: url(icons.add-fill-color(
-      form-check.$form-check-radio-checked-bg-icon,
-      $color
-    ));
+    background-image: url('#{icons.add-fill-color(form-check.$form-check-radio-checked-bg-icon, $color)}');
   }
 
   &[type='checkbox']:checked {
-    background-image: url(icons.get-colored-svg-url(
-      form-check.$form-check-input-checked-bg-icon,
-      $color
-    ));
+    background-image: url('#{icons.get-colored-svg-url(form-check.$form-check-input-checked-bg-icon, $color)}');
   }
 
   &[type='checkbox']:indeterminate {
-    background-image: url(icons.get-colored-svg-url(
-      form-check.$form-check-input-indeterminate-bg-icon,
-      $color
-    ));
+    background-image: url('#{icons.get-colored-svg-url(form-check.$form-check-input-indeterminate-bg-icon, $color)}');
   }
 }
diff --git a/packages/styles/src/variables/components/_accordion.scss b/packages/styles/src/variables/components/_accordion.scss
@@ -50,12 +50,9 @@ $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-chevron: icons.get-colored-svg-url(2113, $accordion-button-color);
-$_accordion-active-chevron: icons.get-colored-svg-url(2113, $accordion-button-active-color);
-$_accordion-hcm-chevron: icons.get-colored-svg-url(2113, color.$white);
-$accordion-button-icon: url($_accordion-chevron);
-$accordion-button-active-icon: url($_accordion-active-chevron);
-$accordion-hcm-icon: url($_accordion-hcm-chevron);
+$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-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,9 +15,7 @@ $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-icon-url: icons.get-colored-svg-url('2043', $btn-close-color) !default;
-$_btn-close-icon-hcm-url: icons.get-colored-svg-url('2043', color.$white) !default;
-$btn-close-bg: url($_btn-close-icon-url) !default;
-$btn-close-hcm-bg: url($_btn-close-icon-hcm-url) !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-opacity: 0.5 !default;
 $btn-close-hover-opacity: 0.75 !default;
diff --git a/packages/styles/src/variables/components/_form-select.scss b/packages/styles/src/variables/components/_form-select.scss
@@ -7,31 +7,15 @@ $form-select-disabled-color: forms.$input-disabled-color;
 $form-select-disabled-bg: forms.$input-disabled-bg;
 $form-select-disabled-border-color: forms.$input-disabled-border-color;
 $form-select-indicator-color: color.$black;
-$_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
-$form-select-indicator: url($_form-select-indicator-icon) !default;
-$form-select-indicator-disabled: url(icons.get-colored-svg-url(
-  '2113',
-  $form-select-disabled-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: 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-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-success: url(icons.get-colored-svg-url('2105', color.$success)) !default;
-$form-select-indicator-success-hcm-dark: url(icons.get-colored-svg-url(
-  '2105',
-  color.$white
-)) !default;
-$form-select-indicator-success-hcm-light: url(icons.get-colored-svg-url(
-  '2105',
-  color.$black
-)) !default;
+$form-select-indicator-success: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default;
+$form-select-indicator-success-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default;
+$form-select-indicator-success-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default;
 
-$form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error)) !default;
-$form-select-indicator-error-hcm-dark: url(icons.get-colored-svg-url(
-  '2104',
-  color.$white
-)) !default;
-$form-select-indicator-error-hcm-light: url(icons.get-colored-svg-url(
-  '2104',
-  color.$black
-)) !default;
+$form-select-indicator-error: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default;
+$form-select-indicator-error-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default;
+$form-select-indicator-error-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default;
diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
@@ -10,15 +10,12 @@ $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: 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;
 
 // Design System custom variables
 $form-feedback-padding-x: button.$input-btn-padding-x !default;