Theme Token Map¶
Generated reference — part of the Theme System docs. Companion: Theme Token CSS-Usage Trace.
The themeable control-surface tokens exposed in the theme editor: 411 tokens across 25 groups. Each is a --evcc-* CSS custom property; Controls is the editor label (what it styles); Type is the input kind; Default is the value the card ships (the reverse lookup: scan a group for the colour you need instead of inventing one); bounded scalars list their slider range.
The 5 companion sub-groups share one identical 14-token shape — only Cat is listed in full; Dog, Raccoon, Parrot, Snake repeat it with their own -<animal>- key segment.
App Shell & Typography · 10¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-accent |
Accent | color | var(--accent-color, #3b82f6) |
|
--evcc-accent-soft |
Accent Soft | color | rgba(0,229,255,0.16) |
|
--evcc-tab-active-bg |
Tab Active BG | color | — | |
--evcc-tab-active-border |
Tab Active Border | color | — | |
--evcc-tab-active-text |
Tab Active Text | color | — | |
--evcc-text-muted |
Text Muted | color | rgba(240,242,245,0.48) |
|
--evcc-text-on-accent |
Text On Accent | color | #ffffff |
|
--evcc-text-primary |
Text Primary | color | var(--primary-text-color, #f0f2f5) |
|
--evcc-text-secondary |
Text Secondary | color | var(--secondary-text-color, rgba(240,242,245,0.72)) |
|
--evcc-text-strong |
Text Strong | color | var(--primary-text-color, #f0f2f5) |
Cards & Surfaces · 19¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-bg-input |
BG Input | color | var(--evcc-surface-input) |
|
--evcc-card-bg |
Card BG | color | var(--evcc-surface-card) |
|
--evcc-card-gap |
Card Gap | size | — | |
--evcc-card-min-height |
Card Min Height | size | — | |
--evcc-card-padding |
Card Padding | size | — | |
--evcc-panel-bg |
Panel BG | color | var(--evcc-surface-panel) |
|
--evcc-surface-action |
Surface Action | color | rgba(255,255,255,0.10) |
|
--evcc-surface-action-hover |
Surface Action Hover | color | rgba(255,255,255,0.18) |
|
--evcc-surface-base |
Surface Base | color | var(--card-background-color, #1c2127) |
|
--evcc-surface-card |
Surface Card | color | var(--evcc-surface-base) |
|
--evcc-surface-chip |
Surface Chip | color | rgba(255,255,255,0.09) |
|
--evcc-surface-input |
Surface Input | color | rgba(255,255,255,0.06) |
|
--evcc-surface-overlay |
Surface Overlay | color | rgba(0,0,0,0.4) |
|
--evcc-surface-panel |
Surface Panel | color | color-mix(in srgb, var(--evcc-surface-base) 85%, white 15%) |
|
--evcc-surface-raised |
Surface Raised | color | color-mix(in srgb, var(--evcc-surface-base) 92%, white 8%) |
|
--evcc-surface-subtle |
Surface Subtle | color | rgba(255,255,255,0.04) |
|
--evcc-surface-success |
Surface Success | color | rgba(76,175,110,0.12) |
|
--evcc-surface-sunken |
Surface Sunken | color | rgba(0,0,0,0.18) |
|
--evcc-surface-warning |
Surface Warning | color | rgba(255,180,0,0.12) |
Borders & Shadows · 7¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-border-default |
Border Default | color | rgba(255,255,255,0.10) |
|
--evcc-border-strong |
Border Strong | color | rgba(255,255,255,0.18) |
|
--evcc-border-subtle |
Border Subtle | color | rgba(255,255,255,0.06) |
|
--evcc-border-success |
Border Success | color | rgba(76,175,110,0.35) |
|
--evcc-border-warning |
Border Warning | color | rgba(255,180,0,0.35) |
|
--evcc-shadow-card |
Shadow Card | shadow | — | |
--evcc-shadow-hover |
Shadow Hover | shadow | — |
Chips · 31¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-chip-active-bg |
Chip Active BG | color | — | |
--evcc-chip-active-border |
Chip Active Border | color | — | |
--evcc-chip-active-text |
Chip Active Text | color | — | |
--evcc-chip-bg |
Chip BG | color | var(--evcc-surface-input) |
|
--evcc-chip-border |
Chip Border | color | var(--evcc-border-default) |
|
--evcc-chip-excluded-bg |
Chip Excluded BG | color | — | |
--evcc-chip-excluded-border |
Chip Excluded Border | color | — | |
--evcc-chip-excluded-text |
Chip Excluded Text | color | — | |
--evcc-chip-font-size |
Chip Font Size | size | — | |
--evcc-chip-font-weight |
Chip Font Weight | typography | — | |
--evcc-chip-gap |
Chip Gap | size | — | |
--evcc-chip-height |
Chip Height | size | 24px |
|
--evcc-chip-hover-bg |
Chip Hover BG | color | var(--evcc-surface-panel) |
|
--evcc-chip-hover-border |
Chip Hover Border | color | var(--evcc-border-strong) |
|
--evcc-chip-hover-text |
Chip Hover Text | color | var(--evcc-text-primary) |
|
--evcc-chip-icon-height |
Chip Icon Height | size | 24px |
|
--evcc-chip-icon-padding |
Chip Icon Padding | size | 4px 8px |
|
--evcc-chip-icon-size |
Chip Icon Size | size | 0.8rem |
|
--evcc-chip-included-bg |
Chip Included BG | color | — | |
--evcc-chip-included-border |
Chip Included Border | color | — | |
--evcc-chip-included-text |
Chip Included Text | color | — | |
--evcc-chip-neutral-bg |
Chip Neutral BG | color | — | |
--evcc-chip-padding |
Chip Padding | size | 5px 14px |
|
--evcc-chip-radius |
Chip Radius | size | 999px |
|
--evcc-chip-success-bg |
Chip Success BG | color | — | |
--evcc-chip-success-border |
Chip Success Border | color | — | |
--evcc-chip-success-text |
Chip Success Text | color | — | |
--evcc-chip-text |
Chip Text | color | var(--evcc-text-secondary) |
|
--evcc-chip-warning-bg |
Chip Warning BG | color | — | |
--evcc-chip-warning-border |
Chip Warning Border | color | — | |
--evcc-chip-warning-text |
Chip Warning Text | color | — |
Room Cards · 13¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-profile-chip-bg |
Profile Chip BG | color | — | |
--evcc-profile-chip-border |
Profile Chip Border | color | — | |
--evcc-profile-chip-custom-bg |
Profile Chip Custom BG | color | — | |
--evcc-profile-chip-custom-border |
Profile Chip Custom Border | color | — | |
--evcc-profile-chip-custom-text |
Profile Chip Custom Text | color | — | |
--evcc-profile-chip-text |
Profile Chip Text | color | — | |
--evcc-room-chip-bg |
Room Chip BG | color | — | |
--evcc-room-chip-border |
Room Chip Border | color | — | |
--evcc-room-chip-text |
Room Chip Text | color | — | |
--evcc-room-fill-opacity |
Room Card Opacity | number | — | |
--evcc-room-grid-columns |
Room Grid Columns | size | — | |
--evcc-room-grid-gap |
Room Grid Gap | size | var(--evcc-grid-gap) |
|
--evcc-room-grid-min |
Room Grid Min | size | 240px |
Map · 34¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-map-label-bg |
Map Label Background | color | — | |
--evcc-map-label-text |
Map Label Text | color | — | |
--evcc-map-label-text-selected |
Map Label Text (Selected) | color | — | |
--evcc-map-label-order-text |
Map Order Badge Text | color | — | |
--evcc-map-tooltip-bg |
Map Tooltip Background | color | — | |
--evcc-map-tooltip-border |
Map Tooltip Border | color | — | |
--evcc-map-tooltip-text |
Map Tooltip Text | color | — | |
--evcc-map-tooltip-hint |
Map Tooltip Hint Text | color | — | |
--evcc-map-compose-selected-stroke |
Composer Selected Outline | color | — | |
--evcc-map-compose-cut-fill |
Composer Cutout Fill | color | — | |
--evcc-map-compose-cut-selected-fill |
Composer Cutout Fill (Selected) | color | — | |
--evcc-map-vertex-selected-glow |
Composer Selected Vertex Glow | color | — | |
--evcc-map-ov-current |
Overlay: Current Room | color | — | |
--evcc-map-ov-nogo |
Overlay: No-Go Zone | color | — | |
--evcc-map-ov-nomop |
Overlay: No-Mop Zone | color | — | |
--evcc-map-ov-wall |
Overlay: Virtual Wall | color | — | |
--evcc-map-ov-zone |
Overlay: Saved Zone | color | — | |
--evcc-map-ov-path |
Overlay: Cleaning Path | color | — | |
--evcc-map-ov-robot |
Overlay: Robot Marker | color | — | |
--evcc-map-ov-dock |
Overlay: Dock Marker | color | — | |
--evcc-map-ov-obstacle |
Overlay: Obstacle Marker | color | — | |
--evcc-map-ov-area-text |
Overlay: Area Label Text | color | — | |
--evcc-room-fill-1 |
Map Room Color 1 | color | — | |
--evcc-room-fill-2 |
Map Room Color 2 | color | — | |
--evcc-room-fill-3 |
Map Room Color 3 | color | — | |
--evcc-room-fill-4 |
Map Room Color 4 | color | — | |
--evcc-room-fill-5 |
Map Room Color 5 | color | — | |
--evcc-room-fill-6 |
Map Room Color 6 | color | — | |
--evcc-room-fill-7 |
Map Room Color 7 | color | — | |
--evcc-room-fill-8 |
Map Room Color 8 | color | — | |
--evcc-room-fill-9 |
Map Room Color 9 | color | — | |
--evcc-room-fill-10 |
Map Room Color 10 | color | — | |
--evcc-room-fill-11 |
Map Room Color 11 | color | — | |
--evcc-room-fill-12 |
Map Room Color 12 | color | — |
Floor Textures · 5¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-textures-card-enabled |
Card Textures Enabled (0/1) | number | — | 0–1 step 1 |
--evcc-floor-textures-map-enabled |
Map Textures Enabled (0/1) | number | — | 0–1 step 1 |
--evcc-floor-texture-opacity-card |
Card Texture Opacity (all) | number | — | 0–1 step 0.01 |
--evcc-floor-texture-opacity-map |
Map Texture Opacity (all) | number | — | 0–1 step 0.01 |
--evcc-floor-texture-map-rotate |
Map Texture Rotation (deg) | number | — | -180–180 step 1 |
Floor Textures — Tile · 7¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-tile-base |
Tile Base Color | color | — | |
--evcc-floor-tile-grout |
Tile Grout Color | color | — | |
--evcc-floor-tile-accent |
Tile Grout Line Color | color | — | |
--evcc-floor-tile-opacity-card |
Tile Card Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-tile-face-opacity |
Tile Base Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-tile-grout-opacity |
Tile Grout Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-tile-line-opacity |
Tile Grout Line Layer Opacity | number | — | 0–1 step 0.01 |
Floor Textures — Wood · 6¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-wood-base |
Wood Base Color | color | — | |
--evcc-floor-wood-accent |
Wood Grain & Seam Color | color | — | |
--evcc-floor-wood-opacity-card |
Wood Card Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-wood-depth-opacity |
Wood Depth Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-wood-grain-opacity |
Wood Grain Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-wood-seam-opacity |
Wood Seam Layer Opacity | number | — | 0–1 step 0.01 |
Floor Textures — Marble · 15¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-marble-base |
Marble Base Color | color | — | |
--evcc-floor-marble-micro |
Marble Micro Color | color | — | |
--evcc-floor-marble-accent |
Marble Vein Color | color | — | |
--evcc-floor-marble-opacity-card |
Marble Card Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-marble-base-opacity |
Marble Base Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-marble-micro-opacity |
Marble Micro Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-marble-vein-opacity |
Marble Vein Opacity (master) | number | — | 0–1 step 0.01 |
--evcc-floor-marble-vein-blur |
Marble Vein Blur (master, px) | number | — | 0–32 step 0.5 |
--evcc-floor-marble-vein-major-opacity |
Marble Major Vein Opacity +/- | number | — | -1–1 step 0.01 |
--evcc-floor-marble-vein-minor-opacity |
Marble Minor Vein Opacity +/- | number | — | -1–1 step 0.01 |
--evcc-floor-marble-vein-major-blur |
Marble Major Vein Blur +/- (px) | number | — | -32–32 step 0.5 |
--evcc-floor-marble-vein-minor-blur |
Marble Minor Vein Blur +/- (px) | number | — | -32–32 step 0.5 |
--evcc-floor-marble-vein-minor-light |
Marble Minor Vein Lighten (L+) | number | — | -1–1 step 0.01 |
--evcc-floor-marble-vein-minor-chroma |
Marble Minor Vein Saturation (xC) | number | — | 0–8 step 0.01 |
--evcc-floor-marble-vein-minor-hue |
Marble Minor Vein Hue Shift (deg) | number | — | -180–180 step 1 |
Floor Textures — Concrete · 5¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-concrete-base |
Concrete Base Color | color | — | |
--evcc-floor-concrete-accent |
Concrete Micro Color | color | — | |
--evcc-floor-concrete-opacity-card |
Concrete Card Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-concrete-broad-opacity |
Concrete Base Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-concrete-micro-opacity |
Concrete Micro Layer Opacity | number | — | 0–1 step 0.01 |
Floor Textures — Carpet Low · 5¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-carpet-low-base |
Carpet Low Base Color | color | — | |
--evcc-floor-carpet-low-weave |
Carpet Low Weave Color | color | — | |
--evcc-floor-carpet-low-opacity-card |
Carpet Low Card Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-carpet-low-base-opacity |
Carpet Low Base Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-carpet-low-weave-opacity |
Carpet Low Weave Layer Opacity | number | — | 0–1 step 0.01 |
Floor Textures — Carpet High · 5¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-carpet-high-base |
Carpet High Base Color | color | — | |
--evcc-floor-carpet-high-weave |
Carpet High Weave Color | color | — | |
--evcc-floor-carpet-high-opacity-card |
Carpet High Card Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-carpet-high-base-opacity |
Carpet High Base Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-carpet-high-weave-opacity |
Carpet High Weave Layer Opacity | number | — | 0–1 step 0.01 |
Floor Textures — Granite · 5¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-floor-granite-light-base |
Granite Base Color | color | — | |
--evcc-floor-granite-light-aggregate |
Granite Aggregate Color | color | — | |
--evcc-floor-granite-light-opacity-card |
Granite Card Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-granite-light-base-opacity |
Granite Base Layer Opacity | number | — | 0–1 step 0.01 |
--evcc-floor-granite-light-aggregate-opacity |
Granite Aggregate Layer Opacity | number | — | 0–1 step 0.01 |
Queue & Ordering · 41¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-drag-opacity |
Drag Opacity | number | — | |
--evcc-drag-scale |
Drag Scale | number | — | |
--evcc-drag-shadow |
Drag Shadow | shadow | — | |
--evcc-order-chip-bg |
Order Chip BG | color | — | |
--evcc-order-chip-border |
Order Chip Border | color | — | |
--evcc-order-chip-text |
Order Chip Text | color | — | |
--evcc-order-feedback-border |
Order Feedback Border | color | — | |
--evcc-order-target-outline |
Order Target Outline | color | — | |
--evcc-progress-complete |
Progress Complete | text | — | |
--evcc-progress-fill |
Progress Fill | color | — | |
--evcc-queue-chip-bg |
Queue Chip BG | color | — | |
--evcc-queue-chip-border |
Queue Chip Border | color | — | |
--evcc-queue-chip-gap |
Queue Chip Gap | size | — | |
--evcc-queue-chip-text |
Queue Chip Text | color | — | |
--evcc-queue-completed-bg |
Queue Completed BG | color | — | |
--evcc-queue-completed-border |
Queue Completed Border | color | — | |
--evcc-queue-completed-opacity |
Queue Completed Opacity | number | — | |
--evcc-queue-completed-text |
Queue Completed Text | color | — | |
--evcc-queue-current-bg |
Queue Current BG | color | — | |
--evcc-queue-current-border |
Queue Current Border | color | — | |
--evcc-queue-current-glow |
Queue Current Glow | shadow | — | |
--evcc-queue-current-text |
Queue Current Text | color | — | |
--evcc-queue-hover-bg |
Queue Hover BG | color | — | |
--evcc-queue-hover-border |
Queue Hover Border | color | — | |
--evcc-queue-hover-text |
Queue Hover Text | color | — | |
--evcc-queue-inferred-bg |
Queue Inferred BG | color | — | |
--evcc-queue-inferred-border |
Queue Inferred Border | color | — | |
--evcc-queue-inferred-glow |
Queue Inferred Glow | shadow | — | |
--evcc-queue-inferred-text |
Queue Inferred Text | color | — | |
--evcc-queue-order-bg |
Queue Order BG | color | — | |
--evcc-queue-order-border |
Queue Order Border | color | — | |
--evcc-queue-order-text |
Queue Order Text | color | — | |
--evcc-queue-pending-bg |
Queue Pending BG | color | — | |
--evcc-queue-pending-border |
Queue Pending Border | color | — | |
--evcc-queue-pending-opacity |
Queue Pending Opacity | number | — | |
--evcc-queue-pending-text |
Queue Pending Text | color | — | |
--evcc-queue-skipped-bg |
Queue Skipped BG | color | — | |
--evcc-queue-skipped-border |
Queue Skipped Border | color | — | |
--evcc-queue-skipped-text |
Queue Skipped Text | color | — | |
--evcc-reorder-feedback-duration |
Reorder Feedback Duration | duration | — | |
--evcc-reorder-flip-easing |
Reorder Flip Easing | easing | — |
Status, Confidence & Alerts · 31¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-color-cleaning |
Color Cleaning | color | var(--evcc-sem-success) |
|
--evcc-color-docked |
Color Docked | color | var(--evcc-accent) |
|
--evcc-color-error |
Color Error | color | var(--evcc-sem-error) |
|
--evcc-color-idle |
Color Idle | color | var(--evcc-text-secondary) |
|
--evcc-confidence-high-bg |
Confidence High BG | color | color-mix(in srgb, var(--evcc-sem-success) 18%, transparent) |
|
--evcc-confidence-high-border |
Confidence High Border | color | color-mix(in srgb, var(--evcc-sem-success) 40%, transparent) |
|
--evcc-confidence-high-text |
Confidence High Text | color | var(--evcc-sem-success) |
|
--evcc-confidence-low-bg |
Confidence Low BG | color | color-mix(in srgb, var(--evcc-sem-error) 18%, transparent) |
|
--evcc-confidence-low-border |
Confidence Low Border | color | color-mix(in srgb, var(--evcc-sem-error) 40%, transparent) |
|
--evcc-confidence-low-text |
Confidence Low Text | color | var(--evcc-sem-error) |
|
--evcc-confidence-medium-bg |
Confidence Medium BG | color | color-mix(in srgb, var(--evcc-sem-warning) 18%, transparent) |
|
--evcc-confidence-medium-border |
Confidence Medium Border | color | color-mix(in srgb, var(--evcc-sem-warning) 40%, transparent) |
|
--evcc-confidence-medium-text |
Confidence Medium Text | color | var(--evcc-sem-warning) |
|
--evcc-sem-error |
Sem Error | color | var(--error-color, #e05252) |
|
--evcc-sem-info |
Sem Info | color | #4a9fe0 |
|
--evcc-sem-success |
Sem Success | color | var(--success-color, #4caf6e) |
|
--evcc-sem-warning |
Sem Warning | color | var(--warning-color, #f5a623) |
|
--evcc-status-cleaning-bg |
Status Cleaning BG | color | — | |
--evcc-status-cleaning-border |
Status Cleaning Border | color | — | |
--evcc-status-cleaning-text |
Status Cleaning Text | color | — | |
--evcc-status-dot-charging |
Status Dot Charging | color | — | |
--evcc-status-dot-cleaning |
Status Dot Cleaning | color | — | |
--evcc-status-dot-docked |
Status Dot Docked | color | — | |
--evcc-status-dot-error |
Status Dot Error | color | — | |
--evcc-status-dot-idle |
Status Dot Idle | color | — | |
--evcc-status-dot-offline |
Status Dot Offline | color | — | |
--evcc-status-dot-paused |
Status Dot Paused | color | — | |
--evcc-status-dot-returning |
Status Dot Returning | color | — | |
--evcc-status-dot-shadow |
Status Dot Shadow | shadow | — | |
--evcc-status-dot-unavailable |
Status Dot Unavailable | color | — | |
--evcc-status-pulse-duration |
Status Pulse Duration | duration | — |
Learning & Metrics · 37¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-estimate-default-bg |
Estimate Default BG | color | color-mix(in srgb, var(--evcc-text-muted) 12%, transparent) |
|
--evcc-estimate-default-border |
Estimate Default Border | color | var(--evcc-border-default) |
|
--evcc-estimate-default-text |
Estimate Default Text | color | var(--evcc-text-secondary) |
|
--evcc-estimate-learned-bg |
Estimate Learned BG | color | color-mix(in srgb, var(--evcc-accent) 14%, transparent) |
|
--evcc-estimate-learned-border |
Estimate Learned Border | color | color-mix(in srgb, var(--evcc-accent) 30%, transparent) |
|
--evcc-estimate-learned-text |
Estimate Learned Text | color | var(--evcc-text-primary) |
|
--evcc-learning-anim-duration-fast |
Learning Anim Duration Fast | duration | 180ms |
|
--evcc-learning-anim-duration-normal |
Learning Anim Duration Normal | duration | 260ms |
|
--evcc-learning-anim-duration-slow |
Learning Anim Duration Slow | duration | 520ms |
|
--evcc-learning-anim-ease |
Learning Anim Ease | text | cubic-bezier(0.22, 1, 0.36, 1) |
|
--evcc-learning-chip-font-size |
Learning Chip Font Size | size | 0.74rem |
|
--evcc-learning-chip-font-weight |
Learning Chip Font Weight | typography | 700 |
|
--evcc-learning-chip-radius |
Learning Chip Radius | size | var(--evcc-radius-chip, 999px) |
|
--evcc-learning-confidence-high-bg |
Learning Confidence High BG | color | color-mix(in srgb, var(--evcc-sem-success) 18%, transparent) |
|
--evcc-learning-confidence-high-border |
Learning Confidence High Border | color | color-mix(in srgb, var(--evcc-sem-success) 42%, transparent) |
|
--evcc-learning-confidence-high-gradient |
Learning Confidence High Gradient | text | linear-gradient( 135deg, color-mix(in srgb, var(--evcc-sem-success) 26%, transparent), color-mix(in srgb, var(--evcc-sem-success) 10%, transparent) ) |
|
--evcc-learning-confidence-high-text |
Learning Confidence High Text | color | var(--evcc-sem-success) |
|
--evcc-learning-confidence-low-border |
Learning Confidence Low Border | color | color-mix(in srgb, var(--evcc-sem-error) 42%, transparent) |
|
--evcc-learning-confidence-low-gradient |
Learning Confidence Low Gradient | text | linear-gradient( 135deg, color-mix(in srgb, var(--evcc-sem-error) 26%, transparent), color-mix(in srgb, var(--evcc-sem-error) 10%, transparent) ) |
|
--evcc-learning-confidence-low-text |
Learning Confidence Low Text | color | var(--evcc-sem-error) |
|
--evcc-learning-confidence-medium-bg |
Learning Confidence Medium BG | color | color-mix(in srgb, var(--evcc-sem-warning) 18%, transparent) |
|
--evcc-learning-confidence-medium-border |
Learning Confidence Medium Border | color | color-mix(in srgb, var(--evcc-sem-warning) 42%, transparent) |
|
--evcc-learning-confidence-medium-gradient |
Learning Confidence Medium Gradient | text | linear-gradient( 135deg, color-mix(in srgb, var(--evcc-sem-warning) 26%, transparent), color-mix(in srgb, var(--evcc-sem-warning) 10%, transparent) ) |
|
--evcc-learning-confidence-medium-text |
Learning Confidence Medium Text | color | var(--evcc-sem-warning) |
|
--evcc-learning-confidence-neutral-border |
Learning Confidence Neutral Border | color | var(--evcc-border-default) |
|
--evcc-learning-confidence-neutral-gradient |
Learning Confidence Neutral Gradient | text | linear-gradient( 135deg, color-mix(in srgb, var(--evcc-text-muted) 16%, transparent), color-mix(in srgb, var(--evcc-text-muted) 8%, transparent) ) |
|
--evcc-learning-confidence-neutral-text |
Learning Confidence Neutral Text | color | var(--evcc-text-secondary) |
|
--evcc-learning-note-text |
Learning Note Text | color | var(--evcc-text-muted) |
|
--evcc-learning-panel-bg |
Learning Panel BG | color | var(--evcc-surface-panel) |
|
--evcc-learning-panel-border |
Learning Panel Border | color | var(--evcc-border-default) |
|
--evcc-learning-panel-shadow |
Learning Panel Shadow | shadow | var(--evcc-shadow-card, 0 6px 14px rgba(0, 0, 0, 0.14)) |
|
--evcc-learning-reanchor-border |
Learning Reanchor Border | color | color-mix(in srgb, var(--evcc-accent) 34%, transparent) |
|
--evcc-learning-reanchor-highlight |
Learning Reanchor Highlight | color | color-mix(in srgb, var(--evcc-accent) 16%, transparent) |
|
--evcc-learning-text-muted |
Learning Text Muted | color | var(--evcc-text-muted) |
|
--evcc-learning-text-primary |
Learning Text Primary | color | var(--evcc-text-primary) |
|
--evcc-learning-text-secondary |
Learning Text Secondary | color | var(--evcc-text-secondary) |
|
--evcc-learning-warning-text |
Learning Warning Text | color | var(--evcc-sem-warning) |
Modals & Overlays · 36¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-modal-accent |
Modal Accent | color | — | |
--evcc-modal-accent-bg |
Modal Accent BG | color | — | |
--evcc-modal-accent-border |
Modal Accent Border | color | — | |
--evcc-modal-accent-text |
Modal Accent Text | color | — | |
--evcc-modal-backdrop-bg |
Modal Backdrop BG | color | — | |
--evcc-modal-backdrop-blur |
Modal Backdrop Blur | number | — | |
--evcc-modal-bg |
Modal BG | color | — | |
--evcc-modal-border |
Modal Border | color | — | |
--evcc-modal-border-default |
Modal Border Default | color | — | |
--evcc-modal-border-strong |
Modal Border Strong | color | — | |
--evcc-modal-border-subtle |
Modal Border Subtle | color | — | |
--evcc-modal-chip-active-bg |
Modal Chip Active BG | color | — | |
--evcc-modal-chip-active-border |
Modal Chip Active Border | color | — | |
--evcc-modal-chip-active-text |
Modal Chip Active Text | color | — | |
--evcc-modal-chip-bg |
Modal Chip BG | color | — | |
--evcc-modal-chip-border |
Modal Chip Border | color | — | |
--evcc-modal-chip-hover-bg |
Modal Chip Hover BG | color | — | |
--evcc-modal-chip-hover-border |
Modal Chip Hover Border | color | — | |
--evcc-modal-chip-hover-text |
Modal Chip Hover Text | color | — | |
--evcc-modal-chip-text |
Modal Chip Text | color | — | |
--evcc-modal-footer-bg |
Modal Footer BG | color | — | |
--evcc-modal-header-bg |
Modal Header BG | color | — | |
--evcc-modal-input-bg |
Modal Input BG | color | — | |
--evcc-modal-padding |
Modal Padding | size | — | |
--evcc-modal-radius |
Modal Radius | size | — | |
--evcc-modal-section-gap |
Modal Section Gap | size | — | |
--evcc-modal-shadow |
Modal Shadow | shadow | — | |
--evcc-modal-surface-input |
Modal Surface Input | color | — | |
--evcc-modal-surface-panel |
Modal Surface Panel | color | — | |
--evcc-modal-surface-section |
Modal Surface Section | color | — | |
--evcc-modal-text-muted |
Modal Text Muted | color | — | |
--evcc-modal-text-primary |
Modal Text Primary | color | — | |
--evcc-modal-text-secondary |
Modal Text Secondary | color | — | |
--evcc-modal-warning-bg |
Modal Warning BG | color | — | |
--evcc-modal-warning-border |
Modal Warning Border | color | — | |
--evcc-modal-warning-text |
Modal Warning Text | color | — |
Animal Companion · 14¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-animal-eye-good |
Eye — Good (>50% battery) | color | — | |
--evcc-animal-eye-mid |
Eye — Mid (25–50%) | color | — | |
--evcc-animal-eye-warn |
Eye — Warn (15–25%) | color | — | |
--evcc-animal-eye-low |
Eye — Low (≤15%) | color | — | |
--evcc-animal-eye-charging |
Eye — Charging (pulses) | color | — | |
--evcc-animal-fur |
Fur (all animals) | color | — | |
--evcc-animal-fur-shadow |
Fur Shadow (all) | color | — | |
--evcc-animal-fur-highlight |
Fur Highlight (all) | color | — | |
--evcc-animal-eye |
Eye Base (all) | color | — | |
--evcc-animal-pupil |
Pupil (all) | color | — | |
--evcc-animal-nose |
Nose (all) | color | — | |
--evcc-animal-whisker |
Whisker (all) | color | — | |
--evcc-animal-ear-inner |
Ear Inner (all) | color | — | |
--evcc-animal-white-tip |
White Tip / Accent (all) | color | — |
Animal Companion — Cat · 14¶
(template — repeats per companion)
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-animal-cat-eye-good |
Eye — Good | color | — | |
--evcc-animal-cat-eye-mid |
Eye — Mid | color | — | |
--evcc-animal-cat-eye-warn |
Eye — Warn | color | — | |
--evcc-animal-cat-eye-low |
Eye — Low | color | — | |
--evcc-animal-cat-eye-charging |
Eye — Charging | color | — | |
--evcc-animal-cat-fur |
Fur | color | — | |
--evcc-animal-cat-fur-shadow |
Fur Shadow | color | — | |
--evcc-animal-cat-fur-highlight |
Fur Highlight | color | — | |
--evcc-animal-cat-eye |
Eye Base | color | — | |
--evcc-animal-cat-pupil |
Pupil | color | — | |
--evcc-animal-cat-nose |
Nose | color | — | |
--evcc-animal-cat-whisker |
Whisker | color | — | |
--evcc-animal-cat-ear-inner |
Ear Inner | color | — | |
--evcc-animal-cat-white-tip |
White Tip / Accent | color | — |
Shared Foundations · 15¶
| Token | Controls | Type | Default | Range |
|---|---|---|---|---|
--evcc-font-family |
Font Family | typography | — | |
--evcc-gap |
Gap | size | var(--evcc-space-md) |
|
--evcc-grid-gap |
Grid Gap | size | 12px |
|
--evcc-hover-lift |
Hover Lift | motion | — | |
--evcc-pad |
Pad | size | var(--evcc-space-lg) |
|
--evcc-press-scale |
Press Scale | number | — | |
--evcc-radius-card |
Radius Card | size | var(--ha-card-border-radius, 12px) |
|
--evcc-radius-chip |
Radius Chip | size | 999px |
|
--evcc-radius-inner |
Radius Inner | size | 8px |
|
--evcc-radius-panel |
Radius Panel | size | — | |
--evcc-section-gap |
Section Gap | size | — | |
--evcc-space-lg |
Space Lg | text | 16px |
|
--evcc-space-md |
Space Md | text | 12px |
|
--evcc-space-sm |
Space Sm | text | 8px |
|
--evcc-transition-normal |
Transition Normal | motion | 150ms ease |