context themes: wp sync, elementor + beaver builder starting points, Theming/Playground - #88
Open
juliacanzani wants to merge 18 commits into
Open
context themes: wp sync, elementor + beaver builder starting points, Theming/Playground#88juliacanzani wants to merge 18 commits into
juliacanzani wants to merge 18 commits into
Conversation
Sync assets/src/themes/wp.scss with the newer bits from lms-monorepo's wp-editor-kit _wp-admin-theme.scss: - WP-style switch metrics (outlined transparent track, fg thumb when off, on-accent thumb when checked - 12px thumb / 18x36 track / 1px border) - Fix the typography multiplier token name: --tui-fontSize-multiplier is not a TUI token (it silently fell back to the default); the real one is --tui-typography-size-multiplier - Fix wp dark tokens never applying: the selector was descendant-only (.tf-context-wp .tui-interface[data-theme=dark]) but the context class sits ON the interface element in storybook and field wrappers - now compound AND descendant Everything fields already had beyond the lms version (feedback scales, editor canvas bg var, multiselect radii, uppercase field labels, info notice surface) is kept. New Theming/Playground story: one page with a broad spread of controls for eyeballing context themes and light/dark side by side (use the toolbar). Already earning its keep - it surfaced the dark-selector bug, and shows the remaining dark-mode gaps live in the legacy components (textarea, button-group, alignment-matrix, color/gradient). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New themes/elementor.scss mirroring the wp.scss approach — the legacy per-component overrides in contexts/elementor/components/ keep covering the not-yet-migrated react-aria fields; this themes the TUI-based ones. Palette sampled from editor-panel screenshots (light + dark) and confirmed against Elementor's editor.min.css --e-a-* tokens (txt #515962, border-bold #d5d8dc, radius 3px). Deliberately monochrome primary (near-black light / light-grey dark) matching the editor chrome; Elementor's magenta (--e-a-color-primary-bold: #d004d4) is a global-value indicator, noted as a candidate for the dynamic-value bolt, not used as accent. 12px controls at 24/28/36 heights, sentence- case 12px labels, segmented groups as full-width bordered neutral segments. Dark applies via data-theme (storybook/host) AND Elementor's own #e-theme-ui-dark-css detection, compound + descendant. Verified in the Theming/Playground in both modes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
juliacanzani
changed the title
Elementor's own CSS fills checked controls with --e-a-color-primary-bold (#d004d4) — the monochrome-primary first pass over-indexed on the menu panel's neutral chrome. Primary scale is now a magenta ladder (light and dark); the segmented state-switcher fill stays neutral via the border grey, which is what both modes' panels actually use. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… fill The neutral active fill kept the default on-accent white text - no contrast against #d5d8dc in light mode. Active text now uses the panel fg (near-black on light grey, light grey on #3f444b - both well past AA), which is also what Elementor's own state switchers do. Playground button-group now has a selected value so active states are visible while theming. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…tion controls Elementor darkens the border on focused fields rather than accenting - input/select/combobox/multiselect border-focus tokens now follow the per-mode grey focus ring. Checkbox/radio/switch (and the inline-choice inputs) scope focus-ring-color back to the magenta so the selection controls keep their accent ring. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Dark select dropdowns showed white on near-white: portaled content re-applies a .tui-interface wrapper with no data-theme, and a nested interface re-matches TUI's LIGHT token block directly - beating inheritance from the dark ancestor. Two-part fix in both wp and elementor themes: dark mixins now include the control-fill family (option hover washes were falling back to light neutrals), and the dark blocks cascade into nested interfaces explicitly. The playground now threads the toolbar context into every Field - without the context prop, portaled dropdowns rendered in the default context regardless of the toolbar (which is how this stayed hidden). Elementor labels per the real control styles: --control-title-size (fallback 12px), line-height 1, 5px inline-end margin, and the editor font stack (--e-a-font-family, Roboto/Arial/Helvetica fallback) on the context root. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Notices follow .elementor-control-notice: no tinted background (panel bg), a 1px border in the TYPE colour, body text in panel fg with only the border/icon carrying the type colour, 12px italic content (action buttons reset to normal). Elementor's own --e-a-color-* tokens win in the real editor; TUI theme scales fall back in storybook. Playground gains an info/success/warning/danger notice row. SegmentedControl keys its items' ems off a root typography-size-sm (14px) rather than the control ladder - pinned to the panel's 12px so the state switcher matches every other control. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Combobox/multicombobox position their chevron on the wrapper, which inherits the interface base font (16px) rather than the input's control font; Select's chevron sits inside the trigger and follows the 12px for free. Pinned at the context level - all dropdown chevrons now 12px. Root cause is a TUI sizing gap (icon should key off the control font), tracked separately. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Chips ride the global typography ladder (sm = 14px), detached from the control font, so a 12px control carried 14px chips. Fractional em of the host control instead (0.85em -> 10.2px, 17px chip in the 28px trigger): the chip's block padding absorbs the difference and the whole thing self-adapts to any context font. Candidate TUI-level fix noted - chips inside token fields should always size em-relative to their control. Playground multiple-select now has preselected values so chips are visible while theming. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Switched from .elementor-control-notice (1px outline, no tint) to .elementor-panel-alert, which is what notices actually look like in the panel: tinted background, 3px border-inline-start stripe in the type colour, square corners on the stripe side, 12px italic weight-300 text. Elementor's --e-a-color-*/--e-a-bg-* win in the real editor; TUI base/subtlest scales fall back (dark tints via TUI's dark ladders). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Semantic scales mapped to Elementor's real values: bases from --e-a-color-* (info #2563eb, success #0a875a, warning #f59e0b, danger #dc2626), light strong/stronger from their button hover/active ladders, dark subtlest from their --e-a-bg-* tints (notices now resolve to Elementor's exact dark tints); dark primary-subtlest from --e-a-bg-primary (#310132). Popover surfaces scale with the 12px panel: typography-size-sm/xs rescoped on dropdown content, popovers, and the calendar (Popover content sets its own font-size, which the calendar inherits - the day cells have no font rule of their own), calendar cells 2rem. Dark dropdown option hover was invisible: fill-subtle equals the dark popover surface. Dedicated per-mode --tf-option-hover wash (#f1f2f3 / #3f444b) on select/multiselect/multicombobox option-hover tokens (combobox falls back through select's). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reads --tui-notice-gap/--tui-notice-para-gap, which joined TUI's Notice token API after 0.2.5 (the Card-style gap treatment) - inert until fields picks up that release, then live automatically. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New themes/beaver-builder.scss mirroring the wp/elementor approach. BB's design system runs on --fl-builder-* custom properties (radius, target-size, input-bg-color, accent-color, panel/platter/heading bgs, outline/divider/dim colors, font-family) defined in the core builder bundle - every value references the BB var first so the live builder drives it; fallbacks sampled from panel screenshots + the forms bundle's literals (BB blues #00a0d2/#0086b0/#3aa4cc; dark fallbacks eye-read). Unlike Elementor, BB focuses text fields with the accent blue, so no neutral-focus split. Roomy 40px md controls (their target-size) at 14px type, 6px radius fallback, segmented groups as grey group + active segment lifted to the surface. Dark applies via data-theme, BB's own fl-builder-ui-skin--dark class, and the nested-interface cascade; dark fills + per-mode option-hover wash included from the start (lessons from the elementor pass baked in). Verified in the Theming/Playground in both modes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
juliacanzani
changed the title
builder-css.bundle.min.css supplied the real --fl-builder-* values, so the eye-read fallbacks are gone: target-size is 36px (not 40), accent is hsl(194,100%,41%) with hover/selected at 37%/34%, light greys are the hue-210 ladders (outline #d2dae3, divider #bfcbd8), dark skin is panel #23282e with RECESSED #181b20 inputs and #101216 headings, font stack is system-ui-first. Noted for later: BB marks dynamic values purple (#6221a2) and globals orange (#ff9600) - relevant to the dynamic-value treatment. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
0.2.6 ships the nested-interface dark cascade (root cause found via the playground: fields wraps every field in a .tui-interface without data-theme, which re-matched TUI's light tokens and beat inheritance from the dark ancestor - so the default context never darkened). Also activates the Notice gap tokens the elementor theme already sets. Remaining default-context dark gap visible in the playground: the legacy textarea keeps its compile-time white styling (a migration candidate, not a wrapper bug). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The dep optimizer holds @tangible/ui prebundles across restarts, so a long-running (or recently restarted) storybook keeps serving a stale TUI after a version bump - phantom missing exports, old CSS. This is the rope ladder. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
0.2.6's gap tokens only wired the head's internal gap; 0.2.7 gives Notice slots the actual Card padding treatment, so the elementor theme's 8px/6px notice gaps now govern the visible head/body rhythm. Verified live in the playground. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…urce Elementor theme cleanup enabled by the 0.2.8 root-cause fixes: - chevron pin removed (Combobox keys off the control-font ladder now; the MultiCombobox pin was never needed - its icon already inherited) - 0.85em chip rule removed (token-field chips are 0.875em of the host control in TUI) - segmented 12px root-font pin removed (joined the control-font ladder) - calendar left the typography rescope list (scales with control fonts); the 2rem cell pin stays as a deliberate 32px choice - notice icons follow the stripe colour via the new --tui-notice-icon Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Context theming infrastructure: all three host contexts (wp, elementor, beaver-builder) get TUI token-remapping themes sourced from their host's actual design tokens, verified against a new Theming/Playground story, plus a TUI bump to ^0.2.6 carrying two root-cause fixes this work surfaced.
Theming/Playground story (
Theming/Playground)One page, ~20 controls + a notice row, wired to the existing context/colour-mode toolbar. States are preselected (button group, multi-select chips, switches on+off) because an active state you can't see is an active state you can't theme. It threads the toolbar context into every field, which is what exercises portaled dropdowns/popovers per context. It found real bugs continuously — see below.
themes/wp.scss(synced with lms wp-editor-kit)--tui-fontSize-multiplierisn't a TUI token (silently fell back); now--tui-typography-size-multiplierthemes/elementor.scss(new)Palette sampled from panel screenshots, then replaced with Elementor's real values (
editor.min.css+ their common tokens): magenta primary ladder around--e-a-color-primary-bold: #d004d4; semantic scales from--e-a-color-*bases, button hover/active ladders, and dark--e-a-bg-*tints; neutral chrome (segmented state switchers fill with the border grey, with fg-active fixed for contrast). 12px controls at 24/28/36, 3px radii, Elementor label spec (--control-title-size,line-height: 1, editor font stack). Neutral focus for text-like fields, accent focus for selection controls (their split). Popover surfaces (dropdown options, calendar at 2rem cells) scale to the panel type. Notices follow.elementor-panel-alert: tinted bg + 3px type-coloured start stripe, square stripe-side corners, italic 12px. Everything routesvar(--e-a-*, fallback)so the live editor wins.themes/beaver-builder.scss(new)Built on BB's own
--fl-builder-*system (radius 6px, target-size 36px, accenthsl(194,100%,41%)+ hover/selected steps, hue-210 grey ladders, recessed dark inputs#181b20on#23282epanels,system-uistack) — fallbacks frombuilder-css.bundle.min.css's skin definitions, live builder wins. Accent-blue focus on text fields (their pattern), dark viadata-theme+fl-builder-ui-skin--dark. Noted for later: BB colour-codes dynamic values purple (#6221a2) and globals orange.TUI ^0.2.6
.tui-interfacewithoutdata-theme, which re-matched TUI's light tokens and beat inheritance from dark ancestors — the default context never darkened at all, and each context theme carried workarounds. Root-caused and fixed in TUI 0.2.6; default-context dark now works.--tui-notice-gap/--tui-notice-para-gap— activates the Elementor notice gaps set here (8px/6px per their control-notice).Also
fill-subtleequalled the dark popover surface — hovers were invisible)storybook:freshscript — the Vite dep optimizer holds stale@tangible/uiprebundles across restarts after version bumps (bit us twice today)Remaining dark-mode gaps visible in the playground are the unmigrated legacy components (textarea, alignment-matrix, colour/gradient pre-#87) — that's the migration worklist, now with a page to check it against. TUI-level root causes are tracked on the TUI Component Roadmap with "worked around in fields PR #88" annotations.
Bundle rebuilt; jest 506 pass.
🤖 Generated with Claude Code