Skip to content

Commit 5134270

Browse files
macandcheeseisaacbraun
authored and
benelan
committed
feat(input-time-picker): Add component tokens (#12874)
**Related Issue:** #7180 ## Summary `--calcite-input-time-picker-background-color`: Specifies the background color of the component. `--calcite-input-time-picker-border-color`: Specifies the component's border color. `--calcite-input-time-picker-icon-color`: Specifies the component's icon color. `--calcite-input-time-picker-icon-color-hover`: Specifies the component's icon color when hovered. `--calcite-input-time-picker-shadow`: Specifies the component's shadow. `--calcite-input-time-picker-corner-radius`: Specifies the border radius of the component. `--calcite-input-time-picker-input-background-color`: Specifies the component's input background color. `--calcite-input-time-picker-input-border-color`: Specifies the component's input border color. `--calcite-input-time-picker-input-text-color`: Specifies the component's input text color. `--calcite-input-time-picker-input-shadow`: Specifies the component's input shadow. `--calcite-input-time-picker-input-corner-radius`: Specifies the border radius of the component's input. `--calcite-input-time-picker-digit-text-color`: Specifies the component's digit text color. `--calcite-input-time-picker-digit-icon-color`: Specifies the component's digit icon color. `--calcite-input-time-picker-digit-border-color-press`: Specifies the component's digit border color when pressed. `--calcite-input-time-picker-digit-border-color-hover`: Specifies the component's digit border color when hovered. `--calcite-input-time-picker-action-background-color-hover`: Specifies the background color of the component's actions when hovered or focused. `--calcite-input-time-picker-action-background-color-press`: Specifies the background color of the component's actions when active. <img width="482" height="210" alt="Screenshot 2025-09-12 at 12 59 41 PM" src="https://github.com/user-attachments/assets/dc4c0419-5760-4368-9acc-d85dbaca3f44" /> --------- Co-authored-by: Isaac Braun <[email protected]>
1 parent 89e7e95 commit 5134270

File tree

5 files changed

+174
-7
lines changed

5 files changed

+174
-7
lines changed

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
reflects,
1717
renders,
1818
t9n,
19+
themed,
1920
} from "../../tests/commonTests";
2021
import { isElementFocused, skipAnimations } from "../../tests/utils/puppeteer";
2122
import { html } from "../../../support/formatting";
@@ -1803,4 +1804,60 @@ describe("calcite-input-time-picker", () => {
18031804
expect(changeEvent).toHaveReceivedEventTimes(1);
18041805
});
18051806
});
1807+
describe("theming", () => {
1808+
themed(html`<calcite-input-time-picker open></calcite-input-time-picker>`, {
1809+
"--calcite-input-time-picker-background-color": {
1810+
shadowSelector: "calcite-time-picker",
1811+
targetProp: "--calcite-time-picker-background-color",
1812+
},
1813+
"--calcite-input-time-picker-digit-text-color": {
1814+
shadowSelector: "calcite-time-picker",
1815+
targetProp: "--calcite-time-picker-color",
1816+
},
1817+
"--calcite-input-time-picker-digit-icon-color": {
1818+
shadowSelector: "calcite-time-picker",
1819+
targetProp: "--calcite-time-picker-icon-color",
1820+
},
1821+
"--calcite-input-time-picker-action-background-color-hover": {
1822+
shadowSelector: "calcite-time-picker",
1823+
targetProp: "--calcite-time-picker-button-background-color-hover",
1824+
},
1825+
"--calcite-input-time-picker-action-background-color-press": {
1826+
shadowSelector: "calcite-time-picker",
1827+
targetProp: "--calcite-time-picker-button-background-color-press",
1828+
},
1829+
"--calcite-input-time-picker-digit-border-color-hover": {
1830+
shadowSelector: "calcite-time-picker",
1831+
targetProp: "--calcite-time-picker-input-border-color-hover",
1832+
},
1833+
"--calcite-input-time-picker-digit-border-color-press": {
1834+
shadowSelector: "calcite-time-picker",
1835+
targetProp: "--calcite-time-picker-input-border-color-press",
1836+
},
1837+
"--calcite-input-time-picker-input-background-color": {
1838+
shadowSelector: `.${CSS.container}`,
1839+
targetProp: "backgroundColor",
1840+
},
1841+
"--calcite-input-time-picker-input-border-color": {
1842+
shadowSelector: `.${CSS.container}`,
1843+
targetProp: "borderColor",
1844+
},
1845+
"--calcite-input-time-picker-input-corner-radius": {
1846+
shadowSelector: `.${CSS.container}`,
1847+
targetProp: "borderRadius",
1848+
},
1849+
"--calcite-input-time-picker-input-shadow": {
1850+
shadowSelector: `.${CSS.container}`,
1851+
targetProp: "boxShadow",
1852+
},
1853+
"--calcite-input-time-picker-input-text-color": {
1854+
shadowSelector: `.${CSS.container}`,
1855+
targetProp: "color",
1856+
},
1857+
"--calcite-input-time-picker-border-color": {
1858+
shadowSelector: "calcite-time-picker",
1859+
targetProp: "--calcite-time-picker-border-color",
1860+
},
1861+
});
1862+
});
18061863
});

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

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* These properties can be overridden using the component's tag as selector.
5+
*
6+
* @prop --calcite-input-time-picker-background-color: Specifies the component's background color.
7+
* @prop --calcite-input-time-picker-border-color: Specifies the component's border color.
8+
* @prop --calcite-input-time-picker-icon-color: Specifies the component's icon color.
9+
* @prop --calcite-input-time-picker-icon-color-hover: Specifies the component's icon color when hovered.
10+
* @prop --calcite-input-time-picker-shadow: Specifies the component's shadow.
11+
* @prop --calcite-input-time-picker-corner-radius: Specifies the component's border radius.
12+
13+
* @prop --calcite-input-time-picker-input-background-color: Specifies the component's input background color.
14+
* @prop --calcite-input-time-picker-input-text-color: Specifies the component's input text color.
15+
* @prop --calcite-input-time-picker-input-shadow: Specifies the component's input shadow.
16+
* @prop --calcite-input-time-picker-input-corner-radius: Specifies the component's input border radius.
17+
* @prop --calcite-input-time-picker-input-border-color: Specifies the component's input border color.
18+
19+
* @prop --calcite-input-time-picker-digit-text-color: Specifies the component's digit text color.
20+
* @prop --calcite-input-time-picker-digit-icon-color: Specifies the component's digit icon color.
21+
* @prop --calcite-input-time-picker-digit-border-color-press: Specifies the component's digit border color when pressed.
22+
* @prop --calcite-input-time-picker-digit-border-color-hover: Specifies the component's digit border color when hovered.
23+
24+
* @prop --calcite-input-time-picker-action-background-color-hover: Specifies the background color of the component's actions when hovered or focused.
25+
* @prop --calcite-input-time-picker-action-background-color-press: Specifies the background color of the component's actions when active.
26+
*/
27+
128
:host {
229
display: inline-block;
330
}
@@ -8,14 +35,27 @@
835
@function get-trailing-text-input-padding($chevron-spacing) {
936
@return calc(var(--calcite-toggle-spacing) + $chevron-spacing);
1037
}
38+
39+
calcite-time-picker {
40+
--calcite-time-picker-color: var(--calcite-input-time-picker-digit-text-color);
41+
--calcite-time-picker-icon-color: var(--calcite-input-time-picker-digit-icon-color);
42+
--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color);
43+
--calcite-time-picker-button-background-color-hover: var(--calcite-input-time-picker-action-background-color-hover);
44+
--calcite-time-picker-button-background-color-press: var(--calcite-input-time-picker-action-background-color-press);
45+
--calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-digit-border-color-hover);
46+
--calcite-time-picker-input-border-color-press: var(--calcite-input-time-picker-digit-border-color-press);
47+
}
48+
1149
.container {
12-
--calcite-icon-color: var(--calcite-color-text-3);
50+
--calcite-icon-color: var(--calcite-input-time-picker-icon-color, var(--calcite-color-text-3));
1351
align-items: center;
14-
background-color: var(--calcite-color-foreground-1);
15-
border: 1px solid var(--calcite-color-border-input);
52+
background-color: var(--calcite-input-time-picker-input-background-color, var(--calcite-color-foreground-1));
53+
border: 1px solid var(--calcite-input-time-picker-input-border-color, var(--calcite-color-border-input));
54+
border-radius: var(--calcite-input-time-picker-input-corner-radius, var(--calcite-corner-radius-none));
55+
box-shadow: var(--calcite-input-time-picker-input-shadow, var(--calcite-shadow-none));
1656
box-sizing: border-box;
1757
display: flex;
18-
color: var(--calcite-color-text-1);
58+
color: var(--calcite-input-time-picker-input-text-color, var(--calcite-color-text-1));
1959
flex-wrap: nowrap;
2060
font-weight: var(--calcite-font-weight-normal);
2161
inline-size: 100%;
@@ -64,7 +104,7 @@
64104
inline-size: 24px;
65105
justify-content: center;
66106
&:hover {
67-
--calcite-icon-color: var(--calcite-color-text-1);
107+
--calcite-icon-color: var(--calcite-input-time-picker-icon-color-hover);
68108
}
69109
}
70110

