chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Astro-Han wants to merge 1 commit into from
Closed

chore(desktop): drop tokens nothing reads #4017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 12 additions & 77 deletions apps/desktop/src/renderer/maka-tokens.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
(connected/ok semantics); running/focus-ring/nav-active/selection follow
--accent, while link text follows the solid tier below. */
--accent: oklch(0.70 0.135 250);
/* Checked controls (--control) use a slightly deeper blue (L0.65, one step
below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
/* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
blue h250 — palettes only override the base tokens, so literals here
kept the send button, onboarding CTA and every checked control blue
after a palette switch (same bug --brand-deep already had and fixed).
Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
min(c, …) keeps the default palette byte-identical while following
low-chroma palettes down. */
--control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
--control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
/* The SOLID accent tier: a filled accent surface that carries TEXT, and
accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
label.
L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
different families — no longer the near-identical ambers they once were. */
--warning: oklch(0.50 0.18 55);

/* Legacy brand affordance for a few emphasized surfaces. New checked
control states use --control instead.
/* Legacy brand affordance for a few emphasized surfaces.
PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
"Solarpunk deep" green, which made palette switching invisible on the
Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
--warning-wash: oklch(from var(--warning) l c h / 0.08);
--warning-wash-border: oklch(from var(--warning) l c h / 0.24);
--destructive-wash: oklch(from var(--destructive) l c h / 0.08);
--destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
--info-wash: oklch(from var(--info) l c h / 0.08);
--info-wash-border: oklch(from var(--info) l c h / 0.24);
--destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
--destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

/* === foreground solid mix scale ===
foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
with no governance benefit. */
--border-width-hairline: 1px;
--border-width-thick: 2px;
--border-width-accent: 3px;
--muted: oklch(from var(--foreground) l c h / 0.05);
/* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
(NOT the solid --foreground-N tints, which mix with --background and
would change rendering — the ring would thicken, the wash would stop
tracking the backdrop). The file-attachment card uses these for its bg
(0.06), icon-tile (0.10), and inset ring (0.12); other components at
(0.06) and inset ring (0.12); other components at
the same density can reuse the tier instead of a fresh alpha. */
--foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
--foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
--foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
/* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
`--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
it. Nothing in the app reads a `--color-*` compatibility name any more.
Do NOT add new --color-* names. */

/* === elevation (visual system 2.0, T1) =============================
Product names for the theme's shadow scale, so the right answer is
findable. The generated theme ships --shadow-low/med/high and product CSS
had used them exactly once, reaching instead for hand-rolled shadows —
a scale nobody can name is a scale nobody uses.

Three names, three jobs: `raised` for a card lifting off its plate,
`overlay` for anything in a portal, `drag` for something under the
cursor. In-flow elements do not cast shadows; that rule is unchanged,
this only gives the legitimate path a name.

Consumers move in T2-T4 — T1 does not touch product CSS. */
--elevation-raised: var(--shadow-low);
--elevation-overlay: var(--shadow-med);
--elevation-drag: var(--shadow-high);

/* === shadow recipes ===
Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

/* === z-index scale (semantic) === */
--z-base: 0;
--z-sticky: 20;
--z-titlebar: 40;
--z-panel: 50;
--z-dropdown: 100;
--z-tooltip: 150;
--z-modal: 200;
--z-overlay: 300;
/* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
so the scale governs padding/margin/gap only (not width/height/
inset/grid), per the adversarial review in #430. */
--spacing: 4px; /* base step — the single ruler */
--space-0: 0;
--space-0-5: calc(var(--spacing) * 0.5); /* 2px */
--space-1: calc(var(--spacing) * 1); /* 4px */
--space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
--space-12: calc(var(--spacing) * 12); /* 48px */
--space-16: calc(var(--spacing) * 16); /* 64px */

/* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
/* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
--icon-meta: 13px;
--icon-control: 14px;
--icon-chrome: 16px;
--icon-empty: 20px;
--icon-plate: 28px;
--icon-size: var(--icon-chrome); /* deprecated alias, one release */

/* === motion ===
Custom easing curves per emil-design-eng — the built-in CSS easings
are too weak to feel intentional. Use --ease-out-strong for
feedback/state changes and --ease-in-out-strong for on-screen movement.
feedback/state changes.

PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
(styles/chat-message.css does this for the tool detail row). Copy the
neighbour, or use this scale — never split the difference by hand. */
--ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
--ease-linear: linear;

--duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
--opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
--opacity-muted: 0.65; /* secondary text / icons / muted affordances */
--opacity-pending: 0.8; /* pending / active / in-progress states */
--opacity-overlay: 0.04; /* body::after subtle overlay (light) */

/* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
sidebar nav row, session row,
settings nav row, select, first-run
stepper item */
/* #1879: this tier used to name "first-run checklist row" as a consumer.
Nothing in the renderer reads it — that row is the stepper item above, and
measured, its floor is 29px, so it takes `lg`. A tier documenting a
consumer it does not have is the same defect as an exemption documenting a
rule it does not govern; the tier stays (Astryx defines it and a prominent
button is a real future need) but it is honest about having no reader. */
--h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
--h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

/* === content measure (#520 PR4 item 16) ================================
The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

--accent: oklch(0.74 0.15 250);
/* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
mode, so the "light, fresh button" reads consistently across themes;
--control uses the same L0.65 blue as light so the white glyph clears
WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
/* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
blue h250 — palettes only override the base tokens, so literals here
kept the send button, onboarding CTA and every checked control blue
after a palette switch (same bug --brand-deep already had and fixed).
Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
min(c, …) keeps the default palette byte-identical while following
low-chroma palettes down. */
--control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
--control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
mode, so the "light, fresh button" reads consistently across themes. */
/* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
at 7.16:1). See the light-mode note above for why --action cannot serve
this role. */
--accent-solid: oklch(from var(--accent) 0.76 c h);
--accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
--link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
--maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
--maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
--maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
--maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
--maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
--maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/renderer/styles/settings/form.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
border: var(--border-width-hairline) solid var(--border-soft);
border-radius: var(--radius-modal);
background: var(--surface-overlay);
box-shadow: var(--elevation-overlay);
box-shadow: var(--shadow-med);
opacity: 1;
}

Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

Astro-Han
wants to merge
1
commit into

from

 Closed


chore(desktop): drop tokens nothing reads
#4017
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


