Style kiosk dashboards with the CubeCraft Creations display system
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
@@ -1,13 +1,33 @@
|
||||
# At-a-Glance — wall panel
|
||||
#
|
||||
# Styled with the CubeCraft Creations display system. The tokens live in
|
||||
# themes/cubecraft.yaml, which mirrors the `:host` block of the production
|
||||
# card's stylesheet (custom_components/cubecraft_production/www/
|
||||
# cubecraft-production-card.js). Anything referenced here as --cc-* comes from
|
||||
# that theme, so this file never hard-codes a brand hex.
|
||||
#
|
||||
# Three motifs carry the style, all lifted from the production card:
|
||||
# .title → gradient title bar, white 800-weight type, brand radius
|
||||
# .column header → uppercase 700/.05em muted section labels
|
||||
# article → 8px radius, 4px brand left rule, shadow-sm on each tile
|
||||
#
|
||||
# Colour is deliberately restrained: brand indigo for anything informational,
|
||||
# and green/amber/red kept in reserve so they still mean something when they
|
||||
# show up. That is the same discipline the production card uses, where only a
|
||||
# blocked order goes red.
|
||||
title: At-a-Glance
|
||||
theme: dakboard-dark
|
||||
theme: cubecraft
|
||||
views:
|
||||
- title: At-a-Glance
|
||||
path: at-a-glance
|
||||
icon: mdi:eye-outline
|
||||
theme: dakboard-dark
|
||||
theme: cubecraft
|
||||
type: masonry
|
||||
cards:
|
||||
# ── Header ──
|
||||
# ── Brand title bar ──
|
||||
# Mirrors `.shell.kiosk .title`: gradient ground, white type at 1.75rem,
|
||||
# brand radius and the brand shadow. ha-markdown supplies its own 16px
|
||||
# inset, so ha-card only tops that up to roughly the card's 20px/28px.
|
||||
- type: markdown
|
||||
content: |
|
||||
# {{ now().strftime("%A, %B %d, %Y") }}
|
||||
@@ -15,21 +35,28 @@ views:
|
||||
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;
|
||||
text-align: center;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 0 0 4px 0;
|
||||
}
|
||||
ha-card h1 {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
opacity: 0.85;
|
||||
color: #fff;
|
||||
}
|
||||
ha-card h2 {
|
||||
font-size: 2em;
|
||||
margin: 2px 0 0 0;
|
||||
font-weight: 400;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
# ── Weather Now ──
|
||||
@@ -41,127 +68,200 @@ views:
|
||||
round_temperature: true
|
||||
|
||||
# ── Indoor Climate ──
|
||||
# First use of the section-label treatment; the rest of the file aliases
|
||||
# it as *cc_section. Selectors are listed broadly on purpose — a heading
|
||||
# card's internals are not a stable API, and any selector that misses
|
||||
# simply leaves that bit at the theme default rather than breaking.
|
||||
- type: heading
|
||||
heading: Indoor Climate
|
||||
heading_style: title
|
||||
icon: mdi:home-thermometer-outline
|
||||
card_mod: &cc_section
|
||||
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: 3
|
||||
square: false
|
||||
cards:
|
||||
# First use of the `article` treatment; aliased as *cc_tile below.
|
||||
- type: tile
|
||||
entity: sensor.living_room_temperature
|
||||
name: Living Room
|
||||
icon: mdi:sofa
|
||||
color: amber
|
||||
color: primary
|
||||
card_mod: &cc_tile
|
||||
style: |
|
||||
ha-card {
|
||||
border-radius: var(--cc-radius-md);
|
||||
border-left: 4px solid var(--cc-accent);
|
||||
box-shadow: var(--cc-shadow-sm);
|
||||
}
|
||||
- type: tile
|
||||
entity: sensor.office_temperature
|
||||
name: Office
|
||||
icon: mdi:desk
|
||||
color: teal
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.bedroom_temperature
|
||||
name: Master Bedroom
|
||||
icon: mdi:bed
|
||||
color: purple
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.upstairs_temperature
|
||||
name: Upstairs
|
||||
icon: mdi:stairs
|
||||
color: indigo
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.blink_family_room_temperature
|
||||
name: Family Room
|
||||
icon: mdi:television
|
||||
color: red
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.blink_kitchen_temperature
|
||||
name: Kitchen
|
||||
icon: mdi:stove
|
||||
color: deep-orange
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
|
||||
# ── 3D Printer Status ──
|
||||
- type: heading
|
||||
heading: 3D Printers
|
||||
heading_style: title
|
||||
icon: mdi:printer-3d-nozzle
|
||||
card_mod: *cc_section
|
||||
|
||||
- type: grid
|
||||
columns: 2
|
||||
square: false
|
||||
cards:
|
||||
# Online/offline is a genuine success signal, so these keep green and
|
||||
# take the success-coloured left rule.
|
||||
- type: tile
|
||||
entity: binary_sensor.p1s_01p09c470102673_online
|
||||
name: PrintsCharming
|
||||
icon: mdi:printer-3d-nozzle
|
||||
show_entity_picture: false
|
||||
color: green
|
||||
card_mod: &cc_tile_success
|
||||
style: |
|
||||
ha-card {
|
||||
border-radius: var(--cc-radius-md);
|
||||
border-left: 4px solid var(--success-color);
|
||||
box-shadow: var(--cc-shadow-sm);
|
||||
}
|
||||
- type: tile
|
||||
entity: binary_sensor.a1_03919d540806387_online
|
||||
name: Ds-Turd-Flinger
|
||||
icon: mdi:printer-3d-nozzle
|
||||
show_entity_picture: false
|
||||
color: green
|
||||
card_mod: *cc_tile_success
|
||||
- type: tile
|
||||
entity: binary_sensor.a1mini_0309ca580403653_online
|
||||
name: Polly-Pocket
|
||||
icon: mdi:printer-3d-nozzle
|
||||
show_entity_picture: false
|
||||
color: green
|
||||
card_mod: *cc_tile_success
|
||||
- type: tile
|
||||
entity: binary_sensor.constipation_orion_online
|
||||
name: Constipation-Orion
|
||||
icon: mdi:printer-3d-nozzle
|
||||
show_entity_picture: false
|
||||
color: green
|
||||
card_mod: *cc_tile_success
|
||||
- type: tile
|
||||
entity: binary_sensor.jordyns_layer_slayer_online
|
||||
name: Jordyn's Layer Slayer
|
||||
icon: mdi:printer-3d-nozzle
|
||||
show_entity_picture: false
|
||||
color: green
|
||||
card_mod: *cc_tile_success
|
||||
- type: tile
|
||||
entity: binary_sensor.centauri_carbon_sdcp_status
|
||||
name: Centauri Carbon
|
||||
icon: mdi:printer-3d-nozzle
|
||||
show_entity_picture: false
|
||||
color: green
|
||||
card_mod: *cc_tile_success
|
||||
|
||||
# ── Litter Boxes ──
|
||||
- type: heading
|
||||
heading: Litter Boxes
|
||||
heading_style: title
|
||||
icon: mdi:cat
|
||||
card_mod: *cc_section
|
||||
|
||||
- type: grid
|
||||
columns: 2
|
||||
square: false
|
||||
cards:
|
||||
# These are the "something needs doing" tiles — the equivalent of a
|
||||
# blocked order in the production card, so they take the error rule.
|
||||
- type: tile
|
||||
entity: binary_sensor.cat_crapper_3000_wastebin_filled
|
||||
name: Cat Crapper 3000
|
||||
icon: mdi:delete-empty
|
||||
show_entity_picture: false
|
||||
color: red
|
||||
card_mod: &cc_tile_alert
|
||||
style: |
|
||||
ha-card {
|
||||
border-radius: var(--cc-radius-md);
|
||||
border-left: 4px solid var(--error-color);
|
||||
box-shadow: var(--cc-shadow-sm);
|
||||
}
|
||||
- type: tile
|
||||
entity: binary_sensor.cat_crapper_3000_sand_lack
|
||||
name: CC3000 Litter
|
||||
icon: mdi:grain
|
||||
show_entity_picture: false
|
||||
color: amber
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
border-radius: var(--cc-radius-md);
|
||||
border-left: 4px solid var(--warning-color);
|
||||
box-shadow: var(--cc-shadow-sm);
|
||||
}
|
||||
- type: tile
|
||||
entity: binary_sensor.poop_box_wastebin_filled
|
||||
name: Poop Box
|
||||
icon: mdi:delete-empty
|
||||
show_entity_picture: false
|
||||
color: red
|
||||
card_mod: *cc_tile_alert
|
||||
- type: tile
|
||||
entity: binary_sensor.triple_threat_wastebin_filled
|
||||
name: Triple Threat
|
||||
icon: mdi:delete-empty
|
||||
show_entity_picture: false
|
||||
color: red
|
||||
card_mod: *cc_tile_alert
|
||||
|
||||
# ── Security ──
|
||||
- type: heading
|
||||
@@ -181,6 +281,7 @@ views:
|
||||
- type: entity
|
||||
entity: alarm_control_panel.blink_rear
|
||||
name: Rear
|
||||
card_mod: *cc_section
|
||||
|
||||
# ── Recent Activity ──
|
||||
- type: logbook
|
||||
|
||||
Reference in New Issue
Block a user