feat(input-time-picker): Add component tokens

packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts

@@ -16,6 +16,7 @@ import {
   reflects,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { isElementFocused, skipAnimations } from "../../tests/utils/puppeteer";
 import { html } from "../../../support/formatting";
@@ -1803,4 +1804,60 @@ describe("calcite-input-time-picker", () => {
       expect(changeEvent).toHaveReceivedEventTimes(1);
     });
   });
+  describe("theming", () => {
+    themed(html`<calcite-input-time-picker open></calcite-input-time-picker>`, {
+      "--calcite-input-time-picker-background-color": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-background-color",
+      },
+      "--calcite-input-time-picker-digit-text-color": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-color",
+      },
+      "--calcite-input-time-picker-digit-icon-color": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-icon-color",
+      },
+      "--calcite-input-time-picker-action-background-color-hover": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-button-background-color-hover",
+      },
+      "--calcite-input-time-picker-action-background-color-press": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-button-background-color-press",
+      },
+      "--calcite-input-time-picker-digit-border-color-hover": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-input-border-color-hover",
+      },
+      "--calcite-input-time-picker-digit-border-color-press": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-input-border-color-press",
+      },
+      "--calcite-input-time-picker-input-background-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-input-time-picker-input-border-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "borderColor",
+      },
+      "--calcite-input-time-picker-input-corner-radius": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "borderRadius",
+      },
+      "--calcite-input-time-picker-input-shadow": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "boxShadow",
+      },
+      "--calcite-input-time-picker-input-text-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "color",
+      },
+      "--calcite-input-time-picker-border-color": {
+        shadowSelector: "calcite-time-picker",
+        targetProp: "--calcite-time-picker-border-color",
+      },
+    });
+  });
 });

packages/calcite-components/src/components/input-time-picker/input-time-picker.scss

@@ -1,3 +1,30 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ * 
+ * @prop --calcite-input-time-picker-background-color: Specifies the component's background color.
+ * @prop --calcite-input-time-picker-border-color: Specifies the component's border color.
+ * @prop --calcite-input-time-picker-icon-color: Specifies the component's icon color.
+ * @prop --calcite-input-time-picker-icon-color-hover: Specifies the component's icon color when hovered.
+ * @prop --calcite-input-time-picker-shadow: Specifies the component's shadow.
+ * @prop --calcite-input-time-picker-corner-radius: Specifies the component's border radius.
+
+ * @prop --calcite-input-time-picker-input-background-color: Specifies the component's input background color.
+ * @prop --calcite-input-time-picker-input-text-color: Specifies the component's input text color.
+ * @prop --calcite-input-time-picker-input-shadow: Specifies the component's input shadow.
+ * @prop --calcite-input-time-picker-input-corner-radius: Specifies the component's input border radius.
+ * @prop --calcite-input-time-picker-input-border-color: Specifies the component's input border color.
+
+ * @prop --calcite-input-time-picker-digit-text-color: Specifies the component's digit text color.
+ * @prop --calcite-input-time-picker-digit-icon-color: Specifies the component's digit icon color.
+ * @prop --calcite-input-time-picker-digit-border-color-press: Specifies the component's digit border color when pressed.
+ * @prop --calcite-input-time-picker-digit-border-color-hover: Specifies the component's digit border color when hovered.
+
+ * @prop --calcite-input-time-picker-action-background-color-hover: Specifies the background color of the component's actions when hovered or focused.
+ * @prop --calcite-input-time-picker-action-background-color-press: Specifies the background color of the component's actions when active.
+ */
+
 :host {
   display: inline-block;
 }
@@ -8,14 +35,27 @@
 @function get-trailing-text-input-padding($chevron-spacing) {
   @return calc(var(--calcite-toggle-spacing) + $chevron-spacing);
 }
+
+calcite-time-picker {
+  --calcite-time-picker-color: var(--calcite-input-time-picker-digit-text-color);
+  --calcite-time-picker-icon-color: var(--calcite-input-time-picker-digit-icon-color);
+  --calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color);
+  --calcite-time-picker-button-background-color-hover: var(--calcite-input-time-picker-action-background-color-hover);
+  --calcite-time-picker-button-background-color-press: var(--calcite-input-time-picker-action-background-color-press);
+  --calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-digit-border-color-hover);
+  --calcite-time-picker-input-border-color-press: var(--calcite-input-time-picker-digit-border-color-press);
+}
+
 .container {
-  --calcite-icon-color: var(--calcite-color-text-3);
+  --calcite-icon-color: var(--calcite-input-time-picker-icon-color, var(--calcite-color-text-3));
   align-items: center;
-  background-color: var(--calcite-color-foreground-1);
-  border: 1px solid var(--calcite-color-border-input);
+  background-color: var(--calcite-input-time-picker-input-background-color, var(--calcite-color-foreground-1));
+  border: 1px solid var(--calcite-input-time-picker-input-border-color, var(--calcite-color-border-input));
+  border-radius: var(--calcite-input-time-picker-input-corner-radius, var(--calcite-corner-radius-none));
+  box-shadow: var(--calcite-input-time-picker-input-shadow, var(--calcite-shadow-none));
   box-sizing: border-box;
   display: flex;
-  color: var(--calcite-color-text-1);
+  color: var(--calcite-input-time-picker-input-text-color, var(--calcite-color-text-1));
   flex-wrap: nowrap;
   font-weight: var(--calcite-font-weight-normal);
   inline-size: 100%;
@@ -64,7 +104,7 @@
   inline-size: 24px;
   justify-content: center;
   &:hover {
-    --calcite-icon-color: var(--calcite-color-text-1);
+    --calcite-icon-color: var(--calcite-input-time-picker-icon-color-hover);
   }
 }
 