89 changes: 12 additions & 77 deletions
apps/desktop/src/renderer/maka-tokens.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
 (connected/ok semantics); running/focus-ring/nav-active/selection follow
 --accent, while link text follows the solid tier below. */
 --accent: oklch(0.70 0.135 250);
 /* Checked controls (--control) use a slightly deeper blue (L0.65, one step
 below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
 contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 /* The SOLID accent tier: a filled accent surface that carries TEXT, and
 accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
 accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
 label.
 L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
 palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
 so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
 different families — no longer the near-identical ambers they once were. */
 --warning: oklch(0.50 0.18 55);

 /* Legacy brand affordance for a few emphasized surfaces. New checked
 control states use --control instead.
 /* Legacy brand affordance for a few emphasized surfaces.
 PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
 "Solarpunk deep" green, which made palette switching invisible on the
 Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
 --warning-wash: oklch(from var(--warning) l c h / 0.08);
 --warning-wash-border: oklch(from var(--warning) l c h / 0.24);
 --destructive-wash: oklch(from var(--destructive) l c h / 0.08);
 --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
 --info-wash: oklch(from var(--info) l c h / 0.08);
 --info-wash-border: oklch(from var(--info) l c h / 0.24);
 --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
 --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

 /* === foreground solid mix scale ===
 foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
 with no governance benefit. */
 --border-width-hairline: 1px;
 --border-width-thick: 2px;
 --border-width-accent: 3px;
 --muted: oklch(from var(--foreground) l c h / 0.05);
 /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
 (NOT the solid --foreground-N tints, which mix with --background and
 would change rendering — the ring would thicken, the wash would stop
 tracking the backdrop). The file-attachment card uses these for its bg
 (0.06), icon-tile (0.10), and inset ring (0.12); other components at
 (0.06) and inset ring (0.12); other components at
 the same density can reuse the tier instead of a fresh alpha. */
 --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
 --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
 --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
 /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
 `--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
 it. Nothing in the app reads a `--color-*` compatibility name any more.
 Do NOT add new --color-* names. */

 /* === elevation (visual system 2.0, T1) =============================
 Product names for the theme's shadow scale, so the right answer is
 findable. The generated theme ships --shadow-low/med/high and product CSS
 had used them exactly once, reaching instead for hand-rolled shadows —
 a scale nobody can name is a scale nobody uses.

 Three names, three jobs: `raised` for a card lifting off its plate,
 `overlay` for anything in a portal, `drag` for something under the
 cursor. In-flow elements do not cast shadows; that rule is unchanged,
 this only gives the legitimate path a name.

 Consumers move in T2-T4 — T1 does not touch product CSS. */
 --elevation-raised: var(--shadow-low);
 --elevation-overlay: var(--shadow-med);
 --elevation-drag: var(--shadow-high);

 /* === shadow recipes ===
 Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
 oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

 /* === z-index scale (semantic) === */
 --z-base: 0;
 --z-sticky: 20;
 --z-titlebar: 40;
 --z-panel: 50;
 --z-dropdown: 100;
 --z-tooltip: 150;
 --z-modal: 200;
 --z-overlay: 300;
 /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
 micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
 so the scale governs padding/margin/gap only (not width/height/
 inset/grid), per the adversarial review in #430. */
 --spacing: 4px; /* base step — the single ruler */
 --space-0: 0;
 --space-0-5: calc(var(--spacing) * 0.5); /* 2px */
 --space-1: calc(var(--spacing) * 1); /* 4px */
 --space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
 --space-12: calc(var(--spacing) * 12); /* 48px */
 --space-16: calc(var(--spacing) * 16); /* 64px */

 /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
 /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
 --icon-meta: 13px;
 --icon-control: 14px;
 --icon-chrome: 16px;
 --icon-empty: 20px;
 --icon-plate: 28px;
 --icon-size: var(--icon-chrome); /* deprecated alias, one release */

 /* === motion ===
 Custom easing curves per emil-design-eng — the built-in CSS easings
 are too weak to feel intentional. Use --ease-out-strong for
 feedback/state changes and --ease-in-out-strong for on-screen movement.
 feedback/state changes.

 PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
 duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
 (styles/chat-message.css does this for the tool detail row). Copy the
 neighbour, or use this scale — never split the difference by hand. */
 --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 --ease-linear: linear;

 --duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
 PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
 --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
 --opacity-muted: 0.65; /* secondary text / icons / muted affordances */
 --opacity-pending: 0.8; /* pending / active / in-progress states */
 --opacity-overlay: 0.04; /* body::after subtle overlay (light) */

 /* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
 sidebar nav row, session row,
 settings nav row, select, first-run
 stepper item */
 /* #1879: this tier used to name "first-run checklist row" as a consumer.
 Nothing in the renderer reads it — that row is the stepper item above, and
 measured, its floor is 29px, so it takes `lg`. A tier documenting a
 consumer it does not have is the same defect as an exemption documenting a
 rule it does not govern; the tier stays (Astryx defines it and a prominent
 button is a real future need) but it is honest about having no reader. */
 --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
 --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

 /* === content measure (#520 PR4 item 16) ================================
 The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

 --accent: oklch(0.74 0.15 250);
 /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
 mode, so the "light, fresh button" reads consistently across themes;
 --control uses the same L0.65 blue as light so the white glyph clears
 WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 mode, so the "light, fresh button" reads consistently across themes. */
 /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
 ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
 L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
 at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
 at 7.16:1). See the light-mode note above for why --action cannot serve
 this role. */
 --accent-solid: oklch(from var(--accent) 0.76 c h);
 --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
 --link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
 --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
 --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
 --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
 --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
 --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
 --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
 }
Expand Down

2 changes: 1 addition & 1 deletion
apps/desktop/src/renderer/styles/settings/form.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
 border: var(--border-width-hairline) solid var(--border-soft);
 border-radius: var(--radius-modal);
 background: var(--surface-overlay);
 box-shadow: var(--elevation-overlay);
 box-shadow: var(--shadow-med);
 opacity: 1;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

Astro-Han
wants to merge
1
commit into

from

 Closed


chore(desktop): drop tokens nothing reads
#4017
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


89 changes: 12 additions & 77 deletions
apps/desktop/src/renderer/maka-tokens.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
 (connected/ok semantics); running/focus-ring/nav-active/selection follow
 --accent, while link text follows the solid tier below. */
 --accent: oklch(0.70 0.135 250);
 /* Checked controls (--control) use a slightly deeper blue (L0.65, one step
 below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
 contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 /* The SOLID accent tier: a filled accent surface that carries TEXT, and
 accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
 accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
 label.
 L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
 palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
 so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
 different families — no longer the near-identical ambers they once were. */
 --warning: oklch(0.50 0.18 55);

 /* Legacy brand affordance for a few emphasized surfaces. New checked
 control states use --control instead.
 /* Legacy brand affordance for a few emphasized surfaces.
 PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
 "Solarpunk deep" green, which made palette switching invisible on the
 Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
 --warning-wash: oklch(from var(--warning) l c h / 0.08);
 --warning-wash-border: oklch(from var(--warning) l c h / 0.24);
 --destructive-wash: oklch(from var(--destructive) l c h / 0.08);
 --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
 --info-wash: oklch(from var(--info) l c h / 0.08);
 --info-wash-border: oklch(from var(--info) l c h / 0.24);
 --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
 --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

 /* === foreground solid mix scale ===
 foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
 with no governance benefit. */
 --border-width-hairline: 1px;
 --border-width-thick: 2px;
 --border-width-accent: 3px;
 --muted: oklch(from var(--foreground) l c h / 0.05);
 /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
 (NOT the solid --foreground-N tints, which mix with --background and
 would change rendering — the ring would thicken, the wash would stop
 tracking the backdrop). The file-attachment card uses these for its bg
 (0.06), icon-tile (0.10), and inset ring (0.12); other components at
 (0.06) and inset ring (0.12); other components at
 the same density can reuse the tier instead of a fresh alpha. */
 --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
 --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
 --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
 /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
 `--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
 it. Nothing in the app reads a `--color-*` compatibility name any more.
 Do NOT add new --color-* names. */

 /* === elevation (visual system 2.0, T1) =============================
 Product names for the theme's shadow scale, so the right answer is
 findable. The generated theme ships --shadow-low/med/high and product CSS
 had used them exactly once, reaching instead for hand-rolled shadows —
 a scale nobody can name is a scale nobody uses.

 Three names, three jobs: `raised` for a card lifting off its plate,
 `overlay` for anything in a portal, `drag` for something under the
 cursor. In-flow elements do not cast shadows; that rule is unchanged,
 this only gives the legitimate path a name.

 Consumers move in T2-T4 — T1 does not touch product CSS. */
 --elevation-raised: var(--shadow-low);
 --elevation-overlay: var(--shadow-med);
 --elevation-drag: var(--shadow-high);

 /* === shadow recipes ===
 Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
 oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

 /* === z-index scale (semantic) === */
 --z-base: 0;
 --z-sticky: 20;
 --z-titlebar: 40;
 --z-panel: 50;
 --z-dropdown: 100;
 --z-tooltip: 150;
 --z-modal: 200;
 --z-overlay: 300;
 /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
 micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
 so the scale governs padding/margin/gap only (not width/height/
 inset/grid), per the adversarial review in #430. */
 --spacing: 4px; /* base step — the single ruler */
 --space-0: 0;
 --space-0-5: calc(var(--spacing) * 0.5); /* 2px */
 --space-1: calc(var(--spacing) * 1); /* 4px */
 --space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
 --space-12: calc(var(--spacing) * 12); /* 48px */
 --space-16: calc(var(--spacing) * 16); /* 64px */

 /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
 /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
 --icon-meta: 13px;
 --icon-control: 14px;
 --icon-chrome: 16px;
 --icon-empty: 20px;
 --icon-plate: 28px;
 --icon-size: var(--icon-chrome); /* deprecated alias, one release */

 /* === motion ===
 Custom easing curves per emil-design-eng — the built-in CSS easings
 are too weak to feel intentional. Use --ease-out-strong for
 feedback/state changes and --ease-in-out-strong for on-screen movement.
 feedback/state changes.

 PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
 duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
 (styles/chat-message.css does this for the tool detail row). Copy the
 neighbour, or use this scale — never split the difference by hand. */
 --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 --ease-linear: linear;

 --duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
 PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
 --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
 --opacity-muted: 0.65; /* secondary text / icons / muted affordances */
 --opacity-pending: 0.8; /* pending / active / in-progress states */
 --opacity-overlay: 0.04; /* body::after subtle overlay (light) */

 /* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
 sidebar nav row, session row,
 settings nav row, select, first-run
 stepper item */
 /* #1879: this tier used to name "first-run checklist row" as a consumer.
 Nothing in the renderer reads it — that row is the stepper item above, and
 measured, its floor is 29px, so it takes `lg`. A tier documenting a
 consumer it does not have is the same defect as an exemption documenting a
 rule it does not govern; the tier stays (Astryx defines it and a prominent
 button is a real future need) but it is honest about having no reader. */
 --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
 --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

 /* === content measure (#520 PR4 item 16) ================================
 The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

 --accent: oklch(0.74 0.15 250);
 /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
 mode, so the "light, fresh button" reads consistently across themes;
 --control uses the same L0.65 blue as light so the white glyph clears
 WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 mode, so the "light, fresh button" reads consistently across themes. */
 /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
 ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
 L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
 at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
 at 7.16:1). See the light-mode note above for why --action cannot serve
 this role. */
 --accent-solid: oklch(from var(--accent) 0.76 c h);
 --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
 --link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
 --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
 --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
 --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
 --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
 --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
 --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
 }
