From 924c90a9e0c9f7cca76def0196314fa30c3bab4f Mon Sep 17 00:00:00 2001 From: justinzeus Date: Thu, 5 Nov 2026 19:53:32 +0100 Subject: [PATCH] Align readiness glyphs to inline text baselines --- docker/README.md | 3 +++ wolfskin-design/shell-tokens.json | 1 - .../java/org/justinvisser/wolfskin/design/ComingInSheet.kt | 6 +++--- .../java/org/justinvisser/wolfskin/design/WolfskinTokens.kt | 1 - wolfskin-design/tokens.css | 1 - wolfskin-design/tokens.sha256 | 6 +++--- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docker/README.md b/docker/README.md index a871b354..d3bea5d2 100644 --- a/docker/README.md +++ b/docker/README.md @@ -162,6 +162,9 @@ wrapping, ellipsis and text-block positions are not a wrapping-parity target. For example, the 44-pixel “Coming in” ink is 239 pixels wide in the reference and 194 pixels in native captures. No per-title compensation or font bundle is used. Native comparisons must report those structural differences explicitly. +Readiness glyphs sit inline on the text baseline with no flex gap, matching the +frozen block-span cascade. Items wrap intrinsically: Roboto fits the expanded +readiness into two lines where the reference uses three; no grouping is forced. The six rating marks retain the exact locked SVG source in `wolfskin-design/request-marks/`; native-size PNGs and their hashes are generated diff --git a/wolfskin-design/shell-tokens.json b/wolfskin-design/shell-tokens.json index 50a8c5ec..8bd41896 100644 --- a/wolfskin-design/shell-tokens.json +++ b/wolfskin-design/shell-tokens.json @@ -20,7 +20,6 @@ "stageMargin": { "$type": "dimension", "px": 4, "dp": 2, "source": "index.html:252" }, "stageGlyph": { "$type": "dimension", "px": 28, "dp": 14, "source": "index.html:221" }, "stageGap": { "$type": "dimension", "px": 10, "dp": 5, "source": "index.html:220" }, - "readinessItemGap": { "$type": "dimension", "px": 8, "dp": 4, "source": "index.html:313" }, "readinessGapX": { "$type": "dimension", "px": 22, "dp": 11, "source": "index.html:312" }, "readinessGapY": { "$type": "dimension", "px": 10, "dp": 5, "source": "index.html:312" }, "readinessMargin": { "$type": "dimension", "px": 8, "dp": 4, "source": "index.html:312" }, diff --git a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/ComingInSheet.kt b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/ComingInSheet.kt index 4bb90514..bb2a9062 100644 --- a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/ComingInSheet.kt +++ b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/ComingInSheet.kt @@ -155,10 +155,10 @@ fun ComingInRow(item: ComingInRequest, viewer: ShellPerson, focused: Boolean, ex if (expanded) FlowRow(Modifier.padding(top = T.readinessMargin), horizontalArrangement = Arrangement.spacedBy(T.readinessGapX), verticalArrangement = Arrangement.spacedBy(T.readinessGapY)) { item.stage.readiness.forEachIndexed { index, word -> - Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(T.readinessItemGap)) { + Row { val glyph = when (word) { "Done" -> "check"; "Failed" -> "alert"; "Not yet", "Unknown" -> null; else -> "clock" } - if (glyph != null) Glyph(glyph, secondary, Modifier.size(T.readinessGlyph)) - Text("${READINESS_NAMES[index]} · $word", style = ComingInTypography.readiness, color = secondary) + if (glyph != null) Glyph(glyph, secondary, Modifier.size(T.readinessGlyph).alignBy { it.measuredHeight }) + Text("${READINESS_NAMES[index]} · $word", Modifier.alignByBaseline(), style = ComingInTypography.readiness, color = secondary) } } } diff --git a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt index bf874972..c5a92972 100644 --- a/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt +++ b/wolfskin-design/src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt @@ -250,7 +250,6 @@ object WolfskinTokens { val stageMargin = 2.0.dp val stageGlyph = 14.0.dp val stageGap = 5.0.dp - val readinessItemGap = 4.0.dp val readinessGapX = 11.0.dp val readinessGapY = 5.0.dp val readinessMargin = 4.0.dp diff --git a/wolfskin-design/tokens.css b/wolfskin-design/tokens.css index 7aba6641..8793589a 100644 --- a/wolfskin-design/tokens.css +++ b/wolfskin-design/tokens.css @@ -147,7 +147,6 @@ --requests-stageMargin: 4.0px; --requests-stageGlyph: 28.0px; --requests-stageGap: 10.0px; - --requests-readinessItemGap: 8.0px; --requests-readinessGapX: 22.0px; --requests-readinessGapY: 10.0px; --requests-readinessMargin: 8.0px; diff --git a/wolfskin-design/tokens.sha256 b/wolfskin-design/tokens.sha256 index 9143d9ac..675ef31a 100644 --- a/wolfskin-design/tokens.sha256 +++ b/wolfskin-design/tokens.sha256 @@ -1,5 +1,5 @@ 1438f7ca4a2b6f951c9e643ab0afacbf2f7fc98e57905295d518c6225e054de4 generate_tokens.py -61568cdb87c1b64984033e6d66b06c4aee1870580fb5640ed4a1a97100451c0a shell-tokens.json -cddf8798e731206e1adf1e66384ffcb1b679b27e2ee9f33fd128a04850fd829f src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt -60ac4a0fff7d7965a9c4fa25d71a10cb304c3e636031ccf036a33459571e04fe tokens.css +f61da327af6f6a7fb40c65e2d187957506b72a5b03a760f0f7fba5eca6067818 shell-tokens.json +61ee54eff31304bc352fdf4a295825156566c8e97cba9e5441e9c98d644c9986 src/main/java/org/justinvisser/wolfskin/design/WolfskinTokens.kt +9e4b8a9a21c5275b140c5c4a512f240c901006793b434ac532975be0e5a004ee tokens.css 5b939f1f3eb90b428008fda75720f6e3a4e844c486668931db3d52bffb987b53 tokens.json