diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 4214d1ced..71c6d09c9 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -316,7 +316,7 @@ background: var(--words-toolbar-bg); color: var(--words-command-color); font: inherit; - font-size: 0.8rem; + font-size: var(--words-font-size-sm); cursor: pointer; text-align: start; transition: @@ -343,7 +343,7 @@ font-weight: var(--words-strong-font-weight); letter-spacing: 0.02em; text-transform: uppercase; - font-size: 0.7rem; + font-size: var(--words-status-font-size); color: var(--words-status-color); } @@ -401,7 +401,7 @@ border: 0; background: transparent; color: var(--words-status-color); - font-size: 0.7rem; + font-size: var(--words-status-font-size); font-weight: var(--words-strong-font-weight); letter-spacing: 0.04em; text-transform: uppercase; @@ -498,7 +498,7 @@ [data-words-drawer-section-subtitle] { color: var(--words-status-color); - font-size: 0.65rem; + font-size: var(--words-status-font-size); font-weight: var(--words-strong-font-weight); letter-spacing: 0.04em; text-transform: uppercase; @@ -527,7 +527,7 @@ min-block-size: auto; white-space: normal; line-height: 1.35; - color: var(--words-toolbar-color); + color: var(--words-command-color); } [data-editable][data-words-drawer-editable] [data-editable-preview][data-placeholder-shown] { @@ -560,8 +560,8 @@ [data-editable][data-words-drawer-editable] [data-editable-edit-trigger]:hover { opacity: 1; - background: var(--words-command-hover-bg); - color: var(--words-command-active-color); + background: var(--words-command-bg-hover); + color: var(--words-command-color-hover); } /* Edit mode: stack vertically. Textarea fills the row, action chips @@ -583,7 +583,7 @@ border: var(--words-border-width) solid var(--words-toolbar-border); border-radius: var(--words-command-radius); background: var(--words-bg, var(--words-toolbar-bg)); - color: var(--words-toolbar-color); + color: var(--words-command-color); font: inherit; line-height: 1.35; outline: none; @@ -641,7 +641,7 @@ gap: 0.2rem; margin-inline-start: 0.4rem; color: var(--words-status-color); - font-size: 0.65rem; + font-size: var(--words-status-font-size); font-weight: normal; letter-spacing: 0; text-transform: none; @@ -711,7 +711,7 @@ border-radius: 999px; background: transparent; color: var(--words-status-color); - font-size: 0.9rem; + font-size: var(--words-font-size-md); line-height: 1; cursor: pointer; } @@ -965,7 +965,7 @@ align-items: baseline; gap: var(--words-command-gap); margin: 0 0 var(--words-toolbar-py-sm) 0; - font-size: 0.7rem; + font-size: var(--words-status-font-size); font-weight: var(--words-strong-font-weight); letter-spacing: 0.04em; text-transform: uppercase; @@ -982,14 +982,14 @@ border-radius: 999px; background: var(--_words-accent-solid); color: var(--_words-accent-on); - font-size: 0.65rem; + font-size: var(--words-status-font-size); } [data-words-drawer-empty] { margin: 0; color: var(--words-status-color); font-style: italic; - font-size: 0.8rem; + font-size: var(--words-font-size-sm); } [data-words-drawer-empty][data-tone='affirm'] { @@ -1011,7 +1011,7 @@ align-items: baseline; gap: 0.4rem; padding-inline-start: 0; - font-size: 0.8rem; + font-size: var(--words-font-size-sm); line-height: 1.3; } @@ -1027,7 +1027,7 @@ flex-shrink: 0; min-inline-size: 1.5rem; color: var(--_words-accent-text); - font-size: 0.65rem; + font-size: var(--words-status-font-size); font-weight: var(--words-strong-font-weight); letter-spacing: 0.04em; } @@ -1050,13 +1050,13 @@ justify-content: space-between; align-items: baseline; gap: 0.5rem; - font-size: 0.8rem; + font-size: var(--words-font-size-sm); } [data-words-drawer-stats] dt { margin: 0; color: var(--words-status-color); - font-size: 0.7rem; + font-size: var(--words-status-font-size); text-transform: uppercase; letter-spacing: 0.04em; } @@ -1080,7 +1080,7 @@ padding-inline: 0.5rem; border-radius: var(--words-command-radius); background: color-mix(in srgb, var(--words-toolbar-border) 30%, transparent); - font-size: 0.75rem; + font-size: var(--words-font-size-sm); line-height: 1.35; } @@ -1109,7 +1109,7 @@ border-radius: var(--words-command-radius); background: var(--words-bg); color: var(--words-command-color); - font-size: 0.75rem; + font-size: var(--words-font-size-sm); font-weight: var(--words-strong-font-weight); cursor: pointer; transition: @@ -1152,7 +1152,7 @@ border-radius: var(--words-command-radius); background: color-mix(in srgb, var(--words-toolbar-border) 30%, transparent); color: var(--words-command-color); - font-size: 0.75rem; + font-size: var(--words-font-size-sm); line-height: 1.35; word-break: break-all; } diff --git a/src/uix/langs/components/words.ts b/src/uix/langs/components/words.ts index f7365a936..94c6e3580 100644 --- a/src/uix/langs/components/words.ts +++ b/src/uix/langs/components/words.ts @@ -36,5 +36,9 @@ export const wordsLangs = { status: { es: 'Estado del editor', en: 'Editor status' + }, + drawer: { + es: 'Cajón companion del editor', + en: 'Editor companion drawer' } } satisfies LangNode; diff --git a/src/uix/morfo/components/words.ts b/src/uix/morfo/components/words.ts index b3f09dd85..aa50637eb 100644 --- a/src/uix/morfo/components/words.ts +++ b/src/uix/morfo/components/words.ts @@ -261,6 +261,13 @@ export const wordsMorfo = { values: ['pending', 'error'], severity: 'optional' }, + /** + * Block-selection marker. The engine stamps this on the + * currently atomic-selected block (today only `image` since + * other block types receive a text caret). Eidos selectors + * use it to paint the accent outline + open the float bar. + */ + { attr: 'data-words-block-selected', severity: 'optional' }, { attr: 'data-words-cell-header', severity: 'optional' }, { attr: 'data-words-cell-align',