Expand Down

2 changes: 1 addition & 1 deletion
apps/desktop/src/renderer/styles/settings/form.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
 border: var(--border-width-hairline) solid var(--border-soft);
 border-radius: var(--radius-modal);
 background: var(--surface-overlay);
 box-shadow: var(--elevation-overlay);
 box-shadow: var(--shadow-med);
 opacity: 1;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

Astro-Han
wants to merge
1
commit into

from

 Closed


chore(desktop): drop tokens nothing reads
#4017
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


89 changes: 12 additions & 77 deletions
apps/desktop/src/renderer/maka-tokens.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
 (connected/ok semantics); running/focus-ring/nav-active/selection follow
 --accent, while link text follows the solid tier below. */
 --accent: oklch(0.70 0.135 250);
 /* Checked controls (--control) use a slightly deeper blue (L0.65, one step
 below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
 contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 /* The SOLID accent tier: a filled accent surface that carries TEXT, and
 accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
 accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
 label.
 L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
 palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
 so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
 different families — no longer the near-identical ambers they once were. */
 --warning: oklch(0.50 0.18 55);

 /* Legacy brand affordance for a few emphasized surfaces. New checked
 control states use --control instead.
 /* Legacy brand affordance for a few emphasized surfaces.
 PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
 "Solarpunk deep" green, which made palette switching invisible on the
 Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
 --warning-wash: oklch(from var(--warning) l c h / 0.08);
 --warning-wash-border: oklch(from var(--warning) l c h / 0.24);
 --destructive-wash: oklch(from var(--destructive) l c h / 0.08);
 --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
 --info-wash: oklch(from var(--info) l c h / 0.08);
 --info-wash-border: oklch(from var(--info) l c h / 0.24);
 --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
 --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

 /* === foreground solid mix scale ===
 foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
 with no governance benefit. */
 --border-width-hairline: 1px;
 --border-width-thick: 2px;
 --border-width-accent: 3px;
 --muted: oklch(from var(--foreground) l c h / 0.05);
 /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
 (NOT the solid --foreground-N tints, which mix with --background and
 would change rendering — the ring would thicken, the wash would stop
 tracking the backdrop). The file-attachment card uses these for its bg
 (0.06), icon-tile (0.10), and inset ring (0.12); other components at
 (0.06) and inset ring (0.12); other components at
 the same density can reuse the tier instead of a fresh alpha. */
 --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
 --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
 --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
 /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
 `--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
 it. Nothing in the app reads a `--color-*` compatibility name any more.
 Do NOT add new --color-* names. */

 /* === elevation (visual system 2.0, T1) =============================
 Product names for the theme's shadow scale, so the right answer is
 findable. The generated theme ships --shadow-low/med/high and product CSS
 had used them exactly once, reaching instead for hand-rolled shadows —
 a scale nobody can name is a scale nobody uses.

 Three names, three jobs: `raised` for a card lifting off its plate,
 `overlay` for anything in a portal, `drag` for something under the
 cursor. In-flow elements do not cast shadows; that rule is unchanged,
 this only gives the legitimate path a name.

 Consumers move in T2-T4 — T1 does not touch product CSS. */
 --elevation-raised: var(--shadow-low);
 --elevation-overlay: var(--shadow-med);
 --elevation-drag: var(--shadow-high);

 /* === shadow recipes ===
 Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
 oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

 /* === z-index scale (semantic) === */
 --z-base: 0;
 --z-sticky: 20;
 --z-titlebar: 40;
 --z-panel: 50;
 --z-dropdown: 100;
 --z-tooltip: 150;
 --z-modal: 200;
 --z-overlay: 300;
 /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
 micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
 so the scale governs padding/margin/gap only (not width/height/
 inset/grid), per the adversarial review in #430. */
 --spacing: 4px; /* base step — the single ruler */
 --space-0: 0;
 --space-0-5: calc(var(--spacing) * 0.5); /* 2px */
 --space-1: calc(var(--spacing) * 1); /* 4px */
 --space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
 --space-12: calc(var(--spacing) * 12); /* 48px */
 --space-16: calc(var(--spacing) * 16); /* 64px */

 /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
 /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
 --icon-meta: 13px;
 --icon-control: 14px;
 --icon-chrome: 16px;
 --icon-empty: 20px;
 --icon-plate: 28px;
 --icon-size: var(--icon-chrome); /* deprecated alias, one release */

 /* === motion ===
 Custom easing curves per emil-design-eng — the built-in CSS easings
 are too weak to feel intentional. Use --ease-out-strong for
 feedback/state changes and --ease-in-out-strong for on-screen movement.
 feedback/state changes.

 PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
 duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
 (styles/chat-message.css does this for the tool detail row). Copy the
 neighbour, or use this scale — never split the difference by hand. */
 --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 --ease-linear: linear;

 --duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
 PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
 --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
 --opacity-muted: 0.65; /* secondary text / icons / muted affordances */
 --opacity-pending: 0.8; /* pending / active / in-progress states */
 --opacity-overlay: 0.04; /* body::after subtle overlay (light) */

 /* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
 sidebar nav row, session row,
 settings nav row, select, first-run
 stepper item */
 /* #1879: this tier used to name "first-run checklist row" as a consumer.
 Nothing in the renderer reads it — that row is the stepper item above, and
 measured, its floor is 29px, so it takes `lg`. A tier documenting a
 consumer it does not have is the same defect as an exemption documenting a
 rule it does not govern; the tier stays (Astryx defines it and a prominent
 button is a real future need) but it is honest about having no reader. */
 --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
 --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

 /* === content measure (#520 PR4 item 16) ================================
 The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

 --accent: oklch(0.74 0.15 250);
 /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
 mode, so the "light, fresh button" reads consistently across themes;
 --control uses the same L0.65 blue as light so the white glyph clears
 WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 mode, so the "light, fresh button" reads consistently across themes. */
 /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
 ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
 L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
 at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
 at 7.16:1). See the light-mode note above for why --action cannot serve
 this role. */
 --accent-solid: oklch(from var(--accent) 0.76 c h);
 --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
 --link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
 --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
 --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
 --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
 --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
 --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
 --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
 }
Expand Down

2 changes: 1 addition & 1 deletion
apps/desktop/src/renderer/styles/settings/form.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
 border: var(--border-width-hairline) solid var(--border-soft);
 border-radius: var(--radius-modal);
 background: var(--surface-overlay);
 box-shadow: var(--elevation-overlay);
 box-shadow: var(--shadow-med);
 opacity: 1;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

Astro-Han
wants to merge
1
commit into

from

 Closed


chore(desktop): drop tokens nothing reads
#4017
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


89 changes: 12 additions & 77 deletions
apps/desktop/src/renderer/maka-tokens.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
 (connected/ok semantics); running/focus-ring/nav-active/selection follow
 --accent, while link text follows the solid tier below. */
 --accent: oklch(0.70 0.135 250);
 /* Checked controls (--control) use a slightly deeper blue (L0.65, one step
 below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
 contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 /* The SOLID accent tier: a filled accent surface that carries TEXT, and
 accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
 accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
 label.
 L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
 palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
 so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
 different families — no longer the near-identical ambers they once were. */
 --warning: oklch(0.50 0.18 55);

 /* Legacy brand affordance for a few emphasized surfaces. New checked
 control states use --control instead.
 /* Legacy brand affordance for a few emphasized surfaces.
 PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
 "Solarpunk deep" green, which made palette switching invisible on the
 Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
 --warning-wash: oklch(from var(--warning) l c h / 0.08);
 --warning-wash-border: oklch(from var(--warning) l c h / 0.24);
 --destructive-wash: oklch(from var(--destructive) l c h / 0.08);
 --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
 --info-wash: oklch(from var(--info) l c h / 0.08);
 --info-wash-border: oklch(from var(--info) l c h / 0.24);
 --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
 --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

 /* === foreground solid mix scale ===
 foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
 with no governance benefit. */
 --border-width-hairline: 1px;
 --border-width-thick: 2px;
 --border-width-accent: 3px;
 --muted: oklch(from var(--foreground) l c h / 0.05);
 /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
 (NOT the solid --foreground-N tints, which mix with --background and
 would change rendering — the ring would thicken, the wash would stop
 tracking the backdrop). The file-attachment card uses these for its bg
 (0.06), icon-tile (0.10), and inset ring (0.12); other components at
 (0.06) and inset ring (0.12); other components at
 the same density can reuse the tier instead of a fresh alpha. */
 --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
 --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
 --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
 /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
 `--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
 it. Nothing in the app reads a `--color-*` compatibility name any more.
 Do NOT add new --color-* names. */

 /* === elevation (visual system 2.0, T1) =============================
 Product names for the theme's shadow scale, so the right answer is
 findable. The generated theme ships --shadow-low/med/high and product CSS
 had used them exactly once, reaching instead for hand-rolled shadows —
 a scale nobody can name is a scale nobody uses.

 Three names, three jobs: `raised` for a card lifting off its plate,
 `overlay` for anything in a portal, `drag` for something under the
 cursor. In-flow elements do not cast shadows; that rule is unchanged,
 this only gives the legitimate path a name.

 Consumers move in T2-T4 — T1 does not touch product CSS. */
 --elevation-raised: var(--shadow-low);
 --elevation-overlay: var(--shadow-med);
 --elevation-drag: var(--shadow-high);

 /* === shadow recipes ===
 Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
 oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

 /* === z-index scale (semantic) === */
 --z-base: 0;
 --z-sticky: 20;
 --z-titlebar: 40;
 --z-panel: 50;
 --z-dropdown: 100;
 --z-tooltip: 150;
 --z-modal: 200;
 --z-overlay: 300;
 /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
 micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
 so the scale governs padding/margin/gap only (not width/height/
 inset/grid), per the adversarial review in #430. */
 --spacing: 4px; /* base step — the single ruler */
 --space-0: 0;
 --space-0-5: calc(var(--spacing) * 0.5); /* 2px */
 --space-1: calc(var(--spacing) * 1); /* 4px */
 --space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
 --space-12: calc(var(--spacing) * 12); /* 48px */
 --space-16: calc(var(--spacing) * 16); /* 64px */

 /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
 /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
 --icon-meta: 13px;
 --icon-control: 14px;
 --icon-chrome: 16px;
 --icon-empty: 20px;
 --icon-plate: 28px;
 --icon-size: var(--icon-chrome); /* deprecated alias, one release */

 /* === motion ===
 Custom easing curves per emil-design-eng — the built-in CSS easings
 are too weak to feel intentional. Use --ease-out-strong for
 feedback/state changes and --ease-in-out-strong for on-screen movement.
 feedback/state changes.

 PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
 duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
 (styles/chat-message.css does this for the tool detail row). Copy the
 neighbour, or use this scale — never split the difference by hand. */
 --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 --ease-linear: linear;

 --duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
 PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
 --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
 --opacity-muted: 0.65; /* secondary text / icons / muted affordances */
 --opacity-pending: 0.8; /* pending / active / in-progress states */
 --opacity-overlay: 0.04; /* body::after subtle overlay (light) */

 /* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
 sidebar nav row, session row,
 settings nav row, select, first-run
 stepper item */
 /* #1879: this tier used to name "first-run checklist row" as a consumer.
 Nothing in the renderer reads it — that row is the stepper item above, and
 measured, its floor is 29px, so it takes `lg`. A tier documenting a
 consumer it does not have is the same defect as an exemption documenting a
 rule it does not govern; the tier stays (Astryx defines it and a prominent
 button is a real future need) but it is honest about having no reader. */
 --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
 --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

 /* === content measure (#520 PR4 item 16) ================================
 The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

 --accent: oklch(0.74 0.15 250);
 /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
 mode, so the "light, fresh button" reads consistently across themes;
 --control uses the same L0.65 blue as light so the white glyph clears
 WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 mode, so the "light, fresh button" reads consistently across themes. */
 /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
 ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
 L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
 at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
 at 7.16:1). See the light-mode note above for why --action cannot serve
 this role. */
 --accent-solid: oklch(from var(--accent) 0.76 c h);
 --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
 --link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
 --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
 --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
 --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
 --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
 --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
 --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
 }
