import { ReactNode } from 'react'; /** * All CSS custom properties used by the component library. * Every key is optional so a theme only needs to declare the variables it overrides. * You may also add arbitrary custom variables via the index signature. */ export interface ThemeVariables { '--grey'?: string; '--lightgrey'?: string; '--lightergrey'?: string; '--white'?: string; '--red'?: string; '--lighter-red'?: string; '--green'?: string; '--lighter-green'?: string; '--blue'?: string; '--lighter-blue'?: string; '--black'?: string; '--primary-color'?: string; /** Optional gradient layered over --primary-color on large filled surfaces (Button, Chip, ProgressBar, Switch, Slider, Pagination, OptionPicker, Badge). --primary-color stays the solid and stays required: borders, outlines, strokes, shadows and text read it, and a gradient is invalid in all of them. Unset means a flat --primary-color everywhere. */ '--primary-gradient'?: string; '--primary-accent'?: string; '--primary-lighter'?: string; '--accent-color'?: string; '--accent-color-light'?: string; '--text-color'?: string; '--text-dark'?: string; '--text-light'?: string; '--text-on-primary'?: string; '--text-on-delete'?: string; '--border-color'?: string; /** Focus ring/border colour used across interactive components. Falls back to --primary-color when unset. */ '--focus-border-color'?: string; '--background'?: string; '--background-accent'?: string; '--background-accent-dark'?: string; '--background-accent-light'?: string; '--background-modal'?: string; /** Pale surface behind a checkbox and similar low-emphasis fills. */ '--light-background-color'?: string; '--success-color'?: string; '--success-lighter'?: string; '--error-color'?: string; '--error-lighter'?: string; '--required-mark-color'?: string; '--info-color'?: string; '--info-lighter'?: string; '--warn-color'?: string; '--warn-lighter'?: string; '--default-font-size'?: string; '--text-small-font-size'?: string; '--header-font-size'?: string; '--header-medium-font-size'?: string; '--header-small-font-size'?: string; '--default-font-weight'?: string; '--header-font-weight'?: string; '--default-font'?: string; '--themed-font'?: string; /** Font for code and stack traces. Falls back to `monospace`. */ '--monospace-font'?: string; '--disabled-input-color'?: string; '--disabled-font-color'?: string; '--input-background'?: string; '--input-icon-color'?: string; '--error-border-color'?: string; '--input-label-resting-color'?: string; '--input-label-floating-color'?: string; '--search-input-color'?: string; /** Colour of an input's error message. */ '--error-font-color'?: string; '--default-border-radius'?: string; '--padding-sides'?: string; '--margin-top'?: string; '--spacing-s'?: string; '--spacing-m'?: string; '--spacing-l'?: string; /** Falls back to 4px. */ '--spacing-xs'?: string; /** Avatar corner radius. Falls back to --default-border-radius when unset. */ '--avatar-radius'?: string; /** Padding around the modal panel's content. Falls back to --spacing-l when unset. */ '--modal-padding'?: string; /** Gap between the modal's header, body and footer. Falls back to --spacing-l when unset. */ '--modal-gap'?: string; /** How far the modal body bleeds past its own edge so a focus ring isn't clipped by the * scroll container. Falls back to half of --modal-gap when unset. */ '--modal-body-bleed'?: string; /** How far the modal body's content fades into the header and footer while there is more to * scroll. Set to 0px to switch the fade off. Falls back to --modal-gap plus --modal-body-bleed. */ '--modal-scroll-fade'?: string; /** Widest the modal panel gets. Falls back to the width left once its own padding is kept * clear on both sides. */ '--modal-max-width'?: string; /** Tallest the modal panel gets. Falls back to the height left once its own padding is kept * clear above and below. */ '--modal-max-height'?: string; /** How far the fade runs from each edge. Falls back to 24px. Modal and Carousel set their own * instead, through --modal-scroll-fade and a value tuned to the dot strip. */ '--scroll-fade-length'?: string; /** Widest a bottom sheet gets before it stops growing and centres. Falls back to 560px. */ '--sheet-max-width'?: string; /** Tallest a bottom sheet gets, as a ceiling on top of the space actually visible. Falls back * to 70dvh. Modal sets 90dvh on its own panel, so this does not reach a Modal sheet. */ '--sheet-max-height'?: string; /** Padding below a sheet's content, clearing a phone's home indicator. Falls back to 8px, or * the device's own safe-area inset where that is larger. Modal sets --modal-padding on its own * panel, so this does not reach a Modal sheet. */ '--sheet-safe-padding'?: string; '--card-shadow'?: string; '--background-card-elevated'?: string; '--background-card-outlined'?: string; /** Surface of a Neutral Light card, named after the old Filled style. Unset, it is the text-colour tint every Light uses; defaultTheme sets --background-accent. */ '--background-card-filled'?: string; /** Slider track (unfilled) colour. Falls back to a 20% tint of the text colour, which shows on any surface. */ '--slider-track-color'?: string; /** Slider filled-range colour. Falls back to --primary-color. */ '--slider-range-color'?: string; /** Slider thumb colour. Falls back to --primary-color. */ '--slider-thumb-color'?: string; /** Slider thumb diameter. Falls back to 1.125x --default-font-size, i.e. 18px at a 16px base (also settable per instance via the `size` prop). */ '--slider-thumb-size'?: string; /** Slider track thickness. Falls back to 0.375x --default-font-size, i.e. 6px at a 16px base. */ '--slider-track-height'?: string; /** Step marker diameter. Falls back to 40px. */ '--stepper-marker-size'?: string; /** Step marker corner radius. Falls back to --default-border-radius. */ '--stepper-marker-radius'?: string; /** Completed connector thickness. Falls back to 3px. */ '--stepper-connector-thickness'?: string; /** Not-yet-reached connector thickness. Falls back to 1px. */ '--stepper-connector-idle-thickness'?: string; /** Gap between marker and label, and grid column gap. Falls back to 12px. */ '--stepper-gap'?: string; /** Timer ring track (unfilled) colour. Falls back to a 20% tint of the text colour, which shows on any surface. */ '--timer-track-color'?: string; /** Timer ring progress (remaining time) colour. Falls back to --primary-color. */ '--timer-progress-color'?: string; /** Timer ring colour once inside the urgent threshold. Falls back to --error-color. */ '--timer-urgent-color'?: string; /** Timer ring diameter. Falls back to 10em, i.e. 160px at a 16px base (also settable per instance via the `size` prop). */ '--timer-size'?: string; /** Timer ring stroke thickness. Falls back to 10px (also settable per instance via `strokeWidth`). */ '--timer-stroke-width'?: string; /** Timer MM:SS readout text colour. Falls back to --text-color. */ '--timer-text-color'?: string; /** Timer label (below the readout) text colour. Falls back to --text-dark. */ '--timer-label-color'?: string; /** Ripple shown as the timer runs out. Falls back to --timer-progress-color. */ '--timer-ripple-color'?: string; /** Tooltip bubble and details badge. Falls back to an inverse of the page: --text-color mixed 82% into --background. */ '--tooltip-background'?: string; /** Text on that bubble. Falls back to --background. */ '--tooltip-color'?: string; /** Size of the checkmark box. Falls back to 1.375em, i.e. 22px at a 16px base. */ '--checkbox-size'?: string; /** Gap between the box and its label. Falls back to 0.5em, i.e. 8px at a 16px base. */ '--checkbox-gap'?: string; /** Size of the inline colour swatch. Falls back to 2em, i.e. 32px at a 16px base. */ '--swatch-size'?: string; /** Diameter of a radio. Falls back to 1.125em, i.e. 18px at a 16px base. */ '--radio-size'?: string; /** Gap between a radio and its label. Falls back to 0.625em, i.e. 10px at a 16px base. */ '--radio-gap'?: string; /** Diameter of the main button. Falls back to 56px. */ '--fab-size'?: string; /** Diameter of a speed-dial entry's button. Falls back to 40px. */ '--fab-mini-size'?: string; /** Icon box inside either. Falls back to 18px, and does not follow --fab-size. */ '--fab-icon-size'?: string; /** Dot colour. Falls back to --primary-color. */ '--timeline-dot-color'?: string; /** Ring drawn around a dot, separating it from the line. Falls back to --background. */ '--timeline-dot-border'?: string; /** Dot diameter. Falls back to 14px. */ '--timeline-dot-size'?: string; /** Diameter of a dot carrying an icon. Falls back to 28px. */ '--timeline-icon-dot-size'?: string; /** Connector colour. Falls back to --border-color. */ '--timeline-line-color'?: string; /** Connector thickness. Falls back to 2px. */ '--timeline-line-thickness'?: string; /** Gap between the dot column and the content. Falls back to 16px. */ '--timeline-gap'?: string; /** Vertical gap between items. Falls back to 20px. */ '--timeline-item-gap'?: string; /** Row height. Falls back to 32px. */ '--tree-node-height'?: string; /** Selected row background. Falls back to --primary-color. */ '--tree-selected-background'?: string; /** Selected row text. Falls back to --text-on-primary. */ '--tree-selected-color'?: string; /** Height of one hour in the week and day views. Pinching zooms from it. Falls back to 3em. */ '--calendar-hour-height'?: string; /** Today's date marker. Falls back to --primary-color. */ '--calendar-today-color'?: string; /** The current-time line. Falls back to --error-color. */ '--calendar-now-color'?: string; /** Corner radius of an event. Falls back to 6px. */ '--calendar-event-radius'?: string; /** The hours outside `workingHours` in the week and day views. Falls back to --background-accent. */ '--calendar-off-hours-color'?: string; /** Page button size. Falls back to 36px. */ '--pagination-size'?: string; /** Gap between page buttons. Falls back to 4px. */ '--pagination-gap'?: string; /** Current page background. Falls back to --primary-color. */ '--pagination-active-background'?: string; /** Current page text. Falls back to --text-on-primary. */ '--pagination-active-color'?: string; /** Filled symbol. Falls back to --primary-color. */ '--rating-filled-color'?: string; /** Empty symbol. Falls back to a 20% tint of the text colour, which shows on any surface. */ '--rating-empty-color'?: string; /** Symbol size. Falls back to 1.25x --default-font-size, i.e. 20px at a 16px base. */ '--rating-size'?: string; /** Minimum height of the control. Falls back to `calc(1.25em + 14px)`. */ '--multi-select-min-height'?: string; /** Maximum height of the open option panel. Falls back to 260px. */ '--multi-select-panel-height'?: string; /** Minimum height of a row. Falls back to 48px, the smallest comfortable touch target. */ '--list-item-min-height'?: string; /** Background of a `selected` row. Falls back to a 12% tint of --primary-color. */ '--list-item-selected-background'?: string; /** Width a column collapses to once it has no cards (see `collapseEmptyColumns`). Falls back to 140px. */ '--kanban-empty-column-width'?: string; '--option-picker-padding'?: string; /** Veil over the content while it loads. Falls back to --background at 50%. */ '--loading-overlay-background'?: string; /** How far the content under the veil is blurred. Falls back to 4px; 0px turns the blur off. */ '--loading-overlay-blur'?: string; /** Behind the image. Falls back to --background. */ '--lightbox-background'?: string; /** Track (unfilled) background colour. Falls back to a 20% tint of the text colour, which shows on any surface. */ '--progress-bar-track-color'?: string; /** Placed chip and palette entry background. Falls back to a 22% tint of --primary-color. */ '--template-editor-chip-background'?: string; /** Placed chip and palette entry text. Falls back to --primary-color, a third of the way to --text-color. */ '--template-editor-chip-color'?: string; /** Background of a chip whose token is not in `tokenGroups`. Falls back to a 22% tint of --warn-color. */ '--template-editor-unknown-chip-background'?: string; /** Text of a chip whose token is not in `tokenGroups`. Falls back to --warn-color, a third of the way to --text-color. */ '--template-editor-unknown-chip-color'?: string; /** Width of the palette beside the field. Falls back to 200px. */ '--template-editor-palette-width'?: string; /** Space between the field and the palette. Falls back to 16px. */ '--template-editor-gap'?: string; /** Canvas behind the plan. Falls back to --background. */ '--plan-canvas-background'?: string; /** Grid lines, drawn at low opacity. Falls back to --text-color. */ '--plan-grid-color'?: string; /** The storey below, traced under the current one. Falls back to --text-dark. */ '--plan-underlay-color'?: string; /** Room floor. Falls back to --background-accent. */ '--plan-room-fill'?: string; /** Room floor under the pointer. Falls back to --background-accent-light. */ '--plan-room-fill-hover'?: string; /** Edge of the walls bounding a selected room. Falls back to --primary-color. */ '--plan-room-edge-selected'?: string; /** Body of those same walls. Falls back to --primary-lighter. */ '--plan-room-edge-selected-fill'?: string; /** Wall body. Falls back to --text-color mixed 58% into the canvas. */ '--plan-wall-fill'?: string; /** Wall edge, its caps and the jamb faces. Falls back to --text-color mixed 38% in. */ '--plan-wall-outline'?: string; /** Wall corner treatment, any `stroke-linejoin` value. Falls back to `round`. */ '--plan-wall-join'?: string; /** How far a mitred corner may run, when --plan-wall-join is `miter`. Falls back to `4`. */ '--plan-wall-miter-limit'?: string; /** Door leaf and swing arc. Falls back to --text-dark. */ '--plan-door-color'?: string; /** Window pane line. Falls back to --info-color. */ '--plan-window-color'?: string; /** RoomDrawer's snap construction lines. Falls back to --info-color. */ '--plan-guide-color'?: string; /** RoomDrawer's ruler. Falls back to --primary-color. */ '--plan-measure-color'?: string; [key: string]: string | undefined; } export interface Theme { /** Unique identifier used to select this theme via `currentThemeId`. */ id: string; /** * ID of another theme whose variables are applied before this theme's own * variables, enabling lightweight inheritance / layering. */ baseThemeId?: string; variables: ThemeVariables; } export interface ThemeProviderProps { children: ReactNode; /** The themes to choose from. Defaults to `[defaultTheme]`. */ themes?: Theme[]; /** The `id` of the theme to apply, from `themes`. */ currentThemeId?: string; }