feat(mla): A1 Tokens & UI-Design für die GTK-Shell (#91) by Toqsick · Pull Request #112 · Toqsick/master-linux-assistant

Toqsick · 2026-10-01T15:35:20Z

Basis-SHA: 506eb88 (main) · Branch: feature/mla-91-tokens · 7 Commits · 8 Dateien, +796/−21

Was drin ist (#91 — A1 Tokens & UI-Design, GTK)

docs/mla-next/TOKENS.md — Token-Spec: 26 Farb-Tokens hell/dunkel (1:1 von HermesTokens/hermes_tokens.dart übernommen, Hex-Werte unverändert), Struktur-Tokens (space1–5, radius, border, opacity, Layout-Größen), Typo-Mapping Adw↔Flutter, Status-Tone-Mapping inkl. stale-Regel, Kontrast-Ziele + Paarliste, Screenshot-Regeln.
prototype/gtk/tokens.css + tokens-dark.css — Token-CSS (Kebab-Case-Identifier), Tone-/Status-/Spacing-Klassen, :focus-visible-Outline. Dark über zweiten Gtk.CssProvider (Priorität APPLICATION + 1), umgeschaltet am Adw.StyleManager-Signal notify::dark — der Plan-Fallback, weil GTK 4.14.5 @media in provider-geladenem CSS nicht unterstützt.
prototype/gtk/mla_app.py — Shell auf das Token-System umgestellt (Hex-Hardcode #b8860b entfernt, set_margin_*/spacing auf CSS-Klassen), MLA_FORCE_COLOR_SCHEME=light|dark-Test-Affordance, window-Regel für @bg (libadwaita zeigte sonst eigenes window_bg).
prototype/gtk/tests/test_tokens.py — Token-Gate: CSS↔TOKENS.md-Konsistenz, WCAG-AA-4,5:1 über 16 Paare je Schema, Regex-Gate gegen Hex-Farben in mla_app.py; mit RED-Äquivalent-Nachweisen.
.github/workflows/build.yml — CI-Schritt für das Token-Gate.
docs/mla-next/VERIFY.md — Handoff [Next 0.0.1] A1 Tokens & UI-Design #91 (Basis-SHA, Mechanismus-Befunde, Pixel-Belege, Gates, Reviewer-Verdicts, Rückfallplan); docs/superpowers/plans/2026-09-30-mla-91-tokens.md — SDD-Plan.

Gates — tatsächlich ausgeführt (2026-10-01 auf `2e30eca`, frisch)

Gate	Ausgabe
`bash tool/check-versions.sh`	`version 0.8.0 is consistent` / Exit 0
`dart format --output=none --set-exit-if-changed lib test`	`Formatted 123 files (0 changed)` / Exit 0
`flutter analyze`	`No issues found! (ran in 2.7s)` / Exit 0
`flutter test`	`+208: All tests passed!` / Exit 0
`(cd additional/python && python3 -m unittest discover -s tests -t .)`	`Ran 53 tests` / `OK`
`python3 -m py_compile prototype/gtk/mla_app.py`	Exit 0
`python3 -m unittest discover -s prototype/gtk/tests`	`Ran 10 tests` / `OK`
`(cd packages/la_core && dart analyze && dart format --set-exit-if-changed . && dart test)`	`No issues found!` · `Formatted 24 files (0 changed)` · `+61: All tests passed!`

Zusätzlich aus dem Handoff-Lauf (2026-09-30, auf eb81fbf): Start-Gates Wayland und X11 hell/dunkel je Exit 124 (≥ 6 s am Leben, stderr 0 Bytes) und X11-Screenshots hell/dunkel als Pixel-Belege (/tmp-Artefakte, nicht committet).

Review

Final-Whole-Branch-Review (2026-09-30, 506eb88..5e308ad): A (Korrektheit) APPROVED — Werte-Parität 26/26 je Schema selbst nachgerechnet, Tone-Formel 24/24, Mutations-Test real (#FEFCF7→#FEFCF6 ⇒ 8 Failures), WCAG-Mathematik als identisch mit der Dart-Implementierung verifiziert. B (Sicherheit/Spec) READY_FOR_PR — Scope exakt die 8 Dateien, polkit-Trinität unberührt, keine Secrets/PNGs, stale≠ok in Doc+CSS+Test. Gesamt: READY_FOR_PR.

Nicht in diesem PR / manuell offen (Basti)

Vollständiger Fokus-/Tastaturdurchgang (der Fokusring liegt rechnerisch unter 3:1 — als dokumentierte Schwäche mit Hermes-Parität in TOKENS.md §5 und vom Gate unter 3:1 gepinnt), visuelle Hell/Dunkel-Prüfung am lebenden System, Skalierung 100/125/150 %, Wayland-Screenshot. GitHub-Issue #91 bleibt dafür offen.

Rückfallplan

git revert der #91-Commits (f8a080e…2e30eca) genügt: neue Dateien (TOKENS.md, tokens.css, tokens-dark.css, test_tokens.py, Plan-Datei) plus kleine Änderungen (mla_app.py, build.yml, VERIFY.md). Kein Datenpfad, keine Unit, kein Packaging, polkit-Trinität unberührt.

Kein Merge ohne gesonderte Freigabe.

🤖 Generated with Claude Code

Plan für Issue #91 (A1): semantische Tokens für die GTK-Shell, HermesTokens-portiert (26 Farben hell/dunkel), Status-Tones mit stale!=ok-Regel, WCAG-AA-Kontrastgates, CI-Schritt. Basis 506eb88.

docs/mla-next/TOKENS.md: HermesTokens 1:1 portiert (hell/dunkel), Kontrast- Ziel AA 4,5:1 (16er-Paarliste je Schema), Status-Tone-Mapping mit stale!=ok-Regel (gestrichelte Border), Fokus- und Screenshot-Regeln, Adw-Typo-Mapping. Werte-Quelle: lib/layouts/hermes_tokens.dart:98-162.

tokens.css (Light + Klassen) + tokens-dark.css (Dark-Overrides): GTK 4.14.5 unterstuetzt kein @media in provider-geladenem CSS (Parser-Befund belegt) — Dark daher per zweiten Provider mit hoeherer Prioritaet, umgeschaltet am Adw.StyleManager-Signal notify::dark. Letzter hardcodierter Farbwert (#b8860b, mla_app.py:84) entfernt; Abstand/Padding in CSS-Klassen; Status- Chip tone-unknown als Demonstration; MLA_FORCE_COLOR_SCHEME-Test-Affordance. Gates: py_compile OK; 4 Startlaeufe (Wayland/X11 x light/dark) je >= 6 s am Leben, stderr leer. Werte-Quelle: docs/mla-next/TOKENS.md (= HermesTokens).

prototype/gtk/tests/test_tokens.py: CSS<->TOKENS.md-Konsistenz (26 Farben, je Schema via subTest), Tone-Formel-Nachrechnung (fg solid, bg 10%, border 28%), WCAG-AA 4,5:1 ueber 16 Text-Paare je Schema, Schaerfe-Nachweise (MUST_FLAG/MUST_NOT_FLAG-Muster), Hardcode-Gate gegen mla_app.py. focusRing wird unter 3:1 gepinnt statt behauptet (dokumentierte Schwaeche mit Hermes-Paritaet, TOKENS.md 5). CI: neuer Schritt 'GTK token gate'.

@bg

@bg war laut TOKENS.md 1 als Fensterhintergrund spezifiziert, aber nie angewandt — libadwaita zeigte das eigene window_bg. Pixel-Beweis nach Fix (X11-Screenshots /tmp/mla91-x11-{light,dark}.png): Inhalt hell (254,252,247) = #FEFCF7, dunkel (13,13,26) = #0D0D1A, Sidebar (250,247,240)/(20,20,37) = @Sidebar je Schema — exakt.

VERIFY.md 'Handoff #91': Pixel-belegte Dark-Umschaltung, 5 Mechanismus- Befunde (@media unutztichtet->Provider-Tausch, GDK_BACKEND-x11-Pflicht, GApplication-Prim\u00e4rinstanz-Falle, bg-Anwendungsl\u00fccke, focusRing<3:1 ehrlich gepinnt), Gates-Tabelle, manuelle Reste fuer Basti benannt, R\u00fcckfallplan. Reviewer-Verdicts folgen mit Task 5.

Final-Whole-Branch-Review (506eb88..5e308ad, 6 Commits): A APPROVED (Werte-Paritaet 26/26 gegen hermes_tokens.dart nachgerechnet, Mutations- Nachweis 1/255=>8 Failures, WCAG-Mathematik ueber alle 256 Kanalwerte), B READY_FOR_PR (Scope 8 Dateien, Trinitaet leer, stale!=ok durchgaengig, Abnahme-Mapping ehrlich) => gesamt READY_FOR_PR. Fixes: focusRing-Dark- Rundung 2,6->2,5, Test-Kommentar 1.06->1.03, TOKENS 8-Formulierung, Plan- Erratum (3:1-Praemisse, @media-Fallback, GDK_BACKEND-x11, bg-Luecke). Follow-ups dokumentiert (Dart-Quellen-Paritaet im Gate, title-Schattierung, spineWidth/opacity-Anwendung fuer #92).

Copilot

Copilot review overview

🟡 Changes recommended

Navigation selectors never match, and several focus/status color combinations fail the stated accessibility targets.

Review effort: Balanced
Findings: 3 · 2

Open (5)

Focus indicator contrast assertion accepts a WCAG failure · New
Status OK colors fail the 4.5:1 contrast requirement · New
Navigation selectors target an unassigned row class · New
Reference issue #91 instead of unrelated issue #71 · New
Correct the NICH typo to NICHT · New

What changed in this PR

Introduces semantic light/dark design tokens for the experimental GTK shell, aligned with Flutter’s Hermes palette.

Changes:

Adds GTK color, spacing, typography, status, and focus tokens.
Applies tokens to the GTK prototype with runtime theme switching.
Adds consistency, contrast, and hardcoded-color CI checks plus documentation.

File	Description
`prototype/gtk/tokens.css`	Defines light tokens and component styles.
`prototype/gtk/tokens-dark.css`	Defines dark token overrides.
`prototype/gtk/tests/test_tokens.py`	Adds token and contrast gates.
`prototype/gtk/mla_app.py`	Applies tokens and theme switching.
`.github/workflows/build.yml`	Runs the GTK token gate.
`docs/mla-next/TOKENS.md`	Documents the token specification.
`docs/mla-next/VERIFY.md`	Records verification and handoff evidence.
`docs/superpowers/plans/2026-09-30-mla-91-tokens.md`	Documents the implementation plan.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+    def test_focusring_documented_below_3_to_1(self):
+        # Pinnt die dokumentierte Schwäche fest (TOKENS.md §5): Gold 35 % auf
+        # bg liegt in beiden Schemata UNTER 3:1 — die Doku behauptet nichts
+        # anderes. Wenn dieser Test anschlägt, wurden die Ring-Werte geändert
+        # und TOKENS.md §5 muss neu bewertet werden.
+        for scheme, defines in schemes().items():
+            ring = parse_color(defines['focus-ring'])
+            bg = parse_color(defines['bg'])[:3]
+            ratio = contrast_ratio(ring[:3], bg, ring[3])
+            with self.subTest(scheme=scheme):
+                self.assertLess(ratio, 3.0)


+@define-color tone-ok-fg #2E7D32;
+@define-color tone-ok-bg #E9EFE3;
+@define-color tone-ok-border #C4D8C0;


+.mla-nav-row:hover {
+  background-color: @hover-bg;
+}
+
+.mla-nav-row:selected {
+  background-color: @accent-bg;
+  color: @accent-text;
+}


+
+**Failing-Test/Fixture.** Token-Gate `prototype/gtk/tests/test_tokens.py` als neuer Gate-Typ (kein klassisches RED/GREEN am Produktionscode — Doku+CSS+Test entstehen gemeinsam): Schärfe-Nachweise als RED-Äquivalent eingebaut, Muster wie der Leak-Check (`test_checker_rejects_known_bad_pair`: Weiß auf Cream muss abgewiesen werden; `test_gate_regex_flags_known_bad_snippet`: das Regex-Gate muss den vormals realen Verstoß `#B8860B` finden). Tone-Werte und Kontrastpaare werden aus `tokens.css`/`tokens-dark.css` geparst und gegen TOKENS.md/Formel nachgerechnet.
+
+**Basis-Entscheidungen.** Token-Namen 1:1 von `HermesTokens` übernommen (Werte `hermes_tokens.dart:98-162`; Naming-Frage aus ISSUES.md #71 dem User gestellt, unbeantwortet geblieben → Empfehlung getroffen, im Plan als revidierbar markiert). Kontrast-Ziel AA 4,5:1 für 16 Text-Paare je Schema. Status-Tones ohne neue Farben (fg solid / bg 10 % / border 28 % auf bg vorgeblendet), `stale` strukturell von `ok` getrennt (gestrichelte Border, farbenblindsicher).


+2. Kontrast: 16 Text-Paare je Schema >= WCAG AA 4,5:1. Schärfe-Nachweis
+   (RED-Äquivalent, Muster wie test_fixture_leak_check.py): der Prüfer muss
+   eine bekannte schlechte Paarung abweisen und Schwarz/Weiß mit 21:1
+   bestehen. focusRing wird NICH als 3:1 behauptet, sondern unter 3:1


Toqsick added 7 commits September 30, 2026 13:39

docs(mla): SDD-Plan #91 Tokens & UI-Design (GTK)

f8a080e

Plan für Issue #91 (A1): semantische Tokens für die GTK-Shell, HermesTokens-portiert (26 Farben hell/dunkel), Status-Tones mit stale!=ok-Regel, WCAG-AA-Kontrastgates, CI-Schritt. Basis 506eb88.

Copilot AI balanced review requested due to automatic review settings October 1, 2026 15:35

Copilot started reviewing on behalf of Toqsick October 1, 2026 15:35 View session

Copilot AI reviewed Oct 1, 2026

View reviewed changes

Toqsick merged commit 9fcdb12 into main Oct 1, 2026
2 checks passed

Toqsick mentioned this pull request Oct 1, 2026

[Next 0.0.1] A1 Tokens & UI-Design #91

Open

9 tasks

Navigation Menu

Repository navigation

feat(mla): A1 Tokens & UI-Design für die GTK-Shell (#91) - #112

feat(mla): A1 Tokens & UI-Design für die GTK-Shell (#91)#112
Toqsick merged 7 commits into
mainfrom
feature/mla-91-tokens

Toqsick commented Oct 1, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		Failing-Test/Fixture. Token-Gate `prototype/gtk/tests/test_tokens.py` als neuer Gate-Typ (kein klassisches RED/GREEN am Produktionscode — Doku+CSS+Test entstehen gemeinsam): Schärfe-Nachweise als RED-Äquivalent eingebaut, Muster wie der Leak-Check (`test_checker_rejects_known_bad_pair`: Weiß auf Cream muss abgewiesen werden; `test_gate_regex_flags_known_bad_snippet`: das Regex-Gate muss den vormals realen Verstoß `#B8860B` finden). Tone-Werte und Kontrastpaare werden aus `tokens.css`/`tokens-dark.css` geparst und gegen TOKENS.md/Formel nachgerechnet.

		Basis-Entscheidungen. Token-Namen 1:1 von `HermesTokens` übernommen (Werte `hermes_tokens.dart:98-162`; Naming-Frage aus ISSUES.md #71 dem User gestellt, unbeantwortet geblieben → Empfehlung getroffen, im Plan als revidierbar markiert). Kontrast-Ziel AA 4,5:1 für 16 Text-Paare je Schema. Status-Tones ohne neue Farben (fg solid / bg 10 % / border 28 % auf bg vorgeblendet), `stale` strukturell von `ok` getrennt (gestrichelte Border, farbenblindsicher).

Conversation

Toqsick commented Oct 1, 2026

Was drin ist (#91 — A1 Tokens & UI-Design, GTK)

Gates — tatsächlich ausgeführt (2026-10-01 auf 2e30eca, frisch)

Review

Nicht in diesem PR / manuell offen (Basti)

Rückfallplan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Gates — tatsächlich ausgeführt (2026-10-01 auf `2e30eca`, frisch)