feat(label): add component tokens (#10688)

**Related Issue:** #7180 ## Summary Add `label` component tokens. `--calcite-label-text-color`: Specifies the component's text color.
Esri · Feb 8, 2025 · f998840 · f998840
1 parent b339e26
commit f998840
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 6 deletions.
diff --git a/packages/calcite-components/src/components/label/label.e2e.ts b/packages/calcite-components/src/components/label/label.e2e.ts
@@ -1,8 +1,9 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { renders, hidden } from "../../tests/commonTests";
+import { renders, hidden, themed } from "../../tests/commonTests";
 import { isElementFocused } from "../../tests/utils";
 import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
 
 describe("calcite-label", () => {
   describe("renders", () => {
@@ -204,4 +205,27 @@ describe("calcite-label", () => {
 
     expect(eventDetail).toBeTruthy();
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-label>
+            Label text
+            <calcite-input></calcite-input>
+          </calcite-label>
+        `,
+        {
+          "--calcite-label-margin-bottom": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "marginBlockEnd",
+          },
+          "--calcite-label-text-color": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "color",
+          },
+        },
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/label/label.scss b/packages/calcite-components/src/components/label/label.scss
@@ -3,7 +3,8 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-label-margin-bottom: The spacing below the component.
+ * @prop --calcite-label-margin-bottom: Specifies the component's bottom spacing.
+ * @prop --calcite-label-text-color: Specifies the component's text color.
  */
 
 :host {
@@ -40,13 +41,13 @@
     margin-block-end: var(--calcite-label-margin-bottom, theme("spacing.4"));
   }
 }
-
 :host .container {
   @apply text-color-1
     mt-0
     mx-0
     w-full
     leading-snug;
+  color: var(--calcite-label-text-color, var(--calcite-color-text-1));
 }
 
 :host([layout="default"]) {

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -25,6 +25,7 @@ import { icon } from "./custom-theme/icon";
 import { input, inputTokens } from "./custom-theme/input";
 import { inputNumber } from "./custom-theme/input-number";
 import { inputText } from "./custom-theme/input-text";
+import { label, labelTokens } from "./custom-theme/label";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
@@ -120,8 +121,8 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${chips} ${pagination} ${slider}
       </div>
       <div class="demo-column">
-        ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress}
-        ${handle} ${textArea} ${popover} ${tile} ${tooltip}
+        ${datePicker} ${tabs} ${label} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail}
+        ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
       </div>
       ${alert} ${navigation}
     </div>
@@ -142,6 +143,7 @@ const componentTokens = {
   ...chipTokens,
   ...checkboxTokens,
   ...handleTokens,
+  ...labelTokens,
   ...popoverTokens,
   ...progressTokens,
   ...inputTokens,

diff --git a/packages/calcite-components/src/custom-theme/label.ts b/packages/calcite-components/src/custom-theme/label.ts
@@ -0,0 +1,13 @@
+import { html } from "../../support/formatting";
+
+export const labelTokens = {
+  calciteLabelMarginBottom: "",
+  calciteLabelTextColor: "",
+};
+
+export const label = html`
+  <calcite-label>
+    Label text
+    <calcite-input></calcite-input>
+  </calcite-label>
+`;
diff --git a/packages/calcite-components/src/demos/label.html b/packages/calcite-components/src/demos/label.html
@@ -309,6 +309,21 @@
           </calcite-label>
         </div>
       </div>
+
+      <div class="parent-flex">
+        <style>
+          .themed-label {
+            --calcite-label-margin-bottom: 20px;
+            --calcite-label-text-color: red;
+          }
+        </style>
+        <div class="child-flex child-flex-padding">
+          <calcite-label class="themed-label">
+            Themed
+            <calcite-switch></calcite-switch>
+          </calcite-label>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>
diff --git a/packages/calcite-components/src/tests/utils/cssTokenValues.ts b/packages/calcite-components/src/tests/utils/cssTokenValues.ts
@@ -18,7 +18,7 @@ export function getTokenValue(token: string): string {
     shadow$:
       "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px",
     "(z-index)$": "42",
-    "(columns|gap|height|offset|radius|size|size-y|size-x|space|space-x|space-y|width)": "42px",
+    "(columns|gap|height|offset|radius|size|size-y|size-x|space|space-x|space-y|width|margin-bottom)": "42px",
   } as const;
 
   const match = Object.entries(tokenValueMap).find(([regexStr]) => {