@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/LiquidEditor/LiquidEditor.module.scss

@@ -0,0 +1,339 @@
+@use '../../styles/mixins' as *;
+@use './LiquidEditor.tokens';
+
+// ─── Root container ────────────────────────────────────────────────────────────
+// `width: 100%` is the intrinsic-fill pattern permitted by Rule 4.
+// `position` is not set here — the parent owns positioning.
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: var(--border-width) solid var(--liquid-editor-border);
+  border-radius: var(--liquid-editor-radius);
+  background: var(--liquid-editor-bg);
+  overflow: hidden;
+  font-family: var(--liquid-editor-font);
+  font-size: var(--liquid-editor-font-size);
+  color: var(--liquid-editor-fg);
+}
+
+.root.invalid {
+  border-color: var(--color-danger);
+}
+
+.root.disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+// ─── Layout variant: side-by-side preview ──────────────────────────────────────
+.splitRight {
+  flex-direction: row;
+}
+
+// In the side-by-side (`previewPlacement="right"`) layout the editor chrome
+// (toolbar + body + footer) is wrapped in this column so the preview pane sits
+// beside it. Rule 4 note: `flex: 1` is INTERNAL layout (this column fills the
+// row next to the preview) — the public component boundary is .root.
+.editorColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+// ─── Focus ring on the outer shell (drawn on .root so it encloses gutter too) ─
+.root:focus-within {
+  border-color: var(--liquid-editor-border-focus);
+
+  @include focus-ring(var(--liquid-editor-ring));
+}
+
+// ─── Toolbar ───────────────────────────────────────────────────────────────────
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  background: var(--liquid-editor-toolbar-bg);
+  border-bottom: var(--border-width) solid var(--liquid-editor-border);
+}
+
+// Rule 4 note: `flex: 1` on .toolbarSpacer is an INTERNAL layout spacer that
+// pushes adjacent toolbar controls apart — this is the component's own internal
+// structure, not a layout property on the component boundary.
+.toolbarSpacer {
+  flex: 1;
+}
+
+// ─── Editor body (gutter + editorStack side by side) ───────────────────────────
+.body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+}
+
+// ─── Line-number gutter ────────────────────────────────────────────────────────
+.gutter {
+  flex: none;
+  padding: var(--space-2);
+  text-align: right;
+  color: var(--liquid-editor-gutter-fg);
+  background: var(--liquid-editor-gutter-bg);
+  border-right: var(--border-width) solid var(--liquid-editor-border);
+  user-select: none;
+  overflow: hidden;
+  white-space: pre;
+  line-height: var(--line-height-normal);
+}
+
+// ─── Editor stack: highlight <pre> underneath, <textarea> on top ──────────────
+// `position: relative` anchors the absolutely-positioned .highlight child.
+// Rule 4 allows `position: relative` when it is anchoring an internal child.
+.editorStack {
+  position: relative;
+
+  // Rule 4 note: `flex: 1` here is an internal-layout property (fill the body
+  // row) — the public component root is .root, not .editorStack.
+  flex: 1;
+  min-width: 0;
+}
+
+// Shared font/padding metrics so that glyphs in the highlight <pre> and the
+// transparent <textarea> align 1:1 at every character position.
+%editor-metrics {
+  /* stylelint-disable-next-line property-disallowed-list -- neutralizing UA <pre> default margin, not component layout */
+  margin: 0;
+  padding: var(--space-2);
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--line-height-normal);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  tab-size: 2;
+}
+
+// ─── Highlight layer (<pre> underneath, aria-hidden) ──────────────────────────
+.highlight {
+  @extend %editor-metrics;
+
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  color: var(--liquid-editor-fg);
+  overflow: auto;
+}
+
+// ─── Transparent textarea overlaid on the highlight <pre> ─────────────────────
+// `color: transparent` makes typed text invisible (the highlight layer shows it).
+// `caret-color` restores the cursor so users know where they are typing.
+.textarea {
+  @extend %editor-metrics;
+
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--liquid-editor-fg);
+  outline: none;
+}
+
+.textarea::selection {
+  background: var(--liquid-editor-token-variable-bg);
+}
+
+// The textarea text is transparent, so the placeholder (which inherits `color`)
+// would be invisible too — restore a subtle color explicitly. Own token as of
+// #511 (was --liquid-editor-gutter-fg) so retuning the gutter for its own
+// surface can't silently retone this one too.
+.textarea::placeholder {
+  color: var(--liquid-editor-placeholder-fg);
+}
+
+.textarea:focus-visible {
+  // Suppress the native focus ring — .root:focus-within draws the ring instead.
+  outline: none;
+}
+
+// ─── Syntax-highlight token colours ───────────────────────────────────────────
+// These classes are applied to <span> elements inside the .highlight <pre>.
+
+// Delimiter: {{ }} {%  %} — dim so the variable stands out more
+.delimiter {
+  color: var(--liquid-editor-token-tag);
+  opacity: var(--opacity-muted);
+}
+
+.variable {
+  color: var(--liquid-editor-token-variable);
+}
+
+.filter {
+  color: var(--liquid-editor-token-filter);
+}
+
+.string {
+  color: var(--liquid-editor-token-string);
+}
+
+.number {
+  color: var(--liquid-editor-token-number);
+}
+
+.keyword {
+  color: var(--liquid-editor-token-keyword);
+  font-weight: var(--font-weight-medium);
+}
+
+.operator {
+  color: var(--liquid-editor-token-tag);
+}
+
+.unknown {
+  color: var(--liquid-editor-token-unknown);
+  text-decoration: underline wavy var(--liquid-editor-token-unknown-underline);
+}
+
+// ─── Footer (validation / unknown-variable warning bar) ───────────────────────
+.footer {
+  padding: var(--space-1) var(--space-2);
+  background: var(--liquid-editor-footer-bg);
+  color: var(--liquid-editor-footer-fg);
+  border-top: var(--border-width) solid var(--color-danger);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+}
+
+// Info variant (#304) — the neutral caret-description footer, not an error.
+.footerInfo {
+  background: var(--liquid-editor-footer-info-bg);
+  color: var(--liquid-editor-footer-info-fg);
+  border-top-color: var(--liquid-editor-footer-info-border-color);
+}
+
+// ─── Preview pane ─────────────────────────────────────────────────────────────
+.preview {
+  background: var(--liquid-editor-preview-bg);
+  color: var(--liquid-editor-preview-fg);
+  border-top: var(--border-width) solid var(--liquid-editor-border);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+}
+
+// When the pane is to the right, flip the border from top to left and let it
+// share the horizontal space via flex.
+.splitRight .preview {
+  border-top: 0;
+  border-left: var(--border-width) solid var(--liquid-editor-border);
+  flex: 1;
+}
+
+.previewLabel {
+  display: block;
+  padding: var(--space-1) var(--space-2) 0;
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-caps);
+  color: var(--liquid-editor-preview-fg);
+}
+
+.previewBody {
+  padding: var(--space-1) var(--space-2) var(--space-2);
+}
+
+.previewLoading {
+  opacity: var(--opacity-muted);
+}
+
+// ─── Autocomplete menu (floating listbox) ─────────────────────────────────────
+.menu {
+  z-index: var(--liquid-editor-menu-z);
+  min-width: var(--liquid-editor-menu-min-width);
+  max-height: var(--liquid-editor-menu-max-height);
+  overflow-y: auto;
+  background: var(--color-bg);
+  border: var(--border-width) solid var(--liquid-editor-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--liquid-editor-menu-shadow);
+  padding: var(--space-1) 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+}
+
+.menuGroupLabel {
+  padding: var(--space-1) var(--space-2) 0;
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-caps);
+  color: var(--color-fg-subtle);
+}
+
+.menuItem {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  cursor: pointer;
+  color: var(--color-fg);
+}
+
+.menuItemActive {
+  background: var(--liquid-editor-token-variable-bg);
+}
+
+.menuItemType {
+  color: var(--color-fg-subtle);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+}
+
+.menuItemMain {
+  display: flex;
+  flex-direction: column;
+}
+
+// #511: this class is shared across two contexts. InsertVariableMenu.tsx puts
+// it inside a plain <DropdownMenu.Item>, whose hover background is
+// --color-bg-muted -- a selector scoped to .menuItemActive (AutocompleteMenu
+// only) cannot reach that. So ONE rule has to clear both --color-bg-muted and
+// --color-accent-bg-subtle (reached via .menuItemActive's
+// --liquid-editor-token-variable-bg alias). #511 got the first and missed the
+// second in light, at 4.41; #522 closed it at the PRIMITIVE -- light
+// --color-fg-muted moved #5e6c84 -> #5b6980, an imperceptible ΔE 0.0109 step
+// -- so the single base rule now clears both surfaces in both themes and no
+// scoped override is needed. Text at --font-size-xs is 11px, so AA small-text
+// applies at 4.5:1 with no large-text exemption.
+// @contrast --color-fg-muted on --color-bg-muted = 5.10:1 light
+// @contrast --color-fg-muted on --color-bg-muted = 5.60:1 dark
+// @contrast --color-fg-muted on --color-accent-bg-subtle = 4.62:1 light
+// @contrast --color-fg-muted on --color-accent-bg-subtle = 4.72:1 dark
+.menuItemDesc {
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-xs);
+}
+
+// .menuItemType, unlike .menuItemDesc, is only ever rendered inside
+// AutocompleteMenu, so its only tinted surface is .menuItemActive's
+// background -- --liquid-editor-token-variable-bg, which aliases
+// --color-accent-bg-subtle today but is a documented theming surface a
+// consumer can re-point, so it's named by its own token here rather than by
+// the primitive it currently resolves to. --color-fg-muted missed AA on that
+// tint in light at 4.41 after #511; #522 fixed it at the primitive rather than
+// here, so this rule is unchanged and only its annotations moved. The base
+// rule above stays --color-fg-subtle on the menu's certified default
+// --color-bg.
+// @contrast --color-fg-muted on --color-accent-bg-subtle = 4.62:1 light
+// @contrast --color-fg-muted on --color-accent-bg-subtle = 4.72:1 dark
+.menuItemActive .menuItemType {
+  color: var(--color-fg-muted);
+}
+
+.menuItemTags {
+  display: inline-flex;
+  gap: var(--space-1);
+  flex-shrink: 0;
+}

