/* * shadcn/ui design tokens, shared by BOTH bundles. * * Split out of shadcn.css so the dashboard can reuse the tokens WITHOUT * `@tailwind base`. Preflight is a global reset (bare `*`, `body`, `h1`…`p` * selectors), so pulling shadcn.css into the dashboard bundle would reset the * whole wp-admin page, WordPress's own admin menu and admin bar included. * The composer bundle still loads preflight; it owns its panel. * * Deliberately UNLAYERED (the `@layer base { … }` wrapper was removed): an * unlayered rule beats every layered one regardless of source order, and * `@layer base` requires an `@tailwind base` for Tailwind to hoist it into – * which is exactly what the dashboard bundle omits. UiChemy's own brand.css * relies on the same unlayered-wins behaviour. * * Every declaration is scoped to `.uich-tw`, so these tokens only apply inside * a Tailwind island and never touch the host page. */ /* * shadcn/ui theme, zinc base, verbatim from the shadcn registry. * Variables are declared on `.uich-tw` (not :root) so the theme travels with * the composer host and portal roots without touching Elementor's document. * Dark mode: add `dark` to the same element (or any ancestor inside the scope). */ .uich-tw { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 91%; /* soft hairline, matches native rgba(0,0,0,.09) */ /* Input/control outline. shadcn's stock 90% is nearly invisible on the white panel (inputs read as "unboxed" in light mode), so darken the control outline specifically, dividers keep the softer --border above. */ --input: 240 5% 80%; --ring: 240 10% 3.9%; /* Corner rounding for shadcn controls (buttons, inputs, popovers, cards, segmented tabs). Kept tight/modern, rounded-lg≈6px, md≈4px, sm≈2px – rather than the earlier airy 0.8rem which read as over-rounded. */ --radius: 6.4px; /* Semantic category colors (construct markers etc.), Tailwind palette hues at 600 for light backgrounds, per shadcn convention. */ --status-data: 221 83% 53%; /* blue-600 */ --status-loop: 262 83% 58%; /* violet-600 */ --status-condition: 32 95% 44%; /* amber-600 */ --status-form: 142 76% 36%; /* green-600 */ } .uich-tw.dark, .uich-tw .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; /* Elevated above --background (240 10% 3.9%) so popovers, menus and the Add-class suggestion list read as a raised surface and are fully opaque over the tab row — matches the Elementor dark skin, which already lifts --popover off its background. (audit A10 / K7) */ --popover: 240 3.7% 15.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; /* 500-grade hues read better on dark surfaces. */ --status-data: 217 91% 60%; /* blue-500 */ --status-loop: 258 90% 66%; /* violet-500 */ --status-condition: 38 92% 50%; /* amber-500 */ --status-form: 142 71% 45%; /* green-500 */ } /* * Scoped replacement for Tailwind preflight (preflight is disabled globally * so it can't reset Elementor's editor DOM). */ .uich-tw, .uich-tw *, .uich-tw *::before, .uich-tw *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: hsl(var(--border)); } .uich-tw { /* Unified with the dashboard shell: the island renders in the design-system font (Zalando Sans via --uc-font-sans), not its own Plus Jakarta Sans, so text looks the same across native and builder screens. The literal Zalando fallback keeps it correct even if the token isn't in scope. */ font-family: var(--uc-font-sans, "Zalando Sans", ui-sans-serif, system-ui, sans-serif); --uich-ff: var(--uc-font-sans, "Zalando Sans", ui-sans-serif, system-ui, sans-serif); font-size: 13px; line-height: 1.45; color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; } /* No semibold, for now: fold Tailwind's font-semibold utility to Medium so no text in the island renders at 600. Routed through the DS weight token, so flipping it back is a one-line change (see --uc-weight-semibold). */ .uich-tw .font-semibold { font-weight: var(--uc-weight-medium, 500) !important; } /* Elementor skin: match the Editor One panel type exactly, Roboto at 14px base (--e-one-typography-fontFamily / fontSize). Deliberately kept on Roboto (the editor panel stays as-is); only the Brand skin follows the unified font above. Higher specificity than the base .uich-tw rule. */ .uich-tw h1, .uich-tw h2, .uich-tw h3, .uich-tw h4, .uich-tw h5, .uich-tw h6, .uich-tw p, .uich-tw ul, .uich-tw ol, .uich-tw figure, .uich-tw blockquote { margin: 0; padding: 0; } .uich-tw ul, .uich-tw ol { list-style: none; } /* `:not(:where([data-uc]))` leaves the UiChemy design-system controls (the right-side panel's components, see components/ui/ds/) to their own classes. `:where()` adds no specificity, so this rule stays (0,1,1) for everything else. Without it the reset's `background: transparent` and `font`/`color: inherit` beat every DS class (0,1,0). */ .uich-tw button:not(:where([data-uc])), .uich-tw input:not(:where([data-uc])), .uich-tw optgroup, .uich-tw select:not(:where([data-uc])), .uich-tw textarea:not(:where([data-uc])) { font: inherit; --uich-ff: inherit; color: inherit; margin: 0; /* NOTE: intentionally NOT zeroing `padding` here. This reset is (0,1,1) specificity, which beat every custom component class (`.gp-type-tab`, `.bp-dd-btn`, …) at (0,1,0) and silently stripped their left/right padding, controls looked cramped in many places. Tailwind utility buttons still get their padding (utilities are `.uich-tw`-scoped at (0,2,0) via `important:'.uich-tw'`), and fixed-size icon buttons use border-box + centered content, so leaving padding alone is safe. */ background: transparent; } .uich-tw button, .uich-tw [role='button'] { cursor: pointer; -moz-appearance: none; appearance: none; -webkit-appearance: none; } .uich-tw button:disabled:not(:where([data-uc])) { cursor: default; } .uich-tw img, .uich-tw svg, .uich-tw video, .uich-tw canvas { display: block; max-width: 100%; } .uich-tw a { color: inherit; text-decoration: inherit; } .uich-tw [hidden] { display: none; } /* * Composer THEME TOKENS — the single source of the palette. * * Imported by BOTH bundles: the composer panel (index.jsx) and the canvas * (canvas-entry.js, which PHP enqueues into the Elementor preview). That shared * import is the whole reason this file exists, and it replaces the old * composer-skin-tokens.css, which did the same job back when there were three * palettes. There is one palette now — UiChemy, light and dark — but the * sharing still matters, and for exactly the reason that file recorded: * * The on-canvas toolbar used to hard-code this palette as literals, because * it renders in a document these tokens never reached. Hand-copying is not the * same as matching: alongside the real values it grew a dozen invented * in-between shades that appear nowhere in the panel. * * That is not hypothetical. Deleting composer-skin-tokens.css took these * declarations out of the CANVAS bundle, and the box-handle toolbar * (composer-box-handles.js) resolves every colour through `var(--panel-bg)`, * `var(--text-hi)` and friends. With nothing declaring them it fell back to the * literals baked into its own `var()` fallbacks and stopped following the * light/dark toggle at all. Moved here verbatim out of composer.css; no value * was altered. Keep it imported by every entry that renders composer chrome. */ :root { --bg-canvas: #f4f4f6; --bg-canvas-ink: #15151a; --panel-bg: #15161a; --panel-bg-2: #1c1d22; --panel-bg-3: #24262c; --panel-bg-4: #2d2f37; --panel-line: #2a2c33; --panel-line-2: #34363f; /* DROP SHADOWS, as a colour and a strength rather than a literal per site. Every shadow in this file was written as rgba(0,0,0,α) against a near-black panel, where pure black at a heavy alpha is what reads as depth. On the white light panel the same values are black smudges, so light re-points the hue to the panel's ink and scales every alpha by --shadow-a in one place. Usage: rgba(var(--shadow-rgb), calc( * var(--shadow-a))) — the geometry of each shadow is left exactly as it was. */ --shadow-rgb: 0, 0, 0; --shadow-a: 1; /* Segmented controls — ONE language for every tabbing in the panel: a GREY track with a lighter GREY active chip on top of it. Both values are neutral overlays rather than ramp steps, so the track lifts off whatever panel it sits on (brand #15161a, Elementor #1f2124, Gutenberg #1e1e1e) and the chip lifts off the track by the same kind of step again, in every skin, without six per-skin copies. The light theme states its own pair below. The track was a black wash first (rgba(0,0,0,.28), recessed below the panel). On a near-black panel that made the whole control disappear — nothing to see until you found the one lit chip. A lift reads as a real surface holding the tabs, which is what the reference does too. Before this, the families disagreed: the Chat/Editor strip ran a GREY track with a near-black active tab (inverted), .seg / .state-tabs / .responsive-tabs ran a light wash track with a lighter chip, and .mode-seg filled the active half solid white. Three languages for the same control. */ --seg-track: rgba(255, 255, 255, 0.06); /* NO BORDERS on this control, by decision — the track and the chip are told apart by tone alone. Both hairline tokens stay in place (and stay wired to the inset rings in composer-dock.css) so bringing an edge back is a value change here rather than an edit to nine selectors; `transparent` is the off switch. Track edges came off first: once the track went lighter than the panel it already had an edge of its own and the hairline drew a second one beside it. */ --seg-track-line: transparent; --seg-thumb: rgba(255, 255, 255, 0.10); /* Off — see --seg-track-line. The chip is now read from its fill and the soft shadow under it, nothing drawn round the outside. */ --seg-thumb-line: transparent; --seg-thumb-hover: rgba(255, 255, 255, 0.045); /* Softer than before: with a hairline doing the lifting, a heavy drop shadow doubles the edge and muddies it. */ --seg-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); /* Segmented radii, deliberately softer than the panel's 6px/4px container scale — a tab track is a pill, not a card, and at 6px the track read as a small rectangle. The inner value keeps the classic 2px inset so the chip's arc sits concentric inside the track's. Skins whose host has its own geometry re-point these (see the Gutenberg block, which is WP's 4px/2px). */ --seg-radius: 9px; --seg-radius-inner: 7px; /* MINIMAL surfaces. A control is defined by its FILL and by the space around it; a 1px line is the exception. Two values only: --min-line the one line colour left, for a STRUCTURAL boundary against something outside the panel (its own outer edge). Never for internal chrome. --min-fill what replaces a border on a control — a soft wash that reads as a surface without drawing an edge. Both are neutral greys on purpose, the convention already used by --ctl-* further down: a mid grey at low alpha darkens a light panel and lightens a dark one, so one value is correct in both themes and every skin. That matters here because the OLD lines were a single token too (#e8e8e8 light / #27272a dark) and it did not carry — near-invisible on black, a hard rule on white. Light was the case that had never been checked. */ /* The AI mark (the empty-state sparkle) is the ONE place a brand colour is wanted in the composer, and it follows the ACTIVE SKIN's own accent. This is the UiChemy skin's value: brand ORANGE. Elementor and Gutenberg re-point it to their own accents in composer-skin-tokens.css. Literal hexes, not rgba(var(--accent-rgb)): that token is white in this skin now (the chrome went monochrome), and a white sparkle is not a brand mark. */ --ai-glyph-from: #FFC574; --ai-glyph-to: #FD6A35; --min-line: rgba(128, 128, 128, 0.16); --min-fill: rgba(128, 128, 128, 0.10); --min-fill-hover: rgba(128, 128, 128, 0.16); --text-hi: #f4f5f7; --uich-text: #d6d7dc; --text-mid: #9a9ca6; --text-dim: #6a6c76; --accent-2: hsl(var(--primary)); /* legacy-only name, no shadcn collision */ /* Interactive accent as an RGB triplet so translucent accent tints (borders, glows, hover fills) can be re-skinned in one place. MONOCHROME: this was UiChemy indigo (75, 34, 204), which put brand violet on every focus ring, selected chip and hover wash in the panel. The panel's shadcn layer right next door is already neutral (--primary is #fafafa dark / #18181b light, --ring likewise), so the indigo was the one thing making the chrome brand-coloured — it read as decoration on top of an otherwise black-and-white UI. Now white in dark, near-black in light (see the light block below, which must state its own value since it inherits this one). Platform skins still re-point it: Elementor keeps Elementor pink, Gutenberg keeps the wp-admin blue, because those are the host's accents, not ours. */ --accent-rgb: 255, 255, 255; --accent-bg: rgba(var(--accent-rgb), 0.10); --brand-green: #E3ED5D; --uich-danger: #ff7a7a; --ok: #E3ED5D; --warn: var(--warn); /* No brand orange anywhere in the composer. These fed the Pro upsell surfaces (badge, lock icon, CTA, modal icon, the setup cards' hover border) and were the only orange left; they now follow the host skin's own accent, which is near-black in a light skin, near-white in a dark one, and the builder's own colour where a builder skin is active. Keep it that way: the composer uses black/white shades plus whatever the builder skin supplies. */ --uich-pro-grad: currentColor; --uich-pro-tint: rgba(128, 128, 128, 0.10); /* Follows the skin rather than pinning a brand colour, for the same reason. */ --uich-brand: currentColor; /* Corner rounding for legacy composer chrome (cards, inputs, chips, segmented controls). Tightened from 10/7, the airy rounding read as over-rounded, especially on tabs. Colors unchanged. */ --radius: 6px; --radius-sm: 4px; --input-h: 30px; --row-h: 26px; } /* Theme tokens also apply when only the composer host carries data-theme (iframe mount). */ .uich-composer-host { color-scheme: dark; } .uich-composer-host[data-theme="light"], [data-uich-composer-theme="light"], body[data-theme="light"], .panel[data-theme="light"] { color-scheme: light; } /* ===== Light theme overrides ===== Also keyed on `data-uich-composer-theme` so the OUTER shell (`#uichemy-composer-floating-panel`, which only carries that attribute, not `data-theme`) picks up the light `--panel-line` etc. Otherwise its borders (e.g. the right-dock `border-left`) fall back to the dark `:root` tokens and render as a black edge in light mode. */ .uich-composer-host[data-theme="light"], [data-uich-composer-theme="light"], body[data-theme="light"], .panel[data-theme="light"] { --bg-canvas: #f4f4f6; --bg-canvas-ink: #15151a; --panel-bg: #ffffff; --panel-bg-2: #f7f7fa; --panel-bg-3: #eeeef3; --panel-bg-4: #e3e3eb; --panel-line: #e3e4ec; --panel-line-2: #cdcfd8; /* Shadows: the panel's ink rather than pure black, at a little under half the dark theme's strength. See the note in :root. */ --shadow-rgb: 15, 15, 21; --shadow-a: 0.45; /* Light segmented pair: a light-grey recessed track with a WHITE active chip that lifts above it (macOS / iOS / Claude-settings style), rather than a darker-grey active. A hairline + soft shadow give the white chip an edge so it reads on the pale track. */ --seg-track: rgba(0, 0, 0, 0.06); --seg-track-line: transparent; --seg-thumb: #ffffff; --seg-thumb-line: rgba(15, 15, 21, 0.06); --seg-thumb-hover: rgba(0, 0, 0, 0.04); --seg-thumb-shadow: 0 1px 2px rgba(15, 15, 21, 0.10); --text-hi: #0f0f15; --uich-text: #2a2b33; --text-mid: #6a6c76; --text-dim: #9a9ca6; --accent-2: hsl(var(--primary)); /* Light counterpart of the monochrome accent — see the note in :root. Without this the light panel would inherit white and every focus ring, selected chip and hover wash would disappear into the white surface. Matches --text-hi so accent and ink are the same black. */ --accent-rgb: 15, 15, 21; --accent-bg: rgba(var(--accent-rgb), 0.07); --brand-green: #E3ED5D; --uich-danger: #d44a4a; --ok: #b3bf3e; --warn: #d49a3a; } /* ============================================================================= UiChemy Create, Design System Tokens (Phase 1, isolated) ----------------------------------------------------------------------------- SURFACE MODEL, components are surface-agnostic. They read semantic tokens (surfaces, text, borders, ring, per-family fg/soft) whose VALUES are set by the surface scope a component lives in: .uc-content → light content (current look, DEFAULT) .uc-content[data-theme="dark"] → dark content (future, token change only) .uc-chrome → dark chrome (fixed; sidebar/nav/rails) `.uc-scope` and `.uc-portal` behave as light content, so existing usage is unchanged and the light view is pixel-identical to before this restructure. ISOLATION: all tokens are scoped under these classes (NOT :root). Nothing here touches the existing globals/theme. ========================================================================== */ /* Brand typeface, bundled via webpack (relative paths resolve to ../fonts/, emitted into build/ and URL-rewritten at build time so the fonts load correctly from wp-content, not the server root). */ @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ZalandoSans-Regular.bcfcc767.ttf) format("truetype"); } @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/ZalandoSans-Medium.41051c31.ttf) format("truetype"); } @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/ZalandoSans-SemiBold.d690e087.ttf) format("truetype"); } @font-face { font-family:"Zalando Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/ZalandoSans-Bold.0ac5948b.ttf) format("truetype"); } /* ============================================================================= 1. BASE, surface-INDEPENDENT tokens (identical on every surface). Applies to every surface scope so the values are always present. ========================================================================== */ /* `:root` added (AI-creator port) so DS token VALUES resolve app-wide for inline DS controls (buttons/inputs/triggers) WITHOUT importing the scope's font/color/box-sizing reset, that stays under `.uc-*` only. Nothing in the app references `--uc-*`, so these are inert for existing components. */ :root, .uc-scope, .uc-content, .uc-chrome, .uc-portal { /* ---- Brand + semantic SOLID fills + on-fill text (constant) ---------- ORANGE is back on the SOLID brand fill only, this paints the primary / main-CTA buttons (tone="brand" solid). The brand -fg/-soft/-border/-glow below stay NEUTRAL, so soft/outline/ghost brand controls, icon tints and text remain monochrome. --uc-accent stays neutral (no purple). */ --uc-brand: #FD6A35; --uc-brand-on: #FFFFFF; --uc-success: #2EA343; --uc-success-on: #FFFFFF; --uc-danger: #F65258; --uc-danger-on: #FFFFFF; --uc-warning: #FFA940; --uc-warning-on: #171717; --uc-accent: var(--uc-inverse-bg); --uc-accent-on: var(--uc-inverse-fg); /* ---- Family hairline borders (translucent, work on any surface) ----- */ --uc-brand-border: var(--uc-border); --uc-success-border: rgba(46, 163, 67, 0.40); --uc-danger-border: rgba(246, 82, 88, 0.40); --uc-warning-border: rgba(255, 169, 64, 0.42); --uc-accent-border: var(--uc-border); /* ---- Hover / press glow washes (translucent, surface-agnostic) ------ */ --uc-brand-glow-hover: rgba(128, 128, 128, 0.10); --uc-brand-glow-press: rgba(128, 128, 128, 0.18); --uc-success-glow-hover: rgba(46, 163, 67, 0.08); --uc-success-glow-press: rgba(46, 163, 67, 0.16); --uc-danger-glow-hover: rgba(246, 82, 88, 0.08); --uc-danger-glow-press: rgba(246, 82, 88, 0.16); --uc-warning-glow-hover: rgba(255, 169, 64, 0.10); --uc-warning-glow-press: rgba(255, 169, 64, 0.18); --uc-accent-glow-hover: rgba(128, 128, 128, 0.10); --uc-accent-glow-press: rgba(128, 128, 128, 0.18); /* ---- Inverse text (constant) ----------------------------------------- */ --uc-text-inverse: #FFFFFF; /* ---- Semantic aliases (resolve per surface via the surface tokens) --- */ --uc-bg: var(--uc-surface-base); --uc-fg: var(--uc-text-strong); --uc-fg-muted: var(--uc-text-muted); --uc-card: var(--uc-surface-raised); --uc-card-fg: var(--uc-text-strong); --uc-muted: var(--uc-surface-sunken); --uc-elevated: var(--uc-surface-overlay); /* ---- Radius (UiChemy scale: name = pixel value; mirrors the styleguide corner-radius set). Semantic aliases below keep components working. -- */ --uc-radius-0: 0; --uc-radius-2: 2px; --uc-radius-4: 4px; --uc-radius-6: 6px; --uc-radius-8: 8px; --uc-radius-12: 12px; --uc-radius-16: 16px; --uc-radius-24: 24px; --uc-radius-32: 32px; --uc-radius-infinite: 9999px; /* Semantic aliases → numeric scale (value-identical to before) */ --uc-radius-xs: var(--uc-radius-4); --uc-radius-sm: var(--uc-radius-6); --uc-radius-md: var(--uc-radius-8); --uc-radius-lg: var(--uc-radius-12); --uc-radius-xl: var(--uc-radius-16); --uc-radius-pill: var(--uc-radius-infinite); /* ---- Spacing (UiChemy scale: name = pixels) -------------------------- */ --uc-space-0: 0; --uc-space-1: 1px; --uc-space-2: 2px; --uc-space-3: 3px; --uc-space-4: 4px; --uc-space-5: 5px; --uc-space-6: 6px; --uc-space-7: 7px; --uc-space-8: 8px; --uc-space-9: 9px; --uc-space-10: 10px; --uc-space-11: 11px; --uc-space-12: 12px; --uc-space-14: 14px; --uc-space-16: 16px; --uc-space-20: 20px; --uc-space-24: 24px; --uc-space-28: 28px; --uc-space-32: 32px; --uc-space-36: 36px; --uc-space-40: 40px; --uc-space-44: 44px; --uc-space-48: 48px; /* ---- Typography ------------------------------------------------------ */ --uc-font-sans: "Zalando Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --uc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --uc-text-3xs: 8px; --uc-text-2xs: 10px; --uc-text-xs: 12px; /* 11px: compact meta / dense-panel text (list meta, inspector hints, code gutter). */ --uc-text-11: 11px; --uc-text-sm: 13px; --uc-text-base: 14px; --uc-text-md: 16px; --uc-text-lg: 18px; --uc-text-xl: 20px; --uc-text-2xl: 24px; --uc-text-3xl: 30px; /* --uc-weight-semibold is temporarily folded to Medium (500): no text renders at 600 for now. Flip back to 600 here to restore SemiBold everywhere it's used (Card / Alert / Dialog / Accordion titles, etc.). */ --uc-weight-regular: 400; --uc-weight-medium: 500; --uc-weight-semibold: 500; --uc-leading-tight: 1.2; --uc-leading-snug: 1.35; --uc-leading-normal: 1.5; --uc-tracking-tight: -0.01em; --uc-tracking-normal: 0; --uc-tracking-wide: 0.02em; /* ---- Elevation (neutral recipes; control-brand recolored to orange) -- Resting + hover surfaces are FLAT (ElevenLabs-style): definition comes from the single hairline border, not a shadow. Only true overlays (popovers/menus/modals = shadow-3/4/5) still float. */ --uc-shadow-1: none; --uc-shadow-2: none; --uc-shadow-3: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 2px 4px -1px oklch(0% 0 0 / 0.05), 0 6px 14px -3px oklch(0% 0 0 / 0.08); --uc-shadow-4: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 6px 12px -4px oklch(0% 0 0 / 0.06), 0 14px 28px -6px oklch(0% 0 0 / 0.10); --uc-shadow-5: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 12px 24px -8px oklch(0% 0 0 / 0.08), 0 28px 56px -12px oklch(0% 0 0 / 0.14); /* Filled controls (solid buttons): light top highlight + one soft drop. Kept subtle, depth reads without heavy shadows. */ --uc-shadow-control: inset 0 1px 0 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 3px -1px rgba(0, 0, 0, 0.05); /* Colored solids (brand/success/danger): neutral dark inner edge so it suits any hue, plus a light top highlight and soft drop. */ --uc-shadow-control-brand: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.06); --uc-shadow-control-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.14); --uc-shadow-input: inset 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 2px 4px -2px rgba(0, 0, 0, 0.04); /* Raised secondary controls (outline buttons, select/menu triggers): a faint top highlight and a whisper of drop. Edge comes from the component border. */ --uc-shadow-raised: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px -1px rgba(0, 0, 0, 0.04); /* Very subtle gloss: faint light top → faint dark bottom. */ --uc-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03)); /* ---- Control sizing -------------------------------------------------- */ --uc-control-h-sm: 28px; --uc-control-h-md: 32px; --uc-control-h-lg: 40px; /* ---- Motion ---------------------------------------------------------- */ --uc-dur-fast: 160ms; --uc-dur-base: 240ms; --uc-dur-slow: 340ms; /* Appearance of popovers / overlays (tooltip, menu, select, dialog), a touch slower than base so things ease in gracefully instead of flashing on. */ --uc-dur-enter: 300ms; --uc-ease-standard: cubic-bezier(0.2, 0, 0, 1); --uc-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --uc-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---- Z-index --------------------------------------------------------- */ /* Dropdowns/selects/menus sit ABOVE dialogs (1250 > z-dialog 1200) so a Select opened inside a modal renders on top instead of behind it. Tooltip stays highest. */ --uc-z-overlay: 1100; --uc-z-dialog: 1200; --uc-z-dropdown: 1250; --uc-z-tooltip: 1300; } /* ============================================================================= 2. SURFACE, CONTENT (light). DEFAULT. Values identical to pre-restructure, so the light view is unchanged. `.uc-scope` / `.uc-portal` map here too. ========================================================================== */ :root, .uc-scope, .uc-content, .uc-portal { --uc-surface-sunken: #EBEBEB; --uc-surface-base: #F4F4F4; --uc-surface-raised: #FFFFFF; --uc-surface-overlay: rgba(255, 255, 255, 0.10); --uc-surface-control: #FFFFFF; /* secondary control fill (raised) */ --uc-button-soft-neutral-bg: var(--uc-surface-sunken); --uc-button-soft-neutral-shadow: var(--uc-shadow-1); /* The hover / highlight wash (menu rows, the sliding pill in Select and Menu). SEPARATE from --uc-surface-control, which it used to borrow: that token is a RAISED FILL, and the two values only coincide on a dark surface where rgba(255,255,255,0.05) happens to read as both. On light, a raised control is #FFFFFF — a white pill on a white menu, i.e. invisible — while a hover wash has to be darker than what it sits on. Translucent so it composites over whatever surface the menu uses. */ --uc-surface-hover: rgba(0, 0, 0, 0.04); --uc-text-strong: #0A0A0A; --uc-text: #171717; --uc-text-muted: #737373; --uc-text-subtle: #A3A3A3; /* high-contrast inverse fill (B&W primary): dark on light content */ --uc-inverse-bg: #171717; --uc-inverse-fg: #FFFFFF; /* One soft, semi-transparent hairline (ElevenLabs uses rgba(0,0,0,0.1)). Translucent so it composites correctly over white AND grey tiles. */ --uc-border-subtle: rgba(0, 0, 0, 0.055); --uc-border: rgba(0, 0, 0, 0.09); --uc-border-strong: rgba(0, 0, 0, 0.14); /* The HOVER border on controls — one step above --uc-border-strong, and a BORDER value, not a text one. Every hover ring used --uc-text-subtle, which on dark is ALSO #525252 (the two coincide there, so the mistake was invisible — and the hover was in fact a no-op, resting and hover being the same colour) but on light is #A3A3A3: roughly 36% black against a 14% resting border, i.e. a hard outline snapping in instead of a step up. */ --uc-border-hover: rgba(0, 0, 0, 0.22); --uc-ring: #737373; /* per-family foreground (readable on light). brand/accent = dark ink. */ --uc-brand-fg: #171717; --uc-success-fg: #0A842A; --uc-danger-fg: #D12D37; --uc-warning-fg: #AA712B; --uc-accent-fg: #171717; /* per-family soft tint backgrounds (opaque light tints). brand/accent = grey. */ --uc-brand-soft: #F0F0F0; --uc-success-soft: #E7FFE7; --uc-danger-soft: #FFF2EF; --uc-warning-soft: #FFEDD8; --uc-accent-soft: #F0F0F0; } /* ============================================================================= 3. SURFACE, CONTENT DARK (future). Token change only; no component rebuild. Slightly lighter than chrome so content sits "above" the fixed chrome. ========================================================================== */ .uc-content[data-theme="dark"] { --uc-surface-sunken: #151515; --uc-surface-base: #1C1C1C; --uc-surface-raised: #242424; --uc-surface-overlay: #2A2A2A; --uc-surface-control: rgba(255, 255, 255, 0.05); /* subtle lift, blends on dark */ /* Muted neutral buttons use the secondary control recipe on dark surfaces. */ --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); --uc-text-strong: #F5F5F5; --uc-text: #E5E5E5; --uc-text-muted: #A3A3A3; --uc-text-subtle: #737373; /* inverse flips to light-on-dark so the B&W primary stays high-contrast */ --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #1C1C1C; --uc-border-subtle: #2E2E2E; --uc-border: #3D3D3D; --uc-border-strong: #525252; /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */ --uc-border-hover: #525252; --uc-ring: #A3A3A3; --uc-brand-fg: #EDEDED; --uc-success-fg: #A7EAAA; --uc-danger-fg: #FDC9C6; --uc-warning-fg: #FFC680; --uc-accent-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-soft: rgba(255, 255, 255, 0.12); } /* ============================================================================= 4. SURFACE, CHROME (dark, fixed). Values from the existing app dark sidebar (#171717 / #202020, text-white / text-weakest, border-dark-weakest/default). ========================================================================== */ .uc-chrome { --uc-surface-sunken: #101010; --uc-surface-base: #171717; --uc-surface-raised: #202020; --uc-surface-overlay: #242424; --uc-surface-control: rgba(255, 255, 255, 0.05); /* subtle lift, blends on dark */ --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); /* Same value --uc-surface-control had, so dark is unchanged by the split. */ --uc-surface-hover: rgba(255, 255, 255, 0.05); --uc-text-strong: #FFFFFF; --uc-text: #A3A3A3; --uc-text-muted: #737373; --uc-text-subtle: #525252; /* inverse flips to light-on-dark so the B&W primary stays high-contrast */ --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #333333; --uc-border: #404040; --uc-border-strong: #525252; /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */ --uc-border-hover: #525252; --uc-ring: #A3A3A3; --uc-brand-fg: #EDEDED; --uc-success-fg: #A7EAAA; --uc-danger-fg: #FDC9C6; --uc-warning-fg: #FFC680; --uc-accent-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-soft: rgba(255, 255, 255, 0.12); } /* ============================================================================= 4b. POPOVER, fixed dark scope for dropdowns (Select / Menu). Always dark in every mode. Applied alongside `uc-portal` (base tokens + box-sizing). ========================================================================== */ .uc-pop-dark { --uc-surface-sunken: #141414; --uc-surface-base: #1A1A1A; --uc-surface-raised: #242424; /* A dropdown must read as a LAYER above the panel. The old #1C1C1C sat between the panel chrome (#171717) and its field surfaces (#202020/#242424), so a dark list melted into the dark panel. #2E2E2E is clearly lighter than every panel surface, and the stronger shadow below (soft dark drops that actually show on dark, reused from the canvas dock bar) plus the .content border give it a crisp, floating edge. [ui-ux blend fix] */ --uc-surface-overlay: #2E2E2E; --uc-surface-control: rgba(255, 255, 255, 0.08); --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); /* Same value --uc-surface-control had here; a pop-up is already a layer up, so its wash is a touch stronger than the panel's. */ --uc-surface-hover: rgba(255, 255, 255, 0.08); --uc-shadow-4: 0 16px 44px -12px rgb(0 0 0 / 55%), 0 4px 12px -4px rgb(0 0 0 / 40%); --uc-text-strong: #FFFFFF; --uc-text: #E5E5E5; --uc-text-muted: #A3A3A3; --uc-text-subtle: #737373; --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #2E2E2E; --uc-border: #3D3D3D; --uc-border-strong: #525252; /* Exactly what --uc-text-subtle resolves to here, so dark is unchanged. */ --uc-border-hover: #525252; --uc-ring: #A3A3A3; --uc-brand-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-fg: #A7EAAA; --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-fg: #FDC9C6; --uc-danger-soft: rgba(246, 82, 88, 0.20); --uc-warning-fg: #FFC680; --uc-warning-soft: rgba(255, 169, 64, 0.22); --uc-accent-fg: #EDEDED; --uc-accent-soft: rgba(255, 255, 255, 0.12); color: var(--uc-text); } /* ============================================================================= 5. BASELINES, each surface paints its own background + text. ========================================================================== */ .uc-scope, .uc-content, .uc-chrome { font-family: var(--uc-font-sans); --uich-ff: var(--uc-font-sans); font-size: var(--uc-text-base); line-height: var(--uc-leading-normal); color: var(--uc-text); background: var(--uc-surface-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Portalled content mounts in ; carry font/tokens but no background. */ .uc-portal { font-family: var(--uc-font-sans); --uich-ff: var(--uc-font-sans); font-size: var(--uc-text-base); line-height: var(--uc-leading-normal); color: var(--uc-text); -webkit-font-smoothing: antialiased; } .uc-scope *, .uc-scope *::before, .uc-scope *::after, .uc-content *, .uc-content *::before, .uc-content *::after, .uc-chrome *, .uc-chrome *::before, .uc-chrome *::after, .uc-portal *, .uc-portal *::before, .uc-portal *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { .uc-scope *, .uc-content *, .uc-chrome *, .uc-portal * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================= UiChemy Create, COMPONENT tokens (per-component knobs) ----------------------------------------------------------------------------- Per-component sizing/shape variables, editable from the internal DS editor (tools/ds-editor). Each defaults to a GLOBAL token via var(), so out of the box a component still follows the global scale, overriding one here changes ONLY that component, not the whole system. Loaded right after tokens.css (src/index.js), same surface scopes, so the values resolve wherever the components render. The component CSS modules read these with the original value as a var() fallback, so a missing/av value can never break a component. ========================================================================== */ .uc-scope, .uc-content, .uc-chrome, .uc-portal { /* ---- Button --------------------------------------------------------- */ --uc-btn-radius: var(--uc-radius-md); --uc-btn-weight: var(--uc-weight-medium); --uc-btn-h: var(--uc-control-h-md); --uc-btn-px: var(--uc-space-16); /* ---- Input ---------------------------------------------------------- */ --uc-input-radius: var(--uc-radius-md); --uc-input-h: var(--uc-control-h-md); --uc-input-px: var(--uc-space-12); /* ---- Card ----------------------------------------------------------- */ --uc-card-radius: var(--uc-radius-lg); --uc-card-pad: var(--uc-space-20); /* ---- Tabs (pill variant) -------------------------------------------- */ --uc-tab-track-bg: #F2F2F2; /* lighter track (was --uc-surface-sunken #EBEBEB) */ --uc-tab-track-stroke: none; /* no hairline stroke around the track */ --uc-tab-track-radius: var(--uc-radius-md); --uc-tab-track-pad: 3px; --uc-tab-radius: var(--uc-radius-sm); --uc-tab-h: 26px; --uc-tab-px: var(--uc-space-12); } /* FloatingToolbar shares the global palette in either theme. */ .uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark { --uc-toolbar-bg: var(--uc-surface-raised); --uc-toolbar-hover-bg: var(--uc-surface-overlay); --uc-toolbar-fg: var(--uc-text); --uc-toolbar-border: var(--uc-border); --uc-toolbar-height: 48px; --uc-toolbar-action-size: 34px; --uc-toolbar-dismiss-size: 44px; --uc-toolbar-radius: var(--uc-radius-lg); --uc-toolbar-action-radius: var(--uc-btn-radius); --uc-toolbar-compact-height: var(--uc-space-40); --uc-toolbar-compact-action-size: var(--uc-control-h-md); --uc-toolbar-compact-radius: var(--uc-toolbar-radius); --uc-toolbar-shadow: var(--uc-shadow-4); } .uc-pop-dark { /* Pill tabs inside a dark pop-up (e.g. the model picker's CLI | WP Connectors strip). `.uc-portal` above pins the track to the light #F2F2F2, which beats anything inherited from a dark panel, so re-point it to the dark sunken well + hairline here. */ --uc-tab-track-bg: var(--uc-surface-sunken); --uc-tab-track-stroke: inset 0 0 0 1px var(--uc-border-subtle); } /* ============================================================================= Design-system token overrides for the editor only ----------------------------------------------------------------------------- The editor runs on the dashboard's design system (`@ds` → new-dashboard/src/design-system). This file holds the few token values the editor needs that the shared tokens do not set yet, so it only declares values for the editor's dark scopes and changes nothing in the dashboard. Import it immediately after `@ds/styles/component-tokens.css` so it lands later in the bundled stylesheet and wins at equal specificity (index.jsx). Keep this file SHORT. Each block says why it is here and what would let it be deleted, which is usually moving it into the shared tokens. ========================================================================== */ /* ---- Pill tabs and segmented controls on the dark surfaces ----------------- `component-tokens.css` sets the pill track to a raw `#F2F2F2`, and the rule that sets it covers `.uc-chrome` and `.uc-portal` alongside the light surfaces. So a pill tab set or a segmented control on dark chrome drew a near-white tray with dark labels — the one component pair in the system that did not flip with its surface. In this editor that is the mode switch (Preview / Design / Code / Data / Motion), the breakpoint switch, the inspector's Design / Developer tabs and the add-section dialog. Upstream lives with it by patching each call site: the app's own `components/shared/BridgedTabs.tsx` sets exactly the two values below inline to get its dark editor-header switcher. The values here are lifted from it verbatim — back to the surface-aware `--uc-surface-sunken` that the component's own CSS already names as its fallback, with the hairline restored, because the flat-tray look the `none` was chosen for depends on the tray being LIGHTER than the surface behind it. On dark it is darker, so without an edge the track dissolves into the chrome. Light surfaces are untouched — this only adds dark scopes. `--uc-toggle- track-bg` / `--uc-toggle-track-stroke` are declared upstream as `var(--uc-tab-track-*)`, and `var()` resolves against the element rather than where it was written, so the segmented control follows automatically and the two keep rendering the same grey. The shared component-tokens.css already does this for `.uc-pop-dark`, not yet for `.uc-chrome` or dark `.uc-content`. DELETE THIS BLOCK once it does; nothing will flag that it has become a no-op. */ .uc-chrome, .uc-content[data-theme="dark"], .uc-pop-dark { --uc-tab-track-bg: var(--uc-surface-sunken); --uc-tab-track-stroke: inset 0 0 0 1px var(--uc-border-subtle); } /* The Composer's selection colour (--uich-select-ink, pink by default): the UiChemy app's canvas-select blue, for any overlay drawn in the editor window. The canvas sets the same value on its own document (canvas.js). */ /* …and its hover / selection boxes jump to the next element, no slide. */ :root { --uich-select-ink: #0D99FF; --uich-ring-slide: opacity .1s ease; } /* Pointer use has no focus outline, even when a menu restores :focus-visible. * Scope is UI chrome only, never visitor content or third-party WP controls. * Preserve base inset borders, elevation, hover, checked and invalid states. * Keyboard navigation removes this override and uses component focus styles. */ :root[data-uc-input-mode='pointer'] :is(.uipb-studio, #uichemy-composer-floating-panel, #smart-html-floating-panel, .uich-composer-host, .uich-tw, .uich-rp, .uich-portal-root, .uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark) :is(:focus, :focus-visible, :focus-within), :root[data-uc-input-mode='pointer'] :is(.uc-scope, .uc-content, .uc-chrome, .uc-portal, .uc-pop-dark):is(:focus, :focus-visible, :focus-within) { outline: none !important; --tw-ring-shadow: 0 0 #0000 !important; --tw-ring-offset-shadow: 0 0 #0000 !important; } /* Button, raised, physically-lit control on uc- tokens. */ .oDgO9tRe_mBUNaW0e6V8 { --_h: var(--uc-btn-h, var(--uc-control-h-md)); --_px: var(--uc-btn-px, var(--uc-space-16)); --_fs: var(--uc-text-base); display: inline-flex; align-items: center; justify-content: center; gap: var(--uc-space-8); height: var(--_h); padding: 0 var(--_px); font-family: var(--uc-font-sans); --uich-ff: var(--uc-font-sans); font-size: var(--_fs); font-weight: var(--uc-btn-weight, var(--uc-weight-medium)); line-height: 1; white-space: nowrap; text-decoration: none; border: none; border-radius: var(--uc-btn-radius, var(--uc-radius-md)); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; isolation: isolate; transition: background var(--uc-dur-fast) var(--uc-ease-standard), box-shadow var(--uc-dur-fast) var(--uc-ease-standard), transform var(--uc-dur-fast) var(--uc-ease-standard), color var(--uc-dur-fast) var(--uc-ease-standard); } .oDgO9tRe_mBUNaW0e6V8:focus:not(:focus-visible) { outline: none; } .oDgO9tRe_mBUNaW0e6V8:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: -2px; } .oDgO9tRe_mBUNaW0e6V8:active:not(:disabled) { transform: translateY(0.5px); } .oDgO9tRe_mBUNaW0e6V8:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ---- Sizes ---------------------------------------------------------------- */ .qLkzuQUQ_X4w0fceh2CB { --_h: var(--uc-control-h-sm); --_px: var(--uc-space-12); --_fs: var(--uc-text-sm); } .NAPRKbEZKONQ8AdACBzs { --_h: var(--uc-btn-h, var(--uc-control-h-md)); --_px: var(--uc-btn-px, var(--uc-space-16)); --_fs: var(--uc-text-base); } .qeRuCFz3SPTfPQEz8Eur { --_h: var(--uc-control-h-lg); --_px: var(--uc-space-20); --_fs: var(--uc-text-md); } .GW0xiH4qJYyLFExAe7Cc { padding: 0; width: var(--_h); flex-shrink: 0; } .GW0xiH4qJYyLFExAe7Cc > svg { display: block; flex-shrink: 0; } /* ---- Variant: solid ------------------------------------------------------- */ .nx448XS4JGEoBYKJ_Xeh { color: var(--uc-brand-on); background: var(--_fill, var(--uc-brand)); background-image: var(--uc-sheen); box-shadow: var(--_shadow, var(--uc-shadow-control-brand)); } /* Keep the fill in every interactive state. The composer's host-theme reset (composer-isolation.css, (0,2,0) `background: none` on :hover/:focus/:active) outranks the lone `.solid` class, so a hovered or focused solid brand/danger button lost its fill and showed as an empty square. Same (0,2,0), later source order, so this wins. */ .nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :active) { background-color: var(--_fill, var(--uc-brand)); } .nx448XS4JGEoBYKJ_Xeh:hover:not(:disabled) { background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--uc-sheen); } .nx448XS4JGEoBYKJ_Xeh:active:not(:disabled) { background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), var(--uc-sheen); box-shadow: var(--uc-shadow-control-pressed); } /* neutral solid = the B&W PRIMARY: high-contrast inverse fill that flips per surface (dark on light content, light on dark chrome/content). */ .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-inverse-fg); background: var(--uc-inverse-bg); box-shadow: var(--uc-shadow-control); } /* grey wash nudges black->lighter and white->darker, so hover reads on both */ .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:hover:not(:disabled) { background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.16), rgba(128, 128, 128, 0.16)); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:active:not(:disabled) { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14)); } /* ---- Variant: soft -------------------------------------------------------- */ .lSxxR32yQ7uBGKoReA0d { color: var(--_fg, var(--uc-brand-fg)); background: var(--_soft, var(--uc-brand-soft)); background-image: var(--uc-sheen); box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--_soft-shadow, var(--uc-shadow-1)); } .lSxxR32yQ7uBGKoReA0d:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); } /* ---- Variant: outline (raised secondary) ---------------------------------- */ .uEkFBKngy5ABC8BavrlF { color: var(--_fg, var(--uc-brand-fg)); background: var(--uc-surface-control); background-image: var(--uc-sheen); box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised); } .uEkFBKngy5ABC8BavrlF.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-text-strong); } .uEkFBKngy5ABC8BavrlF:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); } /* ---- Variant: ghost ------------------------------------------------------- */ .ZShdqkg6btw_9kcxTgYx { color: var(--_fg, var(--uc-brand-fg)); background: transparent; } .ZShdqkg6btw_9kcxTgYx.P6iUGKQ9CuUmhTY4IDx4 { color: var(--uc-text); } /* The pointer target stays full size; only the wash is inset. This avoids a tall grey tile swallowing small chevrons and adjacent split controls. */ .ZShdqkg6btw_9kcxTgYx::before { content: ""; position: absolute; inset: 3px; border-radius: max(2px, calc(var(--uc-btn-radius, var(--uc-radius-md)) - 2px)); background: var(--_glow, var(--uc-brand-glow-hover)); opacity: 0; pointer-events: none; z-index: -1; transition: opacity var(--uc-dur-fast) var(--uc-ease-standard); } .ZShdqkg6btw_9kcxTgYx:hover:not(:disabled) { background: transparent; color: var(--uc-text-strong); } .ZShdqkg6btw_9kcxTgYx:is(:hover, [data-state="open"]):not(:disabled)::before { opacity: 1; } /* ---- Hold the fill through hover / focus / press --------------------------- The dashboard's theme-isolation reset (composer-isolation.css) clears `background` on every link and button under the pointer or focus at (0,2,0), which outranks the single-class variant rules above. A Button rendered as a link (asChild, e.g. "Upgrade to Pro") then went transparent on hover: white text on white. These restate each variant's fill at (0,3,0)+ for those states. */ .nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--_fill, var(--uc-brand)); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--uc-inverse-bg); } .lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--_soft, var(--uc-brand-soft)); } .uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :focus-visible, :focus-within, :active):not(:disabled) { background-color: var(--uc-surface-control); } /* The same for a disabled button: its fill stays, dimmed by .button:disabled. Without these the reset left a disabled solid button (the chat's Send with nothing typed) transparent on hover, its white icon on the white panel. */ .nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--_fill, var(--uc-brand)); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--uc-inverse-bg); } .lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--_soft, var(--uc-brand-soft)); } .uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :focus-visible, :focus-within, :active):disabled { background-color: var(--uc-surface-control); } /* ---- Tones (feed the --_* channels the variants read) --------------------- */ .BDHV_0n6wKsmpw3p3s1i { --_fill: var(--uc-brand); --_fg: var(--uc-brand-fg); --_soft: var(--uc-brand-soft); --_border: var(--uc-brand-border); --_glow: var(--uc-brand-glow-hover); --_shadow: var(--uc-shadow-control-brand); } .keLGBcvAq5oELzJZ2XbZ { --_fill: var(--uc-success); --_fg: var(--uc-success-fg); --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); --_glow: var(--uc-success-glow-hover); --_shadow: var(--uc-shadow-control-brand); } .qM62Gv6j4BSYSajMwnqk { --_fill: var(--uc-danger); --_fg: var(--uc-danger-fg); --_soft: var(--uc-danger-soft); --_border: var(--uc-danger-border); --_glow: var(--uc-danger-glow-hover); --_shadow: var(--uc-shadow-control-brand); } .P6iUGKQ9CuUmhTY4IDx4 { --_fg: var(--uc-text-strong); --_soft: var(--uc-button-soft-neutral-bg, var(--uc-surface-sunken)); --_soft-shadow: var(--uc-button-soft-neutral-shadow, var(--uc-shadow-1)); --_border: var(--uc-border-strong); --_glow: rgba(128, 128, 128, 0.10); } /* ---- As a link (asChild ) --------------------------------------------- * wp-admin styles `a:hover, a:active` (blue text) and `a:focus` (blue text + a 2px blue box-shadow) at 0,1,1, which out-ranks the variant colours and shadows above (0,1,0). Re-assert them for anchors so a link button looks exactly like the button it is in every state. */ a.nx448XS4JGEoBYKJ_Xeh:is(:hover, :focus, :active, :visited) { color: var(--uc-brand-on); } a.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :active, :visited) { color: var(--uc-inverse-fg); } a.lSxxR32yQ7uBGKoReA0d:is(:hover, :focus, :active, :visited), a.uEkFBKngy5ABC8BavrlF:is(:hover, :focus, :active, :visited) { color: var(--_fg, var(--uc-brand-fg)); } a.uEkFBKngy5ABC8BavrlF.P6iUGKQ9CuUmhTY4IDx4:is(:hover, :focus, :active, :visited) { color: var(--uc-text-strong); } a.ZShdqkg6btw_9kcxTgYx:is(:focus, :active, :visited) { color: var(--_fg, var(--uc-brand-fg)); } a.ZShdqkg6btw_9kcxTgYx.P6iUGKQ9CuUmhTY4IDx4:is(:focus, :active, :visited) { color: var(--uc-text); } a.nx448XS4JGEoBYKJ_Xeh:focus { box-shadow: var(--_shadow, var(--uc-shadow-control-brand)); } a.nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4:focus { box-shadow: var(--uc-shadow-control); } a.lSxxR32yQ7uBGKoReA0d:focus { box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--_soft-shadow, var(--uc-shadow-1)); } a.uEkFBKngy5ABC8BavrlF:focus { box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised); } a.ZShdqkg6btw_9kcxTgYx:focus { box-shadow: none; } /* ---- Loading -------------------------------------------------------------- */ .pc70O1Y6HdzT607YK_OL { color: transparent !important; pointer-events: none; } .rtWcge6eoBiDmFoHo4gD { position: absolute; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--uc-brand-on); animation: qUXtsmRZhV0_Rb8A9qFD 0.6s linear infinite; } .lSxxR32yQ7uBGKoReA0d .rtWcge6eoBiDmFoHo4gD, .uEkFBKngy5ABC8BavrlF .rtWcge6eoBiDmFoHo4gD, .ZShdqkg6btw_9kcxTgYx .rtWcge6eoBiDmFoHo4gD { color: var(--uc-text); } .nx448XS4JGEoBYKJ_Xeh.P6iUGKQ9CuUmhTY4IDx4 .rtWcge6eoBiDmFoHo4gD { color: var(--uc-inverse-fg); } @keyframes qUXtsmRZhV0_Rb8A9qFD { to { transform: rotate(-360deg); } } /* ---- Surface: dark -------------------------------------------------------- * `surface="dark"`, remaps the semantic tokens the variants read to the fixed dark-chrome values (mirrors `.uc-chrome` in tokens.css). Lets a single Button render correctly on the app's dark header / sidebar / rails WITHOUT needing a `.uc-chrome` ancestor (the app chrome is styled with UiChemy's own app tokens, not the DS scope). Orthogonal to variant + tone: every variant flips automatically, solid-neutral becomes a white B&W primary, outline/ghost go light-on-dark, brand stays orange. */ .VnThCro2n02iRphzomVo { --uc-surface-sunken: #101010; --uc-surface-control: rgba(255, 255, 255, 0.05); --uc-button-soft-neutral-bg: var(--uc-surface-control); --uc-button-soft-neutral-shadow: var(--uc-shadow-raised); --uc-text-strong: #FFFFFF; --uc-text: #A3A3A3; /* B&W primary flips to a light fill with dark ink on dark chrome */ --uc-inverse-bg: #F5F5F5; --uc-inverse-fg: #171717; --uc-border-subtle: #333333; --uc-border: #404040; --uc-border-strong: #525252; --uc-brand-border: var(--uc-border); --uc-ring: #A3A3A3; /* per-family fg/soft readable on dark */ --uc-brand-fg: #EDEDED; --uc-brand-soft: rgba(255, 255, 255, 0.12); --uc-success-fg: #A7EAAA; --uc-success-soft: rgba(46, 163, 67, 0.20); --uc-danger-fg: #FDC9C6; --uc-danger-soft: rgba(246, 82, 88, 0.20); } /* The always-dark chip: the floating canvas toolbar's standalone button as a reusable control. Reads the SAME --uc-toolbar tokens (with the same literal fallbacks), so the two stay identical; the component adds `uc-pop-dark` alongside this class, which is what scopes those tokens to dark values on any page theme. */ .cOkswkXgGqdwukDtzxre { background: var(--uc-toolbar-bg, var(--uc-surface-raised, #242424)); color: var(--uc-toolbar-fg, var(--uc-text, #F5F5F5)); box-shadow: inset 0 0 0 1px var(--uc-toolbar-border, rgba(255, 255, 255, 0.08)); border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px)); } .cOkswkXgGqdwukDtzxre:hover:not(:disabled) { background: var(--uc-toolbar-hover-bg, var(--uc-surface-overlay, #2E2E2E)); color: var(--uc-toolbar-fg, var(--uc-text-strong, #FFFFFF)); } .cOkswkXgGqdwukDtzxre:focus-visible { outline: 2px solid var(--uc-ring, rgba(245, 245, 245, 0.55)); outline-offset: -2px; } /* The standalone dark chip already owns its hover fill. */ .cOkswkXgGqdwukDtzxre::before { content: none; } /* Compact grouping adapted from Hirael; global radii, MIT notice in FloatingToolbar.tsx. */ .VDCgP2TXcbIH83qTz1iU { display: inline-flex; align-items: center; gap: var(--uc-space-8, 8px); font-family: var(--uc-font-sans, system-ui, sans-serif); --uich-ff: var(--uc-font-sans, system-ui, sans-serif); font-size: var(--uc-text-base, 14px); color-scheme: inherit; color: var(--uc-toolbar-fg, var(--uc-text, CanvasText)); pointer-events: none; } /* uc-content supplies light tokens, not an extra rectangular wrapper surface. */ .VDCgP2TXcbIH83qTz1iU.VDCgP2TXcbIH83qTz1iU { background: transparent; } .VDCgP2TXcbIH83qTz1iU[data-theme="dark"] { color-scheme: dark; } .VDCgP2TXcbIH83qTz1iU[data-theme="light"] { color-scheme: light; } /* Rebind to the current surface, not a computed dark toolbar token inherited from an ancestor. Light uses the DS content scope; inherit adds no scope. */ .VDCgP2TXcbIH83qTz1iU:not([data-theme="dark"]) { --uc-toolbar-bg: var(--uc-surface-raised, Canvas); --uc-toolbar-fg: var(--uc-text, CanvasText); --uc-toolbar-border: var(--uc-border, ButtonBorder); --uc-toolbar-hover-bg: var(--uc-surface-hover, ButtonFace); } .VDCgP2TXcbIH83qTz1iU.IdW9qftPRIpxufX1u1zB { --uc-toolbar-height: var(--uc-toolbar-compact-height, var(--uc-control-h-lg, 40px)); --uc-toolbar-action-size: var(--uc-toolbar-compact-action-size, var(--uc-control-h-md, 32px)); --uc-toolbar-dismiss-size: var(--uc-toolbar-compact-action-size, var(--uc-control-h-md, 32px)); /* Compact changes density only. Surface/action radii stay global. */ } .wcjtBjSJwTWRpPftzjvQ, .Dki1FM4eHY9MKK_GAGym, .j4Axbcky5LgpsKgn4WAb { background: var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas)); border: 1px solid var(--uc-toolbar-border, var(--uc-border, ButtonBorder)); box-shadow: var(--uc-toolbar-shadow, 0 16px 44px -12px rgb(0 0 0 / 48%), 0 4px 12px -4px rgb(0 0 0 / 32%)); } .wcjtBjSJwTWRpPftzjvQ { pointer-events: auto; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--uc-space-4, 4px); height: var(--uc-toolbar-height, 48px); padding: 0 var(--uc-space-6, 6px); /* Compact and dock geometry share the global surface radius. */ border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px)); overflow: visible; } .IdW9qftPRIpxufX1u1zB .wcjtBjSJwTWRpPftzjvQ { padding-inline: var(--uc-space-6, 6px); gap: var(--uc-space-6, 6px); } .VDCgP2TXcbIH83qTz1iU.Ti6l0uHmIPYJMAFtJph6 { gap: 0; height: auto; padding: 0; border: 0; box-shadow: none; } .VDCgP2TXcbIH83qTz1iU.Ti6l0uHmIPYJMAFtJph6 .wcjtBjSJwTWRpPftzjvQ { height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .Nt2ipeZvcBNJCdMb5cZ_, .Dki1FM4eHY9MKK_GAGym { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; margin: 0; padding: 0; font: inherit; --uich-ff: inherit; display: grid; place-items: center; cursor: pointer; } /* Actions share the global Button radius; the ✕ matches the bar beside it. */ .Nt2ipeZvcBNJCdMb5cZ_ { border-radius: var(--uc-toolbar-action-radius, var(--uc-btn-radius, var(--uc-radius-md, 8px))); } .Dki1FM4eHY9MKK_GAGym { border-radius: var(--uc-toolbar-radius, var(--uc-radius-lg, 12px)); } .Nt2ipeZvcBNJCdMb5cZ_ { position: relative; flex: none; /* Fixed size — the dock magnification was removed. */ width: var(--uc-toolbar-action-size, 34px); height: var(--uc-toolbar-action-size, 34px); border: 0; background: transparent; color: var(--uc-toolbar-fg, var(--uc-text, CanvasText)); /* The active pill slides between buttons on this transition. */ transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease; /* Selected look = the DS dark gradient button: a dark fill with the sheen gradient on top and a hairline stroke + raised shadow. The gradient is a background-IMAGE, so it also survives the composer's theme button-paint guard (which only zeroes background-color). Defined once, reused by every :active rule below so the host-reset guards stay in sync. */ --uc-tb-active-bg: var(--uc-sheen, linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03))), var(--uc-surface-sunken, ButtonFace); --uc-tb-active-ring: inset 0 0 0 1px var(--uc-border-strong, ButtonBorder), var(--uc-shadow-raised, 0 1px 2px rgba(0, 0, 0, 0.30)); } .Nt2ipeZvcBNJCdMb5cZ_:hover, .Dki1FM4eHY9MKK_GAGym:hover { background: var(--uc-toolbar-hover-bg, var(--uc-surface-hover, ButtonFace)); border-color: var(--uc-toolbar-border, var(--uc-border, ButtonBorder)); box-shadow: var(--uc-toolbar-shadow, 0 6px 16px -6px rgb(0 0 0 / 48%)); color: var(--uc-text-strong, CanvasText); } /* An action sits inside the bar, so its hover is the wash alone: the bar's own float shadow on a 32px button read as a grey haze around it. The ✕ and the handle's pill float by themselves and keep it. */ .Nt2ipeZvcBNJCdMb5cZ_:hover { box-shadow: none; } .Nt2ipeZvcBNJCdMb5cZ_:focus-visible, .Dki1FM4eHY9MKK_GAGym:focus-visible { outline: 2px solid var(--uc-ring, Highlight); outline-offset: -2px; } /* Selected = a dark, inset "stroked" button (the global dark icon button look), not a light disc. The stroke is the visible part; the fill sits a touch below the bar so it reads as pressed-in. */ .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ { background: var(--uc-tb-active-bg); box-shadow: var(--uc-tb-active-ring); color: var(--uc-text-strong, CanvasText); } .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:hover { background: var(--uc-tb-active-bg); } /* A disabled action says so under the pointer. `default` read as "this button simply does nothing" — the arrow never changes, so a press that was ignored looked like a press that was missed. */ .Nt2ipeZvcBNJCdMb5cZ_:disabled, .Nt2ipeZvcBNJCdMb5cZ_:disabled:hover { opacity: 1; color: var(--uc-text-muted, GrayText); background: transparent; cursor: not-allowed; } /* Active AND disabled is work in progress — Save during a flush is the case this exists for. `progress` was the old choice and it is the wrong signal here: it means "busy, but you may still interact", while the button is in fact refusing the click. Saves are also short, so a cursor that only reads as a brief flicker told the user nothing. */ .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:disabled, .Nt2ipeZvcBNJCdMb5cZ_.fMofPR_paz4U2oqfg0QQ:disabled:hover { background: var(--uc-tb-active-bg); box-shadow: var(--uc-tb-active-ring); color: var(--uc-text-strong, CanvasText); cursor: not-allowed; } .Nt2ipeZvcBNJCdMb5cZ_ svg, .Dki1FM4eHY9MKK_GAGym svg { width: auto !important; height: auto !important; color: inherit !important; stroke: currentColor !important; fill: none !important; opacity: 1 !important; filter: none !important; max-width: none !important; max-height: none !important; display: block; } .Ra_BBvLLe4yROxlrLqYt { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--uc-space-6, 6px); } .vPZZP6vGHUVlSQhkRpOh { flex: 0 0 auto; width: 1px; height: 20px; margin: 0 var(--uc-space-4, 4px); background: var(--uc-toolbar-border, var(--uc-border, ButtonBorder)); } .jLW95_rgGsGmyK7hLMfr::after { content: ""; position: absolute; top: 5px; inset-inline-end: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--uc-toolbar-indicator, var(--uc-brand, #fd6a35)); box-shadow: 0 0 0 1.5px var(--uc-toolbar-bg, var(--uc-surface-raised, Canvas)); pointer-events: none; } .Dki1FM4eHY9MKK_GAGym { pointer-events: auto; flex: none; width: var(--uc-toolbar-dismiss-size, 44px); height: var(--uc-toolbar-dismiss-size, 44px); color: var(--uc-toolbar-fg, var(--uc-text, CanvasText)); transition: background-color 150ms ease, color 150ms ease, transform 100ms ease; } .Dki1FM4eHY9MKK_GAGym:active { transform: scale(.94); } /* The ✕ is a