oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2026-08-08 02:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Quiet fields: base.css field baseline, --field tokens, 3:1 border-strong, app-wide migration

Browse Source
This commit is contained in:
Oleh Omelchenko
2026-06-13 00:06:33 +03:00
parent ebdeac7747
commit e0806bf3db
19 changed files with 218 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture/visual-specimen.html
+25 -10
View File
@@ -70,7 +70,12 @@
--layer-01: #f4f4f4;
--layer-02: #e0e0e0;
--border: #e0e0e0;
--border-strong: #c6c6c6;
/* 3:1 non-text contrast on canvas and --layer-01 (WCAG 1.4.11). */
--border-strong: #8d8d8d;
--field-01: #f4f4f4;
--field-02: #ffffff;
--field-hover-01: #e8e8e8;
--field-hover-02: #e8e8e8;
--text: #161616;
--text-secondary: #525252;
--text-placeholder: #a8a8a8;
@@ -82,7 +87,11 @@
--layer-01: #262626;
--layer-02: #393939;
--border: #393939;
--border-strong: #525252;
--border-strong: #6f6f6f;
--field-01: #262626;
--field-02: #393939;
--field-hover-01: #333333;
--field-hover-02: #474747;
--text: #f4f4f4;
--text-secondary: #a8a8a8;
--text-placeholder: #6f6f6f;
@@ -494,17 +503,18 @@
font-size: 12px;
color: var(--text-secondary);
}
/* Field-on-layer (arch 09 §3.3): a field is a layer above its surface, so it
steps toward --bg (white) with a --border-strong outline — on the canvas
and on a gray panel alike — never a darker-gray fill. */
/* The quiet field (arch 09 §3.3 + §4): a fill one step off its surface plus
a bottom border only — --field-01 on the canvas, --field-02 on a
--layer-01 panel (panels set --field: var(--field-02)). */
.input,
.select,
.textarea {
font: inherit;
font-size: 14px;
color: var(--text);
background: var(--bg);
border: var(--border-width) solid var(--border-strong);
background: var(--field, var(--field-01));
border: none;
border-block-end: var(--border-width) solid var(--border-strong);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
}
@@ -516,8 +526,7 @@
.select:focus,
.textarea:focus {
outline: 2px solid var(--focus);
outline-offset: -1px;
border-color: var(--accent);
outline-offset: -2px;
}
.textarea {
font-family: var(--font-mono);
@@ -597,7 +606,8 @@
gap: var(--space-2);
font-size: 12px;
padding: var(--space-1) var(--space-3);
border: var(--border-width) solid var(--border-strong);
/* A passive tag, not a control — subtle border (borders mark function). */
border: var(--border-width) solid var(--border);
}
.dot {
width: 8px;
@@ -693,6 +703,9 @@
border: var(--border-width) solid var(--border);
padding: var(--space-6);
max-width: 320px;
/* Elevated surface: fields on it step their fill off --layer-01 (arch 09 §3.3). */
--field: var(--field-02);
--field-hover: var(--field-hover-02);
}
.panel h4 {
margin-bottom: var(--space-4);
@@ -1667,6 +1680,8 @@
'--layer-02',
'--border',
'--border-strong',
'--field-01',
'--field-02',
'--text',
'--text-secondary',
'--text-placeholder',