fix(chip): fix close icon color inconsistency (#10493)

**Related Issue:** #10428 ## Summary Mitigates the --calcite-chip-close-icon-color token inconsistency. <img width="229" alt="Screenshot 2024-10-07 at 9 20 41 AM" src="https://github.com/user-attachments/assets/ec410639-2767-4c01-8479-c2e24801884d">
Esri · Oct 11, 2024 · b89164d · b89164d
1 parent 871344a
commit b89164d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
@@ -1,13 +1,7 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [
-  "get-trailing-text-input-padding",
-  "medium-modular-scale",
-  "modular-scale",
-  "scale-duration",
-  "small-modular-scale"
-];
+const customFunctions = [];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [

diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -153,7 +153,11 @@
   }
 }
 
-@mixin close-button($size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)", $padding: "0") {
+@mixin close-button(
+  $size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)",
+  $padding: "0",
+  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-1))"
+) {
   .close {
     @apply border-none
       cursor-pointer
@@ -168,7 +172,7 @@
     display: flex;
     align-content: center;
     justify-content: center;
-    color: var(--calcite-close-icon-color, var(--calcite-color-text-1));
+    color: #{$color};
     block-size: #{$size};
     inline-size: #{$size};
     padding: #{$padding};

diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
@@ -28,6 +28,7 @@
 :host([appearance="outline"]),
 :host([appearance="outline-fill"]) {
   .container {
+    --calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);
     color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
   }
 
@@ -42,10 +43,6 @@
   &:host([kind="neutral"]) .container {
     border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));
   }
-
-  .close {
-    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
-  }
 }
 :host([appearance="outline"]) .container {
   @apply bg-transparent;
@@ -86,11 +83,9 @@
   }
 }
 :host([kind="neutral"]) .container {
-  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
+  --calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);
 
-  .close {
-    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
-  }
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
 }
 
 :host([selected]) .select-icon {
@@ -391,14 +386,17 @@
   inline-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);
 }
 
-.close {
-  color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));
-}
-
 slot[name="image"]::slotted(*) {
   @apply rounded-half flex h-full w-full overflow-hidden;
 }
 
-@include close-button();
+@include close-button(
+  var(--calcite-internal-close-size, 1.5rem),
+  0,
+  var(
+    --calcite-chip-close-icon-color,
+    var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color, var(--calcite-color-text-1)))
+  )
+);
 @include disabled();
 @include base-component();