@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/theme/looks.css

@@ -0,0 +1,428 @@
+/* =========================================================
+   Looks — `data-wp-look` on <html> (tweaksStore.setLook).
+
+   A look is everything that is not colour: corner radius, type, borders vs
+   shadows, density and how a selected state is drawn. Any look works with
+   any colour theme (styles/themes.css), because these rules only read
+   colour tokens and never set one. Orbit is tokens.css itself.
+
+   Most of a look is the radius / font / height tokens. The rest is a few rules
+   per look on the shared pieces (buttons, inputs, cards, chips, nav,
+   segmented, tabs, checkboxes, tables). `html[data-wp-look=x] .wp-btn` (0,2,1)
+   beats a scoped `.wp-btn[data-v-…]` (0,2,0), so no component has to know
+   about looks. A new shared piece that should follow the looks gets its
+   rule here.
+
+   Fonts: Manrope (Soft) and Fraunces (Editorial headings) are OFL variable
+   latin subsets from Fontsource (licences beside them in fonts/). A browser
+   only downloads an @font-face when a rendered element uses its family, so a
+   look's font costs nothing until that look is picked.
+   ========================================================= */
+
+@font-face {
+  font-family: "Manrope";
+  font-style: normal;
+  font-weight: 200 800;
+  font-display: swap;
+  src: url("./fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"),
+       url("./fonts/manrope-latin-wght-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Fraunces";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"),
+       url("./fonts/fraunces-latin-wght-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/jetbrains-mono-latin.woff2") format("woff2-variations"),
+       url("./fonts/jetbrains-mono-latin.woff2") format("woff2");
+}
+
+/* --wp-radius-cap: the roundest a corner may get in this look. Fixed radii
+   in components are written min(Npx, var(--wp-radius-cap, 999px)) and
+   pills var(--wp-radius-cap, 999px), so Orbit draws them as authored and a
+   square look squares them without a rule per component. Circles (50%)
+   stay circles. The theme audit (scripts/theme-audit) fails on a corner
+   rounder than the cap. */
+html[data-wp-look="crisp"] { --wp-radius-cap: 4px; }
+html[data-wp-look="terminal"],
+html[data-wp-look="tui"] { --wp-radius-cap: 0px; }
+
+/* Heading face; a look may swap it without touching body text. */
+html.wp-manager { --wp-font-head: var(--wp-font); }
+.wp-page__title, .wp-card__title { font-family: var(--wp-font-head); }
+
+/* ================= Crisp: square, outlined, ruled ================= */
+html[data-wp-look="crisp"] {
+  --wp-radius-sm: 2px;
+  --wp-radius:    3px;
+  --wp-radius-lg: 4px;
+  --wp-radius-xl: 4px;
+}
+html[data-wp-look="crisp"] :is(.wp-btn, .wp-btn--sm, .wp-btn--lg, .wp-nav, .wp-chip, .wp-check, .wp-topbar__icon-btn) { border-radius: 2px; }
+html[data-wp-look="crisp"] .wp-btn--secondary { background: transparent; border-color: var(--wp-border-strong); }
+html[data-wp-look="crisp"] .wp-btn--secondary:hover { background: var(--wp-bg-3); }
+html[data-wp-look="crisp"] :is(.wp-input, .wp-select, .wp-textarea, .wp-input-group, .wp-cselect__field) { border-color: var(--wp-border-strong); }
+html[data-wp-look="crisp"] :is(.wp-card, .wp-table-wrap) { border-color: var(--wp-border-strong); }
+html[data-wp-look="crisp"] .wp-chip { background: transparent; }
+html[data-wp-look="crisp"] .wp-nav[data-active] {
+  background: transparent;
+  border-color: var(--wp-accent-500);
+  font-weight: 600;
+}
+html[data-wp-look="crisp"] .wp-nav[data-active]::before { display: none; }
+html[data-wp-look="crisp"] .wp-settings__section-link[data-active="true"] {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--wp-accent-500);
+}
+html[data-wp-look="crisp"] .wp-segmented { border-color: var(--wp-border-strong); background: transparent; }
+html[data-wp-look="crisp"] .wp-segmented__opt { border-radius: 1px; }
+html[data-wp-look="crisp"] .wp-segmented__opt[data-active="true"] {
+  background: color-mix(in oklab, var(--wp-accent-500) 16%, transparent);
+  box-shadow: inset 0 0 0 1px var(--wp-accent-500);
+  color: var(--wp-accent-text);
+}
+html[data-wp-look="crisp"] :is(.wp-table thead th, .wp-sidebar__section, .wp-field__label) {
+  font-family: var(--wp-font-mono);
+  letter-spacing: 0;
+}
+html[data-wp-look="crisp"] .wp-page__title { font-size: 18px; font-weight: 700; letter-spacing: 0; }
+
+/* ================= Soft: pills, no outlines, lifted cards ================= */
+html[data-wp-look="soft"] {
+  --wp-font: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --wp-radius-sm: 10px;
+  --wp-radius:    14px;
+  --wp-radius-lg: 18px;
+  --wp-radius-xl: 22px;
+}
+html[data-wp-look="soft"] :is(.wp-btn, .wp-btn--sm, .wp-btn--lg) { border-radius: 999px; padding-inline: 16px; }
+html[data-wp-look="soft"] .wp-btn--icon { padding-inline: 0; }
+html[data-wp-look="soft"] .wp-btn--secondary { border-color: transparent; }
+html[data-wp-look="soft"] .wp-btn--primary {
+  box-shadow: 0 4px 14px color-mix(in oklab, var(--wp-accent-600) 35%, transparent);
+}
+html[data-wp-look="soft"] :is(.wp-input, .wp-select, .wp-textarea, .wp-input-group, .wp-cselect__field) {
+  border-color: transparent;
+  background: var(--wp-bg-3);
+}
+html[data-wp-look="soft"] .wp-input-group .wp-input { background: transparent; }
+html[data-wp-look="soft"] :is(.wp-card, .wp-table-wrap) {
+  border-color: transparent;
+  box-shadow: var(--wp-shadow-md);
+}
+html[data-wp-look="soft"] :is(.wp-topbar, .wp-sidebar) { border-color: transparent; background: var(--wp-bg); }
+html[data-wp-look="soft"] .wp-chip { border-color: transparent; }
+html[data-wp-look="soft"] .wp-nav { border-radius: 999px; padding-inline: 14px; }
+html[data-wp-look="soft"] .wp-nav[data-active] {
+  background: var(--wp-accent-600);
+  border-color: transparent;
+  color: #fff; /* audit-exempt: white on accent-600, 4.5:1+ in every theme */
+}
+html[data-wp-look="soft"] .wp-nav[data-active]::before { display: none; }
+html[data-wp-look="soft"] .wp-settings__section-link { border-radius: 999px; padding-inline: 14px; }
+html[data-wp-look="soft"] .wp-settings__section-link[data-active="true"] {
+  background: var(--wp-accent-600);
+  color: #fff; /* audit-exempt: white on accent-600 */
+}
+html[data-wp-look="soft"] .wp-segmented { border-color: transparent; border-radius: 999px; background: var(--wp-bg-3); }
+html[data-wp-look="soft"] .wp-segmented__opt { border-radius: 999px; }
+html[data-wp-look="soft"] .wp-segmented__opt[data-active="true"] {
+  background: var(--wp-accent-600);
+  box-shadow: none;
+  color: #fff; /* audit-exempt: white on accent-600 */
+}
+html[data-wp-look="soft"] .wp-segmented__opt[data-active="true"] .pi { color: inherit; }
+html[data-wp-look="soft"] .wp-check { border-radius: 6px; }
+html[data-wp-look="soft"] .wp-page__title { font-size: 22px; font-weight: 700; }
+
+/* ================= Terminal: mono, zero radius, dashed ================= */
+html[data-wp-look="terminal"] {
+  --wp-font: var(--wp-font-mono);
+  --wp-radius-sm: 0px;
+  --wp-radius:    0px;
+  --wp-radius-lg: 0px;
+  --wp-radius-xl: 0px;
+}
+html[data-wp-look="terminal"] body { font-size: 12.5px; }
+html[data-wp-look="terminal"] :is(.wp-btn, .wp-btn--sm, .wp-btn--lg, .wp-nav, .wp-chip, .wp-check, .wp-segmented, .wp-segmented__opt, .wp-topbar__icon-btn, .wp-nav__count) { border-radius: 0; }
+html[data-wp-look="terminal"] :is(.wp-card, .wp-table-wrap, .wp-input-group--readonly) { border-style: dashed; border-color: var(--wp-border-strong); }
+html[data-wp-look="terminal"] .wp-card__header { border-bottom-style: dashed; }
+html[data-wp-look="terminal"] .wp-table tbody tr:not(:last-child) td { border-bottom-style: dashed; }
+html[data-wp-look="terminal"] .wp-topbar { border-bottom-style: dashed; }
+html[data-wp-look="terminal"] .wp-sidebar { border-right-style: dashed; }
+html[data-wp-look="terminal"] .wp-btn--primary {
+  background: color-mix(in oklab, var(--wp-accent-500) 14%, transparent);
+  border-color: var(--wp-accent-text);
+  color: var(--wp-accent-text);
+}
+html[data-wp-look="terminal"] .wp-btn--primary:hover {
+  background: color-mix(in oklab, var(--wp-accent-500) 24%, transparent);
+  border-color: var(--wp-accent-text-strong);
+}
+html[data-wp-look="terminal"] .wp-btn--secondary { background: transparent; border-color: var(--wp-border-strong); }
+html[data-wp-look="terminal"] .wp-chip { background: transparent; }
+html[data-wp-look="terminal"] .wp-nav[data-active] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--wp-accent-text);
+  font-weight: 600;
+}
+html[data-wp-look="terminal"] .wp-nav[data-active]::before {
+  content: ">";
+  width: auto;
+  top: 50%;
+  bottom: auto;
+  left: 0;
+  transform: translateY(-50%);
+  background: none;
+  color: var(--wp-accent-text);
+  font-weight: 700;
+}
+html[data-wp-look="terminal"] .wp-sidebar__section { text-transform: none; letter-spacing: 0; }
+html[data-wp-look="terminal"] .wp-sidebar__section::before { content: "# "; }
+html[data-wp-look="terminal"] .wp-settings__section-link[data-active="true"] { background: transparent; }
+html[data-wp-look="terminal"] .wp-settings__section-link[data-active="true"]::before { content: ">"; margin-right: -4px; font-weight: 700; }
+html[data-wp-look="terminal"] .wp-segmented { border-color: transparent; background: transparent; gap: 4px; }
+html[data-wp-look="terminal"] .wp-segmented__opt[data-active="true"] {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--wp-accent-text);
+  color: var(--wp-accent-text);
+}
+html[data-wp-look="terminal"] .wp-tabset__tab[data-active="true"] { border-bottom-style: dashed; }
+/* A switch that is on reads like the outlined primary button: a tinted
+   track ruled in accent text, not a solid fill. The knob squares with the
+   track through --wp-radius-cap. */
+html[data-wp-look="terminal"] .wp-switch[aria-checked="true"] .wp-switch__track {
+  background: color-mix(in oklab, var(--wp-accent-500) 14%, transparent);
+  border-color: var(--wp-accent-text);
+}
+html[data-wp-look="terminal"] .wp-switch[aria-checked="true"] .wp-switch__knob { background: var(--wp-accent-text); }
+html[data-wp-look="terminal"] .wp-page__title { font-size: 17px; font-weight: 600; letter-spacing: 0; }
+
+/* ================= Editorial: serif headings, open, underlined ================= */
+html[data-wp-look="editorial"] {
+  --wp-font-head: "Fraunces", Georgia, "Times New Roman", serif;
+  --wp-radius-sm: 4px;
+  --wp-radius:    4px;
+  --wp-radius-lg: 6px;
+}
+html[data-wp-look="editorial"] .wp-page__title { font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
+html[data-wp-look="editorial"] .wp-card__title { font-size: 16px; font-weight: 500; letter-spacing: 0; }
+html[data-wp-look="editorial"] .wp-content { padding-inline: 36px; --wp-content-px: 36px; }
+html[data-wp-look="editorial"] :is(.wp-topbar, .wp-sidebar) { background: var(--wp-bg); }
+html[data-wp-look="editorial"] .wp-card {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid var(--wp-text);
+  border-radius: 0;
+}
+html[data-wp-look="editorial"] .wp-card__header { padding-inline: 0; }
+html[data-wp-look="editorial"] .wp-card__body { padding-inline: 0; }
+html[data-wp-look="editorial"] .wp-table-wrap { background: transparent; border: 0; border-radius: 0; }
+html[data-wp-look="editorial"] .wp-table thead th {
+  background: transparent;
+  border-bottom-color: var(--wp-text);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+}
+html[data-wp-look="editorial"] .wp-nav[data-active] { background: transparent; border-color: transparent; font-weight: 600; }
+html[data-wp-look="editorial"] .wp-nav[data-active]::before { display: none; }
+html[data-wp-look="editorial"] .wp-settings__section-link[data-active="true"] {
+  background: transparent;
+  color: var(--wp-text);
+  text-decoration: underline;
+  text-decoration-color: var(--wp-accent-500);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 5px;
+}
+html[data-wp-look="editorial"] .wp-nav[data-active] .wp-nav__label {
+  text-decoration: underline;
+  text-decoration-color: var(--wp-accent-500);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 5px;
+}
+html[data-wp-look="editorial"] .wp-btn--secondary { background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
+html[data-wp-look="editorial"] .wp-btn--secondary:hover { background: var(--wp-bg-3); }
+html[data-wp-look="editorial"] .wp-segmented { background: transparent; border: 0; border-radius: 0; gap: 14px; padding-inline: 0; box-shadow: inset 0 -1px 0 var(--wp-border); }
+html[data-wp-look="editorial"] .wp-segmented__opt { padding-inline: 0; border-radius: 0; }
+html[data-wp-look="editorial"] .wp-segmented__opt:hover:not(:disabled) { background: transparent; }
+html[data-wp-look="editorial"] .wp-segmented__opt[data-active="true"] {
+  background: transparent;
+  box-shadow: inset 0 -2px 0 var(--wp-accent-500);
+}
+html[data-wp-look="editorial"] .wp-sidebar__section { text-transform: none; letter-spacing: 0; font-size: 11px; font-style: italic; }
+
+/* ================= Compact: tight rows, small type ================= */
+html[data-wp-look="compact"] {
+  --wp-radius-sm: 3px;
+  --wp-radius:    4px;
+  --wp-radius-lg: 5px;
+  --wp-radius-xl: 6px;
+  --wp-control-h-md-base: 28px;
+  --wp-control-h-lg-base: 32px;
+  --wp-topbar-h: 40px;
+}
+html[data-wp-look="compact"] body { font-size: 12.5px; }
+html[data-wp-look="compact"] :is(.wp-btn, .wp-nav, .wp-topbar__icon-btn) { border-radius: 4px; }
+html[data-wp-look="compact"] .wp-btn { font-size: 12px; padding-inline: 10px; }
+html[data-wp-look="compact"] .wp-btn--icon { padding-inline: 0; }
+html[data-wp-look="compact"] .wp-nav { padding: 5px 8px; font-size: 12.5px; }
+html[data-wp-look="compact"] .wp-content { padding: 12px 16px 28px; --wp-content-px: 16px; }
+html[data-wp-look="compact"] .wp-page__title { font-size: 16px; }
+html[data-wp-look="compact"] .wp-card__header { padding: 8px 10px; }
+html[data-wp-look="compact"] .wp-card__body { padding: 10px; }
+html[data-wp-look="compact"] .wp-table thead th { padding: 6px 10px; }
+html[data-wp-look="compact"] .wp-table tbody td { padding: 5px 10px; font-size: 12px; }
+html[data-wp-look="compact"] .wp-table tbody tr:nth-child(even) td { background: var(--wp-bg-2); }
+html[data-wp-look="compact"] .wp-table tbody tr:hover td { background: var(--wp-bg-3); }
+
+/* ================= TUI: boxed panels, inverse selection, [x] ================= */
+html[data-wp-look="tui"] {
+  --wp-font: var(--wp-font-mono);
+  --wp-radius-sm: 0px;
+  --wp-radius:    0px;
+  --wp-radius-lg: 0px;
+  --wp-radius-xl: 0px;
+  --wp-topbar-h: 40px;
+}
+html[data-wp-look="tui"] body { font-size: 12.5px; }
+html[data-wp-look="tui"] :is(.wp-btn, .wp-btn--sm, .wp-btn--lg, .wp-nav, .wp-chip, .wp-segmented, .wp-segmented__opt, .wp-topbar__icon-btn, .wp-nav__count, .wp-tabset__tab) { border-radius: 0; }
+html[data-wp-look="tui"] .wp-topbar { background: var(--wp-bg-3); border-bottom-color: var(--wp-border-strong); }
+html[data-wp-look="tui"] .wp-sidebar {
+  margin: 8px 0 8px 8px;
+  border: 1px solid var(--wp-border-strong);
+  background: transparent;
+}
+html[data-wp-look="tui"] :is(.wp-card, .wp-table-wrap) { border-color: var(--wp-border-strong); background: transparent; }
+html[data-wp-look="tui"] .wp-card__header { background: var(--wp-bg-3); border-bottom-color: var(--wp-border-strong); padding-block: 6px; }
+html[data-wp-look="tui"] .wp-card__title { color: var(--wp-accent-text); font-weight: 700; }
+html[data-wp-look="tui"] .wp-table thead th { background: var(--wp-bg-3); border-bottom-color: var(--wp-border-strong); text-transform: none; letter-spacing: 0; }
+html[data-wp-look="tui"] .wp-table tbody td { border-bottom: 0; padding-block: 5px; }
+html[data-wp-look="tui"] .wp-table tbody tr:hover td { background: var(--wp-bg-3); }
+html[data-wp-look="tui"] .wp-nav { padding-block: 4px; }
+html[data-wp-look="tui"] .wp-nav[data-active],
+html[data-wp-look="tui"] .wp-segmented__opt[data-active="true"],
+html[data-wp-look="tui"] .wp-tabset__tab[data-active="true"],
+html[data-wp-look="tui"] .wp-settings__section-link[data-active="true"],
+html[data-wp-look="tui"] .wp-trr__row[data-active="true"],
+html[data-wp-look="tui"] .wp-pack__steps li[data-on] {
+  background: var(--wp-accent-600);
+  border-color: transparent;
+  box-shadow: none;
+  color: #fff; /* audit-exempt: white on accent-600, 4.5:1+ in every theme */
+}
+html[data-wp-look="tui"] :is(.wp-nav[data-active], .wp-segmented__opt[data-active="true"], .wp-tabset__tab[data-active="true"], .wp-settings__section-link[data-active="true"], .wp-trr__row[data-active="true"], .wp-pack__steps li[data-on]) :is(.pi, *) { color: inherit; }
+html[data-wp-look="tui"] .wp-nav[data-active]::before { display: none; }
+/* A count on an inverse tab or nav row reads on the accent fill, not as an
+   accent chip on it (3:1 before). */
+html[data-wp-look="tui"] :is(.wp-tabset__tab[data-active="true"] .wp-tabset__count, .wp-nav[data-active] .wp-nav__count) {
+  background: color-mix(in oklab, #fff 18%, transparent); /* audit-exempt: lightens the accent fill under white text */
+  color: inherit;
+}
+html[data-wp-look="tui"] .wp-sidebar__section { text-transform: none; letter-spacing: 0; color: var(--wp-accent-text); }
+html[data-wp-look="tui"] .wp-segmented { border-color: transparent; background: transparent; gap: 6px; }
+html[data-wp-look="tui"] .wp-tabset__tab { padding-inline: 8px; }
+/* Buttons read [ Save ]; an icon-only or link button stays as it is. */
+html[data-wp-look="tui"] .wp-btn { border-color: transparent; }
+html[data-wp-look="tui"] .wp-btn--secondary { background: transparent; }
+html[data-wp-look="tui"] .wp-btn--secondary:hover { background: var(--wp-bg-3); }
+html[data-wp-look="tui"] .wp-btn:not(.wp-btn--icon, .wp-btn--link) .wp-btn__label::before { content: "[ "; }
+html[data-wp-look="tui"] .wp-btn:not(.wp-btn--icon, .wp-btn--link) .wp-btn__label::after { content: " ]"; }
+html[data-wp-look="tui"] :is(.wp-input, .wp-select, .wp-textarea, .wp-input-group, .wp-cselect__field) {
+  border-color: var(--wp-border-strong);
+  background: var(--wp-bg);
+}
+html[data-wp-look="tui"] .wp-input-group .wp-input { background: transparent; }
+/* Checkboxes read [ ] / [x]; the drawn tick hides. */
+html[data-wp-look="tui"] .wp-check {
+  width: auto;
+  min-width: 3ch;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--wp-text-muted);
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  line-height: 1;
+}
+/* State comes from aria-checked or, on a decorative box (aria-hidden, no
+   role), data-checked / data-indeterminate. Nothing may set an inline
+   display on the tick: it would beat this rule and draw both marks. */
+html[data-wp-look="tui"] .wp-check svg { display: none; }
+html[data-wp-look="tui"] .wp-check::before { content: "[ ]"; }
+html[data-wp-look="tui"] .wp-check:is([aria-checked="true"], [data-checked="true"])::before { content: "[x]"; color: var(--wp-accent-text); }
+html[data-wp-look="tui"] .wp-check:is([aria-checked="mixed"], [data-indeterminate="true"]):not([data-checked="true"])::before { content: "[-]"; color: var(--wp-accent-text); }
+html[data-wp-look="tui"] .wp-page__title { font-size: 16px; font-weight: 700; letter-spacing: 0; }
+/* Radios read ( ) / (*) beside the [ ] / [x] checkboxes; the drawn dot
+   hides. RadioGroup marks the picked option on the row (data-checked), the
+   plain .wp-radio is a real input (:checked). */
+html[data-wp-look="tui"] .wp-radio-group__opt .wp-radio-group__dot,
+html[data-wp-look="tui"] .wp-radio {
+  width: auto;
+  min-width: 3ch;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--wp-text-muted);
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  line-height: 16px;
+}
+html[data-wp-look="tui"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after { display: none; }
+html[data-wp-look="tui"] .wp-radio-group__dot::before { content: "( )"; }
+html[data-wp-look="tui"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::before { content: "(*)"; color: var(--wp-accent-text); }
+html[data-wp-look="tui"] .wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot::before { color: var(--wp-text-dim); }
+html[data-wp-look="tui"] .wp-radio::before,
+html[data-wp-look="tui"] .wp-radio:disabled::before {
+  content: "( )";
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: transparent;
+  transform: none;
+}
+html[data-wp-look="tui"] .wp-radio:checked::before { content: "(*)"; color: var(--wp-accent-text); }
+html[data-wp-look="tui"] .wp-radio:disabled:checked::before { content: "(*)"; color: var(--wp-text-dim); }
+html[data-wp-look="tui"] .wp-radio:checked,
+html[data-wp-look="tui"] .wp-radio:disabled:checked { background: transparent; }
+
+/* ================= Canvas previews ignore the look =================
+   The canvas keeps ComfyUI's ground in every look (only the accent follows
+   the manager), so the Settings › Canvas live preview draws canvas pieces
+   with the canvas's own corners and type, not the manager look's. */
+html.wp-manager .wp-pg-mockup {
+  --wp-radius-cap: 999px;
+  --wp-radius-sm: 6px;
+  --wp-radius:    8px;
+  --wp-radius-lg: 12px;
+  --wp-radius-xl: 16px;
+  --wp-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--wp-font);
+}
+
+/* ---------- PostCard in each look ----------
+ * The card draws its own box (src/PostCard.vue), so the looks restyle it like
+ * a .wp-card: firmer, softer, dashed, ruled, tighter or boxed. */
+html[data-wp-look="crisp"] .wp-post-card { border-color: var(--wp-border-strong); }
+html[data-wp-look="soft"] .wp-post-card { border-color: transparent; box-shadow: var(--wp-shadow-md); }
+html[data-wp-look="terminal"] .wp-post-card { border-style: dashed; border-color: var(--wp-border-strong); }
+html[data-wp-look="editorial"] .wp-post-card {
+  background: transparent;
+  border: 0;
+  border-top: 1px solid var(--wp-text);
+  border-radius: 0;
+}
+html[data-wp-look="editorial"] .wp-post-card:hover { transform: none; box-shadow: none; }
+html[data-wp-look="editorial"] .wp-post-card__slug { font-family: var(--wp-font-head, var(--wp-font)); font-size: 16px; }
+html[data-wp-look="compact"] .wp-post-card { padding: 12px 14px; gap: 8px; }
+html[data-wp-look="tui"] .wp-post-card { border-color: var(--wp-border-strong); background: transparent; }
+html[data-wp-look="tui"] .wp-post-card:hover { transform: none; box-shadow: none; background: var(--wp-bg-2); }

package/src/theme/palettes.css

@@ -0,0 +1,254 @@
+/* =========================================================
+   Colour themes — `data-wp-palette` on <html> (tweaksStore.setPalette).
+
+   A theme sets surfaces, borders, the three text tiers and its own accent
+   ramp. It never changes kind colours, variable colours or teal-for-picked:
+   those mean the same thing in every theme. Orbit is tokens.css itself, so it
+   has no block here.
+
+   Dark rules are `html[data-wp-palette=x]:not(.wp-theme-light)` and light
+   rules `html.wp-theme-light[data-wp-palette=x]`, so each beats tokens.css's
+   `:root` / `.wp-theme-light` blocks without depending on load order.
+
+   A preset or custom accent from the Accent setting is written inline on
+   <html>, so it wins over a theme's ramp; "Theme's own" removes it.
+   Ramps are shifted where a theme needs it so `--wp-accent-600` (the primary
+   fill, white text) stays at 4.5:1 or better.
+
+   Contrast: every text tier passes 4.5:1 on bg … bg-3 in both modes, and
+   the focus colour 3:1 (checked 2026-10-28, values in
+   pr-drafts/themes/theme-palettes-2026-10-28.json in the project files).
+   ========================================================= */
+
+/* Accent-derived tints follow whichever ramp is live (theme or picked). */
+html.wp-manager {
+  --wp-focus-ring: 0 0 0 3px color-mix(in oklab, var(--wp-accent-500) 45%, transparent);
+  --wp-row-active: color-mix(in oklab, var(--wp-accent-600) 6%, transparent);
+}
+html.wp-manager.wp-theme-light {
+  --wp-focus-ring: 0 0 0 3px color-mix(in oklab, var(--wp-accent-600) 35%, transparent);
+  --wp-row-active: color-mix(in oklab, var(--wp-accent-600) 9%, transparent);
+}
+
+/* ---------- Native: ComfyUI's own greys, indigo accent ---------- */
+html[data-wp-palette="native"]:not(.wp-theme-light) {
+  --wp-bg:   #18181a;
+  --wp-bg-1: #202123;
+  --wp-bg-2: #262729;
+  --wp-bg-3: #313235;
+  --wp-bg-4: #3b3c40;
+  --wp-border:        rgba(255, 255, 255, 0.07);
+  --wp-border-strong: rgba(255, 255, 255, 0.14);
+  --wp-text:       #ececed;
+  --wp-text-muted: #a8a9ad;
+  --wp-text-dim:   #9c9da3;
+}
+html.wp-theme-light[data-wp-palette="native"] {
+  --wp-bg:   #f3f3f3;
+  --wp-bg-1: #ffffff;
+  --wp-bg-2: #ffffff;
+  --wp-bg-3: #e9e9e9;
+  --wp-bg-4: #d9d9d9;
+  --wp-border:        rgba(0, 0, 0, 0.10);
+  --wp-border-strong: rgba(0, 0, 0, 0.19);
+  --wp-text:       #171718;
+  --wp-text-muted: #494a50;
+  --wp-text-dim:   #5c5d63;
+}
+
+/* ---------- Nebula: violet night, violet accent ---------- */
+html[data-wp-palette="nebula"] {
+  --wp-accent-50:  #f5f3ff;
+  --wp-accent-100: #ede9fe;
+  --wp-accent-200: #ddd6fe;
+  --wp-accent-300: #c4b5fd;
+  --wp-accent-400: #a78bfa;
+  --wp-accent-500: #8b5cf6;
+  --wp-accent-600: #7c3aed;
+  --wp-accent-700: #6d28d9;
+  --wp-accent-800: #5b21b6;
+  --wp-accent-900: #4c1d95;
+}
+html[data-wp-palette="nebula"]:not(.wp-theme-light) {
+  --wp-bg:   #0d0a16;
+  --wp-bg-1: #130f1f;
+  --wp-bg-2: #181327;
+  --wp-bg-3: #211a33;
+  --wp-bg-4: #2a2140;
+  --wp-border:        rgba(255, 255, 255, 0.08);
+  --wp-border-strong: rgba(255, 255, 255, 0.15);
+  --wp-text:       #ece8f6;
+  --wp-text-muted: #aba4c0;
+  --wp-text-dim:   #958dac;
+}
+html.wp-theme-light[data-wp-palette="nebula"] {
+  --wp-bg:   #f8f6fd;
+  --wp-bg-1: #ffffff;
+  --wp-bg-2: #ffffff;
+  --wp-bg-3: #f1edfa;
+  --wp-bg-4: #e6e0f4;
+  --wp-border:        rgba(29, 23, 41, 0.10);
+  --wp-border-strong: rgba(29, 23, 41, 0.18);
+  --wp-text:       #1d1729;
+  --wp-text-muted: #5d5470;
+  --wp-text-dim:   #665d7a;
+}
+
+/* ---------- Tide: slate blue, sky accent (ramp shifted one step) ---------- */
+html[data-wp-palette="tide"] {
+  --wp-accent-50:  #f0f9ff;
+  --wp-accent-100: #e0f2fe;
+  --wp-accent-200: #bae6fd;
+  --wp-accent-300: #7dd3fc;
+  --wp-accent-400: #38bdf8;
+  --wp-accent-500: #0ea5e9;
+  --wp-accent-600: #0369a1; /* sky-700: white 5.9:1 */
+  --wp-accent-700: #075985;
+  --wp-accent-800: #0c4a6e;
+  --wp-accent-900: #082f49;
+}
+html[data-wp-palette="tide"]:not(.wp-theme-light) {
+  --wp-bg:   #0a1018;
+  --wp-bg-1: #0f1722;
+  --wp-bg-2: #131c29;
+  --wp-bg-3: #1a2534;
+  --wp-bg-4: #223042;
+  --wp-border:        rgba(255, 255, 255, 0.08);
+  --wp-border-strong: rgba(255, 255, 255, 0.15);
+  --wp-text:       #e4ebf3;
+  --wp-text-muted: #a0aebe;
+  --wp-text-dim:   #8898aa;
+}
+html.wp-theme-light[data-wp-palette="tide"] {
+  --wp-bg:   #f4f7fa;
+  --wp-bg-1: #ffffff;
+  --wp-bg-2: #ffffff;
+  --wp-bg-3: #eaf0f5;
+  --wp-bg-4: #dde5ee;
+  --wp-border:        rgba(15, 26, 38, 0.10);
+  --wp-border-strong: rgba(15, 26, 38, 0.19);
+  --wp-text:       #0f1a26;
+  --wp-text-muted: #4d5b6b;
+  --wp-text-dim:   #58677a;
+}
+
+/* ---------- Ember: warm charcoal, copper accent (ramp shifted one step) ---------- */
+html[data-wp-palette="ember"] {
+  --wp-accent-50:  #fff7ed;
+  --wp-accent-100: #ffedd5;
+  --wp-accent-200: #fed7aa;
+  --wp-accent-300: #fdba74;
+  --wp-accent-400: #fb923c;
+  --wp-accent-500: #f97316;
+  --wp-accent-600: #c2410c; /* orange-700: white 5.2:1 */
+  --wp-accent-700: #9a3412;
+  --wp-accent-800: #7c2d12;
+  --wp-accent-900: #431407;
+}
+html[data-wp-palette="ember"]:not(.wp-theme-light) {
+  --wp-bg:   #110d0b;
+  --wp-bg-1: #17120f;
+  --wp-bg-2: #1c1613;
+  --wp-bg-3: #251d19;
+  --wp-bg-4: #2f2520;
+  --wp-border:        rgba(255, 255, 255, 0.08);
+  --wp-border-strong: rgba(255, 255, 255, 0.15);
+  --wp-text:       #f1e9e4;
+  --wp-text-muted: #b5a89f;
+  --wp-text-dim:   #9e9188;
+}
+html.wp-theme-light[data-wp-palette="ember"] {
+  --wp-bg:   #faf7f4;
+  --wp-bg-1: #ffffff;
+  --wp-bg-2: #ffffff;
+  --wp-bg-3: #f3ede7;
+  --wp-bg-4: #e9e0d7;
+  --wp-border:        rgba(35, 26, 20, 0.10);
+  --wp-border-strong: rgba(35, 26, 20, 0.19);
+  --wp-text:       #231a14;
+  --wp-text-muted: #62554b;
+  --wp-text-dim:   #6c5f55;
+}
+
+/* ---------- Community: Orbit's night, rust accent, warm cream light ----------
+ * The community site's own theme, the counterpart to the extension's Orbit.
+ * Dark surfaces are Orbit's, so it has no dark block. Ramp shifted one step
+ * from the site's old values so the fill takes white text. */
+html[data-wp-palette="community"] {
+  --wp-accent-50:  #fef5f0;
+  --wp-accent-100: #fde6db;
+  --wp-accent-200: #fbcdb7;
+  --wp-accent-300: #f6a583;
+  --wp-accent-400: #ed8861;
+  --wp-accent-500: #d97757;
+  --wp-accent-600: #a44a2d; /* white 5.8:1 */
+  --wp-accent-700: #82391f;
+  --wp-accent-800: #5c2715;
+  --wp-accent-900: #3f1a0e;
+}
+html.wp-theme-light[data-wp-palette="community"] {
+  --wp-bg:   #f7f5f0;
+  --wp-bg-1: #ffffff;
+  --wp-bg-2: #f1ede4;
+  --wp-bg-3: #e9e4d8;
+  --wp-bg-4: #ddd6c5;
+  --wp-border:        rgba(20, 18, 15, 0.08);
+  --wp-border-strong: rgba(20, 18, 15, 0.16);
+  --wp-text:       #1a1815;
+  --wp-text-muted: #595449;
+  --wp-text-dim:   #6b6559;
+  --wp-row-hover:  rgba(20, 18, 15, 0.03);
+}
+
+/* ---------- High contrast: black / white, solid borders, yellow focus ----------
+ * Keeps its own accent (the Accent setting is off). The fill is a deep
+ * indigo so white text on it reads at 10:1; light accent text carries links
+ * and selection on black. */
+html[data-wp-palette="contrast"] {
+  --wp-accent-50:  #eef2ff;
+  --wp-accent-100: #e0e7ff;
+  --wp-accent-200: #e0e7ff;
+  --wp-accent-300: #c7d2fe;
+  --wp-accent-400: #a5b4fc;
+  --wp-accent-500: #818cf8;
+  --wp-accent-600: #3730a3;
+  --wp-accent-700: #312e81;
+  --wp-accent-800: #1e1b4b;
+  --wp-accent-900: #1e1b4b;
+}
+html[data-wp-palette="contrast"]:not(.wp-theme-light) {
+  --wp-bg:   #000000;
+  --wp-bg-1: #0a0a0a;
+  --wp-bg-2: #111111;
+  --wp-bg-3: #1a1a1a;
+  --wp-bg-4: #262626;
+  --wp-border:        rgba(255, 255, 255, 0.40);
+  --wp-border-strong: rgba(255, 255, 255, 0.70);
+  --wp-text:       #ffffff;
+  --wp-text-muted: #d6d6d6;
+  --wp-text-dim:   #bcbcbc;
+  --wp-accent-text:        #c7d2fe;
+  --wp-accent-text-strong: #e0e7ff;
+  --wp-border-focus: #facc15;
+  --wp-focus-ring: 0 0 0 3px #facc15;
+  --wp-row-hover: rgba(255, 255, 255, 0.08);
+  --wp-row-active: rgba(165, 180, 252, 0.16);
+}
+html.wp-theme-light[data-wp-palette="contrast"] {
+  --wp-bg:   #ffffff;
+  --wp-bg-1: #ffffff;
+  --wp-bg-2: #ffffff;
+  --wp-bg-3: #f0f0f0;
+  --wp-bg-4: #dedede;
+  --wp-border:        rgba(0, 0, 0, 0.40);
+  --wp-border-strong: rgba(0, 0, 0, 0.70);
+  --wp-text:       #000000;
+  --wp-text-muted: #2e2e2e;
+  --wp-text-dim:   #454545;
+  --wp-accent-text:        #3730a3;
+  --wp-accent-text-strong: #1e1b4b;
+  --wp-border-focus: #000000;
+  --wp-focus-ring: 0 0 0 3px #000000;
+  --wp-row-hover: rgba(0, 0, 0, 0.06);
+  --wp-row-active: rgba(55, 48, 163, 0.12);
+}