feat(rating): add component tokens

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,56 @@ describe("calcite-rating", () => {
       expect(element).toEqualAttribute("value", "2");
     });
   });
+
+  describe("theme", () => {
+    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",
+        },
+      });
+    });
+  });
 });

packages/calcite-components/src/components/rating/rating.scss

@@ -3,7 +3,13 @@
  *
  * 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-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.
+ * @prop --calcite-rating-count-text-color: Specifies the component's count text color.
  */
 
 :host {
@@ -15,17 +21,17 @@
 
 :host([scale="s"]) {
   @apply h-6;
-  --calcite-rating-spacing-unit: theme("spacing.1");
+  --calcite-internal-rating-spacing: theme("spacing.1");
 }
 
 :host([scale="m"]) {
   @apply h-8;
-  --calcite-rating-spacing-unit: theme("spacing.2");
+  --calcite-internal-rating-spacing: theme("spacing.2");
 }
 
 :host([scale="l"]) {
   @apply h-11;
-  --calcite-rating-spacing-unit: theme("spacing.3");
+  --calcite-internal-rating-spacing: theme("spacing.3");
 }
 
 :host([read-only]) {
@@ -38,7 +44,7 @@
   border-width: 0;
   padding: 0;
   align-items: center;
-  gap: var(--calcite-rating-spacing-unit);
+  gap: var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing));
 }
 
 .wrapper {
@@ -51,20 +57,20 @@
   display: flex;
   flex-direction: column;
   cursor: pointer;
-  color: theme("borderColor.color.input");
+  color: var(--calcite-rating-color, theme("borderColor.color.input"));
   &:focus {
     @apply focus-outset;
   }
 }
 
 .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-color-hover, theme("colors.brand"));
 }
 
 .fraction {
@@ -84,13 +90,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, var(--calcite-internal-rating-spacing));
   }
 }
 

packages/calcite-components/src/components/rating/resources.ts

@@ -1,3 +1,14 @@
+export const CSS = {
+  fieldSet: "fieldset",
+  star: "star",
+  hovered: "hovered",
+  selected: "selected",
+  average: "average",
+  fraction: "fraction",
+  numberAverage: "number--average",
+  numberCount: "number--count",
+};
+
 export const IDS = {
   validationMessage: "validationMessage",
 };

packages/calcite-components/src/custom-theme.stories.ts

@@ -38,6 +38,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";
@@ -133,7 +134,9 @@ 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} ${block}</div>
+      <div class="demo-column">
+        ${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block} ${rating}
+      </div>
       <div class="demo-column"><div class="demo-column">${alert}</div></div>
     </div>
   </div>`;
@@ -167,6 +170,7 @@ const componentTokens = {
   ...noticeTokens,
   ...popoverTokens,
   ...progressTokens,
+  ...ratingTokens,
   ...sliderTokens,
   ...switchTokens,
   ...tabsTokens,

packages/calcite-components/src/custom-theme/rating.ts

@@ -0,0 +1,12 @@
+import { html } from "../../support/formatting";
+
+export const ratingTokens = {
+  calciteRatingSpacing: "",
+  calciteRatingColorHover: "",
+  calciteRatingColor: "",
+  calciteRatingAverageColor: "",
+  calciteRatingAverageTextColor: "",
+  calciteRatingCountTextColor: "",
+};
+
+export const rating = html`<calcite-rating></calcite-rating>`;

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)",