SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): unify accent tokens and transparent-idle field colors

Browse source 
- 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
This commit is contained in:
Danila Poyarkov 2026-07-18 07:24:50 +03:00
parent dd3161e44c
commit a170a780da
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/app.css
View file

@ -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;