Expand Down

2 changes: 1 addition & 1 deletion
apps/desktop/src/renderer/styles/settings/form.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
 border: var(--border-width-hairline) solid var(--border-soft);
 border-radius: var(--radius-modal);
 background: var(--surface-overlay);
 box-shadow: var(--elevation-overlay);
 box-shadow: var(--shadow-med);
 opacity: 1;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

Astro-Han
wants to merge
1
commit into

from

 Closed


chore(desktop): drop tokens nothing reads
#4017
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


89 changes: 12 additions & 77 deletions
apps/desktop/src/renderer/maka-tokens.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
 (connected/ok semantics); running/focus-ring/nav-active/selection follow
 --accent, while link text follows the solid tier below. */
 --accent: oklch(0.70 0.135 250);
 /* Checked controls (--control) use a slightly deeper blue (L0.65, one step
 below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
 contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 /* The SOLID accent tier: a filled accent surface that carries TEXT, and
 accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
 accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
 label.
 L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
 palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
 so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
 different families — no longer the near-identical ambers they once were. */
 --warning: oklch(0.50 0.18 55);

 /* Legacy brand affordance for a few emphasized surfaces. New checked
 control states use --control instead.
 /* Legacy brand affordance for a few emphasized surfaces.
 PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
 "Solarpunk deep" green, which made palette switching invisible on the
 Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
 --warning-wash: oklch(from var(--warning) l c h / 0.08);
 --warning-wash-border: oklch(from var(--warning) l c h / 0.24);
 --destructive-wash: oklch(from var(--destructive) l c h / 0.08);
 --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
 --info-wash: oklch(from var(--info) l c h / 0.08);
 --info-wash-border: oklch(from var(--info) l c h / 0.24);
 --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
 --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

 /* === foreground solid mix scale ===
 foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
 with no governance benefit. */
 --border-width-hairline: 1px;
 --border-width-thick: 2px;
 --border-width-accent: 3px;
 --muted: oklch(from var(--foreground) l c h / 0.05);
 /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
 (NOT the solid --foreground-N tints, which mix with --background and
 would change rendering — the ring would thicken, the wash would stop
 tracking the backdrop). The file-attachment card uses these for its bg
 (0.06), icon-tile (0.10), and inset ring (0.12); other components at
 (0.06) and inset ring (0.12); other components at
 the same density can reuse the tier instead of a fresh alpha. */
 --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
 --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
 --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
 /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
 `--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
 it. Nothing in the app reads a `--color-*` compatibility name any more.
 Do NOT add new --color-* names. */

 /* === elevation (visual system 2.0, T1) =============================
 Product names for the theme's shadow scale, so the right answer is
 findable. The generated theme ships --shadow-low/med/high and product CSS
 had used them exactly once, reaching instead for hand-rolled shadows —
 a scale nobody can name is a scale nobody uses.

 Three names, three jobs: `raised` for a card lifting off its plate,
 `overlay` for anything in a portal, `drag` for something under the
 cursor. In-flow elements do not cast shadows; that rule is unchanged,
 this only gives the legitimate path a name.

 Consumers move in T2-T4 — T1 does not touch product CSS. */
 --elevation-raised: var(--shadow-low);
 --elevation-overlay: var(--shadow-med);
 --elevation-drag: var(--shadow-high);

 /* === shadow recipes ===
 Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
 oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

 /* === z-index scale (semantic) === */
 --z-base: 0;
 --z-sticky: 20;
 --z-titlebar: 40;
 --z-panel: 50;
 --z-dropdown: 100;
 --z-tooltip: 150;
 --z-modal: 200;
 --z-overlay: 300;
 /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
 micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
 so the scale governs padding/margin/gap only (not width/height/
 inset/grid), per the adversarial review in #430. */
 --spacing: 4px; /* base step — the single ruler */
 --space-0: 0;
 --space-0-5: calc(var(--spacing) * 0.5); /* 2px */
 --space-1: calc(var(--spacing) * 1); /* 4px */
 --space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
 --space-12: calc(var(--spacing) * 12); /* 48px */
 --space-16: calc(var(--spacing) * 16); /* 64px */

 /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
 /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
 --icon-meta: 13px;
 --icon-control: 14px;
 --icon-chrome: 16px;
 --icon-empty: 20px;
 --icon-plate: 28px;
 --icon-size: var(--icon-chrome); /* deprecated alias, one release */

 /* === motion ===
 Custom easing curves per emil-design-eng — the built-in CSS easings
 are too weak to feel intentional. Use --ease-out-strong for
 feedback/state changes and --ease-in-out-strong for on-screen movement.
 feedback/state changes.

 PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
 duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
 (styles/chat-message.css does this for the tool detail row). Copy the
 neighbour, or use this scale — never split the difference by hand. */
 --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 --ease-linear: linear;

 --duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
 PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
 --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
 --opacity-muted: 0.65; /* secondary text / icons / muted affordances */
 --opacity-pending: 0.8; /* pending / active / in-progress states */
 --opacity-overlay: 0.04; /* body::after subtle overlay (light) */

 /* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
 sidebar nav row, session row,
 settings nav row, select, first-run
 stepper item */
 /* #1879: this tier used to name "first-run checklist row" as a consumer.
 Nothing in the renderer reads it — that row is the stepper item above, and
 measured, its floor is 29px, so it takes `lg`. A tier documenting a
 consumer it does not have is the same defect as an exemption documenting a
 rule it does not govern; the tier stays (Astryx defines it and a prominent
 button is a real future need) but it is honest about having no reader. */
 --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
 --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

 /* === content measure (#520 PR4 item 16) ================================
 The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

 --accent: oklch(0.74 0.15 250);
 /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
 mode, so the "light, fresh button" reads consistently across themes;
 --control uses the same L0.65 blue as light so the white glyph clears
 WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 mode, so the "light, fresh button" reads consistently across themes. */
 /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
 ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
 L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
 at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
 at 7.16:1). See the light-mode note above for why --action cannot serve
 this role. */
 --accent-solid: oklch(from var(--accent) 0.76 c h);
 --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
 --link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
 --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
 --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
 --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
 --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
 --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
 --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
 }
Expand Down

2 changes: 1 addition & 1 deletion
apps/desktop/src/renderer/styles/settings/form.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
 border: var(--border-width-hairline) solid var(--border-soft);
 border-radius: var(--radius-modal);
 background: var(--surface-overlay);
 box-shadow: var(--elevation-overlay);
 box-shadow: var(--shadow-med);
 opacity: 1;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

Astro-Han
wants to merge
1
commit into

from

 Closed


chore(desktop): drop tokens nothing reads
#4017
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


89 changes: 12 additions & 77 deletions
apps/desktop/src/renderer/maka-tokens.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
 (connected/ok semantics); running/focus-ring/nav-active/selection follow
 --accent, while link text follows the solid tier below. */
 --accent: oklch(0.70 0.135 250);
 /* Checked controls (--control) use a slightly deeper blue (L0.65, one step
 below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
 contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 /* The SOLID accent tier: a filled accent surface that carries TEXT, and
 accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
 accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
 label.
 L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
 palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
 so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
 different families — no longer the near-identical ambers they once were. */
 --warning: oklch(0.50 0.18 55);

 /* Legacy brand affordance for a few emphasized surfaces. New checked
 control states use --control instead.
 /* Legacy brand affordance for a few emphasized surfaces.
 PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
 "Solarpunk deep" green, which made palette switching invisible on the
 Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
 --warning-wash: oklch(from var(--warning) l c h / 0.08);
 --warning-wash-border: oklch(from var(--warning) l c h / 0.24);
 --destructive-wash: oklch(from var(--destructive) l c h / 0.08);
 --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
 --info-wash: oklch(from var(--info) l c h / 0.08);
 --info-wash-border: oklch(from var(--info) l c h / 0.24);
 --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
 --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

 /* === foreground solid mix scale ===
 foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
 with no governance benefit. */
 --border-width-hairline: 1px;
 --border-width-thick: 2px;
 --border-width-accent: 3px;
 --muted: oklch(from var(--foreground) l c h / 0.05);
 /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
 (NOT the solid --foreground-N tints, which mix with --background and
 would change rendering — the ring would thicken, the wash would stop
 tracking the backdrop). The file-attachment card uses these for its bg
 (0.06), icon-tile (0.10), and inset ring (0.12); other components at
 (0.06) and inset ring (0.12); other components at
 the same density can reuse the tier instead of a fresh alpha. */
 --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
 --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
 --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
 /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
 `--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
 it. Nothing in the app reads a `--color-*` compatibility name any more.
 Do NOT add new --color-* names. */

 /* === elevation (visual system 2.0, T1) =============================
 Product names for the theme's shadow scale, so the right answer is
 findable. The generated theme ships --shadow-low/med/high and product CSS
 had used them exactly once, reaching instead for hand-rolled shadows —
 a scale nobody can name is a scale nobody uses.

 Three names, three jobs: `raised` for a card lifting off its plate,
 `overlay` for anything in a portal, `drag` for something under the
 cursor. In-flow elements do not cast shadows; that rule is unchanged,
 this only gives the legitimate path a name.

 Consumers move in T2-T4 — T1 does not touch product CSS. */
 --elevation-raised: var(--shadow-low);
 --elevation-overlay: var(--shadow-med);
 --elevation-drag: var(--shadow-high);

 /* === shadow recipes ===
 Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
 oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

 /* === z-index scale (semantic) === */
 --z-base: 0;
 --z-sticky: 20;
 --z-titlebar: 40;
 --z-panel: 50;
 --z-dropdown: 100;
 --z-tooltip: 150;
 --z-modal: 200;
 --z-overlay: 300;
 /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
 micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
 so the scale governs padding/margin/gap only (not width/height/
 inset/grid), per the adversarial review in #430. */
 --spacing: 4px; /* base step — the single ruler */
 --space-0: 0;
 --space-0-5: calc(var(--spacing) * 0.5); /* 2px */
 --space-1: calc(var(--spacing) * 1); /* 4px */
 --space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
 --space-12: calc(var(--spacing) * 12); /* 48px */
 --space-16: calc(var(--spacing) * 16); /* 64px */

 /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
 /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
 --icon-meta: 13px;
 --icon-control: 14px;
 --icon-chrome: 16px;
 --icon-empty: 20px;
 --icon-plate: 28px;
 --icon-size: var(--icon-chrome); /* deprecated alias, one release */

 /* === motion ===
 Custom easing curves per emil-design-eng — the built-in CSS easings
 are too weak to feel intentional. Use --ease-out-strong for
 feedback/state changes and --ease-in-out-strong for on-screen movement.
 feedback/state changes.

 PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
 duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
 (styles/chat-message.css does this for the tool detail row). Copy the
 neighbour, or use this scale — never split the difference by hand. */
 --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 --ease-linear: linear;

 --duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
 PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
 --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
 --opacity-muted: 0.65; /* secondary text / icons / muted affordances */
 --opacity-pending: 0.8; /* pending / active / in-progress states */
 --opacity-overlay: 0.04; /* body::after subtle overlay (light) */

 /* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
 sidebar nav row, session row,
 settings nav row, select, first-run
 stepper item */
 /* #1879: this tier used to name "first-run checklist row" as a consumer.
 Nothing in the renderer reads it — that row is the stepper item above, and
 measured, its floor is 29px, so it takes `lg`. A tier documenting a
 consumer it does not have is the same defect as an exemption documenting a
 rule it does not govern; the tier stays (Astryx defines it and a prominent
 button is a real future need) but it is honest about having no reader. */
 --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
 --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

 /* === content measure (#520 PR4 item 16) ================================
 The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

 --accent: oklch(0.74 0.15 250);
 /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
 mode, so the "light, fresh button" reads consistently across themes;
 --control uses the same L0.65 blue as light so the white glyph clears
 WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 mode, so the "light, fresh button" reads consistently across themes. */
 /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
 ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
 L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
 at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
 at 7.16:1). See the light-mode note above for why --action cannot serve
 this role. */
 --accent-solid: oklch(from var(--accent) 0.76 c h);
 --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
 --link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
 --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
 --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
 --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
 --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
 --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
 --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
 }
