Est. 1929 — Phoenixville, PA — (610) 933-7100
Digit-count sizing. Pair .digits-N with
.wide or .narrow to right-size the input
for the maximum realistic value. .wide/.narrow
controls button size and overall height; .digits-N
controls input width independently. Pick the smallest one that fits.
.num-stepper.wide.digits-6 · Compact qty: .num-stepper.narrow.digits-3
Native styling applies automatically to every <input type="date|time|datetime-local|month|week">
site-wide — no opt-in class needed. Two CSS variables on :root control color so light and dark
surfaces adapt without per-page CSS, and the calendar/clock glyph is a masked SVG so each tenant's
--brand-* tokens automatically theme the icon.
var(--brand-primary))class="theme-dark" — glyph tracks var(--brand-accent), native popup is dark)
| Variable | Default | Purpose |
|---|---|---|
--wc-picker-glyph |
var(--brand-primary) |
Color of the calendar / clock indicator icon |
--wc-picker-scheme |
light |
color-scheme applied to the input — controls native popup theme |
On .theme-dark wrappers, the glyph automatically swaps to var(--brand-accent)
and the native popup switches to dark, so each tenant's brand colors theme the picker
without any per-page overrides.
<!-- Whole page -->
<body class="theme-dark"> ... </body>
<!-- Or just one section -->
<div class="theme-dark">
<input type="date" class="wc-input">
<input type="time" class="wc-input">
</div>