Text clipping in breadbar on custom themes

Breadway commented

2026-09-05 02:58:50 +08:00

Owner

No description provided.

Breadway commented

2026-09-05 03:03:49 +08:00

Author

Owner

Text clips/is off-center, outline is broken

theme.toml

name = "Strata"
id   = "strata"
css  = "extra.css"

[tokens]
# Geometry & Surface
radius_bar       = 12
radius_card      = 10
radius_sm        = 6
radius_pill      = 999
pad              = 10
bg_alpha         = 0.90
light            = false
bar_border       = "segmented"
bar_shadow       = "hard"

# Motion
spring           = "cubic-bezier(0.20, 1.25, 0.30, 1)"
spring_settle    = "cubic-bezier(0.25, 1.0, 0.5, 1)"

# Palette Slots (no hex codes)
accent_from      = "teal"
accent_to        = "pink"
accent2          = "yellow"

# Typography
font_family      = "Space Grotesk, JetBrains Mono, sans-serif"
font_fallback    = "sans-serif"
font_size_base   = 13
font_weight      = 500

# Components
chip_height      = 30
icon_px          = 18
chip_gap         = 3
sep_style        = "dot"
media_eq_style   = "bars"
osd_style        = "bar"

# Custom token passed through to extra.css
pill_border_width = 1

[bar.window]
anchors   = ["bottom", "left", "right"]
width     = "fill"
height    = 44
margin    = { bottom = 12, left = 20, right = 20 }
exclusive = "auto"
keyboard  = "none"
layer     = "top"

[bar.slots]
left   = ["workspaces", "widget:uptime"]
centre = ["clock", "media"]
right  = ["cpu", "ram", "wifi", "battery", "control"]

[modules.workspaces]
style      = "dots"
show_empty = true
# Dynamic dot width (px) representing 0, 1, 2, and 3+ open windows:
dot_widths = [6, 12, 18, 26]

[modules.clock]
style = "flip"

[launcher]
mode = "overlay"

# Auxiliary Surfaces (Anchored to bottom corners to match the bar)
[surfaces."breadbar-notif"]
anchor = "bottom_right"
offset = [20, 68]
width  = 340
layer  = "overlay"

[surfaces."breadbar-panel"]
anchor = "bottom_right"
offset = [20, 68]
layer  = "overlay"

[surfaces."breadbar-osd"]
anchor = "bottom_centre"
offset = 76
layer  = "overlay"

[compositor."breadbar"]
blur         = true
ignore_alpha = 0.2
blur_popups  = true
animation    = "slide bottom"

[compositor."breadbar-panel"]
blur         = true
animation    = "slide bottom"

[compositor."breadbar-notif"]
blur         = true
animation    = "slide right"

[panel]
min_width = 280
# Re-ordered: audio & display controls upfront, system utilities lower
sections  = ["volume", "brightness", "output", "system", "power", "tray"]

[osd]
enabled    = ["volume", "brightness"]
dismiss_ms = 1800

# Inline live bar widget showing machine uptime
[[bar.widget]]
id    = "uptime"
slot  = "uptime"
order = 0
bind  = { cmd = "uptime -p | sed 's/up //'", every = "60s" }
node  = { kind = "box", spacing = 6, class = "bread-chip strata-uptime", children = [
  { kind = "icon",  name = "sleep", size = 12 },
  { kind = "label", text = "{value}", color = "dim", weight = "normal", size = "xs" }
] }

extra.css

/* Custom industrial styling overlay */

/* Crisp segmented boundaries using custom token substitution */
.breadbar-segment {
    border: {pill_border_width}px solid @overlay;
    background-color: @surface;
}

/* Accent highlight under the active clock flip card */
.flip-clock-card {
    border-bottom: 2px solid @teal;
}

/* Workspace dot active glowing state */
.bread-ws-dot.active {
    box-shadow: 0 0 8px @teal;
}

/* Subtle border on control panel flyout */
.control-panel-inner {
    border: 1px solid @overlay;
    border-bottom: 2px solid @pink;
}

/* Custom uptime widget badge */
.strata-uptime {
    padding: 0 6px;
    opacity: 0.85;
}

