shell themes: add Daylight — bottom-anchored, segmented, light builtin
Fourth compiled-in shell theme (bread-theme/src/shell/builtin.rs). Stresses four axes no existing theme touched: - light surfaces (new tokens.light flag, swaps which of the fixed @bg/ @on-bg pair plays paper-surface vs ink — see Tokens::light's doc comment) - bottom anchoring (bar.window.anchors = ["bottom", ...]) - segmented bar chrome (new bar_border = "segmented" value: the bar window itself draws no fill/border, three slot-group pills draw their own) - blur disabled per-theme ([compositor.*] blur = false everywhere) Also: a new bottom_right surface anchor (manifest.rs + types.rs), since the three existing anchor shapes all assume a top-anchored bar's satellites belong in the top-right corner. tokens.accent2() gives the equaliser its own accent independent of accent_from/accent_to.
This commit is contained in:
parent
80e25f23b3
commit
6d9912af56
6 changed files with 665 additions and 22 deletions
117
bread-theme/assets/shell/daylight/daylight.css
Normal file
117
bread-theme/assets/shell/daylight/daylight.css
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
/* CSS template for the daylight builtin (bread-theme/src/shell/builtin.rs).
|
||||
* Same scope and substitution rules as its three siblings: only the
|
||||
* window/workspace/clock chrome the manifest's own concepts model, `{name}`
|
||||
* tokens substituted, `@name` palette references passed through untouched.
|
||||
* Declared-but-not-yet-consumed in production, same as every sibling
|
||||
* template — see `ShellTheme::css`'s doc comment for why (breadbar hand-
|
||||
* rolls its own CSS in `breadbar::theme::load_css` instead of calling this
|
||||
* method). Exercised by this crate's own tests.
|
||||
*
|
||||
* Source: bos-ui-demos/proposed/daylight.html's <style> block.
|
||||
*
|
||||
* Unlike its three siblings, this template hardcodes which of `@bg`/`@on-bg`
|
||||
* plays "paper surface" versus "ink" directly (`@on-bg` as the fill, `@bg`
|
||||
* as the text) rather than branching on `{light}` at substitution time —
|
||||
* `Tokens::substitute` only does `{name}` replacement, not conditionals, and
|
||||
* this template is Daylight's alone, so there is nothing to branch FOR here.
|
||||
* `breadbar::theme::load_css` is the one place that genuinely needs to pick
|
||||
* between the two directions at runtime (it renders all four themes from
|
||||
* one function) — see its own `panel`/`ink` locals and Tokens::light's doc
|
||||
* comment for the general mechanism this template only needs one side of.
|
||||
*/
|
||||
|
||||
window.breadbar {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: @bg;
|
||||
}
|
||||
window.breadbar > box > centerbox { padding: 0 14px; }
|
||||
window.breadbar button { min-height: 0; min-width: 0; }
|
||||
|
||||
/* The three detached pills (axis 3, segmented) — see
|
||||
* breadbar::theme::load_css's `.bar-segment` rule for the identical
|
||||
* production version of this block.
|
||||
*/
|
||||
.bar-segment {
|
||||
background-color: alpha(@on-bg, {bg_alpha});
|
||||
border: 1px solid alpha(@bg, 0.10);
|
||||
border-radius: {radius_bar}px;
|
||||
box-shadow: 0 2px 10px alpha(@bg, 0.13);
|
||||
}
|
||||
|
||||
.workspace-trail {
|
||||
background-image: linear-gradient(90deg, @{accent_from}, @{accent_to});
|
||||
background-color: @{accent_from};
|
||||
border-radius: {radius_sm}px;
|
||||
}
|
||||
.workspace-btn {
|
||||
background: transparent;
|
||||
opacity: 0.36;
|
||||
color: @bg;
|
||||
border-radius: {radius_sm}px;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
min-width: 28px;
|
||||
min-height: {chip_height}px;
|
||||
margin: 0;
|
||||
padding: 0 7px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
transition: opacity 0.22s {spring_settle}, background-color 0.22s {spring_settle};
|
||||
}
|
||||
.workspace-btn:hover { opacity: 0.85; background: alpha(@bg, 0.08); }
|
||||
.workspace-btn.occupied { opacity: 0.78; }
|
||||
.workspace-btn.active { background: transparent; color: @on-accent; opacity: 1; }
|
||||
.workspace-btn.active:hover { background: transparent; }
|
||||
|
||||
.clock-plain { padding: 0 4px; }
|
||||
.clock-plain-time {
|
||||
font-size: {font_size_base}px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.date-label {
|
||||
font-size: 12px;
|
||||
opacity: 0.48;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Warm amber equaliser — the second accent (axis 1's colour-mapping note):
|
||||
* distinct from the teal workspace-trail accent above.
|
||||
*/
|
||||
.media-eq-bar {
|
||||
background-color: @{accent2};
|
||||
}
|
||||
|
||||
/* Light-theme overrides of the notification/OSD surfaces — the demo's own
|
||||
* `.notifs`/`.note`/`.osd` block, which explicitly replaces shared.css's
|
||||
* dark defaults. `@on-bg` (paper) / `@bg` (ink), not `@bg` (glass) / `@on-bg`
|
||||
* (light ink) the way every sibling theme's identical rule reads — this is
|
||||
* the one deliberate inversion this template makes relative to its
|
||||
* siblings, and it is exactly what `{light}` conditions in the shared Rust
|
||||
* implementation (breadbar::theme::load_css). See axis 1 in the task
|
||||
* report for the full inventory this one inversion stands in for.
|
||||
*/
|
||||
window.breadbar-osd {
|
||||
background-color: alpha(@on-bg, {bg_alpha});
|
||||
color: @bg;
|
||||
border-radius: {radius_pill}px;
|
||||
border: 1px solid alpha(@bg, 0.10);
|
||||
box-shadow: 0 8px 22px alpha(@bg, 0.16);
|
||||
}
|
||||
|
||||
window.breadbar-panel {
|
||||
background-color: alpha(@on-bg, {bg_alpha});
|
||||
color: @bg;
|
||||
border-radius: {radius_card}px;
|
||||
border: 1px solid alpha(@bg, 0.10);
|
||||
}
|
||||
|
||||
window.breadbar-dismiss {
|
||||
background-color: alpha(#000000, 0.02);
|
||||
}
|
||||
|
||||
.bread-widget-slot { margin-right: {pad}px; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue