diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index ca0285875..49a70b73d 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -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; }