From a170a780da0b3a77a88434fe562e79477e173d00 Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Sat, 18 Jul 2026 07:24:50 +0300 Subject: [PATCH 01/12] feat(ui): unify accent tokens and transparent-idle field colors - Unify all blues to a single accent: panel-focus and panel-selected now derive from the brand accent instead of one-off #4c8dff / #0d64d8 - Make panel-field transparent at idle (hover/focus fill) for a quieter, Figma-grade properties panel; panel-field-hover becomes the intent fill - Denser controls: --spacing-control 26px -> 24px, radius-panel 4px -> 5px - Neutralize panel-selected-muted (de-blued) for inactive-pane selection - Mirror the same structure in the light theme --- src/app.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/app.css b/src/app.css index da781610b..c28c2fb55 100644 --- a/src/app.css +++ b/src/app.css @@ -29,26 +29,26 @@ } @theme { - --spacing-control: 26px; + --spacing-control: 24px; --spacing-panel-x: 12px; --spacing-panel-y: 8px; --spacing-panel: 6px; --spacing-panel-rail: 26px; --spacing-panel-icon: 14px; - --radius-panel: 4px; + --radius-panel: 5px; --color-panel: #2a2a2a; --color-panel-secondary: #242424; - --color-panel-field: #333333; - --color-panel-field-hover: #3b3b3b; - --color-panel-focus: #4c8dff; - --color-panel-selected: #0d64d8; - --color-panel-selected-muted: #344054; + --color-panel-field: transparent; + --color-panel-field-hover: #383838; + --color-panel-focus: #3b82f6; + --color-panel-selected: #2f6fdd; + --color-panel-selected-muted: #3d4450; --color-canvas: #1e1e1e; --color-border: #3a3a3a; --color-hover: #353535; --color-accent: #3b82f6; - --color-surface: #e0e0e0; + --color-surface: #f0f0f0; --color-muted: #888888; --color-input: #1e1e1e; --color-component: #9747ff; @@ -76,16 +76,16 @@ html[data-theme='light'] { --color-panel: #ffffff; --color-panel-secondary: #f7f8fa; - --color-panel-field: #f0f1f3; - --color-panel-field-hover: #e7e9ed; + --color-panel-field: transparent; + --color-panel-field-hover: #eceef1; --color-panel-focus: #2563eb; - --color-panel-selected: #dbeafe; + --color-panel-selected: #2563eb; --color-panel-selected-muted: #e5e7eb; --color-canvas: #f3f4f6; --color-border: #d8dce3; --color-hover: #eef1f5; --color-accent: #2563eb; - --color-surface: #202124; + --color-surface: #1f2328; --color-muted: #6b7280; --color-input: #ffffff; --color-component: #7c3aed; From 828a1a7ae4ff8c54c32f927a92bbe1cfcdf1766a Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Sat, 18 Jul 2026 07:37:28 +0300 Subject: [PATCH 02/12] refactor(ui): single field recipe and 11px panel typography - input tone=default now uses panelFieldBase so every input shares the transparent-idle / hover-fill / accent-focus recipe (fixes divergent black inputs with stuck accent border, e.g. AI provider setup) - Normalize field/select/number-field text to 11px; paint-field uses the shared transparent field recipe instead of bg-input + undefined shadow - NumberField root sets 11px so the container no longer inherits body 13px --- src/theme/input.ts | 7 +++---- src/theme/number-field.ts | 6 +++--- src/theme/paint-field.ts | 2 +- src/theme/select.ts | 4 ++-- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/theme/input.ts b/src/theme/input.ts index 75936a978..9012b9db1 100644 --- a/src/theme/input.ts +++ b/src/theme/input.ts @@ -4,13 +4,12 @@ export default { base: 'w-full tabular-nums', variants: { tone: { - default: - 'rounded border border-border bg-input text-surface outline-none focus:border-accent', + default: panelFieldBase, panel: panelFieldBase }, size: { - sm: 'px-2 py-1 text-[11px]', - md: 'px-2 py-1 text-xs' + sm: 'px-2 text-[11px]', + md: 'px-2 text-[11px]' }, state: panelFieldState }, diff --git a/src/theme/number-field.ts b/src/theme/number-field.ts index fd0c94256..fdb948c0f 100644 --- a/src/theme/number-field.ts +++ b/src/theme/number-field.ts @@ -4,13 +4,13 @@ const numberFieldTheme = { slots: { root: [ panelFieldBase, - 'group flex min-h-control flex-1 cursor-ew-resize items-center tabular-nums data-[disabled]:cursor-auto data-[editing]:cursor-auto' + 'group flex min-h-control flex-1 cursor-ew-resize items-center text-[11px] tabular-nums data-[disabled]:cursor-auto data-[editing]:cursor-auto' ], leading: 'flex shrink-0 items-center justify-center self-stretch px-[5px] text-muted select-none [&>*]:pointer-events-none', field: - 'min-w-0 flex-1 cursor-text border-none bg-transparent pr-1.5 font-[inherit] text-xs text-surface outline-none', - display: 'flex flex-1 items-center truncate overflow-hidden text-xs select-none', + 'min-w-0 flex-1 cursor-text border-none bg-transparent pr-1.5 font-[inherit] text-[11px] text-surface outline-none', + display: 'flex flex-1 items-center truncate overflow-hidden text-[11px] select-none', mixed: 'flex-1 text-muted', value: 'flex-1 text-surface', suffix: 'shrink-0 pr-1.5 text-muted' diff --git a/src/theme/paint-field.ts b/src/theme/paint-field.ts index f9db9d288..e69573608 100644 --- a/src/theme/paint-field.ts +++ b/src/theme/paint-field.ts @@ -1,6 +1,6 @@ export default { slots: { - root: 'flex h-control min-w-0 flex-1 items-center overflow-hidden rounded-panel border border-border bg-input shadow-panel-field', + root: 'flex h-control min-w-0 flex-1 items-center overflow-hidden rounded-panel border border-transparent bg-panel-field text-[11px] transition-colors hover:bg-panel-field-hover focus-within:border-panel-focus focus-within:bg-panel-field-hover', preview: 'flex shrink-0 items-center pl-0.5', value: 'flex min-w-0 flex-1 items-center px-1.5', divider: 'h-4 w-px shrink-0 bg-border', diff --git a/src/theme/select.ts b/src/theme/select.ts index 6f3bc4e26..2ed87eabd 100644 --- a/src/theme/select.ts +++ b/src/theme/select.ts @@ -2,10 +2,10 @@ import { panelFieldBase } from './panel/field' export default { slots: { - trigger: [panelFieldBase, 'flex items-center justify-between'], + trigger: [panelFieldBase, 'flex items-center justify-between text-[11px]'], value: 'min-w-0 flex-1 truncate text-left', content: - 'z-[110] min-w-[var(--reka-select-trigger-width)] overflow-hidden border border-border bg-panel', + 'z-[110] min-w-[var(--reka-select-trigger-width)] overflow-hidden border border-border bg-panel text-[11px]', viewport: '', item: 'relative flex cursor-pointer items-center text-surface outline-none select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-hover data-[disabled]:opacity-50' }, From 55965ac556b4f500a076762b67edf52c4760f357 Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Sat, 18 Jul 2026 07:40:06 +0300 Subject: [PATCH 03/12] feat(ui): confident selection and consistent panel headers - Layer/page rows use the unified accent selection, 5px radius, airier 1.5 padding, and 11px labels - Panel headers (Layers, Assets, Pages) drop the uppercase tracked style for a single 11px/semibold/surface dialect matching section headers - Segmented control md size uses 11px to match the rest of the panel --- src/components/AssetsPanel.vue | 2 +- src/components/LayersPanel.vue | 2 +- src/theme/layer-tree.ts | 4 ++-- src/theme/page-list.ts | 8 ++++---- src/theme/segmented-control.ts | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/AssetsPanel.vue b/src/components/AssetsPanel.vue index 22a417733..7a62fff1f 100644 --- a/src/components/AssetsPanel.vue +++ b/src/components/AssetsPanel.vue @@ -171,7 +171,7 @@ function insertSelectedAsset() {