mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2026-08-08 02:02:33 +00:00
Refine header emphasis, field-on-layer treatment, and narrow-pane control collapse
This commit is contained in:
@@ -87,6 +87,13 @@
|
||||
--on-status: #161616;
|
||||
}
|
||||
|
||||
/* Soft accent — derived wash (mirrors styles/tokens.css). References --accent
|
||||
+ --bg, so it follows whatever accent/theme is active. */
|
||||
[data-theme] {
|
||||
--accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
|
||||
--accent-soft-hover: color-mix(in srgb, var(--accent) 20%, var(--bg));
|
||||
}
|
||||
|
||||
/* --- Accent: the FREE, swappable layer (theme-aware). Deep teal is the
|
||||
default; see styles/tokens.css for the shipped source of truth. --- */
|
||||
[data-accent='teal'] {
|
||||
@@ -436,6 +443,29 @@
|
||||
.btn-ghost:hover {
|
||||
background: var(--layer-01);
|
||||
}
|
||||
/* Header utility ghost: text-coloured, recedes; hover steps up one layer. */
|
||||
.btn-ghost-util {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.btn-ghost-util:hover {
|
||||
background: var(--layer-02);
|
||||
}
|
||||
/* Soft-accent: a low-emphasis accent wash (Donate) — noticed, not shouting. */
|
||||
.btn-soft {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
.btn-soft:hover {
|
||||
background: var(--accent-soft-hover);
|
||||
}
|
||||
.hdr-divider {
|
||||
width: var(--border-width);
|
||||
height: 20px;
|
||||
background: var(--border-strong);
|
||||
margin: 0 var(--space-2);
|
||||
}
|
||||
.btn-danger {
|
||||
background: var(--support-error);
|
||||
color: var(--on-status);
|
||||
@@ -459,13 +489,16 @@
|
||||
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. */
|
||||
.input,
|
||||
.select,
|
||||
.textarea {
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
background: var(--layer-01);
|
||||
background: var(--bg);
|
||||
border: var(--border-width) solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
@@ -930,6 +963,26 @@
|
||||
<p class="cap" style="margin-top: var(--space-4)">
|
||||
Tab through to see the focus ring (2px accent outline).
|
||||
</p>
|
||||
|
||||
<h3 style="margin-top: var(--space-6)">Emphasis hierarchy — a header cluster</h3>
|
||||
<p class="cap" style="margin-bottom: var(--space-4)">
|
||||
Utilities go <strong>ghost</strong> (icon + text, borderless) so they recede;
|
||||
a divider sets off <strong>Donate</strong> on a <strong>soft-accent</strong> wash
|
||||
— one low-key solicitation, no border. (Carbon: one high-emphasis action per
|
||||
region; utilities at low emphasis.)
|
||||
</p>
|
||||
<div class="row" style="align-items: center">
|
||||
<button class="btn btn-ghost-util sm">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="8" y="18" width="4" height="2"/><rect x="14" y="18" width="4" height="2"/><rect x="8" y="14" width="4" height="2"/><rect x="14" y="22" width="4" height="2"/><rect x="20" y="14" width="4" height="2"/><rect x="20" y="22" width="4" height="2"/><path d="M27,3H5A2.0025,2.0025,0,0,0,3,5V27a2.0025,2.0025,0,0,0,2,2H27a2.0025,2.0025,0,0,0,2-2V5A2.0025,2.0025,0,0,0,27,3Zm0,2,0,4H5V5ZM5,27V11H27l0,16Z"/></svg>Datasets</button>
|
||||
<button class="btn btn-ghost-util sm">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z"/></svg>Import</button>
|
||||
<button class="btn btn-ghost-util sm">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z"/></svg>Export</button>
|
||||
<button class="btn btn-ghost-util sm">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M17,22V14H13v2h2v6H12v2h8V22Z"/><path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z"/><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"/></svg>About</button>
|
||||
<span class="hdr-divider"></span>
|
||||
<button class="btn btn-soft sm">Donate</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FIELDS -->
|
||||
@@ -1027,10 +1080,48 @@
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="12" y="12" width="2" height="12"/><rect x="18" y="12" width="2" height="12"/><path d="M4,6V8H6V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V8h2V6ZM8,28V8H24V28Z"/><rect x="12" y="2" width="8" height="2"/></svg>
|
||||
<span class="cap">delete</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z"/></svg>
|
||||
<span class="cap">import</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z"/><path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z"/></svg>
|
||||
<span class="cap">export</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M17,22V14H13v2h2v6H12v2h8V22Z"/><path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z"/><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"/></svg>
|
||||
<span class="cap">info</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M18,28A12,12,0,1,0,6,16v6.2L2.41,18.59,1,20l6,6,6-6L11.59,18.59,8,22.2V16A10,10,0,1,1,18,26Z"/></svg>
|
||||
<span class="cap">revert</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"/></svg>
|
||||
<span class="cap">search</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><path d="M27,16.76c0-.25,0-.5,0-.76s0-.51,0-.77l1.92-1.68A2,2,0,0,0,29.3,11L26.94,7a2,2,0,0,0-1.73-1,2,2,0,0,0-.64.1l-2.43.82a11.35,11.35,0,0,0-1.31-.75l-.51-2.52a2,2,0,0,0-2-1.61H13.64a2,2,0,0,0-2,1.61l-.51,2.52a11.48,11.48,0,0,0-1.32.75L7.43,6.06A2,2,0,0,0,6.79,6,2,2,0,0,0,5.06,7L2.7,11a2,2,0,0,0,.41,2.51L5,15.24c0,.25,0,.5,0,.76s0,.51,0,.77L3.11,18.45A2,2,0,0,0,2.7,21L5.06,25a2,2,0,0,0,1.73,1,2,2,0,0,0,.64-.1l2.43-.82a11.35,11.35,0,0,0,1.31.75l.51,2.52a2,2,0,0,0,2,1.61h4.72a2,2,0,0,0,2-1.61l.51-2.52a11.48,11.48,0,0,0,1.32-.75l2.42.82a2,2,0,0,0,.64.1,2,2,0,0,0,1.73-1L29.3,21a2,2,0,0,0-.41-2.51ZM25.21,24l-3.43-1.16a8.86,8.86,0,0,1-2.71,1.57L18.36,28H13.64l-.71-3.55a9.36,9.36,0,0,1-2.7-1.57L6.79,24,4.43,20l2.72-2.4a8.9,8.9,0,0,1,0-3.13L4.43,12,6.79,8l3.43,1.16a8.86,8.86,0,0,1,2.71-1.57L13.64,4h4.72l.71,3.55a9.36,9.36,0,0,1,2.7,1.57L25.21,8,27.57,12l-2.72,2.4a8.9,8.9,0,0,1,0,3.13L27.57,20Z"/><path d="M16,22a6,6,0,1,1,6-6A5.94,5.94,0,0,1,16,22Zm0-10a3.91,3.91,0,0,0-4,4,3.91,3.91,0,0,0,4,4,3.91,3.91,0,0,0,4-4A3.91,3.91,0,0,0,16,12Z"/></svg>
|
||||
<span class="cap">settings</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="4" y="6" width="24" height="2"/><rect x="4" y="24" width="24" height="2"/><rect x="4" y="6" width="2" height="20"/><rect x="26" y="6" width="2" height="20"/><rect x="7" y="10" width="4" height="12"/></svg>
|
||||
<span class="cap">pane-library</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="4" y="6" width="24" height="2"/><rect x="4" y="24" width="24" height="2"/><rect x="4" y="6" width="2" height="20"/><rect x="26" y="6" width="2" height="20"/><rect x="14" y="10" width="4" height="12"/></svg>
|
||||
<span class="cap">pane-editor</span>
|
||||
</span>
|
||||
<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-secondary)">
|
||||
<svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor"><rect x="4" y="6" width="24" height="2"/><rect x="4" y="24" width="24" height="2"/><rect x="4" y="6" width="2" height="20"/><rect x="26" y="6" width="2" height="20"/><rect x="21" y="10" width="4" height="12"/></svg>
|
||||
<span class="cap">pane-preview</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="cap" style="margin-top: var(--space-6)">
|
||||
In context: icon + text is the default; icon-only is the universal/destructive
|
||||
exception. ✕ means close only — delete is the trash glyph.
|
||||
The full Core + pane-toggle set (arch 09 §5.2); the four status glyphs appear,
|
||||
coloured, in the Toasts section below. In context: icon + text is the default;
|
||||
icon-only is the universal/affordance/destructive exception. ✕ means close only —
|
||||
delete is the trash glyph.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user