Expand Down

2 changes: 1 addition & 1 deletion
apps/desktop/src/renderer/styles/settings/form.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
 border: var(--border-width-hairline) solid var(--border-soft);
 border-radius: var(--radius-modal);
 background: var(--surface-overlay);
 box-shadow: var(--elevation-overlay);
 box-shadow: var(--shadow-med);
 opacity: 1;
}

Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
chore(desktop): drop tokens nothing reads#4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Closed

Astro-Han
wants to merge
1
commit into

from

 Closed


chore(desktop): drop tokens nothing reads
#4017
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


1 commit


Select commit


File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


89 changes: 12 additions & 77 deletions
apps/desktop/src/renderer/maka-tokens.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -165,22 +165,10 @@
 (connected/ok semantics); running/focus-ring/nav-active/selection follow
 --accent, while link text follows the solid tier below. */
 --accent: oklch(0.70 0.135 250);
 /* Checked controls (--control) use a slightly deeper blue (L0.65, one step
 below the accent) so the near-white glyph clears WCAG 1.4.11 non-text
 contrast 3:1 (3.09:1); the logo L0.70 only reaches 2.55:1. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 /* The SOLID accent tier: a filled accent surface that carries TEXT, and
 accent-colored text/icons on a plain surface. --action (L0.85 chip) and
--control (L0.65, tuned for WCAG 1.4.11 non-text 3:1) are both too light
to clear 1.4.3's 4.5:1 for text, so neither can back a solid button label.
 accent-colored text/icons on a plain surface. --action (L0.85 chip) is too
light to clear 1.4.3's 4.5:1 for text, so it cannot back a solid button
 label.
 L0.52 is the lowest lightness that clears 4.5:1 against white for EVERY
 palette (weakest is tokyo-night at 4.78:1); chroma and hue follow --accent
 so palettes still read as themselves. This is the token the Astryx bridge
Expand DownExpand Up@@ -219,8 +207,7 @@
 different families — no longer the near-identical ambers they once were. */
 --warning: oklch(0.50 0.18 55);

 /* Legacy brand affordance for a few emphasized surfaces. New checked
 control states use --control instead.
 /* Legacy brand affordance for a few emphasized surfaces.
 PR-THEME-APPLY-AND-DONE-POLISH-0 (WAWQAQ msg `dec85e5b`): was a static
 "Solarpunk deep" green, which made palette switching invisible on the
 Done CTA and made every palette read as olive-green. */
