mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2026-08-08 02:02:33 +00:00
Quiet fields: base.css field baseline, --field tokens, 3:1 border-strong, app-wide migration
This commit is contained in:
@@ -55,7 +55,8 @@
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
/* A passive badge, not a control — subtle border (borders mark function). */
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
}
|
||||
@@ -67,6 +68,10 @@
|
||||
/* Vertical rule separating the utilities from Donate + the theme toggle.
|
||||
(The header buttons themselves are the shared Button primitive — ghost
|
||||
utilities, soft-accent Donate; arch 09 §4.) */
|
||||
/* TODO: --border-strong is the 3:1 component-boundary token (arch 09 §3.3), which
|
||||
makes this passive divider fairly dark; --border would be the semantic choice but
|
||||
is near-invisible on the --layer-01 header in light theme. A separator may want
|
||||
its own subtler value if this reads too heavy. */
|
||||
.headerDivider {
|
||||
flex: 0 0 auto;
|
||||
width: var(--border-width);
|
||||
|
||||
@@ -58,7 +58,8 @@
|
||||
display: inline-block;
|
||||
padding: var(--space-1) var(--space-3);
|
||||
background: var(--layer-01);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
/* A passive key-cap badge, not a control — subtle border (borders mark function). */
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
|
||||
@@ -133,11 +133,6 @@
|
||||
min-width: 0;
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-2);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -152,10 +147,6 @@
|
||||
min-width: 0;
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -165,10 +156,6 @@
|
||||
min-width: 0;
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -179,13 +166,6 @@
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.calcName:focus-visible,
|
||||
.valueInput:focus-visible,
|
||||
.exprInput:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.exprInput[aria-invalid='true'] {
|
||||
border-color: var(--support-error);
|
||||
}
|
||||
@@ -423,20 +403,10 @@
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.dimInput:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.dimInput {
|
||||
width: 100px;
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -484,27 +454,29 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Actionable-hint remedies: each fix is an offer, never forced, so they're
|
||||
low-emphasis ghost buttons — suggestions beside the advice, not commands. */
|
||||
/* Actionable-hint remedies: each fix is an offer, never forced — low-emphasis
|
||||
suggestions beside the advice, not commands. */
|
||||
.warningFixes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* Inline link-style actions (arch 09 §4): content-sized accent text, no box —
|
||||
the smallness is the emphasis level. */
|
||||
.warningFix {
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.warningFix:hover {
|
||||
background: var(--layer-01);
|
||||
background: var(--control-hover-fill, var(--layer-01));
|
||||
}
|
||||
|
||||
.warningFix:focus-visible {
|
||||
@@ -727,7 +699,8 @@
|
||||
.shelfGlyph {
|
||||
min-width: 22px;
|
||||
padding: 1px var(--space-2);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
/* A passive type tag, not a control — subtle border (borders mark function). */
|
||||
border: var(--border-width) solid var(--border);
|
||||
background: var(--layer-01);
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
@@ -877,11 +850,6 @@
|
||||
width: 64px;
|
||||
margin: 0 var(--space-2);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -1032,11 +1000,6 @@
|
||||
width: 200px;
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-2);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1045,11 +1008,6 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.propInput:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* Reserved faceting placeholder (Phase 4) — non-interactive, signals where it'll live. */
|
||||
.facetSlot {
|
||||
display: flex;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
max-width: min(320px, 92vw);
|
||||
padding: var(--space-3);
|
||||
background: var(--layer-01);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@@ -388,11 +388,6 @@
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -402,17 +397,6 @@
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.input:focus-visible,
|
||||
.textarea:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.input::placeholder,
|
||||
.textarea::placeholder {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
.detected {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -37,23 +37,9 @@
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.input:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
.preview {
|
||||
margin: 0;
|
||||
max-height: 240px;
|
||||
|
||||
@@ -21,8 +21,11 @@
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
|
||||
/* Modal chrome sits on --layer-01, so ghost/secondary controls in the header
|
||||
step their hover fill up (arch 09 §4). The body resets to --bg below. */
|
||||
step their hover fill up, and fields step their fill off this surface
|
||||
(arch 09 §4). The body resets to --bg below. */
|
||||
--control-hover-fill: var(--layer-02);
|
||||
--field: var(--field-02);
|
||||
--field-hover: var(--field-hover-02);
|
||||
}
|
||||
|
||||
/* Large: the two-pane managers (Datasets). Definite height so inner panes scroll. */
|
||||
@@ -79,4 +82,6 @@
|
||||
overflow: auto;
|
||||
background: var(--bg);
|
||||
--control-hover-fill: var(--layer-01);
|
||||
--field: var(--field-01);
|
||||
--field-hover: var(--field-hover-01);
|
||||
}
|
||||
|
||||
@@ -8,9 +8,13 @@
|
||||
gap: var(--space-2);
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
/* A trigger is a field, not a button (arch 09 §4): fill one step off the
|
||||
surface, bottom border only. The baseline recipe in base.css reaches only
|
||||
input/textarea elements, so this <button> restates it. */
|
||||
border: none;
|
||||
border-block-end: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
background: var(--field);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
@@ -21,12 +25,9 @@
|
||||
color var(--dur-fast) var(--ease);
|
||||
}
|
||||
|
||||
.trigger:hover:not(:disabled) {
|
||||
background: var(--layer-01);
|
||||
}
|
||||
|
||||
.trigger:hover:not(:disabled),
|
||||
.trigger[aria-expanded='true'] {
|
||||
background: var(--layer-02);
|
||||
background: var(--field-hover);
|
||||
}
|
||||
|
||||
.trigger:disabled {
|
||||
@@ -36,7 +37,7 @@
|
||||
|
||||
.trigger:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 1px;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.triggerLabel {
|
||||
@@ -58,7 +59,7 @@
|
||||
max-width: 320px;
|
||||
padding: var(--space-2);
|
||||
background: var(--layer-01);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
@@ -16,9 +16,12 @@
|
||||
max-width: min(320px, 90vw);
|
||||
padding: var(--space-4);
|
||||
background: var(--layer-01);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
/* The popover surface is --layer-01: fields step their fill off it. */
|
||||
--field: var(--field-02);
|
||||
--field-hover: var(--field-hover-02);
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -81,11 +84,6 @@
|
||||
.text {
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -99,16 +97,6 @@
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.number:focus-visible,
|
||||
.text:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.text::placeholder {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
.reset {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
@@ -97,24 +97,9 @@
|
||||
height: var(--control-height);
|
||||
/* Room for the leading magnifier and the trailing clear button. */
|
||||
padding: 0 32px 0 32px;
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.searchInput::placeholder {
|
||||
color: var(--text-placeholder);
|
||||
}
|
||||
|
||||
.searchInput:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Hide the browser's native search clear so we control the affordance. */
|
||||
.searchInput::-webkit-search-cancel-button {
|
||||
appearance: none;
|
||||
@@ -316,8 +301,11 @@
|
||||
padding: var(--space-4);
|
||||
border-top: var(--border-width) solid var(--border);
|
||||
background: var(--layer-01);
|
||||
/* The panel sits on --layer-01, so its controls' hover fill steps up. */
|
||||
/* The panel sits on --layer-01, so its controls' hover fill and its fields'
|
||||
fill both step off this surface, not the canvas. */
|
||||
--control-hover-fill: var(--layer-02);
|
||||
--field: var(--field-02);
|
||||
--field-hover: var(--field-hover-02);
|
||||
}
|
||||
|
||||
.metaField {
|
||||
@@ -338,15 +326,6 @@
|
||||
.metaComment {
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
/* A field is a layer *on top of* the panel it sits on (Carbon layering,
|
||||
arch 09 §3.2): on the gray `--layer-01` panel the field goes white with a
|
||||
strong border — matching the search input above — rather than a darker gray,
|
||||
which stacked three muddy grays. */
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -362,13 +341,6 @@
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.metaName:focus-visible,
|
||||
.metaComment:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Read-only Created / Modified, as compact label→value rows. */
|
||||
.metaTimes {
|
||||
margin: 0;
|
||||
|
||||
@@ -17,9 +17,12 @@
|
||||
gap: var(--space-1);
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
/* A trigger is a field, not a button (arch 09 §4) — same recipe as the
|
||||
SelectControl trigger and the search input it sits beside. */
|
||||
border: none;
|
||||
border-block-end: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: transparent;
|
||||
background: var(--field);
|
||||
color: var(--text-secondary);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
@@ -30,19 +33,15 @@
|
||||
color var(--dur-fast) var(--ease);
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
background: var(--layer-01);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.trigger:hover,
|
||||
.trigger[aria-expanded='true'] {
|
||||
background: var(--layer-02);
|
||||
background: var(--field-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.trigger:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: 1px;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* The disclosed panel — portaled to <body>, positioned fixed (mirrors the
|
||||
@@ -53,7 +52,7 @@
|
||||
min-width: 160px;
|
||||
padding: var(--space-2);
|
||||
background: var(--layer-01);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border: var(--border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@@ -121,19 +121,9 @@
|
||||
width: 100%;
|
||||
height: var(--control-height);
|
||||
padding: 0 var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.input:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.toolbarEnd {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
@@ -177,21 +167,12 @@
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
padding: var(--space-3);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.configText:focus-visible {
|
||||
outline: 2px solid var(--focus);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* The gallery wraps fixed-size swatch cards; scrolls when they overflow. */
|
||||
.gallery {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user