@@ -123,8 +163,16 @@
123163
}
124164

125165
calcite-time-picker {
126-
--calcite-time-picker-border-color: transparent;
127-
--calcite-time-picker-corner-radius: var(--calcite-corner-radius-round);
166+
--calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);
167+
--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color, transparent);
168+
--calcite-time-picker-corner-radius: var(
169+
--calcite-input-time-picker-corner-radius,
170+
var(--calcite-corner-radius-round)
171+
);
172+
}
173+
174+
calcite-popover {
175+
--calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round));
128176
}
129177

130178
@include form-internal-label();

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,10 @@ import { dialog, dialogTokens } from "./custom-theme/dialog";
103103
import { swatchGroup, swatchGroupTokens } from "./custom-theme/swatch-group";
104104
import { swatch, swatchTokens } from "./custom-theme/swatch";
105105
import { splitButton, splitButtonTokens } from "./custom-theme/split-button";
106+
import { inputTimePicker, inputTimePickerTokens } from "./custom-theme/input-time-picker";
106107
import { colorPicker, colorPickerTokens } from "./custom-theme/color-picker";
107108

109+
108110
const globalTokens = {
109111
calciteColorBrand: "#007ac2",
110112
calciteColorBrandHover: "#00619b",
@@ -261,6 +263,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
261263
<div class="demo-row">
262264
<div class="demo-column">${colorPicker}</div>
263265
</div>
266+
<div class="demo-row">
267+
<div class="demo-column">${inputTimePicker}</div>
268+
</div>
264269
</div>`;
265270

266271
const componentTokens = {
@@ -333,6 +338,7 @@ const componentTokens = {
333338
...swatchGroupTokens,
334339
...swatchTokens,
335340
...splitButtonTokens,
341+
...inputTimePickerTokens,
336342
...colorPickerTokens,
337343
};
338344

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { html } from "../../support/formatting";
2+
3+
export const inputTimePickerTokens = {
4+
calciteInputTimePickerBackgroundColor: "",
5+
calciteInputTimePickerBorderColor: "",
6+
calciteInputTimePickerTextColor: "",
7+
calciteInputTimePickerIconColor: "",
8+
calciteInputTimePickerIconColorHover: "",
9+
calciteInputTimePickerShadow: "",
10+
calciteInputTimePickerInputBackgroundColor: "",
11+
calciteInputTimePickerInputBorderColor: "",
12+
calciteInputTimePickerInputTextColor: "",
13+
calciteInputTimePickerInputShadow: "",
14+
calciteInputTimePickerInputCornerRadius: "",
15+
calciteInputTimePickerDigitTextColor: "",
16+
calciteInputTimePickerDigitIconColor: "",
17+
calciteInputTimePickerDigitBorderColorPress: "",
18+
calciteInputTimePickerDigitBorderColorHover: "",
19+
calciteInputTimePickerActionBackgroundColorHover: "",
20+
calciteInputTimePickerActionBackgroundColorPress: "",
21+
};
22+
23+
export const inputTimePicker = html`<calcite-input-time-picker open></calcite-input-time-picker>`;

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,45 @@
3131
flex-direction: column;
3232
gap: 1em;
3333
}
34+
.themed {
35+
--calcite-input-time-picker-border-color: red;
36+
--calcite-input-time-picker-background-color: pink;
37+
--calcite-input-time-picker-icon-color: yellow;
38+
--calcite-input-time-picker-icon-color-hover: yellow;
39+
--calcite-input-time-picker-shadow: var(--calcite-shadow-md);
40+
--calcite-input-time-picker-corner-radius: 12px;
41+
42+
--calcite-input-time-picker-input-background-color: red;
43+
--calcite-input-time-picker-input-border-color: orange;
44+
--calcite-input-time-picker-input-text-color: green;
45+
--calcite-input-time-picker-input-shadow: var(--calcite-shadow-md);
46+
--calcite-input-time-picker-input-corner-radius: 999px;
47+
48+
--calcite-input-time-picker-digit-text-color: white;
49+
--calcite-input-time-picker-digit-icon-color: teal;
50+
--calcite-input-time-picker-digit-border-color-hover: yellow;
51+
--calcite-input-time-picker-digit-border-color-press: green;
52+
53+
--calcite-input-time-picker-action-background-color-hover: pink;
54+
--calcite-input-time-picker-action-background-color-press: red;
55+
}
3456
</style>
3557
</head>
3658
<body>
3759
<demo-dom-swapper>
3860
<div id="main-container">
3961
<main>
62+
<h3>Themed</h3>
63+
<div class="grid themed">
64+
<calcite-input-time-picker
65+
open
66+
label-text="Label text"
67+
required
68+
scale="m"
69+
step="0.1"
70+
value="10:37:09.5"
71+
></calcite-input-time-picker>
72+
</div>
4073
<h3>Internal label</h3>
4174
<div class="grid">
4275
<calcite-input-time-picker label-text="Label text" required scale="m" step="0.1" value="10:37:09.5"

0 commit comments

Comments
 (0)