feat(words): border-light chrome restyle (declutter)

The editor read as "poor" largely from border clutter — hairlines
everywhere. Strip incidental borders and let tonal surfaces + spacing
carry the structure:

- Toolbar: drop the bottom hairline (its surface tone separates it).
- Drawer: drop the seam line (both sides) — tonal separation only.
- Drawer panels: drop inter-panel divider lines (scope accent + spacing).
- Code block: drop the outline — the overlay surface fill defines it.
- Table: no outer box, no vertical lines — light horizontal row rules
  only + airier cells.
- Drawer insert items: borderless soft tonal tiles (hover deepens with
  the accent) instead of bordered boxes.

Kept the intentional lines (quote accent bar, the silver margin rule).
Verified in browser: no console errors; table is horizontal-rule-only,
insert tiles borderless.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 8afe2728bb
commit 1bb16ff636

@ -187,7 +187,8 @@
block-size: 100%;
min-block-size: 100%;
padding: 0;
border-inline-start: var(--words-border-width) solid var(--words-toolbar-border);
/* Border-light: no seam line — the drawer's surface tone separates
it from the raised content. */
background: var(--words-toolbar-bg);
color: var(--words-command-color);
font-size: var(--words-status-font-size);
@ -195,13 +196,6 @@
transition: inline-size 160ms ease;
}
/* Left-side drawer: the visual seam goes on the inline-end edge
(toward the editor content) instead of inline-start. */
[data-words-drawer][data-side='left'] {
border-inline-start: 0;
border-inline-end: var(--words-border-width) solid var(--words-toolbar-border);
}
[data-words-drawer]:not([data-open]) {
inline-size: 2.25rem;
max-inline-size: 2.25rem;
@ -283,10 +277,12 @@
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.55rem;
border: var(--words-border-width) solid var(--words-toolbar-border);
padding: 0.5rem 0.6rem;
/* Border-light: soft tonal tiles, no outline. The faint fill lifts
them off the drawer surface; hover deepens with the accent. */
border: 0;
border-radius: var(--words-command-radius);
background: var(--words-toolbar-bg);
background: color-mix(in srgb, var(--words-command-color) 6%, transparent);
color: var(--words-command-color);
font: inherit;
font-size: var(--words-font-size-sm);
@ -294,13 +290,11 @@
text-align: start;
transition:
background-color 120ms ease,
border-color 120ms ease,
color 120ms ease;
}
[data-words-drawer-insert-item]:hover {
border-color: var(--_words-accent-border);
background: color-mix(in srgb, var(--_words-accent-solid) 8%, transparent);
background: color-mix(in srgb, var(--_words-accent-solid) 14%, transparent);
color: var(--_words-accent-text);
}
@ -356,12 +350,8 @@
[data-words-drawer-panel] {
display: flex;
flex-direction: column;
border-block-end: var(--words-border-width) solid
color-mix(in srgb, var(--words-toolbar-border) 60%, transparent);
}
[data-words-drawer-panel]:last-child {
border-block-end: 0;
/* Border-light: panels are separated by the scope-accent edge +
spacing, not a grey divider hairline. */
}
[data-words-drawer-panel-header] {
@ -1105,7 +1095,8 @@
padding-block: var(--_words-toolbar-py);
padding-inline: var(--_words-toolbar-px);
border: 0;
border-block-end: var(--words-border-width) solid var(--words-toolbar-border);
/* Border-light: no bottom hairline — the toolbar's own surface tone
(surface-default vs the raised content) separates it. */
border-radius: 0;
background: var(--words-toolbar-bg);
box-shadow: none;
@ -1886,8 +1877,8 @@
overflow-x: auto;
padding-block: calc(var(--words-quote-px) * 1.25);
padding-inline: calc(var(--words-quote-px) * 1.25);
border: var(--words-border-width) solid
color-mix(in srgb, var(--_words-accent-border) 60%, var(--words-toolbar-border));
/* Border-light: the overlay surface fill defines the code block,
no outline. */
border-radius: var(--words-code-radius);
background: var(--words-code-bg);
color: var(--words-code-color);
@ -1974,16 +1965,21 @@
border-collapse: collapse;
table-layout: fixed;
overflow: hidden;
border: var(--words-border-width) solid var(--words-toolbar-border);
/* Border-light: no outer box. Structure comes from the header tint +
light horizontal row rules + cell padding. */
border-radius: var(--words-code-radius);
background: var(--words-bg);
}
[data-words-content] :where(td, th) {
min-inline-size: calc(var(--_words-button-size) * 2);
padding-block: var(--words-code-py);
padding-inline: var(--words-command-px);
border: var(--words-border-width) solid var(--words-toolbar-border);
/* Airier cells — space carries the grid now that the lines are gone. */
padding-block: var(--space-1-5);
padding-inline: var(--space-3);
/* Border-light: a single light horizontal row rule, no verticals. */
border: 0;
border-block-end: var(--words-border-width) solid
color-mix(in srgb, var(--words-toolbar-border) 55%, transparent);
vertical-align: top;
transition: background-color 120ms ease;
}

Loading…
Cancel
Save

Powered by TurnKey Linux.