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,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",
+      },
+    });
+  });
 });

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

@@ -3,7 +3,12 @@
  *
  * 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: 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-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 +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,20 +56,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-selected-color-hover, 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));
   }
 }
 

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

@@ -1,3 +1,7 @@
+export const CSS = {
+  star: "star",
+};
+
 export const IDS = {
   validationMessage: "validationMessage",
 };

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,

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>`;