Analog Clock

A customizable analog clock web component that displays time with support for multiple time zones, number systems, indices and visual styles.

Installation

``bash
npm install @browser.style/analog-clock
`

Basic Usage

`javascript
import '@browser.style/analog-clock';
`

`html

`

Attributes

- date: Display date. Values: "day", "month", "year" or any combination
- indices: Show tick marks. Values: empty (60 marks) or "hours" (12 marks)
- label: Text label below the clock
- marker: Character used for indices (default: "|")
- marker-hour: Character used for hour indices (defaults to marker value)
- numerals: Number of numerals to display (1-12, default: 12)
- steps: Use stepping animation for seconds hand
- system: Number system. Values: "roman", "romanlow", or any valid Intl numberingSystem
- timezone: UTC offset in hours (e.g., "-4", "+1", "+5.5")

CSS Custom Properties

$3


- --analog-clock-ff: Font family (default: system-ui)
- --analog-clock-fs: Font size for numerals (default: 6cqi)
- --analog-clock-fw: Font weight for numerals (default: 700)

$3

- --analog-clock-bg: Background color/gradient (default: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 15%)))
- --analog-clock-c: Main color for numerals (default: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 85%)))
- --analog-clock-cap: Center cap color (default: currentColor)
- --analog-clock-cap-sz: Size of center cap (default: 8cqi)
- --analog-clock-date-c: Date color (default: #888)
- --analog-clock-hour: Hour hand color (default: currentColor)
- --analog-clock-minute: Minute hand color (default: currentColor)
- --analog-clock-second: Second hand color (default: #ff8c05)
- --analog-clock-indices-c: Indices color (default: #0005)

$3

- --analog-clock-indices-fs: Indices font size (default: 6cqi)
- --analog-clock-indices-m: Indices margin (default: 0)
- --analog-clock-indices-hour-fw: Hour indices font weight (default: 800)
- --analog-clock-indices-hour-c: Hour indices color (default: #0005)
- --analog-clock-numerals-m: Numerals margin (default: 1ch)

$3

- --analog-clock-date-ff: Date font family (default: monospace)
- --analog-clock-date-fs: Date font size (default: 5cqi)
- --analog-clock-label-fs: Label font size (default: 5cqi)
- --analog-clock-label-fw: Label font weight (default: 600)

Examples

`html




class="gold"
system="roman"
numerals="4"
indices="hours"
marker="●"
>


indices
marker="|"
date="day month"
>


indices
marker="·"
marker-hour="●"
date="day month"
>
`

`css
/ Gold theme example /
.gold {
--_gold: #E2CA7D;
--_dark: color-mix(in oklab, var(--_gold) 60%, black);
--_accent: color-mix(in oklab, var(--_gold) 80%, maroon);

--analog-clock-bg: radial-gradient(
circle at 50% 50%,
color-mix(in oklab, var(--_gold) 20%, white) 50%,
var(--_gold) 51%,
color-mix(in oklab, var(--_gold) 85%, black) 95%
);
--analog-clock-c: color-mix(in oklab, var(--_gold) 50%, black);
--analog-clock-ff: "Didot", serif;
--analog-clock-hour: var(--_dark);
--analog-clock-minute: var(--_dark);
--analog-clock-second: var(--_accent);
--analog-clock-cap: color-mix(in oklab, var(--_dark), white 20%);
}
``