Expand DownExpand Up@@ -280,11 +267,8 @@
 --warning-wash: oklch(from var(--warning) l c h / 0.08);
 --warning-wash-border: oklch(from var(--warning) l c h / 0.24);
 --destructive-wash: oklch(from var(--destructive) l c h / 0.08);
 --destructive-wash-border: oklch(from var(--destructive) l c h / 0.24);
 --info-wash: oklch(from var(--info) l c h / 0.08);
 --info-wash-border: oklch(from var(--info) l c h / 0.24);
 --destructive-wash-strong: oklch(from var(--destructive) l c h / 0.12);
 --destructive-wash-strong-border: oklch(from var(--destructive) l c h / 0.40);

 /* === foreground solid mix scale ===
 foreground-N = N% of foreground interpolated INTO background.
Expand DownExpand Up@@ -342,7 +326,6 @@
 with no governance benefit. */
 --border-width-hairline: 1px;
 --border-width-thick: 2px;
 --border-width-accent: 3px;
 --muted: oklch(from var(--foreground) l c h / 0.05);
 /* Ink ladder (visual system 2.0, T1): three tiers about 2x apart, all above
 4.5:1. Measured against --surface-raised, light reads 19.1 / 9.8 / 4.8.
Expand All@@ -363,10 +346,9 @@
 (NOT the solid --foreground-N tints, which mix with --background and
 would change rendering — the ring would thicken, the wash would stop
 tracking the backdrop). The file-attachment card uses these for its bg
 (0.06), icon-tile (0.10), and inset ring (0.12); other components at
 (0.06) and inset ring (0.12); other components at
 the same density can reuse the tier instead of a fresh alpha. */
 --foreground-alpha-6: oklch(from var(--foreground) l c h / 0.06);
 --foreground-alpha-10: oklch(from var(--foreground) l c h / 0.10);
 --foreground-alpha-12: oklch(from var(--foreground) l c h / 0.12);
 /* Visual System 2.0 (T2/T3). Added so the three sites that were borrowing
 `--border-strong` as a strong neutral TINT can say what they mean: a
Expand DownExpand Up@@ -398,22 +380,6 @@
 it. Nothing in the app reads a `--color-*` compatibility name any more.
 Do NOT add new --color-* names. */

 /* === elevation (visual system 2.0, T1) =============================
 Product names for the theme's shadow scale, so the right answer is
 findable. The generated theme ships --shadow-low/med/high and product CSS
 had used them exactly once, reaching instead for hand-rolled shadows —
 a scale nobody can name is a scale nobody uses.

 Three names, three jobs: `raised` for a card lifting off its plate,
 `overlay` for anything in a portal, `drag` for something under the
 cursor. In-flow elements do not cast shadows; that rule is unchanged,
 this only gives the legitimate path a name.

 Consumers move in T2-T4 — T1 does not touch product CSS. */
 --elevation-raised: var(--shadow-low);
 --elevation-overlay: var(--shadow-med);
 --elevation-drag: var(--shadow-high);

 /* === shadow recipes ===
 Flat elevation uses a foreground-derived 1px ring in both themes.

Expand All@@ -436,13 +402,9 @@
 oklch(from var(--foreground) l c h / 0.06) 0 0 0 1px;

 /* === z-index scale (semantic) === */
 --z-base: 0;
 --z-sticky: 20;
 --z-titlebar: 40;
 --z-panel: 50;
 --z-dropdown: 100;
 --z-tooltip: 150;
 --z-modal: 200;
 --z-overlay: 300;
 /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4): named
 micro-z tokens for the two raw z-index sites styles.css used to
