fix(eidos): menus + color-picker trigger to 1:1 font; 2A radius bypass tokens

The 1:1 font canon (size N -> --font-size-N, md=16) covered the field family but
missed two menus and one picker trigger, which kept the compact md->sm scale:
- menubar trigger: md->16 (was 14); its menu items were already 1:1 via list-surface.
- navigation-menu: md->16 (was 14).
- color-picker trigger: md->16 (was 12 - double-compact md->xs), matching color-field.

combobox / command / textarea were already 1:1 (a grep over-counted by matching
their correct sm/lg variants). Picker PANEL fonts + the menu-dial label are flat
panel/label content (no size axis) and stay at the conventional compact density.

Also tokenized two 2A radius bypasses (the token existed, was ignored):
- grid-list checkbox: 0.2rem -> var(--radius-sm).
- navigation-menu indicator: 1px -> var(--radius-full).

Verified md=16px in-browser for the three font fixes. check 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent c00bac1345
commit 7cf30287de

@ -24,7 +24,7 @@
--_color-picker-trigger-height: var(--color-picker-trigger-height-md); --_color-picker-trigger-height: var(--color-picker-trigger-height-md);
--_color-picker-trigger-px: var(--color-picker-trigger-px-md); --_color-picker-trigger-px: var(--color-picker-trigger-px-md);
--_color-picker-trigger-swatch-size: var(--color-picker-trigger-swatch-size-md); --_color-picker-trigger-swatch-size: var(--color-picker-trigger-swatch-size-md);
--_color-picker-trigger-font-size: var(--font-size-xs); --_color-picker-trigger-font-size: var(--font-size-md);
--_color-picker-swatch-size: var(--color-picker-swatch-size-md); --_color-picker-swatch-size: var(--color-picker-swatch-size-md);
--_color-picker-accent: var(--color-primary-border); --_color-picker-accent: var(--color-primary-border);
@ -49,7 +49,7 @@
--_color-picker-trigger-height: var(--color-picker-trigger-height-sm); --_color-picker-trigger-height: var(--color-picker-trigger-height-sm);
--_color-picker-trigger-px: var(--color-picker-trigger-px-sm); --_color-picker-trigger-px: var(--color-picker-trigger-px-sm);
--_color-picker-trigger-swatch-size: var(--color-picker-trigger-swatch-size-sm); --_color-picker-trigger-swatch-size: var(--color-picker-trigger-swatch-size-sm);
--_color-picker-trigger-font-size: var(--font-size-xxs); --_color-picker-trigger-font-size: var(--font-size-sm);
--_color-picker-swatch-size: var(--color-picker-swatch-size-sm); --_color-picker-swatch-size: var(--color-picker-swatch-size-sm);
} }
@ -59,7 +59,7 @@
--_color-picker-trigger-height: var(--color-picker-trigger-height-lg); --_color-picker-trigger-height: var(--color-picker-trigger-height-lg);
--_color-picker-trigger-px: var(--color-picker-trigger-px-lg); --_color-picker-trigger-px: var(--color-picker-trigger-px-lg);
--_color-picker-trigger-swatch-size: var(--color-picker-trigger-swatch-size-lg); --_color-picker-trigger-swatch-size: var(--color-picker-trigger-swatch-size-lg);
--_color-picker-trigger-font-size: var(--font-size-sm); --_color-picker-trigger-font-size: var(--font-size-lg);
--_color-picker-swatch-size: var(--color-picker-swatch-size-lg); --_color-picker-swatch-size: var(--color-picker-swatch-size-lg);
} }

@ -200,7 +200,7 @@
inline-size: var(--_grid-list-checkbox-size); inline-size: var(--_grid-list-checkbox-size);
block-size: var(--_grid-list-checkbox-size); block-size: var(--_grid-list-checkbox-size);
border: var(--border-width) solid var(--color-border-default); border: var(--border-width) solid var(--color-border-default);
border-radius: 0.2rem; border-radius: var(--radius-sm);
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
outline: none; outline: none;

