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,41 +1,58 @@
|
||||
# Family Hub — wall 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. Everything brand-coloured here comes
|
||||
# through --cc-* variables rather than a literal hex.
|
||||
title: Family Hub
|
||||
theme: dakboard-dark
|
||||
theme: cubecraft
|
||||
views:
|
||||
- title: Family Hub
|
||||
path: family-hub
|
||||
icon: mdi:home-heart
|
||||
theme: dakboard-dark
|
||||
theme: cubecraft
|
||||
type: masonry
|
||||
cards:
|
||||
# ── Date & Greeting Header ──
|
||||
# ── Brand greeting bar ──
|
||||
# The production card's `.title` treatment, carrying the date and a
|
||||
# time-of-day greeting instead of a board name.
|
||||
- type: markdown
|
||||
content: |
|
||||
# {{ now().strftime("%A, %B %d") }}
|
||||
{% set h = now().hour %}
|
||||
{% if h < 12 %}Good morning{% elif h < 17 %}Good afternoon{% else %}Good evening{% endif %}, family!
|
||||
## {% if h < 12 %}Good morning{% elif h < 17 %}Good afternoon{% else %}Good evening{% endif %}, family!
|
||||
entity_id:
|
||||
- sensor.time
|
||||
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 8px 0;
|
||||
}
|
||||
ha-card h1 {
|
||||
font-size: 1.4em;
|
||||
margin: 0 0 4px 0;
|
||||
font-weight: 300;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
ha-card p {
|
||||
font-size: 1.1em;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
opacity: 0.85;
|
||||
color: #fff;
|
||||
}
|
||||
ha-card h2 {
|
||||
margin: 2px 0 0 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.01em;
|
||||
color: #fff;
|
||||
}
|
||||
entity_id:
|
||||
- sensor.time
|
||||
|
||||
# ── Clock ──
|
||||
# Left on the sunken surface rather than a card, so the gradient bar above
|
||||
# stays the only heavyweight element in the column.
|
||||
- type: clock
|
||||
clock_size: large
|
||||
clock_style: analog
|
||||
@@ -48,6 +65,7 @@ views:
|
||||
style: |
|
||||
ha-card {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -73,8 +91,11 @@ views:
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
--calendar-day-color: var(--primary-text-color);
|
||||
--calendar-day-weekday-color: var(--secondary-text-color);
|
||||
--calendar-day-color: var(--cc-text, var(--primary-text-color));
|
||||
--calendar-day-weekday-color: var(--cc-text-muted, var(--secondary-text-color));
|
||||
--fc-today-bg-color: var(--cc-accent-soft);
|
||||
--fc-event-bg-color: var(--cc-accent);
|
||||
--fc-event-border-color: var(--cc-accent);
|
||||
}
|
||||
|
||||
# ── Quick Glance ──
|
||||
@@ -92,64 +113,104 @@ views:
|
||||
- type: entity
|
||||
entity: sensor.office_temperature
|
||||
name: Office
|
||||
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:
|
||||
# Outdoor temp
|
||||
# Temperatures are informational, so they all take the brand rule
|
||||
# rather than a colour each — see the colour note in at-a-glance.
|
||||
- type: tile
|
||||
entity: sensor.openweathermap_temperature
|
||||
name: Outside
|
||||
icon: mdi:thermometer
|
||||
show_entity_picture: false
|
||||
color: blue
|
||||
# Living Room
|
||||
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.living_room_temperature
|
||||
name: Living Room
|
||||
icon: mdi:sofa
|
||||
show_entity_picture: false
|
||||
color: amber
|
||||
# Office
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.office_temperature
|
||||
name: Office
|
||||
icon: mdi:desk
|
||||
show_entity_picture: false
|
||||
color: teal
|
||||
# Master Bedroom
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.bedroom_temperature
|
||||
name: Master Bedroom
|
||||
icon: mdi:bed
|
||||
show_entity_picture: false
|
||||
color: purple
|
||||
# Upstairs
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.upstairs_temperature
|
||||
name: Upstairs
|
||||
icon: mdi:stairs
|
||||
show_entity_picture: false
|
||||
color: indigo
|
||||
# Family Room (Blink)
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
- type: tile
|
||||
entity: sensor.blink_family_room_temperature
|
||||
name: Family Room
|
||||
icon: mdi:television
|
||||
show_entity_picture: false
|
||||
color: red
|
||||
color: primary
|
||||
card_mod: *cc_tile
|
||||
|
||||
# ── Shopping List ──
|
||||
- type: heading
|
||||
heading: Shopping List
|
||||
heading_style: title
|
||||
icon: mdi:cart-outline
|
||||
card_mod: *cc_section
|
||||
|
||||
- type: todo-list
|
||||
entity: todo.shopping_list
|
||||
title: Shopping List
|
||||
hide_completed: true
|
||||
display_order: none
|
||||
|
||||
# ── Chore Tracker Quick View ──
|
||||
- type: heading
|
||||
heading: Chores Today
|
||||
heading_style: title
|
||||
icon: mdi:check-circle-outline
|
||||
card_mod: *cc_section
|
||||
|
||||
- type: entities
|
||||
title: Chores Today
|
||||
show_header_toggle: false
|
||||
entities:
|
||||
- entity: binary_sensor.cat_medication_tracker_all_cats_medicated
|
||||
@@ -171,3 +232,4 @@ views:
|
||||
- type: entity
|
||||
entity: binary_sensor.upstairs_occupancy
|
||||
name: Upstairs
|
||||
card_mod: *cc_section
|
||||
|
||||
Reference in New Issue
Block a user