Expand DownExpand Up@@ -737,7 +699,6 @@
 so the scale governs padding/margin/gap only (not width/height/
 inset/grid), per the adversarial review in #430. */
 --spacing: 4px; /* base step — the single ruler */
 --space-0: 0;
 --space-0-5: calc(var(--spacing) * 0.5); /* 2px */
 --space-1: calc(var(--spacing) * 1); /* 4px */
 --space-1-5: calc(var(--spacing) * 1.5); /* 6px */
Expand All@@ -752,20 +713,16 @@
 --space-12: calc(var(--spacing) * 12); /* 48px */
 --space-16: calc(var(--spacing) * 16); /* 64px */

 /* Five-rung icon scale, mirroring ICON_SIZE in @maka/ui's icons.tsx —
these tokens exist for the CSS-clamped sites; pick by the role the
glyph plays, not by eye. */
 /* ICON_SIZE in @maka/ui's icons.tsx is the icon scale; components pass it as
a prop. These two rungs exist only for the sites that size a glyph from
CSS — add a rung here when a CSS site needs one, not to mirror the TS. */
 --icon-meta: 13px;
 --icon-control: 14px;
 --icon-chrome: 16px;
 --icon-empty: 20px;
 --icon-plate: 28px;
 --icon-size: var(--icon-chrome); /* deprecated alias, one release */

 /* === motion ===
 Custom easing curves per emil-design-eng — the built-in CSS easings
 are too weak to feel intentional. Use --ease-out-strong for
 feedback/state changes and --ease-in-out-strong for on-screen movement.
 feedback/state changes.

 PR-MOTION-TOKEN-CONVERGE-0 (kenji's category 4, 2026-06-24):
 duration scale paired with the easing scale. The values come from
Expand All@@ -789,7 +746,6 @@
 (styles/chat-message.css does this for the tool detail row). Copy the
 neighbour, or use this scale — never split the difference by hand. */
 --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 --ease-linear: linear;

 --duration-quick: 120ms;
