remove tokens for calcite-chip

Esri · Mar 4, 2025 · fd64355 · fd64355
1 parent e4dfd81
commit fd64355
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 45 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -3024,31 +3024,6 @@ describe("calcite-combobox", () => {
           selector: "calcite-combobox",
           targetProp: "backgroundColor",
         },
-        "--calcite-combobox-chip-background-color": {
-          shadowSelector: `.${CSS.chip}`,
-          selector: "calcite-combobox",
-          targetProp: "--calcite-chip-background-color",
-        },
-        "--calcite-combobox-chip-close-icon-color": {
-          shadowSelector: `.${CSS.chip}`,
-          selector: "calcite-combobox",
-          targetProp: "--calcite-chip-close-icon-color",
-        },
-        "--calcite-combobox-chip-corner-radius": {
-          shadowSelector: `.${CSS.chip}`,
-          selector: "calcite-combobox",
-          targetProp: "--calcite-chip-corner-radius",
-        },
-        "--calcite-combobox-chip-icon-color": {
-          shadowSelector: `.${CSS.chip}`,
-          selector: "calcite-combobox",
-          targetProp: "--calcite-chip-icon-color",
-        },
-        "--calcite-combobox-chip-text-color": {
-          shadowSelector: `.${CSS.chip}`,
-          selector: "calcite-combobox",
-          targetProp: "--calcite-chip-text-color",
-        },
         "--calcite-combobox-item-group-text-color": {
           selector: "calcite-combobox-item-group",
           shadowSelector: ".title",

diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -11,12 +11,7 @@
  * @prop --calcite-combobox-icon-color-hover: Specifies the component's icon color when hovered.
  * @prop --calcite-combobox-placeholder-icon-color: Specifies the component's placeholder icon color.
  * @prop --calcite-combobox-listbox-background-color: Specifies the background color of the component's listbox.
- * @prop --calcite-combobox-chip-background-color: Specifies the background color of the component's chips.
  * @prop --calcite-combobox-chip-background-color-active: Specifies the background color of the component's chips when close icon is focused with Arrow keys.
- * @prop --calcite-combobox-chip-close-icon-color: Specifies the close icon color of the component's chips.
- * @prop --calcite-combobox-chip-corner-radius: Specifies the corner radius of the component's chips.
- * @prop --calcite-combobox-chip-icon-color: Specifies the icon color of the component's chips.
- * @prop --calcite-combobox-chip-text-color: Specifies the text color of the component's chips.
  */
 
 :host {
@@ -249,12 +244,8 @@
 
 calcite-chip {
   --calcite-animation-timing: 0;
-  --calcite-chip-background-color: var(--calcite-combobox-chip-background-color);
-  --calcite-chip-close-icon-color: var(--calcite-combobox-chip-close-icon-color);
-  --calcite-chip-corner-radius: var(--calcite-combobox-chip-corner-radius);
-  --calcite-chip-icon-color: var(--calcite-combobox-chip-icon-color);
-  --calcite-chip-text-color: var(--calcite-combobox-chip-text-color);
 }
+
 .chip {
   margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
   max-inline-size: 100%;

diff --git a/packages/calcite-components/src/custom-theme/combobox.ts b/packages/calcite-components/src/custom-theme/combobox.ts
@@ -9,11 +9,12 @@ export const comboboxTokens = {
   calciteComboboxIconColorHover: "",
   calciteComboboxPlaceholderIconColor: "",
   calciteComboboxListboxBackgroundColor: "",
-  calciteComboboxChipBackgroundColor: "",
-  calciteComboboxChipTextColor: "",
-  calciteComboboxChipIconColor: "",
-  calciteComboboxChipCloseIconColor: "",
-  calciteComboboxChipCornerRadius: "",
+  calciteChipBackgroundColor: "",
+  calciteComboboxChipBackgroundColorActive: "",
+  calciteChipTextColor: "",
+  calciteChipIconColor: "",
+  calciteChipCloseIconColor: "",
+  calciteChipCornerRadius: "",
   calciteComboboxItemGroupTextColor: "",
   calciteComboboxItemGroupBorderColor: "",
 };

diff --git a/packages/calcite-components/src/demos/combobox.html b/packages/calcite-components/src/demos/combobox.html
@@ -1175,11 +1175,12 @@ <h3 class="child right-aligned-text">Theme</h3>
           --calcite-combobox-icon-color: yellow
           --calcite-combobox-icon-color-hover: purple;
           --calcite-combobox-listbox-background-color: pink;
-          --calcite-combobox-chip-background-color: yellow;
-          --calcite-combobox-chip-close-icon-color: green;
-          --calcite-combobox-chip-corner-radius: 10px;
-          --calcite-combobox-chip-icon-color: green;
-          --calcite-combobox-chip-text-color: blue;
+          --calcite-chip-background-color: yellow;
+          --calcite-combobox-chip-background-color-active: red;
+          --calcite-chip-close-icon-color: green;
+          --calcite-chip-corner-radius: 10px;
+          --calcite-chip-icon-color: green;
+          --calcite-chip-text-color: blue;
           --calcite-combobox-item-group-text-color:green;
           --calcite-combobox-item-group-border-color:skyblue;
           "