From b89164d739304e93abe3b78e57bb9f7bace5c3ab Mon Sep 17 00:00:00 2001
From: Ali Stump <alisonailea@users.noreply.github.com>
Date: Thu, 10 Oct 2024 12:15:39 -0700
Subject: [PATCH] fix(chip): fix close icon color inconsistency (#10493)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**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">
---
 packages/calcite-components/.stylelintrc.cjs  |  8 +------
 .../src/assets/styles/includes.scss           |  8 +++++--
 .../src/components/chip/chip.scss             | 24 +++++++++----------
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 2e02214db54..0998dad6911 100644
--- 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
index 5470d9ebfba..5235536f57b 100644
--- 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
index e1ca4d68f02..302b9277ec2 100644
--- 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();