package/src/components/LiquidEditor/LiquidEditor.tokens.scss

@@ -0,0 +1,81 @@
+// LiquidEditor.tokens.scss — component tokens default to existing primitives so
+// dark theme works with no extra work and consumers can rebrand via AppProvider.
+:root {
+  // Editor surface
+  --liquid-editor-bg: var(--color-bg);
+  --liquid-editor-fg: var(--color-fg);
+  --liquid-editor-border: var(--color-border);
+  --liquid-editor-radius: var(--radius-md);
+  --liquid-editor-font: var(--font-family-mono);
+  --liquid-editor-font-size: var(--font-size-sm);
+
+  // Gutter (line numbers). aria-hidden on the gutter itself (the numbers are
+  // decorative for AT — LiquidEditor.tsx's textarea carries the real
+  // content), but 1.4.3 still applies: the digits are visually read by
+  // sighted users regardless of what the accessibility tree exposes. #511:
+  // was --color-fg-subtle, which fails on --liquid-editor-gutter-bg;
+  // --color-fg-muted clears it.
+  // @contrast --color-fg-muted on --color-bg-muted = 5.10:1 light
+  // @contrast --color-fg-muted on --color-bg-muted = 5.60:1 dark
+  --liquid-editor-gutter-bg: var(--color-bg-muted);
+  --liquid-editor-gutter-fg: var(--color-fg-muted);
+
+  // .textarea::placeholder used to read this same --liquid-editor-gutter-fg
+  // token, which silently retoned the placeholder to --color-fg-muted when
+  // the gutter's fix (above) moved it -- the only placeholder in the library
+  // that wasn't --color-fg-subtle, next to Input's and Textarea's. Split per
+  // Rule 3: its own surface is --liquid-editor-bg (--color-bg), certified for
+  // --color-fg-subtle, so it stays there independently of the gutter.
+  --liquid-editor-placeholder-fg: var(--color-fg-subtle);
+
+  // Syntax-highlight token colours
+  --liquid-editor-token-variable: var(--color-accent);
+  --liquid-editor-token-variable-bg: var(--color-accent-bg-subtle);
+  --liquid-editor-token-tag: var(--color-danger);
+  --liquid-editor-token-filter: var(--color-info);
+  --liquid-editor-token-string: var(--color-success);
+
+  // @contrast --color-warning on --color-bg = 2.14:1 light
+  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
+  // warning uses --color-warning-strong; the bare --color-warning measures 2.14:1 here, below
+  // WCAG AA for text and below 1.4.11's 3:1 for a graphical object. See #481.
+  --liquid-editor-token-number: var(--color-warning-strong);
+  --liquid-editor-token-keyword: var(--color-danger);
+  --liquid-editor-token-unknown: var(--color-danger);
+  --liquid-editor-token-unknown-underline: var(--color-danger);
+
+  // Toolbar
+  --liquid-editor-toolbar-bg: var(--color-bg-muted);
+
+  // Footer (validation / unknown-variable warning)
+  --liquid-editor-footer-bg: var(--color-bg-danger-subtle);
+
+  // Tonal TEXT on the subtle tonal background — the base tone, not `*-fg`
+  // (which is the on-solid white). Pairs legibly with the subtle bg above.
+  --liquid-editor-footer-fg: var(--color-danger);
+
+  // Footer info variant (#304) — the neutral caret-description line
+  // (`label — description`), not an error, so neutral surface/text/border.
+  --liquid-editor-footer-info-bg: var(--color-bg-muted);
+  --liquid-editor-footer-info-fg: var(--color-fg-muted);
+  --liquid-editor-footer-info-border-color: var(--color-border);
+
+  // Preview pane
+  --liquid-editor-preview-bg: var(--color-success-bg-subtle);
+  --liquid-editor-preview-fg: var(--color-success);
+
+  // Focus ring (mirrors Textarea / TimeField pattern)
+  --liquid-editor-ring: var(--ring-accent);
+  --liquid-editor-border-focus: var(--color-accent);
+
+  // Autocomplete menu
+  --liquid-editor-menu-min-width: var(--size-dropdown-min-width);
+  --liquid-editor-menu-max-height: 200px;
+  --liquid-editor-menu-shadow: var(--shadow-lg);
+
+  // The menu is portaled to <body>; it must clear a Drawer/Modal it's hosted
+  // inside (z-modal 1100), so it sits on the overlay-floating layer (1190) like
+  // the editor's own InsertVariableMenu (a DropdownMenu) — not the lower popover
+  // layer. Overridable via :root. (issue #171)
+  --liquid-editor-menu-z: var(--z-overlay-floating);
+}