From 0b6dfad5fa0b5aaa9d916b9686bd28d6a00cdfec Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Thu, 26 Dec 2024 16:40:32 -0800
Subject: [PATCH 1/8] feat(rating): add component tokens

---
 .../src/components/rating/rating.e2e.ts       | 12 ++++++++++
 .../src/components/rating/rating.scss         | 24 ++++++++++++-------
 .../src/components/rating/resources.ts        |  4 ++++
 .../src/custom-theme.stories.ts               |  4 +++-
 .../src/custom-theme/rating.ts                | 12 ++++++++++
 5 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 packages/calcite-components/src/custom-theme/rating.ts

diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts
index 1695fdaa6c9..561a956d57f 100644
--- a/packages/calcite-components/src/components/rating/rating.e2e.ts
+++ b/packages/calcite-components/src/components/rating/rating.e2e.ts
@@ -11,8 +11,11 @@ import {
   reflects,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { isElementFocused } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-rating", () => {
   describe("common tests", () => {
@@ -795,4 +798,13 @@ describe("calcite-rating", () => {
       expect(element).toEqualAttribute("value", "2");
     });
   });
+
+  describe("theme", () => {
+    themed(html`<calcite-rating></calcite-rating>`, {
+      "--calcite-rating-idle-unselected-color": {
+        shadowSelector: `.${CSS.star}`,
+        targetProp: "color",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index 63a0139f899..db7723dcc5f 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -4,6 +4,11 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each rating star.
+ * @prop --calcite-rating-hover-selected-color: Specifies the component's color when hovered and selected.
+ * @prop --calcite-rating-idle-unselected-color: Specifies the component's color when idle and unselected.
+ * @prop --calcite-rating-average-color: Specifies the component's color when average is set.
+ * @prop --calcite-rating-average-text-color: Specifies the component's average text color.
+ * @prop --calcite-rating-count-text-color: Specifies the component's count text color.
  */
 
 :host {
@@ -15,17 +20,17 @@
 
 :host([scale="s"]) {
   @apply h-6;
-  --calcite-rating-spacing-unit: theme("spacing.1");
+  --spacing: theme("spacing.1");
 }
 
 :host([scale="m"]) {
   @apply h-8;
-  --calcite-rating-spacing-unit: theme("spacing.2");
+  --spacing: theme("spacing.2");
 }
 
 :host([scale="l"]) {
   @apply h-11;
-  --calcite-rating-spacing-unit: theme("spacing.3");
+  --spacing: theme("spacing.3");
 }
 
 :host([read-only]) {
@@ -38,7 +43,7 @@
   border-width: 0;
   padding: 0;
   align-items: center;
-  gap: var(--calcite-rating-spacing-unit);
+  gap: var(--calcite-rating-spacing-unit, var(--spacing));
 }
 
 .wrapper {
@@ -51,7 +56,7 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
-  color: theme("borderColor.color.input");
+  color: var(--calcite-rating-idle-unselected-color, theme("borderColor.color.input"));
   &:focus {
     @apply focus-outset;
   }
@@ -59,12 +64,12 @@
 
 .average,
 .fraction {
-  color: theme("colors.warning");
+  color: var(--calcite-rating-average-color, theme("colors.warning"));
 }
 
 .hovered,
 .selected {
-  color: theme("colors.brand");
+  color: var(--calcite-rating-hover-selected-color, theme("colors.brand"));
 }
 
 .fraction {
@@ -84,13 +89,14 @@ calcite-chip {
 
 .number--average {
   font-weight: bold;
+  color: var(--calcite-rating-average-text-color);
 }
 
 .number--count {
-  color: var(--calcite-color-text-2);
+  color: var(--calcite-rating-count-text-color, var(--calcite-color-text-2));
   font-style: italic;
   &:not(:first-child) {
-    margin-inline-start: var(--calcite-rating-spacing-unit);
+    margin-inline-start: var(--calcite-rating-spacing-unit, var(--spacing));
   }
 }
 
diff --git a/packages/calcite-components/src/components/rating/resources.ts b/packages/calcite-components/src/components/rating/resources.ts
index 3fbf623b870..acdb7e3d5f5 100644
--- a/packages/calcite-components/src/components/rating/resources.ts
+++ b/packages/calcite-components/src/components/rating/resources.ts
@@ -1,3 +1,7 @@
+export const CSS = {
+  star: "star",
+};
+
 export const IDS = {
   validationMessage: "validationMessage",
 };
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 8d1fd1c34b8..03ebabdac52 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -37,6 +37,7 @@ import { pagination } from "./custom-theme/pagination";
 import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
+import { rating, ratingTokens } from "./custom-theme/rating";
 import { slider, sliderTokens } from "./custom-theme/slider";
 import { switchTokens } from "./custom-theme/switch";
 import { tabs, tabsBordered, tabsTokens } from "./custom-theme/tabs";
@@ -132,7 +133,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
         ${comboboxItem}
       </div>
-      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers} ${blockSection}</div>
+      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${rating}</div>
       <div class="demo-column">${alert}</div>
     </div>
   </div>`;
@@ -164,6 +165,7 @@ const componentTokens = {
   ...navigationUserTokens,
   ...popoverTokens,
   ...progressTokens,
+  ...ratingTokens,
   ...sliderTokens,
   ...switchTokens,
   ...tabsTokens,
diff --git a/packages/calcite-components/src/custom-theme/rating.ts b/packages/calcite-components/src/custom-theme/rating.ts
new file mode 100644
index 00000000000..4643f948605
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/rating.ts
@@ -0,0 +1,12 @@
+import { html } from "../../support/formatting";
+
+export const ratingTokens = {
+  calciteRatingSpacingUnit: "",
+  calciteRatingHoverSelectedColor: "",
+  calciteRatingIdleUnselectedColor: "",
+  calciteRatingAverageColor: "",
+  calciteRatingAverageTextColor: "",
+  calciteRatingCountColor: "",
+};
+
+export const rating = html`<calcite-rating></calcite-rating>`;

From f92268fbb40ab1117bb932ace5a8aa07d33b67bb Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Fri, 27 Dec 2024 16:54:11 -0800
Subject: [PATCH 2/8] feat(rating): update token descriptions

---
 .../calcite-components/src/components/rating/rating.scss  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index db7723dcc5f..4699a4d7fa2 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -3,10 +3,10 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each rating star.
- * @prop --calcite-rating-hover-selected-color: Specifies the component's color when hovered and selected.
- * @prop --calcite-rating-idle-unselected-color: Specifies the component's color when idle and unselected.
- * @prop --calcite-rating-average-color: Specifies the component's color when average is set.
+ * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each item.
+ * @prop --calcite-rating-hover-selected-color: Specifies the component's item color when hovered and selected.
+ * @prop --calcite-rating-idle-unselected-color: Specifies the component's item color when idle and unselected.
+ * @prop --calcite-rating-average-color: Specifies the component's item color when average is set.
  * @prop --calcite-rating-average-text-color: Specifies the component's average text color.
  * @prop --calcite-rating-count-text-color: Specifies the component's count text color.
  */

From 291ca3e2697c70e56a47250422d9e8071ce4c5a5 Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Fri, 27 Dec 2024 16:59:23 -0800
Subject: [PATCH 3/8] feat(rating): update token descriptions

---
 packages/calcite-components/src/components/rating/rating.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index 4699a4d7fa2..0fdb86074da 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -4,8 +4,8 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each item.
- * @prop --calcite-rating-hover-selected-color: Specifies the component's item color when hovered and selected.
- * @prop --calcite-rating-idle-unselected-color: Specifies the component's item color when idle and unselected.
+ * @prop --calcite-rating-hover-selected-color: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-rating-idle-unselected-color: Specifies the component's item color when idle or unselected.
  * @prop --calcite-rating-average-color: Specifies the component's item color when average is set.
  * @prop --calcite-rating-average-text-color: Specifies the component's average text color.
  * @prop --calcite-rating-count-text-color: Specifies the component's count text color.

From 940ef9a68e0741a9c4c2f06976592f4383bf3ac1 Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Fri, 27 Dec 2024 17:01:11 -0800
Subject: [PATCH 4/8] feat(rating): update token descriptions

---
 packages/calcite-components/src/components/rating/rating.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index 0fdb86074da..fb80ad737c9 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each item.
+ * @prop --calcite-rating-spacing-unit: Specifies the amount of left and right margin spacing between each item.
  * @prop --calcite-rating-hover-selected-color: Specifies the component's item color when hovered or selected.
  * @prop --calcite-rating-idle-unselected-color: Specifies the component's item color when idle or unselected.
  * @prop --calcite-rating-average-color: Specifies the component's item color when average is set.

From 8d55d3ae4dbcb2b93d941e3c4bd26ea3abb2a55b Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Mon, 30 Dec 2024 09:03:41 -0800
Subject: [PATCH 5/8] feat(rating): update css token names

---
 .../calcite-components/src/components/rating/rating.scss  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index fb80ad737c9..ba97d08752a 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -4,8 +4,8 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-rating-spacing-unit: Specifies the amount of left and right margin spacing between each item.
- * @prop --calcite-rating-hover-selected-color: Specifies the component's item color when hovered or selected.
- * @prop --calcite-rating-idle-unselected-color: Specifies the component's item color when idle or unselected.
+ * @prop --calcite-rating-selected-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-rating-color: Specifies the component's item color.
  * @prop --calcite-rating-average-color: Specifies the component's item color when average is set.
  * @prop --calcite-rating-average-text-color: Specifies the component's average text color.
  * @prop --calcite-rating-count-text-color: Specifies the component's count text color.
@@ -56,7 +56,7 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
-  color: var(--calcite-rating-idle-unselected-color, theme("borderColor.color.input"));
+  color: var(--calcite-rating-color, theme("borderColor.color.input"));
   &:focus {
     @apply focus-outset;
   }
@@ -69,7 +69,7 @@
 
 .hovered,
 .selected {
-  color: var(--calcite-rating-hover-selected-color, theme("colors.brand"));
+  color: var(--calcite-rating-selected-color-hover, theme("colors.brand"));
 }
 
 .fraction {

From 556d50dade4406136b462a7fe2418dae326dbc59 Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Tue, 31 Dec 2024 16:50:20 -0800
Subject: [PATCH 6/8] feat(rating): add css token e2e tests

---
 .../src/components/rating/rating.e2e.ts       | 53 +++++++++++++++++--
 .../src/components/rating/rating.scss         | 17 +++---
 .../src/components/rating/resources.ts        |  7 +++
 .../src/custom-theme/rating.ts                |  8 +--
 4 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts
index 561a956d57f..871432d682e 100644
--- a/packages/calcite-components/src/components/rating/rating.e2e.ts
+++ b/packages/calcite-components/src/components/rating/rating.e2e.ts
@@ -800,11 +800,54 @@ describe("calcite-rating", () => {
   });
 
   describe("theme", () => {
-    themed(html`<calcite-rating></calcite-rating>`, {
-      "--calcite-rating-idle-unselected-color": {
-        shadowSelector: `.${CSS.star}`,
-        targetProp: "color",
-      },
+    describe("default", () => {
+      themed(html`<calcite-rating></calcite-rating>`, {
+        /*"--calcite-rating-spacing": {
+          shadowSelector: `.${CSS.fieldSet}`,
+          targetProp: "gap",
+        },*/
+        "--calcite-rating-color": {
+          shadowSelector: `.${CSS.star}`,
+          targetProp: "color",
+        },
+      });
+    });
+    describe("selected", () => {
+      themed(html`<calcite-rating value="2" class=${CSS.hovered}></calcite-rating>`, {
+        "--calcite-rating-color-hover": [
+          {
+            shadowSelector: `.${CSS.star}`,
+            targetProp: "color",
+            state: { hover: { attribute: "class", value: CSS.hovered } },
+          },
+          {
+            shadowSelector: `.${CSS.selected}`,
+            targetProp: "color",
+          },
+        ],
+      });
+    });
+    describe("average", () => {
+      themed(html`<calcite-rating average="3.65" count="240" show-chip></calcite-rating>`, {
+        "--calcite-rating-average-color": [
+          {
+            shadowSelector: `.${CSS.average}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.fraction}`,
+            targetProp: "color",
+          },
+        ],
+        "--calcite-rating-average-text-color": {
+          shadowSelector: `.${CSS.numberAverage}`,
+          targetProp: "color",
+        },
+        "--calcite-rating-count-text-color": {
+          shadowSelector: `.${CSS.numberCount}`,
+          targetProp: "color",
+        },
+      });
     });
   });
 });
diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index ba97d08752a..65cf389d639 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -3,8 +3,9 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-rating-spacing-unit: Specifies the amount of left and right margin spacing between each item.
- * @prop --calcite-rating-selected-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-rating-spacing-unit: [Deprecated] Use `--calcite-rating-spacing`. Specifies the amount of left and right margin spacing between each item.
+ * @prop --calcite-rating-spacing: Specifies the amount of left and right margin spacing between each item.
+ * @prop --calcite-rating-color-hover: Specifies the component's item color when hovered or selected.
  * @prop --calcite-rating-color: Specifies the component's item color.
  * @prop --calcite-rating-average-color: Specifies the component's item color when average is set.
  * @prop --calcite-rating-average-text-color: Specifies the component's average text color.
@@ -20,17 +21,17 @@
 
 :host([scale="s"]) {
   @apply h-6;
-  --spacing: theme("spacing.1");
+  --calcite-internal-rating-spacing: theme("spacing.1");
 }
 
 :host([scale="m"]) {
   @apply h-8;
-  --spacing: theme("spacing.2");
+  --calcite-internal-rating-spacing: theme("spacing.2");
 }
 
 :host([scale="l"]) {
   @apply h-11;
-  --spacing: theme("spacing.3");
+  --calcite-internal-rating-spacing: theme("spacing.3");
 }
 
 :host([read-only]) {
@@ -43,7 +44,7 @@
   border-width: 0;
   padding: 0;
   align-items: center;
-  gap: var(--calcite-rating-spacing-unit, var(--spacing));
+  gap: var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing));
 }
 
 .wrapper {
@@ -69,7 +70,7 @@
 
 .hovered,
 .selected {
-  color: var(--calcite-rating-selected-color-hover, theme("colors.brand"));
+  color: var(--calcite-rating-color-hover, theme("colors.brand"));
 }
 
 .fraction {
@@ -96,7 +97,7 @@ calcite-chip {
   color: var(--calcite-rating-count-text-color, var(--calcite-color-text-2));
   font-style: italic;
   &:not(:first-child) {
-    margin-inline-start: var(--calcite-rating-spacing-unit, var(--spacing));
+    margin-inline-start: var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing));
   }
 }
 
diff --git a/packages/calcite-components/src/components/rating/resources.ts b/packages/calcite-components/src/components/rating/resources.ts
index acdb7e3d5f5..ad8ee9ebab2 100644
--- a/packages/calcite-components/src/components/rating/resources.ts
+++ b/packages/calcite-components/src/components/rating/resources.ts
@@ -1,5 +1,12 @@
 export const CSS = {
+  fieldSet: "fieldset",
   star: "star",
+  hovered: "hovered",
+  selected: "selected",
+  average: "average",
+  fraction: "fraction",
+  numberAverage: "number--average",
+  numberCount: "number--count",
 };
 
 export const IDS = {
diff --git a/packages/calcite-components/src/custom-theme/rating.ts b/packages/calcite-components/src/custom-theme/rating.ts
index 4643f948605..656c2eb2c83 100644
--- a/packages/calcite-components/src/custom-theme/rating.ts
+++ b/packages/calcite-components/src/custom-theme/rating.ts
@@ -1,12 +1,12 @@
 import { html } from "../../support/formatting";
 
 export const ratingTokens = {
-  calciteRatingSpacingUnit: "",
-  calciteRatingHoverSelectedColor: "",
-  calciteRatingIdleUnselectedColor: "",
+  calciteRatingSpacing: "",
+  calciteRatingColorHover: "",
+  calciteRatingColor: "",
   calciteRatingAverageColor: "",
   calciteRatingAverageTextColor: "",
-  calciteRatingCountColor: "",
+  calciteRatingCountTextColor: "",
 };
 
 export const rating = html`<calcite-rating></calcite-rating>`;

From 6cc707538cfe566d2bf2a8e6e951a9cea683863f Mon Sep 17 00:00:00 2001
From: Ali Stump <astump@esri.com>
Date: Tue, 7 Jan 2025 11:15:50 -0800
Subject: [PATCH 7/8] test(rating): add test for spacing tokens

---
 .../src/components/rating/rating.e2e.ts                   | 8 ++++----
 .../calcite-components/src/tests/utils/cssTokenValues.ts  | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts
index 871432d682e..cd8bd6834b6 100644
--- a/packages/calcite-components/src/components/rating/rating.e2e.ts
+++ b/packages/calcite-components/src/components/rating/rating.e2e.ts
@@ -799,13 +799,13 @@ describe("calcite-rating", () => {
     });
   });
 
-  describe("theme", () => {
-    describe("default", () => {
+  describe.only("theme", () => {
+    describe.only("default", () => {
       themed(html`<calcite-rating></calcite-rating>`, {
-        /*"--calcite-rating-spacing": {
+        "--calcite-rating-spacing": {
           shadowSelector: `.${CSS.fieldSet}`,
           targetProp: "gap",
-        },*/
+        },
         "--calcite-rating-color": {
           shadowSelector: `.${CSS.star}`,
           targetProp: "color",
diff --git a/packages/calcite-components/src/tests/utils/cssTokenValues.ts b/packages/calcite-components/src/tests/utils/cssTokenValues.ts
index 42d3990fc7e..10b23f944d1 100644
--- a/packages/calcite-components/src/tests/utils/cssTokenValues.ts
+++ b/packages/calcite-components/src/tests/utils/cssTokenValues.ts
@@ -7,6 +7,7 @@
  */
 export function getTokenValue(token: string): string {
   const tokenValueMap = {
+    spacing: "42px",
     // granular patterns for the same token must be listed first to match correctly
     background$: "rgb(252, 244, 52)",
     "text-color$": "rgb(239, 118, 39)",

From 419ca27bdfbbb2e5a3afb986059badcca3c0a19e Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Tue, 7 Jan 2025 12:17:48 -0800
Subject: [PATCH 8/8] feat(rating): update e2e token tests

---
 .../calcite-components/src/components/rating/rating.e2e.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts
index cd8bd6834b6..8ee5602953c 100644
--- a/packages/calcite-components/src/components/rating/rating.e2e.ts
+++ b/packages/calcite-components/src/components/rating/rating.e2e.ts
@@ -799,8 +799,8 @@ describe("calcite-rating", () => {
     });
   });
 
-  describe.only("theme", () => {
-    describe.only("default", () => {
+  describe("theme", () => {
+    describe("default", () => {
       themed(html`<calcite-rating></calcite-rating>`, {
         "--calcite-rating-spacing": {
           shadowSelector: `.${CSS.fieldSet}`,