From 092203921217442fbff8a14fce0965837a139dca Mon Sep 17 00:00:00 2001
From: Fred Visser <1458528+fredvisser@users.noreply.github.com>
Date: Tue, 30 Apr 2024 15:40:35 -0500
Subject: [PATCH] review feedback - rename token

---
 ...imble-components-0aeacb05-bfbf-47eb-8e8d-d47e996f3004.json | 2 +-
 .../src/theme-provider/design-token-comments.ts               | 2 +-
 .../src/theme-provider/design-token-names.ts                  | 2 +-
 .../nimble-components/src/theme-provider/design-tokens.ts     | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/change/@ni-nimble-components-0aeacb05-bfbf-47eb-8e8d-d47e996f3004.json b/change/@ni-nimble-components-0aeacb05-bfbf-47eb-8e8d-d47e996f3004.json
index ac77e2d39e..fefb3d77af 100644
--- a/change/@ni-nimble-components-0aeacb05-bfbf-47eb-8e8d-d47e996f3004.json
+++ b/change/@ni-nimble-components-0aeacb05-bfbf-47eb-8e8d-d47e996f3004.json
@@ -1,6 +1,6 @@
 {
   "type": "minor",
-  "comment": "Added chip background color token",
+  "comment": "Added tag fill color token",
   "packageName": "@ni/nimble-components",
   "email": "1458528+fredvisser@users.noreply.github.com",
   "dependentChangeType": "patch"
diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts
index 49bbe33669..e57c6d11dd 100644
--- a/packages/nimble-components/src/theme-provider/design-token-comments.ts
+++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts
@@ -45,7 +45,7 @@ export const comments: { readonly [key in TokenName]: string } = {
     modalBackdropColor: 'Color of background overlay behind modal dialog boxes',
     popupBorderColor: 'Border color for menus and dialog boxes',
     cardBorderColor: 'Border color for cards',
-    chipBackgroundColor: 'Background color for chips',
+    tagFillColor: 'Background fill color for tags, chips, or pills',
     controlHeight:
         'Standard layout height for all controls. Add "labelHeight" for labels on top.',
     controlSlimHeight:
diff --git a/packages/nimble-components/src/theme-provider/design-token-names.ts b/packages/nimble-components/src/theme-provider/design-token-names.ts
index 95efee451a..2a932a9861 100644
--- a/packages/nimble-components/src/theme-provider/design-token-names.ts
+++ b/packages/nimble-components/src/theme-provider/design-token-names.ts
@@ -36,7 +36,7 @@ export const tokenNames: { readonly [key in TokenName]: string } = {
     modalBackdropColor: 'modal-backdrop-color',
     popupBorderColor: 'popup-border-color',
     cardBorderColor: 'card-border-color',
-    chipBackgroundColor: 'chip-background-color',
+    tagFillColor: 'tag-fill-color',
     controlHeight: 'control-height',
     controlSlimHeight: 'control-slim-height',
     smallPadding: 'small-padding',
diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts
index 6769386a6a..da7017182f 100644
--- a/packages/nimble-components/src/theme-provider/design-tokens.ts
+++ b/packages/nimble-components/src/theme-provider/design-tokens.ts
@@ -212,8 +212,8 @@ export const tableRowBorderColor = DesignToken.create<string>(
     styleNameFromTokenName(tokenNames.tableRowBorderColor)
 ).withDefault((element: HTMLElement) => getColorForTheme(element, Black15, Black80, ForestGreen));
 
-export const chipBackgroundColor = DesignToken.create<string>(
-    styleNameFromTokenName(tokenNames.chipBackgroundColor)
+export const tagFillColor = DesignToken.create<string>(
+    styleNameFromTokenName(tokenNames.tagFillColor)
 ).withDefault((element: HTMLElement) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.1));
 
 export const buttonFillPrimaryColor = DesignToken.create<string>(