Expand All@@ -808,7 +764,6 @@
 PR-OPACITY-CONVERGE-0 (issue #520 PR2). */
 --opacity-disabled: 0.5; /* disabled controls / strongly dimmed text */
 --opacity-muted: 0.65; /* secondary text / icons / muted affordances */
 --opacity-pending: 0.8; /* pending / active / in-progress states */
 --opacity-overlay: 0.04; /* body::after subtle overlay (light) */

 /* === focus-ring recipe ===
Expand DownExpand Up@@ -926,14 +881,6 @@
 sidebar nav row, session row,
 settings nav row, select, first-run
 stepper item */
 /* #1879: this tier used to name "first-run checklist row" as a consumer.
 Nothing in the renderer reads it — that row is the stepper item above, and
 measured, its floor is 29px, so it takes `lg`. A tier documenting a
 consumer it does not have is the same defect as an exemption documenting a
 rule it does not govern; the tier stays (Astryx defines it and a prominent
 button is a real future need) but it is honest about having no reader. */
 --h-control-xl: var(--size-element-lg); /* 36px — no consumer today */
 --h-control-2xl: var(--space-10); /* 40px — toolbar, large touch target */

 /* === content measure (#520 PR4 item 16) ================================
 The chat content max-width — the column the conversation, tool output,
Expand DownExpand Up@@ -1004,23 +951,12 @@

 --accent: oklch(0.74 0.15 250);
 /* Dark mode keeps the same pale-blue CTA chip + deep-blue text as light
 mode, so the "light, fresh button" reads consistently across themes;
 --control uses the same L0.65 blue as light so the white glyph clears
 WCAG 1.4.11 non-text contrast 3:1 (3.09:1) in both themes. */
 /* PALETTE-LEAK-0: derive hue/chroma from --accent instead of hardcoding
 blue h250 — palettes only override the base tokens, so literals here
 kept the send button, onboarding CTA and every checked control blue
 after a palette switch (same bug --brand-deep already had and fixed).
 Lightness anchors stay literal to preserve the WCAG 1.4.11 tuning;
 min(c, …) keeps the default palette byte-identical while following
 low-chroma palettes down. */
 --control: oklch(from var(--accent) 0.65 min(c, 0.135) h);
 --control-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
 mode, so the "light, fresh button" reads consistently across themes. */
 /* Dark mode inverts the solid tier: the fill goes LIGHT and carries dark
 ink, matching Astryx's own --color-on-accent (light-dark(#fff, #171717)).
 L0.76 clears 4.5:1 against that ink for every palette (weakest is coral
 at 7.16:1). See the light-mode note above for why --action/--control
cannot serve this role. */
 at 7.16:1). See the light-mode note above for why --action cannot serve
 this role. */
 --accent-solid: oklch(from var(--accent) 0.76 c h);
 --accent-wash: oklch(from var(--accent) 0.28 min(c, 0.05) h);
 --link: var(--accent-solid);
Expand DownExpand Up@@ -1422,7 +1358,6 @@
 --maka-text-heading-4: var(--text-heading-4-weight) var(--text-heading-4-size)/var(--text-heading-4-leading) var(--maka-font-family);
 --maka-text-heading-5: var(--text-heading-5-weight) var(--text-heading-5-size)/var(--text-heading-5-leading) var(--maka-font-family);
 --maka-text-display-1: var(--text-display-1-weight) var(--text-display-1-size)/var(--text-display-1-leading) var(--maka-font-family);
 --maka-text-display-2: var(--text-display-2-weight) var(--text-display-2-size)/var(--text-display-2-leading) var(--maka-font-family);
 --maka-text-display-3: var(--text-display-3-weight) var(--text-display-3-size)/var(--text-display-3-leading) var(--maka-font-family);
 --maka-text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-leading) var(--font-family-code);
 }
Expand Down

2 changes: 1 addition & 1 deletion
apps/desktop/src/renderer/styles/settings/form.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@
 border: var(--border-width-hairline) solid var(--border-soft);
 border-radius: var(--radius-modal);
 background: var(--surface-overlay);
 box-shadow: var(--elevation-overlay);
 box-shadow: var(--shadow-med);
 opacity: 1;
}

Expand Down