@@ -123,8 +163,16 @@
 }
 
 calcite-time-picker {
-  --calcite-time-picker-border-color: transparent;
-  --calcite-time-picker-corner-radius: var(--calcite-corner-radius-round);
+  --calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);
+  --calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color, transparent);
+  --calcite-time-picker-corner-radius: var(
+    --calcite-input-time-picker-corner-radius,
+    var(--calcite-corner-radius-round)
+  );
+}
+
+calcite-popover {
+  --calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round));
 }
 
 @include form-internal-label();

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

@@ -103,8 +103,10 @@ import { dialog, dialogTokens } from "./custom-theme/dialog";
 import { swatchGroup, swatchGroupTokens } from "./custom-theme/swatch-group";
 import { swatch, swatchTokens } from "./custom-theme/swatch";
 import { splitButton, splitButtonTokens } from "./custom-theme/split-button";
+import { inputTimePicker, inputTimePickerTokens } from "./custom-theme/input-time-picker";
 import { colorPicker, colorPickerTokens } from "./custom-theme/color-picker";
 
+
 const globalTokens = {
   calciteColorBrand: "#007ac2",
   calciteColorBrandHover: "#00619b",
@@ -261,6 +263,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     <div class="demo-row">
       <div class="demo-column">${colorPicker}</div>
     </div>
+    <div class="demo-row">
+      <div class="demo-column">${inputTimePicker}</div>
+    </div>
   </div>`;
 
 const componentTokens = {
@@ -333,6 +338,7 @@ const componentTokens = {
   ...swatchGroupTokens,
   ...swatchTokens,
   ...splitButtonTokens,
+  ...inputTimePickerTokens,
   ...colorPickerTokens,
 };
 

packages/calcite-components/src/custom-theme/input-time-picker.ts

@@ -0,0 +1,23 @@
+import { html } from "../../support/formatting";
+
+export const inputTimePickerTokens = {
+  calciteInputTimePickerBackgroundColor: "",
+  calciteInputTimePickerBorderColor: "",
+  calciteInputTimePickerTextColor: "",
+  calciteInputTimePickerIconColor: "",
+  calciteInputTimePickerIconColorHover: "",
+  calciteInputTimePickerShadow: "",
+  calciteInputTimePickerInputBackgroundColor: "",
+  calciteInputTimePickerInputBorderColor: "",
+  calciteInputTimePickerInputTextColor: "",
+  calciteInputTimePickerInputShadow: "",
+  calciteInputTimePickerInputCornerRadius: "",
+  calciteInputTimePickerDigitTextColor: "",
+  calciteInputTimePickerDigitIconColor: "",
+  calciteInputTimePickerDigitBorderColorPress: "",
+  calciteInputTimePickerDigitBorderColorHover: "",
+  calciteInputTimePickerActionBackgroundColorHover: "",
+  calciteInputTimePickerActionBackgroundColorPress: "",
+};
+
+export const inputTimePicker = html`<calcite-input-time-picker open></calcite-input-time-picker>`;

packages/calcite-components/src/demos/input-time-picker.html

@@ -31,12 +31,45 @@
         flex-direction: column;
         gap: 1em;
       }
+      .themed {
+        --calcite-input-time-picker-border-color: red;
+        --calcite-input-time-picker-background-color: pink;
+        --calcite-input-time-picker-icon-color: yellow;
+        --calcite-input-time-picker-icon-color-hover: yellow;
+        --calcite-input-time-picker-shadow: var(--calcite-shadow-md);
+        --calcite-input-time-picker-corner-radius: 12px;
+
+        --calcite-input-time-picker-input-background-color: red;
+        --calcite-input-time-picker-input-border-color: orange;
+        --calcite-input-time-picker-input-text-color: green;
+        --calcite-input-time-picker-input-shadow: var(--calcite-shadow-md);
+        --calcite-input-time-picker-input-corner-radius: 999px;
+
+        --calcite-input-time-picker-digit-text-color: white;
+        --calcite-input-time-picker-digit-icon-color: teal;
+        --calcite-input-time-picker-digit-border-color-hover: yellow;
+        --calcite-input-time-picker-digit-border-color-press: green;
+
+        --calcite-input-time-picker-action-background-color-hover: pink;
+        --calcite-input-time-picker-action-background-color-press: red;
+      }
     </style>
   </head>
   <body>
     <demo-dom-swapper>
       <div id="main-container">
         <main>
+          <h3>Themed</h3>
+          <div class="grid themed">
+            <calcite-input-time-picker
+              open
+              label-text="Label text"
+              required
+              scale="m"
+              step="0.1"
+              value="10:37:09.5"
+            ></calcite-input-time-picker>
+          </div>
           <h3>Internal label</h3>
           <div class="grid">
             <calcite-input-time-picker label-text="Label text" required scale="m" step="0.1" value="10:37:09.5"