@ -28,7 +28,7 @@
--_menubar-gap: var(--space-1); --_menubar-gap: var(--space-1);
--_menubar-radius: var(--radius-md); --_menubar-radius: var(--radius-md);
--_menubar-trigger-px: var(--space-3); --_menubar-trigger-px: var(--space-3);
--_menubar-font-size: var(--font-size-sm); --_menubar-font-size: var(--font-size-md);
/* Concentric nesting (Arq. 6 / shape engine): the in-bar trigger consumes the /* Concentric nesting (Arq. 6 / shape engine): the in-bar trigger consumes the
shared `[data-shape-nest]` rule instead of hand-rolling its own calc — the bar shared `[data-shape-nest]` rule instead of hand-rolling its own calc — the bar
exposes its radius + padding as the nest's outer-radius + gap. */ exposes its radius + padding as the nest's outer-radius + gap. */
@ -50,7 +50,7 @@
--_menubar-gap: calc(var(--space-1) * 0.5); --_menubar-gap: calc(var(--space-1) * 0.5);
--_menubar-radius: var(--radius-sm); --_menubar-radius: var(--radius-sm);
--_menubar-trigger-px: var(--space-2); --_menubar-trigger-px: var(--space-2);
--_menubar-font-size: var(--font-size-xs); --_menubar-font-size: var(--font-size-sm);
} }
[data-menubar][data-size='lg'] { [data-menubar][data-size='lg'] {
@ -59,7 +59,7 @@
--_menubar-gap: var(--space-2); --_menubar-gap: var(--space-2);
--_menubar-radius: var(--radius-lg); --_menubar-radius: var(--radius-lg);
--_menubar-trigger-px: var(--space-4); --_menubar-trigger-px: var(--space-4);
--_menubar-font-size: var(--font-size-md); --_menubar-font-size: var(--font-size-lg);
} }
/* ── Trigger — in-bar menu opener ───────────────────────────────────── */ /* ── Trigger — in-bar menu opener ───────────────────────────────────── */

@ -21,7 +21,7 @@
[data-navigation-menu] { [data-navigation-menu] {
--_navigation-menu-trigger-px: var(--space-3); --_navigation-menu-trigger-px: var(--space-3);
--_navigation-menu-list-gap: var(--space-1); --_navigation-menu-list-gap: var(--space-1);
--_navigation-menu-font-size: var(--font-size-sm); --_navigation-menu-font-size: var(--font-size-md);
--_navigation-menu-radius: var(--radius-md); --_navigation-menu-radius: var(--radius-md);
position: relative; position: relative;
@ -36,14 +36,14 @@
[data-navigation-menu][data-size='sm'] { [data-navigation-menu][data-size='sm'] {
--_navigation-menu-trigger-px: var(--space-2); --_navigation-menu-trigger-px: var(--space-2);
--_navigation-menu-list-gap: 0; --_navigation-menu-list-gap: 0;
--_navigation-menu-font-size: var(--font-size-xs); --_navigation-menu-font-size: var(--font-size-sm);
--_navigation-menu-radius: var(--radius-sm); --_navigation-menu-radius: var(--radius-sm);
} }
[data-navigation-menu][data-size='lg'] { [data-navigation-menu][data-size='lg'] {
--_navigation-menu-trigger-px: var(--space-4); --_navigation-menu-trigger-px: var(--space-4);
--_navigation-menu-list-gap: var(--space-2); --_navigation-menu-list-gap: var(--space-2);
--_navigation-menu-font-size: var(--font-size-md); --_navigation-menu-font-size: var(--font-size-lg);
--_navigation-menu-radius: var(--radius-lg); --_navigation-menu-radius: var(--radius-lg);
} }
@ -288,7 +288,7 @@
block-size: 2px; block-size: 2px;
transform: translateX(var(--navigation-menu-indicator-x, 0px)); transform: translateX(var(--navigation-menu-indicator-x, 0px));
background: var(--color-primary-solid); background: var(--color-primary-solid);
border-radius: 1px; border-radius: var(--radius-full);
opacity: 0; opacity: 0;
transition: transition:
transform var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default),

Loading…
Cancel
Save

Powered by TurnKey Linux.