You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@maka.apache.org by "Astro-Han (via GitHub)" <gi...@apache.org> on 2026/09/01 21:07:24 UTC
[PR] refactor(design-system): collapse the ink ladder to Astryx's two tiers [maka]
Astro-Han opened a new pull request, #4509:
URL: https://github.com/apache/maka/pull/4509
## Summary
Closes #3446. Refs #4472 (the composer fade mask, F3/F7, stays in its own PR).
The last open item on #3446 was F2: the secondary grey. Maka ran three prose tiers (`--foreground`, `--foreground-secondary` at 74%/78%, `--muted-foreground` at 54%) while Astryx runs two, and the theme wired none of Astryx's text/icon tokens to the product — so `<Text color="secondary">` painted a fixed `#525252` next to product `--muted-foreground` at `rgb(115,113,115)`, 33/255 apart and vertically adjacent on the reference screen. The five-selector bridge in `astryx-mount.css` reached 5 of the 62 call sites.
Both historical reasons for three tiers predate Astryx being the only design system, and neither argued for the third rung. Measured across the eleven palettes, the 54% rung failed AA in light mode on nine of them (onedark 3.4, catppuccin 3.6, nord 3.7 …); it only sat that low to stay a visible step under the tier above it.
### What changes
- **Two prose tiers.** `--muted-foreground` becomes `color-mix(in oklch, var(--foreground) 68%, var(--background))`, one mix for both modes. 68% is chosen so the default palette lands on Astryx's own `--color-text-secondary`: `#525153` / `#a2a2a4` measured, 7.9:1 / 7.0:1, against upstream's `#525252` / `#a3a3a3` at 7.8 / 7.1. Every palette clears AA in both modes; worst is onedark light at 5.0:1. `--foreground-secondary` is deleted outright, no alias — 97 call sites move to `--muted-foreground`, three that used the ink tier to carry state move up to `--foreground` (memory inject active, plan steps, diff context lines).
- **Astryx inks wired at the theme root.** `makaTheme.ts` tokens now emit `--color-text-primary` / `--color-icon-primary` → `--foreground` and `--color-text-secondary` / `--color-icon-secondary` → `--muted-foreground` (plus `--color-border-emphasized` and `--color-overlay-hover`, which the bridge had carried). The five-selector bridge is deleted, and with it the second `--color-accent-muted` authority at 0.12 flagged in #4465 review. The wrapper `font: inherit; color: inherit` pin is deleted after measuring 2 622 elements across four stories identical with and without it. `--color-text-disabled` is deliberately left on Astryx's literal — DESIGN.md §3's F6 exemption.
- **Contract test rebuilt.** `ink-ladder-contract.test.ts` (deleted in #2574 while DESIGN.md kept claiming it) now asserts the retired names have no definition or `var()` reference in product CSS, and that ink derives in one colourspace.
- **DESIGN.md §3** rewritten as the Two-Tier Reading Rule; §1 Authority, §6 and §8 updated to match.
The items #4465 deferred, each its own commit:
- **Info banners follow the palette.** `.astryx-banner.info` pins tint and ink on the element, which no ancestor bridge can outrank; it is now listed on the unlayered accent bridge in `maka-tokens.css` — same block, so the 0.24 construction is spelled once — with `--accent-solid` as its ink, the same-hue-over-tint shape the other three status banners have.
- **`--accent-solid` light L 0.52 → 0.48.** 0.52 was chosen against white; only two palettes have a white `--background`. Measured per palette, tokyo-night was 4.39:1. 0.48 puts all eleven at ≥ 5.15:1 (default 6.51). Every link shares this token.
- **StatTile loses `tone` / `emphasis` / `zeroNeutral` / `as`.** The one product call site passes label/value/detail; the rest was exercised only by a story. The tinted outline borders go with it, and so do the four other 0.24-alpha tinted borders (tool-output, sandbox copy, error copy): at 1.2:1 in light they stated nothing the reader could see. The `attention` prop that only fed those classes is removed.
- **`--radius-page` emitted as `28px`** instead of `1.75rem`, so the ladder is not half px and half rem.
- **`FailureCard`'s `tone` indirection collapsed** to Banner's `status`.
### Not in this PR
- F3/F7 composer fade mask — #4472.
### Verification
- `npm run lint`, `format:check`, `typecheck`, `astryx:theme -- --check`, `astryx:surface-inventory` — clean.
- `build-storybook` + `smoke:storybook` — 251 stories × 2 schemes rendered.
- `@maka/desktop` and `@maka/ui` tests — green, including the new contract test.
- Computed-style sweep over the reference screen (`product-shell-official-appshell--native-conversation`, 1180×788, both schemes) and `product-tool-activity--dense-mixed-results`, foreground and background both sampled through canvas:
_(measurement table being attached)_
### Before / after
Light stacked over dark, main on the left, this branch on the right.
_(screenshots being attached)_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org
Re: [PR] refactor(design-system): collapse the ink ladder to Astryx's two tiers [maka]
Posted by "jackwener (via GitHub)" <gi...@apache.org>.
jackwener commented on code in PR #4509:
URL: https://github.com/apache/maka/pull/4509#discussion_r3912043847
##########
apps/desktop/src/main/__tests__/ink-ladder-contract.test.ts:
##########
@@ -0,0 +1,107 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import assert from 'node:assert/strict';
+import { readdir, readFile } from 'node:fs/promises';
+import { dirname, join, relative, resolve } from 'node:path';
+import { describe, it } from 'node:test';
+import { fileURLToPath } from 'node:url';
+
+/**
+ * Prose has exactly two tiers, and the two retired ink names stay gone —
+ * DESIGN.md §3, The Two-Tier Reading Rule.
+ *
+ * The name can come back in any of four shapes: a CSS declaration, a `var()`
+ * reference, a TS theme-token key (makaTheme.ts), or an inline style in a
+ * story. So the check is a bare-substring search over source text with
+ * comments removed, not a CSS-declaration pattern — a comment may still name a
+ * retired token to explain why it is retired.
+ */
+const testDir = dirname(fileURLToPath(import.meta.url));
+// From either src/main/__tests__ or dist/main/__tests__ this lands on
+// apps/desktop; the tests run from dist, so it must hold for both.
+const DESKTOP_ROOT = resolve(testDir, '../../..');
+const REPO_ROOT = resolve(DESKTOP_ROOT, '../..');
+
+const TOKENS_PATH = join(DESKTOP_ROOT, 'src', 'renderer', 'maka-tokens.css');
+const SOURCE_ROOTS = [
+ join(DESKTOP_ROOT, 'src', 'renderer'),
+ join(DESKTOP_ROOT, 'stories'),
+ join(REPO_ROOT, 'packages', 'ui', 'src'),
+ join(REPO_ROOT, 'packages', 'ui', 'stories'),
+];
Review Comment:
P2: `SOURCE_ROOTS` is renderer, stories, and `@maka/ui`. It never reads `apps/desktop/src/main`.
`browser-message-box.ts` still has `color: var(--foreground-secondary)` on `.message` (line 530) and `.detail` (line 541). Overlay tokens are sliced from `maka-tokens.css` at build time, so after rebuild that custom property does not exist. Those two blocks inherit body `--foreground` — readable, class ① on recovery dialogs, but not the two-tier ladder this test claims is gone from product TS.
Include `src/main` (or move those two rules to `--muted-foreground`).
<details><summary>简体中文</summary>
P2：合同没扫 `src/main`。恢复对话框 `.message` / `.detail` 仍写 `--foreground-secondary`。重建 overlay 后 token 不存在，字会继承 `--foreground`，能读，但不是两档梯子。把 `src/main` 扫进去，或改成 `--muted-foreground`。
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org
Re: [PR] refactor(design-system): collapse the ink ladder to Astryx's two tiers [maka]
Posted by "Astro-Han (via GitHub)" <gi...@apache.org>.
Astro-Han merged PR #4509:
URL: https://github.com/apache/maka/pull/4509
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org