/** * The design editor's own colour values: the few with no single Claude * Design System (CDS) token behind them. Everything else paints with the CDS * utilities (`bg-page`, `text-secondary`, `shadow-md`) or a `var(--cds-*)` * directly; `components/colors.ts` is the typed JS mirror for inline styles. * * Dark mode: `` is itself the document's `.cds-root` (the kit's * adoptCdsDocument stamps it) and carries both `data-theme` (this editor) * and CDS's `data-mode` (kept in sync), so a `var(--cds-*)` written here * on :root resolves to the mode-correct CDS value; only a value with no CDS * token behind it needs a dark block. */ :root { color-scheme: light; /* the hover wash flattened over a surface, for chips floating over * arbitrary content */ --om-bg-hover-opaque: color-mix( in srgb, var(--cds-neutral-900) 5%, var(--cds-surface-2) ); /* The canvas behind the artboards. Painted on nested layers and behind * iframes, so it must be OPAQUE: CDS's neutral wash flattened over the * page. picker.ts, guest/api.ts and dc-runtime's helmet.ts mirror the * computed values (#ededeb / #171717). */ --om-bg-canvas: color-mix(in srgb, var(--cds-neutral-900) 5%, var(--cds-page-bg)); --om-bg-stripe: color-mix(in srgb, var(--cds-neutral-900) 2%, transparent); /* An element mounted from a design system's bundle, in the Layers row: * CDS aqua's text step (600 light, 400 dark); the selection chrome takes * the 400 step in both modes (var(--cds-aqua-400)). */ --om-accent-ds-component-text: var(--cds-aqua-600); --om-shadow-inset: inset 0 1px 2px rgba(20, 20, 19, 0.06); } /* Applied via `data-theme="dark"` on (FOUC guard + hooks/useTheme). */ :root[data-theme='dark'] { color-scheme: dark; /* CDS's ghost-hover wash is 7.5% in dark; keep the flattened copy in step */ --om-bg-hover-opaque: color-mix( in srgb, var(--cds-neutral-900) 7.5%, var(--cds-surface-2) ); --om-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.28); --om-accent-ds-component-text: var(--cds-aqua-400); /* Annotation-note inks lift toward the title color in dark (unset in * light, where AnnotationNote's var() fallback of 100% applies). */ --om-title-ink: 55%; } *, *::before, *::after { box-sizing: border-box; /* Tailwind's border-width utilities only set the width — the UA default is `border-style: none`, so a bare `border` class would paint nothing. Tailwind preflight normally supplies this reset, but preflight is off here (this file owns the reset). The colour comes from CDS's base layer (the hairline, --cds-border, on everything under .cds-root — here) unless a component sets its own. */ border-width: 0; border-style: solid; } /* The UA stylesheet sets Arial on form controls. Components used to override this per-element with `font-family: inherit`; apply it once here instead. */ button, input, select, textarea { font-family: inherit; } /* The canvas scale, stamped by host/camera.tsx on each [data-mega-zoom] element (use the vars on that element only: they do not inherit — an inherited change would restyle the whole world layer per zoom frame). */ @property --mega-scale { syntax: ''; inherits: false; initial-value: 1; } @property --mega-inv-scale { syntax: ''; inherits: false; initial-value: 1; } /* A host pointer gesture or press is in flight (host/MegaCanvas.tsx sets the attribute): no artboard frame may swallow its moves or its release. */ [data-mega-frames-inert] [data-mega-artboard] iframe { pointer-events: none; } /* A mouse pan is in flight (wheel-button drag, Hand tool, Space): the closed hand, whatever chrome it crosses. */ [data-mega-grabbing], [data-mega-grabbing] * { cursor: grabbing !important; } /* Button press squish inside the scaled canvas layer: snap, don't animate (the pair CDS itself uses under reduced motion). A transform transition in there makes WebKit back the whole canvas at device scale while it runs (MOB-1598). */ .cds-root [data-mega-world] .cds-btn-squish, .cds-root [data-mega-world] .group\/btn:active:not([disabled]) .cds-btn-squish { transition: none; } /* The UA paints