overseer/Home-Assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style kiosk dashboards with the CubeCraft Creations display system

Browse Source 
The design system was only ever expressed in the production card's
stylesheet (custom_components/cubecraft_production/www/
cubecraft-production-card.js), which is gitignored, so the dashboards had
no way to share it. Mirror those tokens into an HA theme and apply the
card's own motifs to the wall panels.

themes/cubecraft.yaml carries the brand gradient, Nunito, the 4px scale,
radii, shadows and semantic colours. It uses `modes:` so it follows HA's
light/dark setting: light is the system as authored, dark uses
violet-tinted neutrals with the primary lifted to #8B8AF2 (5.6:1 on the
card surface) since #3B3AB8 is unreadable as an accent on dark. The
gradient itself is unchanged in both modes -- white clears AA across its
whole span.

At-a-Glance, Family Hub and Voice Alarms pick up three motifs from the
card: the .title gradient bar, .column header section labels, and the
4px brand left rule on each tile. Tile colour is cut back to brand
indigo, with green/amber/red reserved for real signals (printer offline,
bin full) -- the same discipline the card uses, where only a blocked
order goes red. CubeOps gets the theme too, so the board and the
dashboards land on the same ramp instead of the card improvising against
HA's defaults.

The card injects its @font-face only on its own page, so a small frontend
module declares Nunito document-wide. It points at the woff2 the
integration already serves rather than vendoring a second copy, which
needed a .gitignore carve-out since www/ is excluded wholesale.

dakboard-dark is left in place; switching a dashboard back is a one-line
change.

Not yet validated by `ha core check` -- this worktree is outside the
config tree HA actually loads.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
root
2026-07-27 11:27:35 -04:00
parent 0c35647203
commit 92b68ca21a
8 changed files with 702 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboards/views/voice-alarms-dashboard.yaml
+108 -2
View File
@@ -1,23 +1,111 @@
# Voice Alarms — satellite control panel
#
# Styled with the CubeCraft Creations display system; see
# dashboards/views/at-a-glance-dashboard.yaml for the motif notes and
# themes/cubecraft.yaml for the tokens.
#
# This one is a control panel rather than a glanceable board, so the per-tile
# left rule is dropped — the entity rows already carry their own structure and
# a rule on every card would just add noise. It keeps the gradient title bar
# and the section labels.
#
# Note that the theme collapses the HA toolbar (header-height: 0). This
# dashboard is reached by URL rather than the sidebar (show_in_sidebar: false
# in dashboards/voice-alarms.yaml), so navigate away via the sidebar.
title: Voice Alarms
theme: cubecraft
views:
- title: Voice Alarms
path: voice-alarms
icon: mdi:alarm-panel
theme: cubecraft
type: panel
cards:
- type: vertical-stack
cards:
# ── Brand title bar ──
- type: markdown
content: |
# Voice Alarms
## Jarvis & ReSpeaker satellites
card_mod:
style: |
ha-card {
background: var(--cc-gradient);
color: #fff;
border: none;
border-radius: var(--cc-radius-brand);
box-shadow: var(--cc-shadow-brand);
padding: 6px 12px;
}
ha-card h1 {
margin: 0;
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #fff;
}
ha-card h2 {
margin: 2px 0 0 0;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
opacity: 0.85;
color: #fff;
}
These alarms are managed by Home Assistant and announced on the selected
Jarvis and ReSpeaker satellites.
- type: markdown
content: >
These alarms are managed by Home Assistant and announced on the
selected Jarvis and ReSpeaker satellites.
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
ha-card p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--cc-text-muted, var(--secondary-text-color));
}
- type: heading
heading: Satellites
heading_style: title
icon: mdi:speaker-message
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
padding: 0;
margin: 4px 0 -4px 0;
}
ha-card .heading,
ha-card .content p,
ha-card p {
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
font-size: 0.9375rem;
color: var(--cc-text-muted, var(--secondary-text-color));
}
ha-card ha-icon,
ha-card ha-svg-icon {
color: var(--cc-accent, var(--primary-color));
}
- type: grid
columns: 2
square: false
cards:
# Card titles take the production card's column-header treatment:
# uppercase, 700, .05em tracking, muted. First use defines the
# anchor the other three alias.
- type: entities
title: Office Jarvis
show_header_toggle: false
@@ -30,6 +118,21 @@ views:
name: Alarm time
- entity: script.test_voice_alarm_office_jarvis
name: Test alarm
card_mod: &cc_panel
style: |
ha-card {
border-radius: var(--cc-radius-brand);
box-shadow: var(--cc-shadow-md);
}
ha-card .card-header,
ha-card h1.card-header {
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
font-size: 0.9375rem;
color: var(--cc-text-muted, var(--secondary-text-color));
padding-bottom: 4px;
}
- type: entities
title: ReSpeaker Family Room
@@ -43,6 +146,7 @@ views:
name: Alarm time
- entity: script.test_voice_alarm_respeaker_family_room
name: Test alarm
card_mod: *cc_panel
- type: entities
title: ReSpeaker Living Room
@@ -56,6 +160,7 @@ views:
name: Alarm time
- entity: script.test_voice_alarm_respeaker_living_room
name: Test alarm
card_mod: *cc_panel
- type: entities
title: ReSpeaker Master Bedroom
@@ -69,3 +174,4 @@ views:
name: Alarm time
- entity: script.test_voice_alarm_respeaker_master_bedroom
name: Test alarm
card_mod: *cc_panel