fix(chip): inverse close color

Esri · Jan 22, 2025 · 8e94d66 · 8e94d66
1 parent 2555a61
commit 8e94d66
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
@@ -76,6 +76,15 @@
     .container {
       background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));
     }
+
+    .close {
+      &:hover {
+        background-color: var(--calcite-color-inverse-hover);
+      }
+      &:active {
+        background-color: var(--calcite-color-inverse-press);
+      }
+    }
   }
 
   &:host([kind="neutral"]) .container {
@@ -393,10 +402,7 @@ slot[name="image"]::slotted(*) {
 @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)))
-  )
+  var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor))
 );
 @include disabled();
 @include base-component();
diff --git a/packages/calcite-components/src/components/chip/chip.stories.ts b/packages/calcite-components/src/components/chip/chip.stories.ts
@@ -103,11 +103,60 @@ export const withAvatarAndIcon = (): string => {
   `;
 };
 
+// <div style="background-color:var(--calcite-color-foreground-current); padding:50px; display=inline-grid; grid-template-columns: 1fr; gap:var(--calcite-spacing-xxs);">
+
 export const withClosable = (args: ChipStoryArgs): string => html`
-  <div style="background-color:white;padding:100px">
+  <div
+    style="display: grid; background-color:var(--calcite-color-foreground-current); padding: 50px; gap:var(--calcite-spacing-xxs);"
+  >
     <calcite-chip icon="${iconNames[0]}" scale="m" appearance="solid" kind="neutral" label="${args.label}" closable>
       My great chip</calcite-chip
     >
+    <calcite-chip icon="${iconNames[0]}" scale="m" appearance="solid" kind="brand" label="${args.label}" closable>
+      My great chip</calcite-chip
+    >
+    <calcite-chip icon="${iconNames[0]}" scale="m" appearance="solid" kind="inverse" label="${args.label}" closable>
+      My great chip</calcite-chip
+    >
+    <calcite-chip icon="${iconNames[0]}" scale="m" appearance="outline" kind="neutral" label="${args.label}" closable>
+      My great chip</calcite-chip
+    >
+    <calcite-chip icon="${iconNames[0]}" scale="m" appearance="outline" kind="brand" label="${args.label}" closable>
+      My great chip</calcite-chip
+    >
+    <calcite-chip icon="${iconNames[0]}" scale="m" appearance="outline" kind="inverse" label="${args.label}" closable>
+      My great chip</calcite-chip
+    >
+    <calcite-chip
+      icon="${iconNames[0]}"
+      scale="m"
+      appearance="outline-fill"
+      kind="neutral"
+      label="${args.label}"
+      closable
+    >
+      My great chip</calcite-chip
+    >
+    <calcite-chip
+      icon="${iconNames[0]}"
+      scale="m"
+      appearance="outline-fill"
+      kind="brand"
+      label="${args.label}"
+      closable
+    >
+      My great chip</calcite-chip
+    >
+    <calcite-chip
+      icon="${iconNames[0]}"
+      scale="m"
+      appearance="outline-fill"
+      kind="inverse"
+      label="${args.label}"
+      closable
+    >
+      My great chip</calcite-chip
+    >
   </div>
 `;