Tokens
Every CSS variable in OODS Foundry 0.10.1: 1,355 of them, by brand and theme.
Generated from @oods/foundry 0.10.1
Brands A and B are the brands OODS Foundry ships. Brands shows what each is, in each theme.
| Variable | Value | Meaning |
|---|---|---|
--oods-border-panel-default-color | oklch(0.922 0 286) | |
--oods-border-panel-default-radius | 12px | |
--oods-border-panel-default-style | solid | |
--oods-border-panel-default-width | 1px | |
--oods-border-status-critical-color | oklch(0.807 0.088767 18.290593) | |
--oods-border-status-critical-radius | 8px | |
--oods-border-status-critical-style | solid | |
--oods-border-status-critical-width | 1px | |
--oods-border-surface-default-color | oklch(0.922 0 286) | |
--oods-border-surface-default-radius | 12px | |
--oods-border-surface-default-style | solid | |
--oods-border-surface-default-width | 1px | |
--oods-brand-a-border-strong | oklch(0.871 0 286) | High-emphasis border. |
--oods-brand-a-border-subtle | oklch(0.922 0 286) | Default border for surfaces. |
--oods-brand-a-status-critical-surface | oklch(0.955466 0.020724 13.839409) | Critical feedback background. |
--oods-brand-a-status-critical-text | oklch(0.556979 0.197433 25.13833) | Critical text colour. |
--oods-brand-a-status-info-surface | oklch(0.959682 0.020056 238.701263) | Informational background surface. |
--oods-brand-a-status-info-text | oklch(0.540689 0.162234 252.214666) | Informational text colour. |
--oods-brand-a-status-neutral-surface | oklch(0.97 0 286) | Neutral feedback background. |
--oods-brand-a-status-neutral-text | oklch(0.439 0 286) | Neutral text colour. |
--oods-brand-a-status-success-surface | oklch(0.958254 0.02227 155.931601) | Success feedback background. |
--oods-brand-a-status-success-text | oklch(0.523466 0.11158 159.513172) | Success text colour. |
--oods-brand-a-status-warning-surface | oklch(0.969531 0.068378 100.371682) | Warning feedback background. |
--oods-brand-a-status-warning-text | oklch(0.553161 0.125197 63.921739) | Warning text colour. |
--oods-brand-a-surface-canvas | oklch(1 0 286) | Primary application canvas. |
--oods-brand-a-surface-interactive-primary | oklch(0.145 0 286) | |
--oods-brand-a-surface-raised | oklch(1 0 286) | Raised card surface. |
--oods-brand-a-surface-subtle | oklch(0.97 0 286) | Subtle secondary surface. |
--oods-brand-a-text-muted | oklch(0.545 0 286) | Muted caption text. |
--oods-brand-a-text-on-interactive | oklch(1 0 286) | Text and icons on the primary interactive surface (buttons and selected controls). |
--oods-brand-a-text-primary | oklch(0.145 0 286) | Primary reading text. |
--oods-brand-a-text-secondary | oklch(0.439 0 286) | Secondary supporting text. |
--oods-brand-b-border-strong | oklch(0.871 0 286) | High-emphasis border. |
--oods-brand-b-border-subtle | oklch(0.922 0 286) | Default border for surfaces. |
--oods-brand-b-status-critical-surface | oklch(0.955466 0.020724 13.839409) | Critical feedback background. |
--oods-brand-b-status-critical-text | oklch(0.556979 0.197433 25.13833) | Critical text colour. |
--oods-brand-b-status-info-surface | oklch(0.959682 0.020056 238.701263) | Informational background surface. |
--oods-brand-b-status-info-text | oklch(0.540689 0.162234 252.214666) | Informational text colour. |
--oods-brand-b-status-neutral-surface | oklch(0.97 0 286) | Neutral feedback background. |
--oods-brand-b-status-neutral-text | oklch(0.439 0 286) | Neutral text colour. |
--oods-brand-b-status-success-surface | oklch(0.958254 0.02227 155.931601) | Success feedback background. |
--oods-brand-b-status-success-text | oklch(0.523466 0.11158 159.513172) | Success text colour. |
--oods-brand-b-status-warning-surface | oklch(0.969531 0.068378 100.371682) | Warning feedback background. |
--oods-brand-b-status-warning-text | oklch(0.553161 0.125197 63.921739) | Warning text colour. |
--oods-brand-b-surface-canvas | oklch(1 0 286) | Primary application canvas. |
--oods-brand-b-surface-interactive-primary | oklch(0.541675 0.179047 288) | |
--oods-brand-b-surface-raised | oklch(1 0 286) | Raised card surface. |
--oods-brand-b-surface-subtle | oklch(0.97 0 286) | Subtle secondary surface. |
--oods-brand-b-text-muted | oklch(0.545 0 286) | Muted caption text. |
--oods-brand-b-text-on-interactive | oklch(1 0 286) | Text and icons on the primary interactive surface (buttons and selected controls). |
--oods-brand-b-text-primary | oklch(0.145 0 286) | Primary reading text. |
--oods-brand-b-text-secondary | oklch(0.439 0 286) | Secondary supporting text. |
--cmp-badge-background | oklch(0.97 0 286) | |
--cmp-badge-border | oklch(0.922 0 286) | |
--cmp-badge-color | oklch(0.145 0 286) | |
--cmp-badge-font-size | 12px | |
--cmp-badge-font-weight | 500 | |
--cmp-badge-gap | 0.25rem | |
--cmp-badge-height | 1.25rem | |
--cmp-badge-icon | oklch(0.145 0 286) | |
--cmp-badge-padding-block | 0.125rem | |
--cmp-badge-padding-inline | 0.5rem | |
--cmp-badge-radius | 999px | |
--cmp-badge-text | oklch(0.145 0 286) | |
--cmp-banner-background | oklch(0.97 0 286) | |
--cmp-banner-border | oklch(0.922 0 286) | |
--cmp-banner-text | oklch(0.145 0 286) | |
--cmp-billing-amount-text | oklch(0.145 0 286) | |
--cmp-billing-currency-text | oklch(0.439 0 286) | |
--cmp-billing-cycle-progress-fill | oklch(0.509225 0.172497 267.161083) | |
--cmp-billing-cycle-progress-height | 0.5rem | |
--cmp-billing-interval-text | oklch(0.439 0 286) | |
--cmp-billing-timeline-text | oklch(0.145 0 286) | |
--cmp-border-default | oklch(0.922 0 286) | |
--cmp-border-subtle | oklch(0.922 0 286) | |
--cmp-button-background | oklch(0.145 0 286) | |
--cmp-button-background-disabled | oklch(0.97 0 286) | |
--cmp-button-background-hover | oklch(0.3361 0 286) | |
--cmp-button-border | oklch(0.922 0 286) | |
--cmp-button-border-disabled | oklch(0.922 0 286) | |
--cmp-button-focus-outer | oklch(0.543785 0.191021 267) | |
--cmp-button-focus-width | 2px | |
--cmp-button-font-weight | 500 | |
--cmp-button-gap | 0.5rem | |
--cmp-button-height | 2rem | |
--cmp-button-height-lg | 2.5rem | |
--cmp-button-height-sm | 1.75rem | |
--cmp-button-padding-block | 0.25rem | |
--cmp-button-padding-block-lg | 0.5rem | |
--cmp-button-padding-block-sm | 0.125rem | |
--cmp-button-padding-inline | 0.75rem | |
--cmp-button-padding-inline-lg | 1rem | |
--cmp-button-padding-inline-sm | 0.625rem | |
--cmp-button-radius | 6px | |
--cmp-button-text | oklch(1 0 286) | |
--cmp-button-text-disabled | oklch(0.643 0 286) | |
--cmp-card-radius | 12px | |
--cmp-card-shadow-blur | 8px | |
--cmp-card-shadow-color | rgba(0, 0, 0, 0.06) | |
--cmp-card-shadow-offset-x | 0px | |
--cmp-card-shadow-offset-y | 4px | |
--cmp-card-shadow-spread | -4px | |
--cmp-checkbox-background-checked | oklch(0.145 0 286) | |
--cmp-checkbox-gap | 0.5rem | |
--cmp-checkbox-text | oklch(0.145 0 286) | |
--cmp-event-background | oklch(1 0 286) | |
--cmp-event-border | oklch(0.922 0 286) | |
--cmp-event-text | oklch(0.145 0 286) | |
--cmp-filter-background | oklch(1 0 286) | |
--cmp-filter-border | oklch(0.922 0 286) | |
--cmp-filter-legend | oklch(0.439 0 286) | |
--cmp-filter-text | oklch(0.145 0 286) | |
--cmp-focus-offset | 2px | |
--cmp-focus-outer | oklch(0.543785 0.191021 267) | |
--cmp-focus-width | 2px | |
--cmp-form-background | oklch(1 0 286) | |
--cmp-form-border | oklch(0.922 0 286) | |
--cmp-form-hint | oklch(0.439 0 286) | |
--cmp-form-text | oklch(0.145 0 286) | |
--cmp-header-metadata | oklch(0.439 0 286) | |
--cmp-header-subtitle | oklch(0.439 0 286) | |
--cmp-header-title | oklch(0.145 0 286) | |
--cmp-input-background | oklch(1 0 286) | |
--cmp-input-border | oklch(0.643 0 286) | |
--cmp-input-focus | oklch(0.543785 0.191021 267) | |
--cmp-input-gap | 0.375rem | |
--cmp-input-message-border | oklch(0.827254 0.122422 86.674497) | |
--cmp-input-message-text | oklch(0.553161 0.125197 63.921739) | |
--cmp-input-padding-block | 0.25rem | |
--cmp-input-padding-block-compact | 0.25rem | |
--cmp-input-padding-inline | 0.75rem | |
--cmp-input-padding-inline-compact | 0.5rem | |
--cmp-input-placeholder | oklch(0.545 0 286) | |
--cmp-input-radius | 6px | |
--cmp-input-support-text | oklch(0.545 0 286) | |
--cmp-input-text | oklch(0.145 0 286) | |
--cmp-meta-label | oklch(0.439 0 286) | |
--cmp-meta-text | oklch(0.145 0 286) | |
--cmp-panel-background | oklch(1 0 286) | |
--cmp-panel-border | oklch(0.922 0 286) | |
--cmp-panel-subtitle | oklch(0.439 0 286) | |
--cmp-panel-title | oklch(0.145 0 286) | |
--cmp-preview-frame | oklch(0.922 0 286) | |
--cmp-preview-placeholder | oklch(0.439 0 286) | |
--cmp-shadow-overlay-blur | 16px | |
--cmp-shadow-overlay-color | rgba(0, 0, 0, 0.1) | |
--cmp-shadow-overlay-offset-x | 0px | |
--cmp-shadow-overlay-offset-y | 8px | |
--cmp-shadow-overlay-spread | -4px | |
--cmp-shadow-panel-blur | 8px | |
--cmp-shadow-panel-color | rgba(0, 0, 0, 0.06) | |
--cmp-shadow-panel-offset-x | 0px | |
--cmp-shadow-panel-offset-y | 4px | |
--cmp-shadow-panel-spread | -4px | |
--cmp-spacing-inline-md | 1rem | |
--cmp-spacing-inline-sm | 0.75rem | |
--cmp-spacing-inline-xs | 0.5rem | |
--cmp-spacing-inset-compact | 0.75rem | |
--cmp-spacing-inset-default | 1rem | |
--cmp-spacing-inset-sm | 0.75rem | |
--cmp-spacing-stack-default | 1rem | |
--cmp-spacing-stack-lg | 1.5rem | |
--cmp-spacing-stack-md | 1rem | |
--cmp-spacing-stack-sm | 0.75rem | |
--cmp-spacing-stack-xl | 2rem | |
--cmp-spacing-stack-xs | 0.5rem | |
--cmp-summary-background | oklch(1 0 286) | |
--cmp-summary-border | oklch(0.922 0 286) | |
--cmp-summary-label | oklch(0.439 0 286) | |
--cmp-summary-text | oklch(0.145 0 286) | |
--cmp-surface-action | oklch(0.145 0 286) | |
--cmp-surface-action-hover | oklch(0.3361 0 286) | |
--cmp-surface-panel | oklch(1 0 286) | |
--cmp-surface-subtle | oklch(0.97 0 286) | |
--cmp-swatch-border | oklch(0.922 0 286) | |
--cmp-swatch-chip | oklch(0.145 0 286) | |
--cmp-tabs-indicator-width | 2px | |
--cmp-tabs-padding-block | 0.625rem | |
--cmp-tabs-padding-block-lg | 0.75rem | |
--cmp-tabs-padding-block-sm | 0.5rem | |
--cmp-tabs-padding-inline | 0.75rem | |
--cmp-tabs-padding-inline-lg | 1rem | |
--cmp-tabs-padding-inline-sm | 0.625rem | |
--cmp-text-accent | oklch(0.509225 0.172497 267.161083) | |
--cmp-text-body | oklch(0.145 0 286) | |
--cmp-text-muted | oklch(0.545 0 286) | |
--cmp-text-on-action | oklch(1 0 286) | |
--cmp-text-placeholder-color | oklch(0.545 0 286) | |
--cmp-text-placeholder-disabled | oklch(0.643 0 286) | |
--cmp-text-placeholder-error | oklch(0.556979 0.197433 25.13833) | |
--cmp-text-placeholder-focus | oklch(0.439 0 286) | |
--cmp-text-primary | oklch(0.145 0 286) | |
--cmp-text-secondary | oklch(0.439 0 286) | |
--cmp-timeline-background | oklch(1 0 286) | |
--cmp-timeline-border | oklch(0.922 0 286) | |
--cmp-timeline-marker | oklch(0.145 0 286) | |
--cmp-timeline-text | oklch(0.145 0 286) | |
--oods-color-brand-a-accent-background | oklch(0.96086 0.016961 267.781434) | Background of an accent panel. |
--oods-color-brand-a-accent-border | oklch(0.806161 0.08754 271.403687) | Border of an accent panel. |
--oods-color-brand-a-accent-text | oklch(0.509225 0.172497 267.161083) | Text on an accent panel. |
--oods-color-brand-a-border-interactive | oklch(0.643 0 286) | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
--oods-color-brand-a-border-interactive-hover | oklch(0.545 0 286) | Border of a hovered control. |
--oods-color-brand-a-border-strong | oklch(0.871 0 286) | High-emphasis border. |
--oods-color-brand-a-border-subtle | oklch(0.922 0 286) | Default border for surfaces. |
--oods-color-brand-a-focus-ring-inner | oklch(1 0 286) | Inner focus ring colour. |
--oods-color-brand-a-focus-ring-outer | oklch(0.543785 0.191021 267) | Outer focus ring colour. |
--oods-color-brand-a-focus-text | oklch(0.509225 0.172497 267.161083) | Focus foreground colour. |
--oods-color-brand-a-status-accent-border | oklch(0.806161 0.08754 271.403687) | Accent border colour. |
--oods-color-brand-a-status-accent-icon | oklch(0.543785 0.191021 267) | Accent icon colour. |
--oods-color-brand-a-status-accent-on-solid | oklch(1 0 286) | Text and icons on the solid accent fill. |
--oods-color-brand-a-status-accent-solid | oklch(0.543785 0.191021 267) | Solid accent fill, for emphasis (a solid badge or banner). |
--oods-color-brand-a-status-accent-surface | oklch(0.96086 0.016961 267.781434) | Accent feedback background. |
--oods-color-brand-a-status-accent-text | oklch(0.509225 0.172497 267.161083) | Accent text colour. |
--oods-color-brand-a-status-critical-border | oklch(0.807 0.088767 18.290593) | Critical border colour. |
--oods-color-brand-a-status-critical-icon | oklch(0.625577 0.193344 23) | Critical icon colour. |
--oods-color-brand-a-status-critical-on-solid | oklch(1 0 286) | Text and icons on the solid critical fill. |
--oods-color-brand-a-status-critical-solid | oklch(0.590577 0.193344 23) | Solid critical fill, for emphasis (a solid badge or banner). |
--oods-color-brand-a-status-critical-surface | oklch(0.955466 0.020724 13.839409) | Critical feedback background. |
--oods-color-brand-a-status-critical-text | oklch(0.556979 0.197433 25.13833) | Critical text colour. |
--oods-color-brand-a-status-info-border | oklch(0.809755 0.088669 243.091253) | Informational border colour. |
--oods-color-brand-a-status-info-icon | oklch(0.622153 0.183136 251.723539) | Informational icon colour. |
--oods-color-brand-a-status-info-on-solid | oklch(1 0 286) | Text and icons on the solid info fill. |
--oods-color-brand-a-status-info-solid | oklch(0.566651 0.168568 251.8) | Solid info fill, for emphasis (a solid badge or banner). |
--oods-color-brand-a-status-info-surface | oklch(0.959682 0.020056 238.701263) | Informational background surface. |
--oods-color-brand-a-status-info-text | oklch(0.540689 0.162234 252.214666) | Informational text colour. |
--oods-color-brand-a-status-neutral-border | oklch(0.871 0 286) | Neutral border colour. |
--oods-color-brand-a-status-neutral-icon | oklch(0.643 0 286) | Neutral icon colour. |
--oods-color-brand-a-status-neutral-on-solid | oklch(1 0 286) | Text and icons on the solid neutral fill. |
--oods-color-brand-a-status-neutral-solid | oklch(0.145 0 286) | Solid neutral fill, for emphasis (a solid badge or banner). |
--oods-color-brand-a-status-neutral-surface | oklch(0.97 0 286) | Neutral feedback background. |
--oods-color-brand-a-status-neutral-text | oklch(0.439 0 286) | Neutral text colour. |
--oods-color-brand-a-status-success-border | oklch(0.798152 0.08315 159.165466) | Success border colour. |
--oods-color-brand-a-status-success-icon | oklch(0.611472 0.126614 158.247346) | Success icon colour. |
--oods-color-brand-a-status-success-on-solid | oklch(1 0 286) | Text and icons on the solid success fill. |
--oods-color-brand-a-status-success-solid | oklch(0.548102 0.128886 157.7) | Solid success fill, for emphasis (a solid badge or banner). |
--oods-color-brand-a-status-success-surface | oklch(0.958254 0.02227 155.931601) | Success feedback background. |
--oods-color-brand-a-status-success-text | oklch(0.523466 0.11158 159.513172) | Success text colour. |
--oods-color-brand-a-status-warning-border | oklch(0.827254 0.122422 86.674497) | Warning border colour. |
--oods-color-brand-a-status-warning-icon | oklch(0.570661 0.129157 63.921739) | Warning icon colour. |
--oods-color-brand-a-status-warning-on-solid | oklch(0.145 0 286) | Text and icons on the solid warning fill. |
--oods-color-brand-a-status-warning-solid | oklch(0.853575 0.15722 84.1) | Solid warning fill, for emphasis (a solid badge or banner). |
--oods-color-brand-a-status-warning-surface | oklch(0.969531 0.068378 100.371682) | Warning feedback background. |
--oods-color-brand-a-status-warning-text | oklch(0.553161 0.125197 63.921739) | Warning text colour. |
--oods-color-brand-a-surface-backdrop | oklch(0.145 0 286) | Backdrop scrim surface. |
--oods-color-brand-a-surface-canvas | oklch(1 0 286) | Primary application canvas. |
--oods-color-brand-a-surface-disabled | oklch(0.97 0 286) | Surface colour for disabled or inactive UI. |
--oods-color-brand-a-surface-interactive-destructive-default | oklch(0.590577 0.193344 23) | The destructive action, at rest. |
--oods-color-brand-a-surface-interactive-destructive-hover | oklch(0.560577 0.194665 24.00731) | The destructive action, hovered. |
--oods-color-brand-a-surface-interactive-destructive-pressed | oklch(0.530577 0.194665 24.00731) | The destructive action, pressed. |
--oods-color-brand-a-surface-interactive-primary-default | oklch(0.145 0 286) | Primary interactive surface default state. |
--oods-color-brand-a-surface-interactive-primary-hover | oklch(0.3361 0 286) | Primary interactive surface hover state. |
--oods-color-brand-a-surface-interactive-primary-pressed | oklch(0.2626 0 286) | Primary interactive surface pressed state. |
--oods-color-brand-a-surface-interactive-secondary-default | oklch(0.97 0 286) | The secondary action (a subtle fill), at rest. |
--oods-color-brand-a-surface-interactive-secondary-hover | oklch(0.95 0 286) | The secondary action (a subtle fill), hovered. |
--oods-color-brand-a-surface-interactive-secondary-pressed | oklch(0.935 0 286) | The secondary action (a subtle fill), pressed. |
--oods-color-brand-a-surface-inverse | oklch(0.145 0 286) | Inverse surface for dark-on-light treatments. |
--oods-color-brand-a-surface-raised | oklch(1 0 286) | Raised card surface. |
--oods-color-brand-a-surface-subtle | oklch(0.97 0 286) | Subtle secondary surface. |
--oods-color-brand-a-text-accent | oklch(0.509225 0.172497 267.161083) | Accent text colour. |
--oods-color-brand-a-text-disabled | oklch(0.643 0 286) | Disabled or de-emphasised text. |
--oods-color-brand-a-text-inverse | oklch(1 0 286) | Text on inverse surfaces. |
--oods-color-brand-a-text-muted | oklch(0.545 0 286) | Muted caption text. |
--oods-color-brand-a-text-on-destructive | oklch(1 0 286) | Text and icons on the destructive action. |
--oods-color-brand-a-text-on-interactive | oklch(1 0 286) | Text and icons on the primary interactive surface (buttons and selected controls). |
--oods-color-brand-a-text-primary | oklch(0.145 0 286) | Primary reading text. |
--oods-color-brand-a-text-secondary | oklch(0.439 0 286) | Secondary supporting text. |
--oods-color-brand-b-accent-background | oklch(0.962276 0.019054 299.014054) | Background of an accent panel. |
--oods-color-brand-b-accent-border | oklch(0.80624 0.09022 293.552564) | Border of an accent panel. |
--oods-color-brand-b-accent-text | oklch(0.507841 0.158971 288.60723) | Text on an accent panel. |
--oods-color-brand-b-border-interactive | oklch(0.643 0 286) | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
--oods-color-brand-b-border-interactive-hover | oklch(0.545 0 286) | Border of a hovered control. |
--oods-color-brand-b-border-strong | oklch(0.871 0 286) | High-emphasis border. |
--oods-color-brand-b-border-subtle | oklch(0.922 0 286) | Default border for surfaces. |
--oods-color-brand-b-focus-ring-inner | oklch(1 0 286) | Inner focus ring colour. |
--oods-color-brand-b-focus-ring-outer | oklch(0.145 0 286) | Outer focus ring colour. |
--oods-color-brand-b-focus-text | oklch(0.507841 0.158971 288.60723) | Focus foreground colour. |
--oods-color-brand-b-status-accent-border | oklch(0.80624 0.09022 293.552564) | Accent border colour. |
--oods-color-brand-b-status-accent-icon | oklch(0.541675 0.179047 288) | Accent icon colour. |
--oods-color-brand-b-status-accent-on-solid | oklch(1 0 286) | Text and icons on the solid accent fill. |
--oods-color-brand-b-status-accent-solid | oklch(0.541675 0.179047 288) | Solid accent fill, for emphasis (a solid badge or banner). |
--oods-color-brand-b-status-accent-surface | oklch(0.962276 0.019054 299.014054) | Accent feedback background. |
--oods-color-brand-b-status-accent-text | oklch(0.507841 0.158971 288.60723) | Accent text colour. |
--oods-color-brand-b-status-critical-border | oklch(0.807 0.088767 18.290593) | Critical border colour. |
--oods-color-brand-b-status-critical-icon | oklch(0.625577 0.193344 23) | Critical icon colour. |
--oods-color-brand-b-status-critical-on-solid | oklch(1 0 286) | Text and icons on the solid critical fill. |
--oods-color-brand-b-status-critical-solid | oklch(0.590577 0.193344 23) | Solid critical fill, for emphasis (a solid badge or banner). |
--oods-color-brand-b-status-critical-surface | oklch(0.955466 0.020724 13.839409) | Critical feedback background. |
--oods-color-brand-b-status-critical-text | oklch(0.556979 0.197433 25.13833) | Critical text colour. |
--oods-color-brand-b-status-info-border | oklch(0.809755 0.088669 243.091253) | Informational border colour. |
--oods-color-brand-b-status-info-icon | oklch(0.622153 0.183136 251.723539) | Informational icon colour. |
--oods-color-brand-b-status-info-on-solid | oklch(1 0 286) | Text and icons on the solid info fill. |
--oods-color-brand-b-status-info-solid | oklch(0.566651 0.168568 251.8) | Solid info fill, for emphasis (a solid badge or banner). |
--oods-color-brand-b-status-info-surface | oklch(0.959682 0.020056 238.701263) | Informational background surface. |
--oods-color-brand-b-status-info-text | oklch(0.540689 0.162234 252.214666) | Informational text colour. |
--oods-color-brand-b-status-neutral-border | oklch(0.871 0 286) | Neutral border colour. |
--oods-color-brand-b-status-neutral-icon | oklch(0.643 0 286) | Neutral icon colour. |
--oods-color-brand-b-status-neutral-on-solid | oklch(1 0 286) | Text and icons on the solid neutral fill. |
--oods-color-brand-b-status-neutral-solid | oklch(0.145 0 286) | Solid neutral fill, for emphasis (a solid badge or banner). |
--oods-color-brand-b-status-neutral-surface | oklch(0.97 0 286) | Neutral feedback background. |
--oods-color-brand-b-status-neutral-text | oklch(0.439 0 286) | Neutral text colour. |
--oods-color-brand-b-status-success-border | oklch(0.798152 0.08315 159.165466) | Success border colour. |
--oods-color-brand-b-status-success-icon | oklch(0.611472 0.126614 158.247346) | Success icon colour. |
--oods-color-brand-b-status-success-on-solid | oklch(1 0 286) | Text and icons on the solid success fill. |
--oods-color-brand-b-status-success-solid | oklch(0.548102 0.128886 157.7) | Solid success fill, for emphasis (a solid badge or banner). |
--oods-color-brand-b-status-success-surface | oklch(0.958254 0.02227 155.931601) | Success feedback background. |
--oods-color-brand-b-status-success-text | oklch(0.523466 0.11158 159.513172) | Success text colour. |
--oods-color-brand-b-status-warning-border | oklch(0.827254 0.122422 86.674497) | Warning border colour. |
--oods-color-brand-b-status-warning-icon | oklch(0.570661 0.129157 63.921739) | Warning icon colour. |
--oods-color-brand-b-status-warning-on-solid | oklch(0.145 0 286) | Text and icons on the solid warning fill. |
--oods-color-brand-b-status-warning-solid | oklch(0.853575 0.15722 84.1) | Solid warning fill, for emphasis (a solid badge or banner). |
--oods-color-brand-b-status-warning-surface | oklch(0.969531 0.068378 100.371682) | Warning feedback background. |
--oods-color-brand-b-status-warning-text | oklch(0.553161 0.125197 63.921739) | Warning text colour. |
--oods-color-brand-b-surface-backdrop | oklch(0.145 0 286) | Backdrop scrim surface. |
--oods-color-brand-b-surface-canvas | oklch(1 0 286) | Primary application canvas. |
--oods-color-brand-b-surface-disabled | oklch(0.97 0 286) | Surface colour for disabled or inactive UI. |
--oods-color-brand-b-surface-interactive-destructive-default | oklch(0.590577 0.193344 23) | The destructive action, at rest. |
--oods-color-brand-b-surface-interactive-destructive-hover | oklch(0.560577 0.194665 24.00731) | The destructive action, hovered. |
--oods-color-brand-b-surface-interactive-destructive-pressed | oklch(0.530577 0.194665 24.00731) | The destructive action, pressed. |
--oods-color-brand-b-surface-interactive-primary-default | oklch(0.541675 0.179047 288) | Primary interactive surface default state. |
--oods-color-brand-b-surface-interactive-primary-hover | oklch(0.510873 0.177492 287.649345) | Primary interactive surface hover state. |
--oods-color-brand-b-surface-interactive-primary-pressed | oklch(0.480071 0.177492 287.649345) | Primary interactive surface pressed state. |
--oods-color-brand-b-surface-interactive-secondary-default | oklch(0.97 0 286) | The secondary action (a subtle fill), at rest. |
--oods-color-brand-b-surface-interactive-secondary-hover | oklch(0.95 0 286) | The secondary action (a subtle fill), hovered. |
--oods-color-brand-b-surface-interactive-secondary-pressed | oklch(0.935 0 286) | The secondary action (a subtle fill), pressed. |
--oods-color-brand-b-surface-inverse | oklch(0.145 0 286) | Inverse surface for dark-on-light treatments. |
--oods-color-brand-b-surface-raised | oklch(1 0 286) | Raised card surface. |
--oods-color-brand-b-surface-subtle | oklch(0.97 0 286) | Subtle secondary surface. |
--oods-color-brand-b-text-accent | oklch(0.507841 0.158971 288.60723) | Accent text colour. |
--oods-color-brand-b-text-disabled | oklch(0.643 0 286) | Disabled or de-emphasised text. |
--oods-color-brand-b-text-inverse | oklch(1 0 286) | Text on inverse surfaces. |
--oods-color-brand-b-text-muted | oklch(0.545 0 286) | Muted caption text. |
--oods-color-brand-b-text-on-destructive | oklch(1 0 286) | Text and icons on the destructive action. |
--oods-color-brand-b-text-on-interactive | oklch(1 0 286) | Text and icons on the primary interactive surface (buttons and selected controls). |
--oods-color-brand-b-text-primary | oklch(0.145 0 286) | Primary reading text. |
--oods-color-brand-b-text-secondary | oklch(0.439 0 286) | Secondary supporting text. |
--oods-font-brand-a-mono | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | |
--oods-font-brand-a-sans | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-font-brand-b-mono | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | |
--oods-font-brand-b-sans | 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-motion-duration-base | 180ms | |
--oods-motion-duration-fast | 120ms | |
--oods-motion-duration-slow | 320ms | |
--oods-motion-easing-emphasized | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--oods-motion-easing-linear | cubic-bezier(0, 0, 1, 1) | |
--oods-motion-easing-standard | cubic-bezier(0.2, 0, 0.38, 1) | |
--oods-motion-reduced-duration-base | 0ms | |
--oods-motion-reduced-duration-fast | 0ms | |
--oods-motion-reduced-duration-slow | 0ms | |
--oods-motion-reduced-transition-banner-reveal-delay | 0ms | |
--oods-motion-reduced-transition-banner-reveal-duration | 0ms | |
--oods-motion-reduced-transition-banner-reveal-timing-function | cubic-bezier(0, 0, 1, 1) | |
--oods-motion-reduced-transition-chip-in-delay | 0ms | |
--oods-motion-reduced-transition-chip-in-duration | 0ms | |
--oods-motion-reduced-transition-chip-in-timing-function | cubic-bezier(0, 0, 1, 1) | |
--oods-motion-reduced-transition-chip-out-delay | 0ms | |
--oods-motion-reduced-transition-chip-out-duration | 0ms | |
--oods-motion-reduced-transition-chip-out-timing-function | cubic-bezier(0, 0, 1, 1) | |
--oods-motion-reduced-transition-focus-delay | 0ms | |
--oods-motion-reduced-transition-focus-duration | 0ms | |
--oods-motion-reduced-transition-focus-timing-function | cubic-bezier(0, 0, 1, 1) | |
--oods-motion-reduced-transition-hover-delay | 0ms | |
--oods-motion-reduced-transition-hover-duration | 0ms | |
--oods-motion-reduced-transition-hover-timing-function | cubic-bezier(0, 0, 1, 1) | |
--oods-motion-transition-banner-reveal-delay | 20ms | |
--oods-motion-transition-banner-reveal-duration | 320ms | |
--oods-motion-transition-banner-reveal-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--oods-motion-transition-chip-in-delay | 0ms | |
--oods-motion-transition-chip-in-duration | 180ms | |
--oods-motion-transition-chip-in-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--oods-motion-transition-chip-out-delay | 0ms | |
--oods-motion-transition-chip-out-duration | 120ms | |
--oods-motion-transition-chip-out-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--oods-motion-transition-focus-delay | 0ms | |
--oods-motion-transition-focus-duration | 180ms | |
--oods-motion-transition-focus-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--oods-motion-transition-hover-delay | 0ms | |
--oods-motion-transition-hover-duration | 120ms | |
--oods-motion-transition-hover-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--oods-overlay-backdrop-opacity | 0.5 | |
--oods-overlay-transition-close-delay | 0ms | |
--oods-overlay-transition-close-duration | 180ms | |
--oods-overlay-transition-close-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--oods-overlay-transition-open-delay | 0ms | |
--oods-overlay-transition-open-duration | 180ms | |
--oods-overlay-transition-open-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--oods-radius-brand-a-card | 12px | |
--oods-radius-brand-a-control | 6px | |
--oods-radius-brand-a-large | 8px | |
--oods-radius-brand-a-pill | 999px | |
--oods-radius-brand-a-small | 4px | |
--oods-radius-brand-b-card | 16px | |
--oods-radius-brand-b-control | 8px | |
--oods-radius-brand-b-large | 10px | |
--oods-radius-brand-b-pill | 999px | |
--oods-radius-brand-b-small | 6px | |
--ref-border-radius-md | 12px | |
--ref-border-radius-pill | 999px | |
--ref-border-radius-sm | 8px | |
--ref-border-style-solid | solid | |
--ref-border-width-bold | 2px | |
--ref-border-width-emphasis | 3px | |
--ref-border-width-hairline | 1px | |
--ref-color-accent-1 | oklch(0.99433 0.001321 286.36335) | |
--ref-color-accent-10 | oklch(0.510687 0.195366 266.573115) | |
--ref-color-accent-11 | oklch(0.509225 0.172497 267.161083) | |
--ref-color-accent-12 | oklch(0.312644 0.085823 268.592788) | |
--ref-color-accent-2 | oklch(0.98231 0.00825 271.320642) | |
--ref-color-accent-3 | oklch(0.96086 0.016961 267.781434) | |
--ref-color-accent-4 | oklch(0.934611 0.031041 269.8075) | |
--ref-color-accent-5 | oklch(0.901941 0.047151 269.606376) | |
--ref-color-accent-6 | oklch(0.86195 0.06753 271.078879) | |
--ref-color-accent-7 | oklch(0.806161 0.08754 271.403687) | |
--ref-color-accent-8 | oklch(0.730851 0.112333 270.420021) | |
--ref-color-accent-9 | oklch(0.543785 0.191021 267) | |
--ref-color-accent-dark-1 | oklch(0.190861 0.02457 276.52042) | |
--ref-color-accent-dark-10 | oklch(0.589183 0.175768 269.290124) | |
--ref-color-accent-dark-11 | oklch(0.775866 0.113802 273.011264) | |
--ref-color-accent-dark-12 | oklch(0.910779 0.042751 269.541785) | |
--ref-color-accent-dark-2 | oklch(0.209371 0.03015 274.832539) | |
--ref-color-accent-dark-3 | oklch(0.271571 0.070509 267.975387) | |
--ref-color-accent-dark-4 | oklch(0.318451 0.094631 267.243106) | |
--ref-color-accent-dark-5 | oklch(0.362472 0.10437 267.020639) | |
--ref-color-accent-dark-6 | oklch(0.403304 0.111231 268.753498) | |
--ref-color-accent-dark-7 | oklch(0.449078 0.120101 268.933794) | |
--ref-color-accent-dark-8 | oklch(0.502093 0.136611 268.247049) | |
--ref-color-accent-dark-9 | oklch(0.543785 0.191021 267) | |
--ref-color-archive-1 | oklch(0.993151 0.001345 325.575418) | |
--ref-color-archive-10 | oklch(0.524707 0.070198 305.434475) | |
--ref-color-archive-11 | oklch(0.516842 0.069327 305.916434) | |
--ref-color-archive-12 | oklch(0.322258 0.044099 303.882292) | |
--ref-color-archive-2 | oklch(0.981193 0.004052 311.215635) | |
--ref-color-archive-3 | oklch(0.958846 0.009954 311.741665) | |
--ref-color-archive-4 | oklch(0.933258 0.015449 312.684793) | |
--ref-color-archive-5 | oklch(0.901154 0.021348 311.2832) | |
--ref-color-archive-6 | oklch(0.859184 0.028735 311.083617) | |
--ref-color-archive-7 | oklch(0.804282 0.036704 309.722537) | |
--ref-color-archive-8 | oklch(0.73307 0.049006 308.004128) | |
--ref-color-archive-9 | oklch(0.555677 0.073169 305.9) | |
--ref-color-archive-dark-1 | oklch(0.191326 0.008995 315.62123) | |
--ref-color-archive-dark-10 | oklch(0.595571 0.070705 306.494008) | |
--ref-color-archive-dark-11 | oklch(0.780673 0.058096 307.77664) | |
--ref-color-archive-dark-12 | oklch(0.910679 0.019482 311.027004) | |
--ref-color-archive-dark-2 | oklch(0.213741 0.011978 313.165244) | |
--ref-color-archive-dark-3 | oklch(0.267699 0.024476 312.648694) | |
--ref-color-archive-dark-4 | oklch(0.308776 0.032741 310.83747) | |
--ref-color-archive-dark-5 | oklch(0.344748 0.036825 310.535741) | |
--ref-color-archive-dark-6 | oklch(0.388691 0.038553 309.492173) | |
--ref-color-archive-dark-7 | oklch(0.448578 0.043175 308.64496) | |
--ref-color-archive-dark-8 | oklch(0.541239 0.053055 307.604243) | |
--ref-color-archive-dark-9 | oklch(0.555677 0.073169 305.9) | |
--ref-color-critical-1 | oklch(0.993361 0.003191 17.152702) | |
--ref-color-critical-10 | oklch(0.599026 0.194665 24.00731) | |
--ref-color-critical-11 | oklch(0.556979 0.197433 25.13833) | |
--ref-color-critical-12 | oklch(0.338995 0.108912 16.582625) | |
--ref-color-critical-2 | oklch(0.982321 0.008578 17.279933) | |
--ref-color-critical-3 | oklch(0.955466 0.020724 13.839409) | |
--ref-color-critical-4 | oklch(0.921729 0.040108 15.983292) | |
--ref-color-critical-5 | oklch(0.892051 0.056746 16.900587) | |
--ref-color-critical-6 | oklch(0.856903 0.07405 17.650527) | |
--ref-color-critical-7 | oklch(0.807 0.088767 18.290593) | |
--ref-color-critical-8 | oklch(0.744352 0.113221 18.720737) | |
--ref-color-critical-9 | oklch(0.625577 0.193344 23) | |
--ref-color-critical-dark-1 | oklch(0.188032 0.013451 18.376427) | |
--ref-color-critical-dark-10 | oklch(0.663381 0.177398 22.826714) | |
--ref-color-critical-dark-11 | oklch(0.780413 0.128122 22.121461) | |
--ref-color-critical-dark-12 | oklch(0.902368 0.05268 6.425812) | |
--ref-color-critical-dark-2 | oklch(0.204589 0.021663 14.036578) | |
--ref-color-critical-dark-3 | oklch(0.251058 0.06493 12.674503) | |
--ref-color-critical-dark-4 | oklch(0.289299 0.095094 14.308262) | |
--ref-color-critical-dark-5 | oklch(0.332115 0.106652 15.502172) | |
--ref-color-critical-dark-6 | oklch(0.381441 0.110807 16.777348) | |
--ref-color-critical-dark-7 | oklch(0.450175 0.121046 18.748598) | |
--ref-color-critical-dark-8 | oklch(0.543559 0.145758 21.734376) | |
--ref-color-critical-dark-9 | oklch(0.625577 0.193344 23) | |
--ref-color-info-1 | oklch(0.993102 0.003397 247.9076) | |
--ref-color-info-10 | oklch(0.622153 0.183136 251.723539) | |
--ref-color-info-11 | oklch(0.555689 0.162234 252.214666) | |
--ref-color-info-12 | oklch(0.323945 0.096366 258.828847) | |
--ref-color-info-2 | oklch(0.98202 0.009238 242.872432) | |
--ref-color-info-3 | oklch(0.959682 0.020056 238.701263) | |
--ref-color-info-4 | oklch(0.938065 0.034946 234.847999) | |
--ref-color-info-5 | oklch(0.905066 0.051287 240.349496) | |
--ref-color-info-6 | oklch(0.863268 0.068199 243.352482) | |
--ref-color-info-7 | oklch(0.809755 0.088669 243.091253) | |
--ref-color-info-8 | oklch(0.733606 0.121348 243.124915) | |
--ref-color-info-9 | oklch(0.649151 0.193037 251.8) | |
--ref-color-info-dark-1 | oklch(0.193606 0.025499 256.518319) | |
--ref-color-info-dark-10 | oklch(0.68825 0.169338 251.427503) | |
--ref-color-info-dark-11 | oklch(0.764235 0.125721 249.494943) | |
--ref-color-info-dark-12 | oklch(0.907125 0.051019 238.488859) | |
--ref-color-info-dark-2 | oklch(0.212925 0.03034 261.269846) | |
--ref-color-info-dark-3 | oklch(0.274466 0.066296 253.950454) | |
--ref-color-info-dark-4 | oklch(0.320138 0.096777 252.366574) | |
--ref-color-info-dark-5 | oklch(0.367094 0.105878 250.722445) | |
--ref-color-info-dark-6 | oklch(0.416013 0.113257 252.028007) | |
--ref-color-info-dark-7 | oklch(0.474077 0.121868 253.108822) | |
--ref-color-info-dark-8 | oklch(0.540519 0.139536 253.194806) | |
--ref-color-info-dark-9 | oklch(0.649151 0.193037 251.8) | |
--ref-color-neutral-1 | oklch(1 0 286) | |
--ref-color-neutral-10 | oklch(0.545 0 286) | |
--ref-color-neutral-11 | oklch(0.439 0 286) | |
--ref-color-neutral-12 | oklch(0.145 0 286) | |
--ref-color-neutral-2 | oklch(0.985 0 286) | |
--ref-color-neutral-3 | oklch(0.97 0 286) | |
--ref-color-neutral-4 | oklch(0.95 0 286) | |
--ref-color-neutral-5 | oklch(0.935 0 286) | |
--ref-color-neutral-6 | oklch(0.922 0 286) | |
--ref-color-neutral-7 | oklch(0.871 0 286) | |
--ref-color-neutral-8 | oklch(0.792 0 286) | |
--ref-color-neutral-9 | oklch(0.643 0 286) | |
--ref-color-neutral-dark-1 | oklch(0.145 0 286) | |
--ref-color-neutral-dark-10 | oklch(0.708 0 286) | |
--ref-color-neutral-dark-11 | oklch(0.769 0 286) | |
--ref-color-neutral-dark-12 | oklch(0.985 0 286) | |
--ref-color-neutral-dark-2 | oklch(0.205 0 286) | |
--ref-color-neutral-dark-3 | oklch(0.269 0 286) | |
--ref-color-neutral-dark-4 | oklch(0.29 0 286) | |
--ref-color-neutral-dark-5 | oklch(0.31 0 286) | |
--ref-color-neutral-dark-6 | oklch(0.325 0 286) | |
--ref-color-neutral-dark-7 | oklch(0.37 0 286) | |
--ref-color-neutral-dark-8 | oklch(0.489 0 286) | |
--ref-color-neutral-dark-9 | oklch(0.538 0 286) | |
--ref-color-success-1 | oklch(0.99421 0.004099 157.207521) | |
--ref-color-success-10 | oklch(0.611472 0.126614 158.247346) | |
--ref-color-success-11 | oklch(0.543466 0.11158 159.513172) | |
--ref-color-success-12 | oklch(0.321985 0.047489 164.542495) | |
--ref-color-success-2 | oklch(0.98145 0.009879 155.110588) | |
--ref-color-success-3 | oklch(0.958254 0.02227 155.931601) | |
--ref-color-success-4 | oklch(0.933532 0.037175 156.439414) | |
--ref-color-success-5 | oklch(0.898805 0.048936 157.260962) | |
--ref-color-success-6 | oklch(0.855826 0.064054 158.21632) | |
--ref-color-success-7 | oklch(0.798152 0.08315 159.165466) | |
--ref-color-success-8 | oklch(0.715599 0.113294 160.294687) | |
--ref-color-success-9 | oklch(0.640602 0.132853 157.7) | |
--ref-color-success-dark-1 | oklch(0.187289 0.012272 167.013241) | |
--ref-color-success-dark-10 | oklch(0.674595 0.140607 157.722178) | |
--ref-color-success-dark-11 | oklch(0.779439 0.165465 157.301059) | |
--ref-color-success-dark-12 | oklch(0.904837 0.082952 158.194326) | |
--ref-color-success-dark-2 | oklch(0.211665 0.015372 165.918503) | |
--ref-color-success-dark-3 | oklch(0.272142 0.039586 162.175631) | |
--ref-color-success-dark-4 | oklch(0.317268 0.05693 161.853843) | |
--ref-color-success-dark-5 | oklch(0.364924 0.066027 161.239636) | |
--ref-color-success-dark-6 | oklch(0.41245 0.072145 160.961215) | |
--ref-color-success-dark-7 | oklch(0.466982 0.08231 160.25737) | |
--ref-color-success-dark-8 | oklch(0.528043 0.096267 159.40968) | |
--ref-color-success-dark-9 | oklch(0.640602 0.132853 157.7) | |
--ref-color-warning-1 | oklch(0.994249 0.00285 84.531513) | |
--ref-color-warning-10 | oklch(0.83116 0.16794 80.818324) | |
--ref-color-warning-11 | oklch(0.570661 0.129157 63.921739) | |
--ref-color-warning-12 | oklch(0.352188 0.048645 54.158769) | |
--ref-color-warning-2 | oklch(0.985585 0.023784 99.07651) | |
--ref-color-warning-3 | oklch(0.969531 0.068378 100.371682) | |
--ref-color-warning-4 | oklch(0.944651 0.103373 97.890946) | |
--ref-color-warning-5 | oklch(0.917967 0.132605 98.210354) | |
--ref-color-warning-6 | oklch(0.88039 0.123257 93.371005) | |
--ref-color-warning-7 | oklch(0.827254 0.122422 86.674497) | |
--ref-color-warning-8 | oklch(0.75767 0.140274 76.703099) | |
--ref-color-warning-9 | oklch(0.853575 0.15722 84.1) | |
--ref-color-warning-dark-1 | oklch(0.184962 0.013359 77.782873) | |
--ref-color-warning-dark-10 | oklch(0.884793 0.180432 94.750315) | |
--ref-color-warning-dark-11 | oklch(0.861614 0.172903 88.99284) | |
--ref-color-warning-dark-12 | oklch(0.935042 0.071692 86.052741) | |
--ref-color-warning-dark-2 | oklch(0.211987 0.01841 81.971223) | |
--ref-color-warning-dark-3 | oklch(0.25781 0.04422 74.467502) | |
--ref-color-warning-dark-4 | oklch(0.295499 0.062671 73.865824) | |
--ref-color-warning-dark-5 | oklch(0.336318 0.071679 72.883796) | |
--ref-color-warning-dark-6 | oklch(0.386329 0.078396 75.239452) | |
--ref-color-warning-dark-7 | oklch(0.454239 0.082359 74.940897) | |
--ref-color-warning-dark-8 | oklch(0.536383 0.096405 73.417061) | |
--ref-color-warning-dark-9 | oklch(0.853575 0.15722 84.1) | |
--ref-shadow-color-strong | rgba(0, 0, 0, 0.1) | |
--ref-shadow-color-subtle | rgba(0, 0, 0, 0.06) | |
--ref-space-inline-sm | 12px | |
--ref-space-inline-xs | 8px | |
--ref-space-inset-compact | 8px | |
--ref-space-inset-default | 24px | |
--ref-space-ramp-050 | 0.125rem | |
--ref-space-ramp-100 | 0.25rem | |
--ref-space-ramp-1000 | 2.5rem | |
--ref-space-ramp-1100 | 2.75rem | |
--ref-space-ramp-1200 | 3rem | |
--ref-space-ramp-150 | 0.375rem | |
--ref-space-ramp-1600 | 4rem | |
--ref-space-ramp-200 | 0.5rem | |
--ref-space-ramp-250 | 0.625rem | |
--ref-space-ramp-300 | 0.75rem | |
--ref-space-ramp-400 | 1rem | |
--ref-space-ramp-500 | 1.25rem | |
--ref-space-ramp-600 | 1.5rem | |
--ref-space-ramp-700 | 1.75rem | |
--ref-space-ramp-800 | 2rem | |
--ref-space-ramp-900 | 2.25rem | |
--ref-space-scale-lg | 24px | |
--ref-space-scale-md | 12px | |
--ref-space-scale-sm | 8px | |
--ref-space-stack-compact | 12px | |
--ref-space-stack-default | 16px | |
--ref-typography-families-mono | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | |
--ref-typography-families-sans | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--ref-typography-letter-spacing-default | 0em | |
--ref-typography-letter-spacing-display | -0.05em | |
--ref-typography-letter-spacing-heading-lg | -0.02em | |
--ref-typography-letter-spacing-heading-xl | -0.025em | |
--ref-typography-letter-spacing-tight | -0.01em | |
--ref-typography-letter-spacing-wide | 0.08em | |
--ref-typography-line-height-loose | 160% | |
--ref-typography-line-height-relaxed | 150% | |
--ref-typography-line-height-standard | 140% | |
--ref-typography-line-height-tight | 120% | |
--ref-typography-sizes-code | 13px | |
--ref-typography-sizes-display-lg | 80px | |
--ref-typography-sizes-display-md | 64px | |
--ref-typography-sizes-display-sm | 48px | |
--ref-typography-sizes-lg | 18px | |
--ref-typography-sizes-md | 16px | |
--ref-typography-sizes-sm | 14px | |
--ref-typography-sizes-xl | 24px | |
--ref-typography-sizes-xs | 12px | |
--ref-typography-sizes-xxl | 30px | |
--ref-typography-weights-bold | 700 | |
--ref-typography-weights-light | 300 | |
--ref-typography-weights-medium | 500 | |
--ref-typography-weights-regular | 400 | |
--ref-typography-weights-semibold | 600 | |
--oods-shadow-elevation-card-blur | 8px | |
--oods-shadow-elevation-card-color | rgba(0, 0, 0, 0.06) | |
--oods-shadow-elevation-card-offset-x | 0px | |
--oods-shadow-elevation-card-offset-y | 4px | |
--oods-shadow-elevation-card-spread | -4px | |
--oods-shadow-elevation-overlay-blur | 16px | |
--oods-shadow-elevation-overlay-color | rgba(0, 0, 0, 0.1) | |
--oods-shadow-elevation-overlay-offset-x | 0px | |
--oods-shadow-elevation-overlay-offset-y | 8px | |
--oods-shadow-elevation-overlay-spread | -4px | |
--oods-size-font-lg | 18px | |
--oods-size-font-md | 16px | |
--oods-size-font-sm | 14px | |
--oods-size-spacing-md | 12px | |
--oods-size-spacing-sm | 8px | |
--oods-spacing-inline-sm | 12px | |
--oods-spacing-inline-xs | 8px | |
--oods-spacing-inset-compact | 8px | |
--oods-spacing-inset-default | 24px | |
--oods-spacing-stack-compact | 12px | |
--oods-spacing-stack-default | 16px | |
--sys-badge-height | 1.25rem | |
--sys-badge-padding-block | 0.125rem | |
--sys-badge-padding-inline | 0.5rem | |
--sys-border-default | oklch(0.922 0 286) | |
--sys-border-interactive | oklch(0.643 0 286) | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
--sys-border-interactive-hover | oklch(0.545 0 286) | Border of a hovered control. |
--sys-border-neutral | oklch(0.871 0 286) | |
--sys-border-strong | oklch(0.871 0 286) | High-emphasis border. |
--sys-border-subtle | oklch(0.922 0 286) | Default border for surfaces. |
--sys-breakpoint-2xl | 1536 | |
--sys-breakpoint-lg | 1024 | |
--sys-breakpoint-md | 768 | |
--sys-breakpoint-sm | 640 | |
--sys-breakpoint-xl | 1280 | |
--sys-card-padding | 1.5rem | |
--sys-card-padding-compact | 1rem | |
--sys-control-gap | 0.5rem | |
--sys-control-gap-compact | 0.25rem | |
--sys-control-gap-tight | 0.375rem | |
--sys-control-group-gap | 0.75rem | |
--sys-control-height-lg | 2.5rem | |
--sys-control-height-md | 2rem | |
--sys-control-height-sm | 1.75rem | |
--sys-control-height-xs | 1.5rem | |
--sys-control-icon-gap | 0.5rem | |
--sys-control-icon-gap-sm | 0.375rem | |
--sys-control-icon-size | 1rem | |
--sys-control-padding-block | 0.25rem | |
--sys-control-padding-block-lg | 0.5rem | |
--sys-control-padding-block-sm | 0.125rem | |
--sys-control-padding-inline | 0.75rem | |
--sys-control-padding-inline-lg | 1rem | |
--sys-control-padding-inline-sm | 0.625rem | |
--sys-control-padding-inline-xs | 0.5rem | |
--sys-field-padding-block-compact | 0.25rem | |
--sys-field-padding-inline | 0.75rem | |
--sys-field-padding-inline-compact | 0.5rem | |
--sys-focus-offset | 2px | |
--sys-focus-ring | oklch(0.543785 0.191021 267) | |
--sys-focus-ring-inner | oklch(1 0 286) | Inner focus ring colour. |
--sys-focus-ring-outer | oklch(0.543785 0.191021 267) | Outer focus ring colour. |
--sys-focus-text | oklch(0.509225 0.172497 267.161083) | Focus foreground colour. |
--sys-focus-width | 2px | |
--sys-font-mono | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | The brand's mono family. |
--sys-font-sans | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | The brand's sans family (the brand recipe's font). |
--sys-icon-muted | oklch(0.545 0 286) | |
--sys-icon-on-interactive | oklch(1 0 286) | |
--sys-icon-primary | oklch(0.439 0 286) | |
--sys-inline-md | 1rem | |
--sys-inline-sm | 0.75rem | |
--sys-inline-xs | 0.5rem | |
--sys-inset-md | 1rem | |
--sys-inset-sm | 0.75rem | |
--sys-motion-duration-base | 180ms | |
--sys-motion-duration-fast | 120ms | |
--sys-motion-duration-slow | 320ms | |
--sys-motion-easing-emphasized | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--sys-motion-easing-linear | cubic-bezier(0, 0, 1, 1) | |
--sys-motion-easing-standard | cubic-bezier(0.2, 0, 0.38, 1) | |
--sys-motion-reduced-duration-base | 0ms | |
--sys-motion-reduced-duration-fast | 0ms | |
--sys-motion-reduced-duration-slow | 0ms | |
--sys-motion-reduced-transition-banner-reveal-delay | 0ms | |
--sys-motion-reduced-transition-banner-reveal-duration | 0ms | |
--sys-motion-reduced-transition-banner-reveal-timing-function | cubic-bezier(0, 0, 1, 1) | |
--sys-motion-reduced-transition-chip-in-delay | 0ms | |
--sys-motion-reduced-transition-chip-in-duration | 0ms | |
--sys-motion-reduced-transition-chip-in-timing-function | cubic-bezier(0, 0, 1, 1) | |
--sys-motion-reduced-transition-chip-out-delay | 0ms | |
--sys-motion-reduced-transition-chip-out-duration | 0ms | |
--sys-motion-reduced-transition-chip-out-timing-function | cubic-bezier(0, 0, 1, 1) | |
--sys-motion-reduced-transition-focus-delay | 0ms | |
--sys-motion-reduced-transition-focus-duration | 0ms | |
--sys-motion-reduced-transition-focus-timing-function | cubic-bezier(0, 0, 1, 1) | |
--sys-motion-reduced-transition-hover-delay | 0ms | |
--sys-motion-reduced-transition-hover-duration | 0ms | |
--sys-motion-reduced-transition-hover-timing-function | cubic-bezier(0, 0, 1, 1) | |
--sys-motion-transition-banner-reveal-delay | 20ms | |
--sys-motion-transition-banner-reveal-duration | 320ms | |
--sys-motion-transition-banner-reveal-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--sys-motion-transition-chip-in-delay | 0ms | |
--sys-motion-transition-chip-in-duration | 180ms | |
--sys-motion-transition-chip-in-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--sys-motion-transition-chip-out-delay | 0ms | |
--sys-motion-transition-chip-out-duration | 120ms | |
--sys-motion-transition-chip-out-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--sys-motion-transition-focus-delay | 0ms | |
--sys-motion-transition-focus-duration | 180ms | |
--sys-motion-transition-focus-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--sys-motion-transition-hover-delay | 0ms | |
--sys-motion-transition-hover-duration | 120ms | |
--sys-motion-transition-hover-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--sys-page-gutter | 1.5rem | |
--sys-progress-height | 0.5rem | |
--sys-radius-card | 12px | Corner radius of a card or panel: twice the brand radius. |
--sys-radius-control | 6px | Corner radius of a control at the default size: the brand recipe's radius. |
--sys-radius-control-lg | 8px | |
--sys-radius-control-sm | 4px | |
--sys-radius-pill | 999px | Fully rounded ends, for badges and pills. |
--sys-shadow-overlay-blur | 16px | |
--sys-shadow-overlay-color | rgba(0, 0, 0, 0.1) | |
--sys-shadow-overlay-offset-x | 0px | |
--sys-shadow-overlay-offset-y | 8px | |
--sys-shadow-overlay-spread | -4px | |
--sys-shadow-panel-blur | 8px | |
--sys-shadow-panel-color | rgba(0, 0, 0, 0.06) | |
--sys-shadow-panel-offset-x | 0px | |
--sys-shadow-panel-offset-y | 4px | |
--sys-shadow-panel-spread | -4px | |
--sys-space-inline-sm | 12px | |
--sys-space-inline-xs | 8px | |
--sys-space-inset-compact | 8px | |
--sys-space-inset-default | 24px | |
--sys-space-scale-lg | 24px | |
--sys-space-scale-md | 12px | |
--sys-space-scale-sm | 8px | |
--sys-space-stack-compact | 12px | |
--sys-space-stack-default | 16px | |
--sys-spacing-stack-compact | 12px | |
--sys-stack-lg | 1.5rem | |
--sys-stack-md | 1rem | |
--sys-stack-sm | 0.75rem | |
--sys-stack-xl | 2rem | |
--sys-stack-xs | 0.5rem | |
--sys-status-accent-border | oklch(0.806161 0.08754 271.403687) | Accent border colour. |
--sys-status-accent-icon | oklch(0.543785 0.191021 267) | Accent icon colour. |
--sys-status-accent-on-solid | oklch(1 0 286) | Text and icons on the solid accent fill. |
--sys-status-accent-solid | oklch(0.543785 0.191021 267) | Solid accent fill, for emphasis (a solid badge or banner). |
--sys-status-accent-surface | oklch(0.96086 0.016961 267.781434) | Accent feedback background. |
--sys-status-accent-text | oklch(0.509225 0.172497 267.161083) | Accent text colour. |
--sys-status-archive-border | oklch(0.804282 0.036704 309.722537) | |
--sys-status-archive-icon | oklch(0.555677 0.073169 305.9) | |
--sys-status-archive-surface | oklch(0.958846 0.009954 311.741665) | |
--sys-status-archive-text | oklch(0.516842 0.069327 305.916434) | |
--sys-status-critical-border | oklch(0.807 0.088767 18.290593) | Critical border colour. |
--sys-status-critical-icon | oklch(0.625577 0.193344 23) | Critical icon colour. |
--sys-status-critical-on-solid | oklch(1 0 286) | Text and icons on the solid critical fill. |
--sys-status-critical-solid | oklch(0.590577 0.193344 23) | Solid critical fill, for emphasis (a solid badge or banner). |
--sys-status-critical-surface | oklch(0.955466 0.020724 13.839409) | Critical feedback background. |
--sys-status-critical-text | oklch(0.556979 0.197433 25.13833) | Critical text colour. |
--sys-status-info-border | oklch(0.809755 0.088669 243.091253) | Informational border colour. |
--sys-status-info-icon | oklch(0.622153 0.183136 251.723539) | Informational icon colour. |
--sys-status-info-on-solid | oklch(1 0 286) | Text and icons on the solid info fill. |
--sys-status-info-solid | oklch(0.566651 0.168568 251.8) | Solid info fill, for emphasis (a solid badge or banner). |
--sys-status-info-surface | oklch(0.959682 0.020056 238.701263) | Informational background surface. |
--sys-status-info-text | oklch(0.540689 0.162234 252.214666) | Informational text colour. |
--sys-status-neutral-border | oklch(0.871 0 286) | Neutral border colour. |
--sys-status-neutral-icon | oklch(0.643 0 286) | Neutral icon colour. |
--sys-status-neutral-on-solid | oklch(1 0 286) | Text and icons on the solid neutral fill. |
--sys-status-neutral-solid | oklch(0.145 0 286) | Solid neutral fill, for emphasis (a solid badge or banner). |
--sys-status-neutral-surface | oklch(0.97 0 286) | Neutral feedback background. |
--sys-status-neutral-text | oklch(0.439 0 286) | Neutral text colour. |
--sys-status-success-border | oklch(0.798152 0.08315 159.165466) | Success border colour. |
--sys-status-success-icon | oklch(0.611472 0.126614 158.247346) | Success icon colour. |
--sys-status-success-on-solid | oklch(1 0 286) | Text and icons on the solid success fill. |
--sys-status-success-solid | oklch(0.548102 0.128886 157.7) | Solid success fill, for emphasis (a solid badge or banner). |
--sys-status-success-surface | oklch(0.958254 0.02227 155.931601) | Success feedback background. |
--sys-status-success-text | oklch(0.523466 0.11158 159.513172) | Success text colour. |
--sys-status-timeline-actor-text | oklch(0.439 0 286) | |
--sys-status-timeline-connector | oklch(0.922 0 286) | |
--sys-status-timeline-node-border | oklch(0.922 0 286) | |
--sys-status-timeline-node-surface | oklch(0.97 0 286) | |
--sys-status-timeline-reason-text | oklch(0.145 0 286) | |
--sys-status-warning-border | oklch(0.827254 0.122422 86.674497) | Warning border colour. |
--sys-status-warning-icon | oklch(0.570661 0.129157 63.921739) | Warning icon colour. |
--sys-status-warning-on-solid | oklch(0.145 0 286) | Text and icons on the solid warning fill. |
--sys-status-warning-solid | oklch(0.853575 0.15722 84.1) | Solid warning fill, for emphasis (a solid badge or banner). |
--sys-status-warning-surface | oklch(0.969531 0.068378 100.371682) | Warning feedback background. |
--sys-status-warning-text | oklch(0.553161 0.125197 63.921739) | Warning text colour. |
--sys-surface-accent | oklch(0.145 0 286) | |
--sys-surface-backdrop | oklch(0.145 0 286) | Backdrop scrim surface. |
--sys-surface-canvas | oklch(1 0 286) | Primary application canvas. |
--sys-surface-default | oklch(1 0 286) | |
--sys-surface-disabled | oklch(0.97 0 286) | Surface colour for disabled or inactive UI. |
--sys-surface-interactive-destructive-default | oklch(0.590577 0.193344 23) | The destructive action, at rest. |
--sys-surface-interactive-destructive-hover | oklch(0.560577 0.194665 24.00731) | The destructive action, hovered. |
--sys-surface-interactive-destructive-pressed | oklch(0.530577 0.194665 24.00731) | The destructive action, pressed. |
--sys-surface-interactive-primary-default | oklch(0.145 0 286) | Primary interactive surface default state. |
--sys-surface-interactive-primary-hover | oklch(0.3361 0 286) | Primary interactive surface hover state. |
--sys-surface-interactive-primary-pressed | oklch(0.2626 0 286) | Primary interactive surface pressed state. |
--sys-surface-interactive-secondary-default | oklch(0.97 0 286) | The secondary action (a subtle fill), at rest. |
--sys-surface-interactive-secondary-hover | oklch(0.95 0 286) | The secondary action (a subtle fill), hovered. |
--sys-surface-interactive-secondary-pressed | oklch(0.935 0 286) | The secondary action (a subtle fill), pressed. |
--sys-surface-inverse | oklch(0.145 0 286) | Inverse surface for dark-on-light treatments. |
--sys-surface-neutral | oklch(0.97 0 286) | |
--sys-surface-raised | oklch(1 0 286) | Raised card surface. |
--sys-surface-subtle | oklch(0.97 0 286) | Subtle secondary surface. |
--sys-tab-indicator-width | 2px | |
--sys-tab-padding-block-lg | 0.75rem | |
--sys-tab-padding-block-md | 0.625rem | |
--sys-tab-padding-block-sm | 0.5rem | |
--sys-tab-padding-inline-lg | 1rem | |
--sys-tab-padding-inline-md | 0.75rem | |
--sys-tab-padding-inline-sm | 0.625rem | |
--sys-table-cell-padding-inline | 0.75rem | |
--sys-table-cell-padding-inline-compact | 0.5rem | |
--sys-table-row-height | 2.75rem | |
--sys-table-row-height-compact | 2.25rem | |
--sys-text-accent | oklch(0.509225 0.172497 267.161083) | Accent text colour. |
--sys-text-default | oklch(0.145 0 286) | |
--sys-text-disabled | oklch(0.643 0 286) | Disabled or de-emphasised text. |
--sys-text-inverse | oklch(1 0 286) | Text on inverse surfaces. |
--sys-text-line-height-loose | 160% | |
--sys-text-line-height-relaxed | 150% | |
--sys-text-line-height-root | 1.5 | |
--sys-text-line-height-standard | 140% | |
--sys-text-line-height-tight | 120% | |
--sys-text-muted | oklch(0.545 0 286) | Muted caption text. |
--sys-text-neutral | oklch(0.439 0 286) | |
--sys-text-on-destructive | oklch(1 0 286) | Text and icons on the destructive action. |
--sys-text-on-interactive | oklch(1 0 286) | Text and icons on the primary interactive surface (buttons and selected controls). |
--sys-text-primary | oklch(0.145 0 286) | Primary reading text. |
--sys-text-scale-body-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-body-md-font-size | 16px | |
--sys-text-scale-body-md-font-weight | 400 | |
--sys-text-scale-body-md-letter-spacing | 0em | |
--sys-text-scale-body-md-line-height | 24px | |
--sys-text-scale-body-sm-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-body-sm-font-size | 14px | |
--sys-text-scale-body-sm-font-weight | 400 | |
--sys-text-scale-body-sm-letter-spacing | 0em | |
--sys-text-scale-body-sm-line-height | 20px | |
--sys-text-scale-caption-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-caption-font-size | 12px | |
--sys-text-scale-caption-font-weight | 500 | |
--sys-text-scale-caption-letter-spacing | 0em | |
--sys-text-scale-caption-line-height | 16px | |
--sys-text-scale-caption-text-case | none | |
--sys-text-scale-display-lg-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-display-lg-font-size | 80px | |
--sys-text-scale-display-lg-font-weight | 600 | |
--sys-text-scale-display-lg-letter-spacing | -0.05em | |
--sys-text-scale-display-lg-line-height | 1.05 | |
--sys-text-scale-display-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-display-md-font-size | 64px | |
--sys-text-scale-display-md-font-weight | 600 | |
--sys-text-scale-display-md-letter-spacing | -0.05em | |
--sys-text-scale-display-md-line-height | 1.05 | |
--sys-text-scale-display-sm-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-display-sm-font-size | 48px | |
--sys-text-scale-display-sm-font-weight | 600 | |
--sys-text-scale-display-sm-letter-spacing | -0.05em | |
--sys-text-scale-display-sm-line-height | 1.1 | |
--sys-text-scale-heading-lg-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-heading-lg-font-size | 24px | |
--sys-text-scale-heading-lg-font-weight | 600 | |
--sys-text-scale-heading-lg-letter-spacing | -0.02em | |
--sys-text-scale-heading-lg-line-height | 32px | |
--sys-text-scale-heading-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-heading-md-font-size | 18px | |
--sys-text-scale-heading-md-font-weight | 600 | |
--sys-text-scale-heading-md-letter-spacing | -0.01em | |
--sys-text-scale-heading-md-line-height | 24px | |
--sys-text-scale-heading-sm-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-heading-sm-font-size | 16px | |
--sys-text-scale-heading-sm-font-weight | 600 | |
--sys-text-scale-heading-sm-letter-spacing | 0em | |
--sys-text-scale-heading-sm-line-height | 24px | |
--sys-text-scale-heading-xl-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-heading-xl-font-size | 30px | |
--sys-text-scale-heading-xl-font-weight | 600 | |
--sys-text-scale-heading-xl-letter-spacing | -0.025em | |
--sys-text-scale-heading-xl-line-height | 36px | |
--sys-text-scale-label-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-label-font-size | 14px | |
--sys-text-scale-label-font-weight | 500 | |
--sys-text-scale-label-letter-spacing | 0em | |
--sys-text-scale-label-line-height | 20px | |
--sys-text-scale-label-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--sys-text-scale-label-md-font-size | 14px | |
--sys-text-scale-label-md-font-weight | 500 | |
--sys-text-scale-label-md-letter-spacing | 0em | |
--sys-text-scale-label-md-line-height | 20px | |
--sys-text-scale-label-md-text-case | none | |
--sys-text-scale-label-text-case | none | |
--sys-text-scale-mono-font-family | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | |
--sys-text-scale-mono-font-size | 13px | |
--sys-text-scale-mono-font-weight | 400 | |
--sys-text-scale-mono-letter-spacing | 0em | |
--sys-text-scale-mono-line-height | 20px | |
--sys-text-secondary | oklch(0.439 0 286) | Secondary supporting text. |
--sys-text-size-lg | 18px | |
--sys-text-size-md | 16px | |
--sys-text-size-sm | 14px | |
--sys-text-size-xs | 12px | |
--sys-text-strong | oklch(0.145 0 286) | |
--sys-text-subtle | oklch(0.439 0 286) | |
--sys-text-tertiary | oklch(0.545 0 286) | |
--sys-text-weight-medium | 500 | |
--sys-text-weight-semibold | 600 | |
--oods-text-letter-spacing-default | 0em | |
--oods-text-letter-spacing-tight | -0.01em | |
--oods-text-letter-spacing-wide | 0.08em | |
--oods-text-line-height-loose | 160% | |
--oods-text-line-height-relaxed | 150% | |
--oods-text-line-height-standard | 140% | |
--oods-text-line-height-tight | 120% | |
--oods-text-scale-body-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-body-md-font-size | 16px | |
--oods-text-scale-body-md-font-weight | 400 | |
--oods-text-scale-body-md-letter-spacing | 0em | |
--oods-text-scale-body-md-line-height | 24px | |
--oods-text-scale-body-sm-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-body-sm-font-size | 14px | |
--oods-text-scale-body-sm-font-weight | 400 | |
--oods-text-scale-body-sm-letter-spacing | 0em | |
--oods-text-scale-body-sm-line-height | 20px | |
--oods-text-scale-caption-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-caption-font-size | 12px | |
--oods-text-scale-caption-font-weight | 500 | |
--oods-text-scale-caption-letter-spacing | 0em | |
--oods-text-scale-caption-line-height | 16px | |
--oods-text-scale-caption-text-case | none | |
--oods-text-scale-display-lg-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-display-lg-font-size | 80px | |
--oods-text-scale-display-lg-font-weight | 600 | |
--oods-text-scale-display-lg-letter-spacing | -0.05em | |
--oods-text-scale-display-lg-line-height | 1.05 | |
--oods-text-scale-display-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-display-md-font-size | 64px | |
--oods-text-scale-display-md-font-weight | 600 | |
--oods-text-scale-display-md-letter-spacing | -0.05em | |
--oods-text-scale-display-md-line-height | 1.05 | |
--oods-text-scale-display-sm-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-display-sm-font-size | 48px | |
--oods-text-scale-display-sm-font-weight | 600 | |
--oods-text-scale-display-sm-letter-spacing | -0.05em | |
--oods-text-scale-display-sm-line-height | 1.1 | |
--oods-text-scale-heading-lg-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-heading-lg-font-size | 24px | |
--oods-text-scale-heading-lg-font-weight | 600 | |
--oods-text-scale-heading-lg-letter-spacing | -0.02em | |
--oods-text-scale-heading-lg-line-height | 32px | |
--oods-text-scale-heading-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-heading-md-font-size | 18px | |
--oods-text-scale-heading-md-font-weight | 600 | |
--oods-text-scale-heading-md-letter-spacing | -0.01em | |
--oods-text-scale-heading-md-line-height | 24px | |
--oods-text-scale-heading-sm-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-heading-sm-font-size | 16px | |
--oods-text-scale-heading-sm-font-weight | 600 | |
--oods-text-scale-heading-sm-letter-spacing | 0em | |
--oods-text-scale-heading-sm-line-height | 24px | |
--oods-text-scale-heading-xl-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-heading-xl-font-size | 30px | |
--oods-text-scale-heading-xl-font-weight | 600 | |
--oods-text-scale-heading-xl-letter-spacing | -0.025em | |
--oods-text-scale-heading-xl-line-height | 36px | |
--oods-text-scale-label-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-label-font-size | 14px | |
--oods-text-scale-label-font-weight | 500 | |
--oods-text-scale-label-letter-spacing | 0em | |
--oods-text-scale-label-line-height | 20px | |
--oods-text-scale-label-md-font-family | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | |
--oods-text-scale-label-md-font-size | 14px | |
--oods-text-scale-label-md-font-weight | 500 | |
--oods-text-scale-label-md-letter-spacing | 0em | |
--oods-text-scale-label-md-line-height | 20px | |
--oods-text-scale-label-md-text-case | none | |
--oods-text-scale-label-text-case | none | |
--oods-text-scale-mono-font-family | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | |
--oods-text-scale-mono-font-size | 13px | |
--oods-text-scale-mono-font-weight | 400 | |
--oods-text-scale-mono-letter-spacing | 0em | |
--oods-text-scale-mono-line-height | 20px | |
--theme-border-interactive | oklch(0.643 0 286) | Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on. |
--theme-border-interactive-hover | oklch(0.545 0 286) | Border of a hovered control. |
--theme-border-strong | oklch(0.871 0 286) | High-emphasis border. |
--theme-border-subtle | oklch(0.922 0 286) | Default border for surfaces. |
--theme-dark-border-interactive | oklch(0.538 0 286) | |
--theme-dark-border-interactive-hover | oklch(0.708 0 286) | |
--theme-dark-border-strong | oklch(0.37 0 286) | |
--theme-dark-border-subtle | oklch(0.325 0 286) | |
--theme-dark-focus-ring-inner | oklch(0.145 0 286) | |
--theme-dark-focus-ring-outer | oklch(0.543785 0.191021 267) | |
--theme-dark-focus-text | oklch(0.775866 0.113802 273.011264) | |
--theme-dark-focus-width | 2px | |
--theme-dark-icon-muted | oklch(0.708 0 286) | |
--theme-dark-icon-on-interactive | oklch(0.145 0 286) | |
--theme-dark-icon-primary | oklch(0.769 0 286) | |
--theme-dark-motion-duration-base | 180ms | |
--theme-dark-motion-duration-fast | 120ms | |
--theme-dark-motion-duration-slow | 320ms | |
--theme-dark-motion-easing-emphasized | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--theme-dark-motion-easing-linear | cubic-bezier(0, 0, 1, 1) | |
--theme-dark-motion-easing-standard | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-dark-motion-reduced-duration-base | 0ms | |
--theme-dark-motion-reduced-duration-fast | 0ms | |
--theme-dark-motion-reduced-duration-slow | 0ms | |
--theme-dark-motion-reduced-transition-banner-reveal-delay | 0ms | |
--theme-dark-motion-reduced-transition-banner-reveal-duration | 0ms | |
--theme-dark-motion-reduced-transition-banner-reveal-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-dark-motion-reduced-transition-chip-in-delay | 0ms | |
--theme-dark-motion-reduced-transition-chip-in-duration | 0ms | |
--theme-dark-motion-reduced-transition-chip-in-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-dark-motion-reduced-transition-chip-out-delay | 0ms | |
--theme-dark-motion-reduced-transition-chip-out-duration | 0ms | |
--theme-dark-motion-reduced-transition-chip-out-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-dark-motion-reduced-transition-focus-delay | 0ms | |
--theme-dark-motion-reduced-transition-focus-duration | 0ms | |
--theme-dark-motion-reduced-transition-focus-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-dark-motion-reduced-transition-hover-delay | 0ms | |
--theme-dark-motion-reduced-transition-hover-duration | 0ms | |
--theme-dark-motion-reduced-transition-hover-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-dark-motion-transition-banner-reveal-delay | 20ms | |
--theme-dark-motion-transition-banner-reveal-duration | 320ms | |
--theme-dark-motion-transition-banner-reveal-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--theme-dark-motion-transition-chip-in-delay | 0ms | |
--theme-dark-motion-transition-chip-in-duration | 180ms | |
--theme-dark-motion-transition-chip-in-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--theme-dark-motion-transition-chip-out-delay | 0ms | |
--theme-dark-motion-transition-chip-out-duration | 120ms | |
--theme-dark-motion-transition-chip-out-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-dark-motion-transition-focus-delay | 0ms | |
--theme-dark-motion-transition-focus-duration | 180ms | |
--theme-dark-motion-transition-focus-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-dark-motion-transition-hover-delay | 0ms | |
--theme-dark-motion-transition-hover-duration | 120ms | |
--theme-dark-motion-transition-hover-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-dark-shadow-elevation-card-blur | 0px | |
--theme-dark-shadow-elevation-card-color | rgba(255, 255, 255, 0.06) | |
--theme-dark-shadow-elevation-card-offset-x | 0px | |
--theme-dark-shadow-elevation-card-offset-y | 0px | |
--theme-dark-shadow-elevation-card-spread | 1px | |
--theme-dark-shadow-elevation-overlay-blur | 0px | |
--theme-dark-shadow-elevation-overlay-color | rgba(255, 255, 255, 0.1) | |
--theme-dark-shadow-elevation-overlay-offset-x | 0px | |
--theme-dark-shadow-elevation-overlay-offset-y | 0px | |
--theme-dark-shadow-elevation-overlay-spread | 1px | |
--theme-dark-space-inline-sm | 12px | |
--theme-dark-space-inline-xs | 8px | |
--theme-dark-space-inset-compact | 8px | |
--theme-dark-space-inset-default | 24px | |
--theme-dark-space-scale-lg | 24px | |
--theme-dark-space-scale-md | 12px | |
--theme-dark-space-scale-sm | 8px | |
--theme-dark-space-stack-compact | 12px | |
--theme-dark-space-stack-default | 16px | |
--theme-dark-status-accent-border | oklch(0.449078 0.120101 268.933794) | |
--theme-dark-status-accent-icon | oklch(0.589183 0.175768 269.290124) | |
--theme-dark-status-accent-on-solid | oklch(1 0 286) | |
--theme-dark-status-accent-solid | oklch(0.543785 0.191021 267) | |
--theme-dark-status-accent-surface | oklch(0.271571 0.070509 267.975387) | |
--theme-dark-status-accent-text | oklch(0.775866 0.113802 273.011264) | |
--theme-dark-status-archive-border | oklch(0.448578 0.043175 308.64496) | |
--theme-dark-status-archive-icon | oklch(0.555677 0.073169 305.9) | |
--theme-dark-status-archive-surface | oklch(0.267699 0.024476 312.648694) | |
--theme-dark-status-archive-text | oklch(0.780673 0.058096 307.77664) | |
--theme-dark-status-critical-border | oklch(0.450175 0.121046 18.748598) | |
--theme-dark-status-critical-icon | oklch(0.625577 0.193344 23) | |
--theme-dark-status-critical-on-solid | oklch(1 0 286) | |
--theme-dark-status-critical-solid | oklch(0.590577 0.193344 23) | |
--theme-dark-status-critical-surface | oklch(0.251058 0.06493 12.674503) | |
--theme-dark-status-critical-text | oklch(0.780413 0.128122 22.121461) | |
--theme-dark-status-info-border | oklch(0.474077 0.121868 253.108822) | |
--theme-dark-status-info-icon | oklch(0.649151 0.193037 251.8) | |
--theme-dark-status-info-on-solid | oklch(1 0 286) | |
--theme-dark-status-info-solid | oklch(0.566651 0.168568 251.8) | |
--theme-dark-status-info-surface | oklch(0.274466 0.066296 253.950454) | |
--theme-dark-status-info-text | oklch(0.764235 0.125721 249.494943) | |
--theme-dark-status-neutral-border | oklch(0.37 0 286) | |
--theme-dark-status-neutral-icon | oklch(0.708 0 286) | |
--theme-dark-status-neutral-on-solid | oklch(0.145 0 286) | |
--theme-dark-status-neutral-solid | oklch(0.985 0 286) | |
--theme-dark-status-neutral-surface | oklch(0.269 0 286) | |
--theme-dark-status-neutral-text | oklch(0.769 0 286) | |
--theme-dark-status-success-border | oklch(0.466982 0.08231 160.25737) | |
--theme-dark-status-success-icon | oklch(0.640602 0.132853 157.7) | |
--theme-dark-status-success-on-solid | oklch(1 0 286) | |
--theme-dark-status-success-solid | oklch(0.548102 0.128886 157.7) | |
--theme-dark-status-success-surface | oklch(0.272142 0.039586 162.175631) | |
--theme-dark-status-success-text | oklch(0.779439 0.165465 157.301059) | |
--theme-dark-status-warning-border | oklch(0.454239 0.082359 74.940897) | |
--theme-dark-status-warning-icon | oklch(0.853575 0.15722 84.1) | |
--theme-dark-status-warning-on-solid | oklch(0.145 0 286) | |
--theme-dark-status-warning-solid | oklch(0.853575 0.15722 84.1) | |
--theme-dark-status-warning-surface | oklch(0.25781 0.04422 74.467502) | |
--theme-dark-status-warning-text | oklch(0.861614 0.172903 88.99284) | |
--theme-dark-surface-backdrop | oklch(0.145 0 286) | |
--theme-dark-surface-canvas | oklch(0.145 0 286) | |
--theme-dark-surface-disabled | oklch(0.269 0 286) | |
--theme-dark-surface-interactive-destructive-default | oklch(0.590577 0.193344 23) | |
--theme-dark-surface-interactive-destructive-hover | oklch(0.560577 0.177398 22.826714) | |
--theme-dark-surface-interactive-destructive-pressed | oklch(0.530577 0.177398 22.826714) | |
--theme-dark-surface-interactive-primary-default | oklch(0.985 0 286) | |
--theme-dark-surface-interactive-primary-hover | oklch(0.8446 0 286) | |
--theme-dark-surface-interactive-primary-pressed | oklch(0.8986 0 286) | |
--theme-dark-surface-interactive-secondary-default | oklch(0.269 0 286) | |
--theme-dark-surface-interactive-secondary-hover | oklch(0.29 0 286) | |
--theme-dark-surface-interactive-secondary-pressed | oklch(0.31 0 286) | |
--theme-dark-surface-inverse | oklch(0.985 0 286) | |
--theme-dark-surface-raised | oklch(0.205 0 286) | |
--theme-dark-surface-subtle | oklch(0.269 0 286) | |
--theme-dark-text-accent | oklch(0.775866 0.113802 273.011264) | |
--theme-dark-text-disabled | oklch(0.538 0 286) | |
--theme-dark-text-inverse | oklch(0.145 0 286) | |
--theme-dark-text-muted | oklch(0.708 0 286) | |
--theme-dark-text-on-destructive | oklch(1 0 286) | |
--theme-dark-text-on-interactive | oklch(0.145 0 286) | |
--theme-dark-text-primary | oklch(0.985 0 286) | |
--theme-dark-text-secondary | oklch(0.769 0 286) | |
--theme-focus-ring-inner | oklch(1 0 286) | Inner focus ring colour. |
--theme-focus-ring-outer | oklch(0.543785 0.191021 267) | Outer focus ring colour. |
--theme-focus-text | oklch(0.509225 0.172497 267.161083) | Focus foreground colour. |
--theme-focus-width | 2px | |
--theme-font-mono | 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | The brand's mono family. |
--theme-font-sans | Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | The brand's sans family (the brand recipe's font). |
--theme-icon-muted | oklch(0.545 0 286) | |
--theme-icon-on-interactive | oklch(1 0 286) | |
--theme-icon-primary | oklch(0.439 0 286) | |
--theme-motion-duration-base | 180ms | |
--theme-motion-duration-fast | 120ms | |
--theme-motion-duration-slow | 320ms | |
--theme-motion-easing-emphasized | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--theme-motion-easing-linear | cubic-bezier(0, 0, 1, 1) | |
--theme-motion-easing-standard | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-motion-reduced-duration-base | 0ms | |
--theme-motion-reduced-duration-fast | 0ms | |
--theme-motion-reduced-duration-slow | 0ms | |
--theme-motion-reduced-transition-banner-reveal-delay | 0ms | |
--theme-motion-reduced-transition-banner-reveal-duration | 0ms | |
--theme-motion-reduced-transition-banner-reveal-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-motion-reduced-transition-chip-in-delay | 0ms | |
--theme-motion-reduced-transition-chip-in-duration | 0ms | |
--theme-motion-reduced-transition-chip-in-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-motion-reduced-transition-chip-out-delay | 0ms | |
--theme-motion-reduced-transition-chip-out-duration | 0ms | |
--theme-motion-reduced-transition-chip-out-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-motion-reduced-transition-focus-delay | 0ms | |
--theme-motion-reduced-transition-focus-duration | 0ms | |
--theme-motion-reduced-transition-focus-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-motion-reduced-transition-hover-delay | 0ms | |
--theme-motion-reduced-transition-hover-duration | 0ms | |
--theme-motion-reduced-transition-hover-timing-function | cubic-bezier(0, 0, 1, 1) | |
--theme-motion-transition-banner-reveal-delay | 20ms | |
--theme-motion-transition-banner-reveal-duration | 320ms | |
--theme-motion-transition-banner-reveal-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--theme-motion-transition-chip-in-delay | 0ms | |
--theme-motion-transition-chip-in-duration | 180ms | |
--theme-motion-transition-chip-in-timing-function | cubic-bezier(0.05, 0.7, 0.1, 1) | |
--theme-motion-transition-chip-out-delay | 0ms | |
--theme-motion-transition-chip-out-duration | 120ms | |
--theme-motion-transition-chip-out-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-motion-transition-focus-delay | 0ms | |
--theme-motion-transition-focus-duration | 180ms | |
--theme-motion-transition-focus-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-motion-transition-hover-delay | 0ms | |
--theme-motion-transition-hover-duration | 120ms | |
--theme-motion-transition-hover-timing-function | cubic-bezier(0.2, 0, 0.38, 1) | |
--theme-radius-card | 12px | Corner radius of a card or panel: twice the brand radius. |
--theme-radius-control | 6px | Corner radius of a control at the default size: the brand recipe's radius. |
--theme-radius-large | 8px | Corner radius of a large control: the brand radius plus 2px. |
--theme-radius-pill | 999px | Fully rounded ends, for badges and pills. |
--theme-radius-small | 4px | Corner radius of a small control: the brand radius less 2px. |
--theme-shadow-elevation-card-blur | 8px | |
--theme-shadow-elevation-card-color | rgba(0, 0, 0, 0.06) | |
--theme-shadow-elevation-card-offset-x | 0px | |
--theme-shadow-elevation-card-offset-y | 4px | |
--theme-shadow-elevation-card-spread | -4px | |
--theme-shadow-elevation-overlay-blur | 16px | |
--theme-shadow-elevation-overlay-color | rgba(0, 0, 0, 0.1) | |
--theme-shadow-elevation-overlay-offset-x | 0px | |
--theme-shadow-elevation-overlay-offset-y | 8px | |
--theme-shadow-elevation-overlay-spread | -4px | |
--theme-space-inline-sm | 12px | |
--theme-space-inline-xs | 8px | |
--theme-space-inset-compact | 8px | |
--theme-space-inset-default | 24px | |
--theme-space-scale-lg | 24px | |
--theme-space-scale-md | 12px | |
--theme-space-scale-sm | 8px | |
--theme-space-stack-compact | 12px | |
--theme-space-stack-default | 16px | |
--theme-status-accent-border | oklch(0.806161 0.08754 271.403687) | Accent border colour. |
--theme-status-accent-icon | oklch(0.543785 0.191021 267) | Accent icon colour. |
--theme-status-accent-on-solid | oklch(1 0 286) | Text and icons on the solid accent fill. |
--theme-status-accent-solid | oklch(0.543785 0.191021 267) | Solid accent fill, for emphasis (a solid badge or banner). |
--theme-status-accent-surface | oklch(0.96086 0.016961 267.781434) | Accent feedback background. |
--theme-status-accent-text | oklch(0.509225 0.172497 267.161083) | Accent text colour. |
--theme-status-archive-border | oklch(0.804282 0.036704 309.722537) | |
--theme-status-archive-icon | oklch(0.555677 0.073169 305.9) | |
--theme-status-archive-surface | oklch(0.958846 0.009954 311.741665) | |
--theme-status-archive-text | oklch(0.516842 0.069327 305.916434) | |
--theme-status-critical-border | oklch(0.807 0.088767 18.290593) | Critical border colour. |
--theme-status-critical-icon | oklch(0.625577 0.193344 23) | Critical icon colour. |
--theme-status-critical-on-solid | oklch(1 0 286) | Text and icons on the solid critical fill. |
--theme-status-critical-solid | oklch(0.590577 0.193344 23) | Solid critical fill, for emphasis (a solid badge or banner). |
--theme-status-critical-surface | oklch(0.955466 0.020724 13.839409) | Critical feedback background. |
--theme-status-critical-text | oklch(0.556979 0.197433 25.13833) | Critical text colour. |
--theme-status-info-border | oklch(0.809755 0.088669 243.091253) | Informational border colour. |
--theme-status-info-icon | oklch(0.622153 0.183136 251.723539) | Informational icon colour. |
--theme-status-info-on-solid | oklch(1 0 286) | Text and icons on the solid info fill. |
--theme-status-info-solid | oklch(0.566651 0.168568 251.8) | Solid info fill, for emphasis (a solid badge or banner). |
--theme-status-info-surface | oklch(0.959682 0.020056 238.701263) | Informational background surface. |
--theme-status-info-text | oklch(0.540689 0.162234 252.214666) | Informational text colour. |
--theme-status-neutral-border | oklch(0.871 0 286) | Neutral border colour. |
--theme-status-neutral-icon | oklch(0.643 0 286) | Neutral icon colour. |
--theme-status-neutral-on-solid | oklch(1 0 286) | Text and icons on the solid neutral fill. |
--theme-status-neutral-solid | oklch(0.145 0 286) | Solid neutral fill, for emphasis (a solid badge or banner). |
--theme-status-neutral-surface | oklch(0.97 0 286) | Neutral feedback background. |
--theme-status-neutral-text | oklch(0.439 0 286) | Neutral text colour. |
--theme-status-success-border | oklch(0.798152 0.08315 159.165466) | Success border colour. |
--theme-status-success-icon | oklch(0.611472 0.126614 158.247346) | Success icon colour. |
--theme-status-success-on-solid | oklch(1 0 286) | Text and icons on the solid success fill. |
--theme-status-success-solid | oklch(0.548102 0.128886 157.7) | Solid success fill, for emphasis (a solid badge or banner). |
--theme-status-success-surface | oklch(0.958254 0.02227 155.931601) | Success feedback background. |
--theme-status-success-text | oklch(0.523466 0.11158 159.513172) | Success text colour. |
--theme-status-warning-border | oklch(0.827254 0.122422 86.674497) | Warning border colour. |
--theme-status-warning-icon | oklch(0.570661 0.129157 63.921739) | Warning icon colour. |
--theme-status-warning-on-solid | oklch(0.145 0 286) | Text and icons on the solid warning fill. |
--theme-status-warning-solid | oklch(0.853575 0.15722 84.1) | Solid warning fill, for emphasis (a solid badge or banner). |
--theme-status-warning-surface | oklch(0.969531 0.068378 100.371682) | Warning feedback background. |
--theme-status-warning-text | oklch(0.553161 0.125197 63.921739) | Warning text colour. |
--theme-surface-backdrop | oklch(0.145 0 286) | Backdrop scrim surface. |
--theme-surface-canvas | oklch(1 0 286) | Primary application canvas. |
--theme-surface-disabled | oklch(0.97 0 286) | Surface colour for disabled or inactive UI. |
--theme-surface-interactive-destructive-default | oklch(0.590577 0.193344 23) | The destructive action, at rest. |
--theme-surface-interactive-destructive-hover | oklch(0.560577 0.194665 24.00731) | The destructive action, hovered. |
--theme-surface-interactive-destructive-pressed | oklch(0.530577 0.194665 24.00731) | The destructive action, pressed. |
--theme-surface-interactive-primary-default | oklch(0.145 0 286) | Primary interactive surface default state. |
--theme-surface-interactive-primary-hover | oklch(0.3361 0 286) | Primary interactive surface hover state. |
--theme-surface-interactive-primary-pressed | oklch(0.2626 0 286) | Primary interactive surface pressed state. |
--theme-surface-interactive-secondary-default | oklch(0.97 0 286) | The secondary action (a subtle fill), at rest. |
--theme-surface-interactive-secondary-hover | oklch(0.95 0 286) | The secondary action (a subtle fill), hovered. |
--theme-surface-interactive-secondary-pressed | oklch(0.935 0 286) | The secondary action (a subtle fill), pressed. |
--theme-surface-inverse | oklch(0.145 0 286) | Inverse surface for dark-on-light treatments. |
--theme-surface-raised | oklch(1 0 286) | Raised card surface. |
--theme-surface-subtle | oklch(0.97 0 286) | Subtle secondary surface. |
--theme-text-accent | oklch(0.509225 0.172497 267.161083) | Accent text colour. |
--theme-text-disabled | oklch(0.643 0 286) | Disabled or de-emphasised text. |
--theme-text-inverse | oklch(1 0 286) | Text on inverse surfaces. |
--theme-text-muted | oklch(0.545 0 286) | Muted caption text. |
--theme-text-on-destructive | oklch(1 0 286) | Text and icons on the destructive action. |
--theme-text-on-interactive | oklch(1 0 286) | Text and icons on the primary interactive surface (buttons and selected controls). |
--theme-text-primary | oklch(0.145 0 286) | Primary reading text. |
--theme-text-secondary | oklch(0.439 0 286) | Secondary supporting text. |
--oods-viz-map-basemap-fill | oklch(0.95 0 286) | |
--oods-viz-map-basemap-stroke | oklch(0.792 0 286) | |
--oods-viz-map-basemap-stroke-width | 0.5px | |
--oods-viz-map-region-hover-stroke | oklch(0.543785 0.191021 267) | |
--oods-viz-map-region-hover-stroke-width | 2px | |
--oods-viz-map-region-stroke | oklch(0.643 0 286) | |
--oods-viz-map-region-stroke-width | 1px | |
--oods-viz-map-route-max-width | 10px | |
--oods-viz-map-route-min-width | 1px | |
--oods-viz-map-route-stroke-opacity | 0.6 | |
--oods-viz-map-symbol-max-radius | 40px | |
--oods-viz-map-symbol-min-radius | 4px | |
--oods-viz-map-symbol-stroke | oklch(1 0 286) | |
--oods-viz-map-symbol-stroke-width | 1px | |
--oods-viz-margin-default | 12px | |
--oods-viz-margin-roomy | 16px | |
--oods-viz-margin-tight | 8px | |
--oods-viz-mark-single | oklch(0.543785 0.191021 267) | Colour of a chart that draws a single series. |
--oods-viz-scale-categorical-01 | oklch(0.543785 0.191021 267) | Series colour 1 of 6, for categories that have no order. |
--oods-viz-scale-categorical-02 | oklch(0.669609 0.136951 87) | Series colour 2 of 6, for categories that have no order. |
--oods-viz-scale-categorical-03 | oklch(0.426529 0.191793 327) | Series colour 3 of 6, for categories that have no order. |
--oods-viz-scale-categorical-04 | oklch(0.510586 0.147294 147) | Series colour 4 of 6, for categories that have no order. |
--oods-viz-scale-categorical-05 | oklch(0.366152 0.149221 27) | Series colour 5 of 6, for categories that have no order. |
--oods-viz-scale-categorical-06 | oklch(0.653478 0.112047 207) | Series colour 6 of 6, for categories that have no order. |
--oods-viz-scale-diverging-neg-01 | oklch(0.7 0.145019 267) | Step 1 of 5 below the midpoint of the diverging scale. |
--oods-viz-scale-diverging-neg-02 | oklch(0.58 0.183256 267) | Step 2 of 5 below the midpoint of the diverging scale. |
--oods-viz-scale-diverging-neg-03 | oklch(0.46 0.185665 267) | Step 3 of 5 below the midpoint of the diverging scale. |
--oods-viz-scale-diverging-neg-04 | oklch(0.34 0.137232 267) | Step 4 of 5 below the midpoint of the diverging scale. |
--oods-viz-scale-diverging-neg-05 | oklch(0.22 0.088801 267) | Step 5 of 5 below the midpoint of the diverging scale. |
--oods-viz-scale-diverging-negative-1 | oklch(0.7 0.145019 267) | |
--oods-viz-scale-diverging-negative-2 | oklch(0.46 0.185665 267) | |
--oods-viz-scale-diverging-negative-3 | oklch(0.22 0.088801 267) | |
--oods-viz-scale-diverging-neutral | oklch(0.82 0 286) | Midpoint of the diverging scale. |
--oods-viz-scale-diverging-pos-01 | oklch(0.7 0.145019 23) | Step 1 of 5 above the midpoint of the diverging scale. |
--oods-viz-scale-diverging-pos-02 | oklch(0.58 0.183256 23) | Step 2 of 5 above the midpoint of the diverging scale. |
--oods-viz-scale-diverging-pos-03 | oklch(0.46 0.185665 23) | Step 3 of 5 above the midpoint of the diverging scale. |
--oods-viz-scale-diverging-pos-04 | oklch(0.34 0.137232 23) | Step 4 of 5 above the midpoint of the diverging scale. |
--oods-viz-scale-diverging-pos-05 | oklch(0.22 0.088801 23) | Step 5 of 5 above the midpoint of the diverging scale. |
--oods-viz-scale-diverging-positive-1 | oklch(0.7 0.145019 23) | |
--oods-viz-scale-diverging-positive-2 | oklch(0.46 0.185665 23) | |
--oods-viz-scale-diverging-positive-3 | oklch(0.22 0.088801 23) | |
--oods-viz-scale-sequential-01 | oklch(0.94 0.021658 267) | Step 1 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-02 | oklch(0.84 0.073919 267) | Step 2 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-03 | oklch(0.74 0.126649 267) | Step 3 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-04 | oklch(0.64 0.167732 267) | Step 4 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-05 | oklch(0.54 0.189065 267) | Step 5 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-06 | oklch(0.44 0.186634 267) | Step 6 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-07 | oklch(0.34 0.160892 267) | Step 7 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-08 | oklch(0.24 0.116709 267) | Step 8 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-09 | oklch(0.14 0.062954 267) | Step 9 of 9 of the ordered scale (01 is the low end). |
--oods-viz-scale-sequential-blue-1 | oklch(0.94 0.021658 267) | |
--oods-viz-scale-sequential-blue-2 | oklch(0.84 0.073919 267) | |
--oods-viz-scale-sequential-blue-3 | oklch(0.74 0.126649 267) | |
--oods-viz-scale-sequential-blue-4 | oklch(0.64 0.167732 267) | |
--oods-viz-scale-sequential-blue-5 | oklch(0.54 0.189065 267) | |
--oods-viz-scale-sequential-blue-6 | oklch(0.44 0.186634 267) | |
--oods-viz-scale-sequential-blue-7 | oklch(0.34 0.160892 267) | |
--oods-viz-size-bar-narrow | 12px | |
--oods-viz-size-bar-standard | 18px | |
--oods-viz-size-bar-wide | 24px | |
--oods-viz-size-point-01 | 3px | |
--oods-viz-size-point-02 | 5px | |
--oods-viz-size-point-03 | 7px | |
--oods-viz-size-point-04 | 10px | |
--oods-viz-size-point-05 | 14px | |
--oods-viz-size-stroke-01 | 1px | |
--oods-viz-size-stroke-02 | 2px | |
--oods-viz-size-stroke-03 | 3px | |
--oods-viz-size-stroke-04 | 4px | |
--oods-z-base | 0 | |
--oods-z-overlay | 1000 | |
--oods-z-raised | 10 | |
--oods-z-toast | 1100 | |
--oods-z-tooltip | 1200 |
No token matches these filters.