Design tokens
{/* Generated by docs/scripts/generate-tokens-page.js — do not edit. */}
The complete token contract. core.css consumes only these, every bundled theme
sets only these, and the Tailwind preset is generated from them — so this table
is the whole surface a custom theme has to work with.
Every token is namespaced --hc-. Pre-1.0 stylesheets used
--hijri-calendar-; overrides written against those need the prefix renamed.
| Token | Default |
|---|---|
--hc-background |
#ffffff |
--hc-foreground |
#111827 |
--hc-border |
1px solid #e5e7eb |
--hc-border-radius |
0.5rem |
--hc-shadow |
0 1px 2px 0 rgb(0 0 0 / 0.05) |
--hc-font-family |
inherit |
--hc-primary |
#2563eb |
--hc-primary-foreground |
#ffffff |
--hc-primary-hover |
#1d4ed8 |
--hc-secondary |
#f3f4f6 |
--hc-secondary-foreground |
#4b5563 |
--hc-secondary-hover |
#e5e7eb |
--hc-accent |
#dbeafe |
--hc-accent-foreground |
#1e40af |
--hc-muted |
#f9fafb |
--hc-muted-foreground |
#6b7280 |
--hc-selected |
var(--hc-primary) |
--hc-selected-foreground |
var(--hc-primary-foreground) |
--hc-selected-hover |
var(--hc-primary-hover) |
--hc-today |
var(--hc-accent) |
--hc-today-foreground |
var(--hc-accent-foreground) |
--hc-hover |
var(--hc-secondary) |
--hc-outside-month |
var(--hc-muted-foreground) |
--hc-disabled |
var(--hc-muted-foreground) |
--hc-unavailable |
#dc2626 |
--hc-focus-ring-color |
var(--hc-primary) |
--hc-focus-ring-width |
2px |
--hc-focus-ring-offset |
2px |
--hc-font-size-sm |
0.75rem |
--hc-font-size-base |
0.875rem |
--hc-font-size-lg |
1.125rem |
--hc-font-size-xl |
1.25rem |
--hc-font-weight-normal |
400 |
--hc-font-weight-medium |
500 |
--hc-font-weight-semibold |
600 |
--hc-font-weight-bold |
700 |
--hc-spacing-xs |
0.25rem |
--hc-spacing-sm |
0.5rem |
--hc-spacing-md |
1rem |
--hc-spacing-lg |
1.5rem |
--hc-spacing-xl |
2rem |
--hc-header-padding |
var(--hc-spacing-md) |
--hc-header-border |
1px solid #e5e7eb |
--hc-cell-size |
2rem |
--hc-cell-border-radius |
0.375rem |
--hc-cell-gap |
var(--hc-spacing-xs) |
--hc-nav-button-size |
2rem |
--hc-nav-button-border-radius |
var(--hc-cell-border-radius) |
--hc-grid-gap |
var(--hc-cell-gap) |
--hc-grid-padding |
var(--hc-spacing-sm) |
--hc-transition |
all 0.15s ease-in-out |
--hc-transition-fast |
all 0.1s ease-in-out |
--hc-transition-slow |
all 0.3s ease-in-out |
--hc-z-index |
50 |
Responsive and preference overrides
Section titled “Responsive and preference overrides”variables.css also adjusts a subset of these:
- under
max-width: 640px, cells and navigation buttons grow — small touch targets are wrong on phones - under
prefers-contrast: more, borders and text go to full black on white and the focus ring thickens - under
prefers-reduced-motion: reduce, all three transitions becomenone [data-taqwim-size='compact']and[data-taqwim-size='large']change metrics only, so they compose with any theme