Text clips/is off-center, outline is broken ![image](/attachments/cc98c03f-1da2-46ec-99e6-aca56ead25e3) ![image](/attachments/f349d7e1-e634-4d67-bd7e-36eaf466d1b1) **theme.toml** ```toml name = "Strata" id = "strata" css = "extra.css" [tokens] # Geometry & Surface radius_bar = 12 radius_card = 10 radius_sm = 6 radius_pill = 999 pad = 10 bg_alpha = 0.90 light = false bar_border = "segmented" bar_shadow = "hard" # Motion spring = "cubic-bezier(0.20, 1.25, 0.30, 1)" spring_settle = "cubic-bezier(0.25, 1.0, 0.5, 1)" # Palette Slots (no hex codes) accent_from = "teal" accent_to = "pink" accent2 = "yellow" # Typography font_family = "Space Grotesk, JetBrains Mono, sans-serif" font_fallback = "sans-serif" font_size_base = 13 font_weight = 500 # Components chip_height = 30 icon_px = 18 chip_gap = 3 sep_style = "dot" media_eq_style = "bars" osd_style = "bar" # Custom token passed through to extra.css pill_border_width = 1 [bar.window] anchors = ["bottom", "left", "right"] width = "fill" height = 44 margin = { bottom = 12, left = 20, right = 20 } exclusive = "auto" keyboard = "none" layer = "top" [bar.slots] left = ["workspaces", "widget:uptime"] centre = ["clock", "media"] right = ["cpu", "ram", "wifi", "battery", "control"] [modules.workspaces] style = "dots" show_empty = true # Dynamic dot width (px) representing 0, 1, 2, and 3+ open windows: dot_widths = [6, 12, 18, 26] [modules.clock] style = "flip" [launcher] mode = "overlay" # Auxiliary Surfaces (Anchored to bottom corners to match the bar) [surfaces."breadbar-notif"] anchor = "bottom_right" offset = [20, 68] width = 340 layer = "overlay" [surfaces."breadbar-panel"] anchor = "bottom_right" offset = [20, 68] layer = "overlay" [surfaces."breadbar-osd"] anchor = "bottom_centre" offset = 76 layer = "overlay" [compositor."breadbar"] blur = true ignore_alpha = 0.2 blur_popups = true animation = "slide bottom" [compositor."breadbar-panel"] blur = true animation = "slide bottom" [compositor."breadbar-notif"] blur = true animation = "slide right" [panel] min_width = 280 # Re-ordered: audio & display controls upfront, system utilities lower sections = ["volume", "brightness", "output", "system", "power", "tray"] [osd] enabled = ["volume", "brightness"] dismiss_ms = 1800 # Inline live bar widget showing machine uptime [[bar.widget]] id = "uptime" slot = "uptime" order = 0 bind = { cmd = "uptime -p | sed 's/up //'", every = "60s" } node = { kind = "box", spacing = 6, class = "bread-chip strata-uptime", children = [ { kind = "icon", name = "sleep", size = 12 }, { kind = "label", text = "{value}", color = "dim", weight = "normal", size = "xs" } ] } ``` **extra.css** ```css /* Custom industrial styling overlay */ /* Crisp segmented boundaries using custom token substitution */ .breadbar-segment { border: {pill_border_width}px solid @overlay; background-color: @surface; } /* Accent highlight under the active clock flip card */ .flip-clock-card { border-bottom: 2px solid @teal; } /* Workspace dot active glowing state */ .bread-ws-dot.active { box-shadow: 0 0 8px @teal; } /* Subtle border on control panel flyout */ .control-panel-inner { border: 1px solid @overlay; border-bottom: 2px solid @pink; } /* Custom uptime widget badge */ .strata-uptime { padding: 0 6px; opacity: 0.85; } ```

image.png

169 KiB

image.png

98 KiB

Breadway commented

2026-09-05 10:15:08 +08:00

Author

Owner

Root cause: [tokens] chip_height never actually reached the CSS it's supposed to control (min-height on .media-widget/.stat-pair/workspace chips) — that value came from a hardcoded per-WorkspaceStyle table instead. Strata's chip_height = 30 (meant to give its 17px custom-font media label room) was silently getting the "dots" style's 22px instead, hence the clipped descenders in both screenshots.

Fixed in:

bread-ecosystem#19 — resolve_tokens now uses an explicit chip_height as-is, falling back to the per-style number only when a theme omits it.
breadbar#19 — the workspace button's GTK size floor reads the same (now-correct) token instead of a redundant hardcoded path.

Will need bread-ecosystem tagged as v0.7.11 and breadbar's pin bumped before it's live on your build.

Root cause: `[tokens] chip_height` never actually reached the CSS it's supposed to control (`min-height` on `.media-widget`/`.stat-pair`/workspace chips) — that value came from a hardcoded per-`WorkspaceStyle` table instead. Strata's `chip_height = 30` (meant to give its 17px custom-font media label room) was silently getting the "dots" style's 22px instead, hence the clipped descenders in both screenshots. Fixed in: - bread-ecosystem#19 — `resolve_tokens` now uses an explicit `chip_height` as-is, falling back to the per-style number only when a theme omits it. - breadbar#19 — the workspace button's GTK size floor reads the same (now-correct) token instead of a redundant hardcoded path. Will need bread-ecosystem tagged as `v0.7.11` and breadbar's pin bumped before it's live on your build.

Breadway closed this issue

2026-09-05 10:30:32 +08:00

Breadway referenced this issue

2026-10-01 00:00:34 +08:00

Shared CI cache path races when multiple repos release concurrently #28

Breadway referenced this issue

2026-10-01 10:30:38 +08:00

Shared CI cache path races when multiple repos release concurrently #28

Breadway referenced this issue

2026-10-01 15:27:37 +08:00

Shared CI cache path races when multiple repos release concurrently #28

Breadway referenced this issue