Skip to content

fix(ui): govern leftover icon sizes with ICON_SIZE #3127

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

Open
1625567290 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix(ui): govern leftover icon sizes with ICON_SIZE #3127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
685c38b
修复：使用图标感知检查治理图标尺寸
1625567290 Aug 16, 2026
36c7b04
修复：通过词法绑定完善图标尺寸检查
1625567290 Aug 16, 2026
ea99a7d
样式：格式化图标尺寸检查器
1625567290 Aug 16, 2026
ee76661
迁移主线新增图标并补充许可头
1625567290 Aug 23, 2026
9500d9b
修复计算图标映射的尺寸检查
1625567290 Aug 23, 2026
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
5 changes: 4 additions & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ jobs:
with:
node-version: '24'
cache: npm

- name: Select the release npm toolchain
if: steps.plan.outputs.cli_package == 'true'
run: npm install --global --no-audit --no-fund "$(node -p 'require("./package.json").packageManager')"
Expand Down Expand Up @@ -143,6 +142,10 @@ jobs:
if: steps.plan.outputs.code == 'true'
run: npm run format:check

- name: Check icon sizes
if: steps.plan.outputs.code == 'true'
run: npm run check:icon-size

- name: Build
if: steps.plan.outputs.code == 'true' || steps.plan.outputs.cli_package == 'true' || steps.plan.outputs.release_contract == 'true'
run: npm run build
Expand Down
2 changes: 1 addition & 1 deletion apps/desktop/src/renderer/features/workbar/tools/inspector/session-inspector-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -730,7 +730,7 @@ function StepRow(props: {
<Button
variant="ghost"
size="sm"
icon={<Copy size={14} aria-hidden="true" />}
icon={<Copy size={ICON_SIZE.chrome} aria-hidden="true" />}

@jackwener jackwener Aug 23, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P2] Same leftover pixel, different rung.

This Copy sits on Button size="sm", same as the copy-path button above (:201), which already uses ICON_SIZE.control (14). The raw size={14} here was that same 14.

ICON_SIZE.chrome is 16 — the Astryx sm slot fill. Mapping only this leftover to chrome changes the glyph and splits two identical copy-on-sm-button call sites.

If the intent is “sm button → chrome”, both should move. If the intent is “preserve the leftover 14 / match the sibling”, this should be ICON_SIZE.control. The checker only bans raw pixels, so it cannot catch a wrong rung.

label={`${copy.copyPricingKey}: ${pricingKey}`}
onClick={() => {
void props.onCopyPricingKey(pricingKey);
Expand Down
12 changes: 6 additions & 6 deletions apps/desktop/src/renderer/remote-project-directory-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
import { HStack } from '@astryxdesign/core/Stack';
import { Text } from '@astryxdesign/core/Text';
import { useUiLocale } from '@maka/ui';
import { Check, Eye, EyeOff, FolderOpen } from '@maka/ui/icons';
import { ICON_SIZE, Check, Eye, EyeOff, FolderOpen } from '@maka/ui/icons';
import type {
DesktopProjectDirectoryEntry,
DesktopProjectDirectoryRoot,
Expand Down Expand Up @@ -243,9 +243,9 @@ export function RemoteProjectDirectoryDialog(props: {
<DropdownMenuItem
key={candidate.id}
label={candidate.label}
icon={<FolderOpen size={18} aria-hidden="true" />}
icon={<FolderOpen size={ICON_SIZE.control} aria-hidden="true" />}

@jackwener jackwener Aug 23, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P3] Same leftover 18px, two rungs.

FolderOpen / Check size={18} → ICON_SIZE.control (14). A few lines down, Eye / EyeOff size={18} → ICON_SIZE.chrome (16). Role-based snapping is what the scale is for (list startContent vs footer affordance), but 18 was not a rung, so both glyphs change size and they no longer match each other. Calling it out so the visual delta is deliberate, not an accident of nearest-rung.

endContent={candidate.id === root?.id
? <Check size={18} aria-hidden="true" />
? <Check size={ICON_SIZE.control} aria-hidden="true" />
: undefined}
onClick={() => selectRoot(candidate)}
/>
Expand Down Expand Up @@ -292,7 +292,7 @@ export function RemoteProjectDirectoryDialog(props: {
key={entry.name}
variant="ghost"
label={entry.name}
icon={<FolderOpen size={18} aria-hidden="true" />}
icon={<FolderOpen size={ICON_SIZE.control} aria-hidden="true" />}
isDisabled={registering}
onClick={() => navigate([...segments, entry.name])}
/>
Expand All @@ -313,8 +313,8 @@ export function RemoteProjectDirectoryDialog(props: {
? copy.remoteDirectoryHideHidden
: copy.remoteDirectoryShowHidden}
icon={showHidden
? <Eye size={18} aria-hidden="true" />
: <EyeOff size={18} aria-hidden="true" />}
? <Eye size={ICON_SIZE.chrome} aria-hidden="true" />
: <EyeOff size={ICON_SIZE.chrome} aria-hidden="true" />}
aria-pressed={showHidden}
isDisabled={registering}
onClick={() => setShowHidden((current) => !current)}
Expand Down
4 changes: 2 additions & 2 deletions apps/desktop/src/renderer/settings/about-settings-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { useEffect, useId, useState, type ReactNode } from 'react';
import { Badge, Link, List, ListItem } from '@astryxdesign/core';
import { Kbd } from '@astryxdesign/core/Kbd';
import { Sparkles } from '@maka/ui/icons';
import { ICON_SIZE, Sparkles } from '@maka/ui/icons';
import {
Banner,
Button,
Expand Down Expand Up @@ -167,7 +167,7 @@ export function AboutSettingsPage(props: { onOpenKeyboardHelp?(): void }) {
as_wrapper="div"
className="settingsAboutHero"
as="h2"
icon={<Sparkles size={30} /> /* 64% of the 48px plate, matching .providerLogo's fill */}
icon={<Sparkles size={ICON_SIZE.plate} /> /* plate glyph inside the About hero mark */}

@jackwener jackwener Aug 23, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P3] size={30} was “64% of the 48px plate” (≈30.7). ICON_SIZE.plate is 28, so this shrinks 2px. Fine if plate is the law; the old 64% comment should not be read as still true.

iconClassName="settingsAboutLogo"
headingRowClassName="settingsAboutHeading"
title="Maka"
Expand Down
4 changes: 2 additions & 2 deletions apps/desktop/src/renderer/settings/request-customization-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
} from '@maka/core/runtime-policy';
import { type RequestHeaderUpdate } from '@maka/core/llm-connections';
import { Button, IconButton, TextArea, TextInput } from '@maka/ui';
import { Trash2 } from '@maka/ui/icons';
import { ICON_SIZE, Trash2 } from '@maka/ui/icons';
import { PasswordInput } from './password-input';

export interface RequestHeaderDraft {
Expand Down Expand Up @@ -167,7 +167,7 @@ export function RequestHeadersEditor(props: {
variant="ghost"
size="sm"
label={props.copy.removeHeader}
icon={<Trash2 size={16} aria-hidden="true" />}
icon={<Trash2 size={ICON_SIZE.chrome} aria-hidden="true" />}
isDisabled={props.disabled}
onClick={() =>
props.onHeadersChange(props.headers.filter(({ id }) => id !== header.id))
Expand Down
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
"verify:windows-autoupdate": "node scripts/verify-windows-autoupdate.mjs",
"verify:windows-installer-rollback": "node scripts/verify-windows-installer-rollback.mjs",
"astryx:theme": "node scripts/build-astryx-theme.mjs",
"check:icon-size": "node --test scripts/check-icon-size.test.mjs && node scripts/check-icon-size.mjs",
"astryx:surface-inventory": "node scripts/check-astryx-surface-inventory.mjs",
"astryx:surface-inventory:write": "node scripts/generate-astryx-surface-inventory.mjs",
"sync:model-metadata": "node scripts/sync-model-metadata.mjs",
Expand All @@ -89,6 +90,7 @@
"@electron/asar": "3.4.1",
"@astryxdesign/cli": "0.4.0",
"@astryxdesign/core": "0.4.0",
"@babel/parser": "^7.29.7",
"@biomejs/biome": "2.5.6",
"@types/node": "^26.1.2",
"knip": "^6.26.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/stories/icons.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const LucideIcons: Story = {
textAlign: 'center',
}}
>
<Comp size={20} />
<Comp size={Icons.ICON_SIZE.empty} />
<code style={{ color: 'var(--foreground-secondary)', fontSize: 10, wordBreak: 'break-word' }}>{name}</code>
</div>
))}
Expand Down
Loading