@materialwebunofficial/antigravity-themes 1.0.5 → 1.0.13

package/themes/frames/nordic.css

@@ -0,0 +1,252 @@
+/* ==========================================================================
+   AGY "Nordic Frost" — sidecar frames (the Swarm pane)
+
+   Loaded by frame-host.js inside the plugin:// frame, after nordic-tokens.css.
+   The Nord palette on Swarm's own layout: a Polar Night panel, cards one step
+   up with a nord3 edge, Frost for what is active or about you, Aurora for
+   status. Calm and matte: no glow, no halo, nothing loops.
+   ========================================================================== */
+
+:root[data-agy-theme="nordic"] {
+  color-scheme: dark;
+  --n-warning: #ebcb8b;   /* nord13, Aurora yellow */
+
+  /* The app's tokens. It sends the window's values (--background there is
+     the window, not this panel), and the sidecar SDK writes them inline on
+     <html>: hence !important. This frame sits in the nord1 panel. */
+  --background: var(--nord1) !important;
+  --foreground: var(--nord4) !important;
+  --primary: var(--nord8) !important;
+  --primary-foreground: var(--nord0) !important;
+  --secondary: var(--nord2) !important;
+  --secondary-foreground: var(--nord5) !important;
+  --muted: var(--nord2) !important;
+  --muted-foreground: var(--n-muted) !important;
+  --placeholder: var(--n-muted) !important;
+  --card: var(--nord2) !important;
+  --card-border: var(--nord3) !important;
+  --border: var(--nord3) !important;
+  --accent: var(--nord8) !important;
+  --error: var(--nord11) !important;
+  --font-family: var(--n-font);
+  --editor-font-family: var(--n-mono) !important;
+
+  /* Swarm's own tokens */
+  --sw-bg: var(--nord1);
+  --sw-card: var(--nord2);
+  --sw-secondary: var(--nord2);
+  --sw-muted: var(--nord0);
+  --sw-fg: var(--nord6);
+  --sw-fg-2: var(--nord4);
+  --sw-fg-muted: var(--n-muted);
+  --sw-fg-faint: var(--n-muted);
+  --sw-border: var(--nord3);
+  --sw-card-border: var(--nord3);
+  --sw-primary: var(--nord8);
+  --sw-primary-fg: var(--nord0);
+  --sw-error: var(--nord11);
+  --sw-success: var(--nord14);
+  --sw-warning: var(--n-warning);
+  --sw-hover: color-mix(in srgb, var(--nord4) 7%, transparent);
+  --sw-press: color-mix(in srgb, var(--nord4) 12%, transparent);
+  --sw-ring: var(--nord8);
+  --sw-line: var(--nord3);
+  --sw-fill: color-mix(in srgb, var(--nord4) 9%, transparent);
+  --sw-field: var(--nord0);
+  --sw-font: var(--n-font);
+  --sw-mono: var(--n-mono);
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+}
+:root[data-agy-theme="nordic"][data-agy-mode="light"] {
+  color-scheme: light;
+  --n-warning: #9a6a12;
+  --primary-foreground: #ffffff !important;
+  --sw-primary-fg: #ffffff;
+  --sw-success: #4f7a3a;
+}
+
+:root[data-agy-theme="nordic"] {
+  /* The system grotesque has none of the Google Sans Flex axes Swarm sets */
+  body,
+  h1, h2, h3, .swarm-title, .o2-h, .o2-goal > b, .o2-lb b, .o2-cb b, .o2-tht b {
+    font-variation-settings: normal;
+  }
+  /* Scrollbars: Swarm styles a slim thumb (::-webkit-scrollbar), but its
+     scrollbar-width: thin on every element switches Chromium to the native
+     bar, arrow buttons and all, and those rules never apply */
+  &,
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  body {
+    background: var(--sw-bg) !important;   /* the SDK's inline body background is the window's */
+  }
+
+  /* Matte: a status dot is a dot, the skeleton a still placeholder */
+  .live-dot::after {
+    content: none;
+  }
+  .skel {
+    animation: none;
+    background: var(--sw-fill);
+  }
+
+  /* Frost marks the active tab; the rule under the tabs is the nord3 edge */
+  .tab.active {
+    color: var(--nord6);
+  }
+  .tab.active::after {
+    background: var(--nord8);
+  }
+  .tab:hover {
+    color: var(--nord6);
+  }
+
+  /* Fields are wells in Polar Night with the nord3 edge; Frost on focus */
+  .search,
+  .pane .o2-msearch {
+    border-color: var(--nord3);
+    background: var(--nord0);
+  }
+  .search:focus-within,
+  .pane .o2-msearch:focus-within {
+    border-color: var(--nord8);
+    background: var(--nord0);
+  }
+  .switch input:checked + .switch-track {
+    background: var(--nord8);
+  }
+  .switch input:checked + .switch-track::after {
+    background: var(--nord0);
+  }
+  /* The list: Chromium's customizable select (appearance: base-select)
+     draws the picker in the page, so it follows the theme (a Polar Night tile, Frost on the chosen row) */
+  .select select,
+  .select select::picker(select) {
+    appearance: base-select;
+  }
+  .select select::picker-icon {
+    display: none;   /* the wrapper draws the arrow */
+  }
+  .select select {
+    align-items: center;   /* a base-select is a flex box: its label would sit at the top */
+  }
+  .select select::picker(select) {
+    margin-block: 4px;
+    padding: 4px;
+    border: 1px solid var(--nord3);
+    border-radius: 8px;
+    background: var(--nord1);
+    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.5);
+    color: var(--nord4);
+  }
+  .select select option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 32px;
+    padding: 0 10px;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--nord4);
+    font-size: 13px;
+  }
+  .select select option:is(:hover, :focus-visible) {
+    background: var(--nord2);
+    color: var(--nord6);
+    outline: none;
+  }
+  .select select option:checked {
+    background: color-mix(in srgb, var(--nord8) 18%, var(--nord1));
+    color: var(--nord8);
+    font-weight: 600;
+  }
+  .select select option::checkmark {
+    order: 1;
+    margin-inline-start: auto;
+    font-size: 12px;
+  }
+  .select select option:not(:checked)::checkmark {
+    display: none;
+  }
+
+  /* About you: a Frost tint. Mentions read in Frost, on no chip */
+  .feed .msg.unread-by-me {
+    background: color-mix(in srgb, var(--nord8) 10%, transparent);
+  }
+  .mention {
+    padding: 0;
+    background: none;
+    color: var(--nord8);
+  }
+  .divider {
+    color: var(--nord8);
+  }
+  .divider::after {
+    background: var(--nord3);
+  }
+
+  /* Floating things: a card with the edge and the theme's soft shadow */
+  .jump {
+    border-color: var(--nord3);
+    background: var(--nord2);
+    box-shadow: 0 4px 16px -6px rgb(0 0 0 / 0.35);
+    color: var(--nord6);
+  }
+  .jump:hover {
+    background: color-mix(in srgb, var(--nord6) 6%, var(--nord2));
+  }
+  .toast {
+    border: 1px solid var(--nord3);
+    background: var(--nord2);
+    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.5);
+    color: var(--nord6);
+  }
+
+  /* hive.css cards: nord2 with the nord3 edge, the panel's 10px */
+  .pane .o2 {
+    --o2-card: var(--nord2);
+    --o2-border: var(--nord3);
+  }
+  .pane .o2-lead,
+  .pane .o2-card,
+  .pane .o2-goal,
+  .pane .o2-run,
+  .pane .o2-prog,
+  .pane .o2-th,
+  .pane .o2-reel {
+    border-radius: 10px;
+  }
+  .pane .o2-rundot {
+    box-shadow: none;
+  }
+  .pane .o2-mrow.bees {
+    border-radius: 8px;
+  }
+  .pane .o2-mav.bee,
+  .msg-av.bee {
+    box-shadow: inset 0 0 0 1px var(--nord3);
+  }
+
+  /* Graph: nodes are cards; the one in play is edged in Frost */
+  .graph .node-box {
+    fill: var(--nord2);
+    stroke: var(--nord3);
+  }
+  .graph .node:hover .node-box,
+  .graph .node.hot .node-box {
+    stroke: var(--nord8);
+  }
+  .graph .node.hot .node-box {
+    fill: var(--nord2);
+  }
+  .graph .edge.cur {
+    stroke: var(--nord8);
+  }
+  .graph .msg-dot {
+    fill: var(--nord8);
+  }
+}

package/themes/frames/paper.css

@@ -0,0 +1,298 @@
+/* ==========================================================================
+   AGY "E-Ink / Paper" — sidecar frames (the Swarm pane)
+
+   Loaded by frame-host.js inside the plugin:// frame, after paper-tokens.css.
+   The board as a page: ink on paper, crisp 1px rules, 4px corners, no
+   shadow, no color (status is told by fill and weight, and the bees print in
+   gray), posts set in the reading serif, and nothing moves, as on e-ink.
+   ========================================================================== */
+
+:root[data-agy-theme="paper"] {
+  color-scheme: dark;
+
+  /* The app's tokens. It sends the window's values (--background there is
+     the window, not this page), and the sidecar SDK writes them inline on
+     <html>: hence !important. This frame sits on the panel. */
+  --background: var(--p-panel) !important;
+  --foreground: var(--p-text) !important;
+  --primary: var(--p-primary) !important;
+  --primary-foreground: var(--p-primary-ink) !important;
+  --secondary: var(--p-high) !important;
+  --secondary-foreground: var(--p-text-2) !important;
+  --muted: var(--p-raised) !important;
+  --muted-foreground: var(--p-text-3) !important;
+  --placeholder: var(--p-text-3) !important;
+  --card: var(--p-raised) !important;
+  --card-border: var(--p-line-2) !important;
+  --border: var(--p-line) !important;
+  --accent: var(--p-primary) !important;
+  --error: var(--p-text-max) !important;
+  --font-family: var(--p-font-ui);
+  --editor-font-family: var(--p-font-mono) !important;
+
+  /* Swarm's own tokens */
+  --sw-bg: var(--p-panel);
+  --sw-card: var(--p-raised);
+  --sw-secondary: var(--p-high);
+  --sw-muted: var(--p-inset);
+  --sw-fg: var(--p-text);
+  --sw-fg-2: var(--p-text);
+  --sw-fg-muted: var(--p-text-2);
+  --sw-fg-faint: var(--p-text-3);
+  --sw-border: var(--p-line-2);
+  --sw-card-border: var(--p-line-2);
+  --sw-primary: var(--p-primary);
+  --sw-primary-fg: var(--p-primary-ink);
+  /* No color: working is solid ink, attention is the strongest ink */
+  --sw-error: var(--p-text-max);
+  --sw-success: var(--p-text);
+  --sw-warning: var(--p-text-max);
+  --sw-hover: var(--p-hover);
+  --sw-press: var(--p-select);
+  --sw-ring: var(--p-primary);
+  --sw-line: var(--p-line-2);
+  --sw-fill: var(--p-high);
+  --sw-field: var(--p-raised);
+  --sw-font: var(--p-font-ui);
+  --sw-mono: var(--p-font-mono);
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 4px;
+}
+:root[data-agy-theme="paper"][data-agy-mode="light"] {
+  color-scheme: light;
+}
+
+:root[data-agy-theme="paper"] {
+  /* E-ink does not animate */
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+  /* The system face has none of the Google Sans Flex axes Swarm sets */
+  body,
+  h1, h2, h3, .swarm-title, .o2-h, .o2-goal > b, .o2-lb b, .o2-cb b, .o2-tht b {
+    font-variation-settings: normal;
+  }
+  /* Scrollbars: Swarm styles a slim thumb (::-webkit-scrollbar), but its
+     scrollbar-width: thin on every element switches Chromium to the native
+     bar, arrow buttons and all, and those rules never apply */
+  &,
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+  body {
+    background: var(--sw-bg) !important;   /* the SDK's inline body background is the window's */
+  }
+  .swarm-title {
+    font-family: var(--p-font-read);
+    font-size: 16px;
+    color: var(--p-text-max);
+  }
+  /* Posts and status lines are prose: the reading serif */
+  .msg-body,
+  .pane .o2-mnow,
+  .pane .o2-goal > p,
+  .pane .o2-cb p,
+  .pane .o2-runsum {
+    font-family: var(--p-font-read);
+  }
+  .feed .msg-body {
+    font-size: 14px;
+    color: var(--p-text);
+  }
+
+  /* Live: a printed mark, ink when connected and hollow when not */
+  .live-dot::after {
+    content: none;
+  }
+  .live-dot {
+    background: var(--p-primary);
+  }
+  #live.stale .live-dot {
+    background: none;
+    box-shadow: inset 0 0 0 1.5px var(--p-text-2);
+  }
+
+  /* Tabs: the active one in full ink over a 2px rule */
+  .tab.active {
+    font-weight: 600;
+    color: var(--p-text-max);
+  }
+  .tab.active::after {
+    height: 2px;
+    border-radius: 0;
+    background: var(--p-primary);
+  }
+
+  /* Fields and floating things: paper with a crisp edge, never a shadow */
+  .search,
+  .pane .o2-msearch {
+    border-color: var(--p-line-2);
+    background: var(--p-raised);
+  }
+  .search:focus-within,
+  .pane .o2-msearch:focus-within {
+    border-color: var(--p-primary);
+    background: var(--p-raised);
+  }
+  .jump {
+    border-color: var(--p-line-3);
+    background: var(--p-raised);
+    box-shadow: none;
+  }
+  .jump:hover {
+    background: var(--p-high);
+  }
+  .toast {
+    border: 1px solid var(--p-primary);
+    background: var(--p-raised);
+    box-shadow: none;
+    color: var(--p-text-max);
+  }
+  .slider::-webkit-slider-thumb {
+    box-shadow: none;
+  }
+  .segmented button.on {
+    box-shadow: inset 0 0 0 1px var(--p-line-3);
+  }
+  /* The list: Chromium's customizable select (appearance: base-select)
+     draws the picker in the page, so it follows the theme (a ruled box, square, no shadow; the chosen row in reverse) */
+  .select select,
+  .select select::picker(select) {
+    appearance: base-select;
+  }
+  .select select::picker-icon {
+    display: none;   /* the wrapper draws the arrow */
+  }
+  .select select {
+    align-items: center;   /* a base-select is a flex box: its label would sit at the top */
+  }
+  .select select::picker(select) {
+    margin-block: 4px;
+    padding: 0;
+    border: 1px solid var(--p-text);
+    border-radius: 0;
+    background: var(--p-panel);
+    box-shadow: none;
+    color: var(--p-text);
+  }
+  .select select option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 30px;
+    padding: 0 10px;
+    border-radius: 0;
+    background: transparent;
+    color: var(--p-text);
+    font-size: 13px;
+  }
+  .select select option:is(:hover, :focus-visible) {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    outline: none;
+  }
+  .select select option:checked {
+    background: var(--p-primary);
+    color: var(--p-primary-ink);
+    text-decoration: none;
+  }
+  .select select option::checkmark {
+    order: 1;
+    margin-inline-start: auto;
+    font-size: 12px;
+  }
+  .select select option:not(:checked)::checkmark {
+    display: none;
+  }
+
+  /* About you: a marked passage. A mention is underlined ink, not a chip */
+  .feed .msg.unread-by-me {
+    background: var(--p-select);
+  }
+  .mention {
+    padding: 0;
+    background: none;
+    color: var(--p-text-max);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+  }
+  .divider {
+    color: var(--p-text-max);
+  }
+  .divider::after {
+    background: var(--p-line-3);
+  }
+  .msg-channel {
+    background: var(--p-high);
+    color: var(--p-text);
+  }
+
+  /* The bees and their tiles print in gray */
+  .msg-av,
+  .pane .o2-mav,
+  .pane .o2-tile,
+  .pane .o2-wchip.bee .beewrap,
+  .pane .o2-onb-i {
+    filter: grayscale(1);
+  }
+  .msg-av.bee,
+  .pane .o2-mav.bee {
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px var(--p-line-2);
+  }
+
+  /* hive.css cards: index cards, 4px corners and a 1px edge */
+  .pane .o2 {
+    --o2-card: var(--p-raised);
+    --o2-border: var(--p-line-2);
+    --o2-info: var(--p-text);
+  }
+  .pane .o2-lead,
+  .pane .o2-card,
+  .pane .o2-goal,
+  .pane .o2-run,
+  .pane .o2-prog,
+  .pane .o2-th,
+  .pane .o2-reel,
+  .pane .o2-mrow.bees,
+  .pane .o2-tile,
+  .pane .o2-tile.lg {
+    border-radius: 4px;
+  }
+  .pane .o2-rundot {
+    box-shadow: none;
+  }
+  /* Attention without color: a heavier edge */
+  .pane .o2-br.blocked .o2-card,
+  .pane .o2-th.needs,
+  .pane .o2-th.blocked {
+    border-color: var(--p-primary);
+    background: var(--p-raised);
+  }
+  .pane .o2-ask {
+    background: var(--p-high);
+  }
+  .badge.paused,
+  .badge.stale,
+  .ov-sys,
+  .ov-sys.error {
+    background: var(--p-high);
+    color: var(--p-text-max);
+  }
+
+  /* Graph: line art */
+  .graph .node-box {
+    fill: var(--p-raised);
+    stroke: var(--p-line-3);
+  }
+  .graph .node:hover .node-box,
+  .graph .node.hot .node-box {
+    stroke: var(--p-primary);
+  }
+}

package/themes/index.json

@@ -2,11 +2,17 @@
   "default": "matte",
   "themes": {
     "antigravity": [],
-    "matte": ["matte.css"],
-    "paper": ["paper.css"],
-    "nordic": ["nordic.css"],
+    "matte": ["matte-tokens.css", "matte.css"],
+    "paper": ["paper-tokens.css", "paper.css"],
+    "nordic": ["nordic-tokens.css", "nordic.css"],
     "md3e": ["md3e-tokens.css", "md3e.css", "md3e-icons.css"]
   },
+  "frames": {
+    "matte": ["matte-tokens.css", "frames/matte.css"],
+    "paper": ["paper-tokens.css", "frames/paper.css"],
+    "nordic": ["nordic-tokens.css", "frames/nordic.css"],
+    "md3e": ["md3e-tokens.css", "frames/md3e.css"]
+  },
   "fonts": {
     "md3e": [
       { "family": "Roboto", "file": "../vendor/md3e/roboto-variable.woff2", "weight": "100 900", "stretch": "75% 100%" }
@@ -14,14 +20,14 @@
   },
   "ripple": ["md3e"],
   "options": [
-    { "key": "antigravity", "name": "Antigravity (Varsayılan)", "theme": "antigravity", "swatch": "transparent" },
-    { "key": "matte",       "name": "Matte",                   "theme": "matte",       "swatch": "#ededee" },
-    { "key": "paper",       "name": "E-Ink / Paper",           "theme": "paper",       "swatch": "#e5e5e5" },
-    { "key": "nordic",      "name": "Nordic Frost",            "theme": "nordic",      "swatch": "#88c0d0" },
-    { "key": "md3e-teal",   "name": "Teal",                    "theme": "md3e",        "seed": "teal",   "swatch": "#a5faf9" },
-    { "key": "md3e-ocean",  "name": "Ocean",                   "theme": "md3e",        "seed": "ocean",  "swatch": "#9ecefe" },
-    { "key": "md3e-forest", "name": "Forest",                  "theme": "md3e",        "seed": "forest", "swatch": "#c8f2ae" },
-    { "key": "md3e-amber",  "name": "Amber",                   "theme": "md3e",        "seed": "amber",  "swatch": "#fecd79" },
-    { "key": "md3e-coral",  "name": "Coral",                   "theme": "md3e",        "seed": "coral",  "swatch": "#ffa6a8" }
+    { "key": "antigravity", "name": "Antigravity (Default)", "theme": "antigravity", "swatch": "transparent" },
+    { "key": "matte", "name": "Matte", "theme": "matte", "swatch": "#ededee" },
+    { "key": "paper", "name": "E-Ink / Paper", "theme": "paper", "swatch": "#e5e5e5" },
+    { "key": "nordic", "name": "Nordic Frost", "theme": "nordic", "swatch": "#88c0d0" },
+    { "key": "md3e-teal", "name": "Teal", "theme": "md3e", "seed": "teal", "swatch": "#a5faf9" },
+    { "key": "md3e-ocean", "name": "Ocean", "theme": "md3e", "seed": "ocean", "swatch": "#9ecefe" },
+    { "key": "md3e-forest", "name": "Forest", "theme": "md3e", "seed": "forest", "swatch": "#c8f2ae" },
+    { "key": "md3e-amber", "name": "Amber", "theme": "md3e", "seed": "amber", "swatch": "#fecd79" },
+    { "key": "md3e-coral", "name": "Coral", "theme": "md3e", "seed": "coral", "swatch": "#ffa6a8" }
   ]
 }

package/themes/matte-tokens.css

@@ -0,0 +1,98 @@
+/* AGY "Matte" — tokens. Shared by the window (matte.css) and by sidecar
+   frames (frames/matte.css), which load no other part of the theme. */
+
+/* 00 — Tokens -------------------------------------------------------------- */
+:root[data-agy-theme="matte"] {
+  /* Surfaces, back to front (neutral, no blue cast) */
+  --m-window: #0e0e10;   /* window frame, title bar, sidebar */
+  --m-panel:  #151517;   /* the conversation panel */
+  --m-raised: #1c1c1f;   /* composer, user message, cards, menus */
+  --m-high:   #26262a;   /* highlight inside raised things, tooltips */
+  --m-inset:  #111113;   /* code */
+
+  /* Hairlines and states (alpha white, reads the same on every surface) */
+  --m-line:   rgb(255 255 255 / 0.075);
+  --m-line-2: rgb(255 255 255 / 0.11);
+  --m-line-3: rgb(255 255 255 / 0.18);
+  --m-hover:  rgb(255 255 255 / 0.045);
+  --m-select: rgb(255 255 255 / 0.08);
+
+  /* Text — contrast on --m-panel */
+  --m-text-max: #f2f2f3;
+  --m-text:     #dcdcde;   /* 13.4:1 */
+  --m-text-2:   #a3a3a8;   /*  7.0:1 */
+  --m-text-3:   #86868c;   /*  4.9:1 */
+
+  /* The one bright thing */
+  --m-primary:     #ededee;
+  --m-primary-ink: #111113;
+  --m-strong:      #ffffff;   /* one step past --m-primary (button hover) */
+
+  /* Status, the Context card's segments, and the remaining literals */
+  --m-success: #6fbf8b;
+  --m-warning: #d9a35b;
+  --m-error:   #e06c6c;
+  --m-blue:    #7aa2f7;
+  --m-amber:   #e5a84b;
+  --m-teal:    #73daca;
+  --m-selection: rgb(255 255 255 / 0.16);
+  --m-lineno:    #5c5c60;
+  --m-scroll:    rgb(255 255 255 / 0.10);
+  --m-scroll-2:  rgb(255 255 255 / 0.18);
+  --m-scroll-3:  rgb(255 255 255 / 0.24);
+  --m-find:         rgb(217 163 91 / 0.24);
+  --m-find-current: rgb(217 163 91 / 0.55);
+  --m-find-border:  rgb(217 163 91 / 0.85);
+  --m-shadow:      rgb(0 0 0 / 0.7);
+  --m-shadow-menu: rgb(0 0 0 / 0.75);
+
+  --m-font-ui:      "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
+  --m-font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
+  --m-font-mono:    "Cascadia Mono", "Cascadia Code", Consolas, monospace;
+}
+
+/* Light mode: the app's own setting (System / Light / Dark, marked on
+   <body>), mirrored by theme-host.js as data-agy-mode. Same structure,
+   inverted: a light gray window holds a near-white panel, raised things are
+   white and carry the hairline, lines and states are alpha black, and the
+   one strong thing is the near-black send button. Every rule reads these
+   tokens, so nothing else changes. Contrast on --m-panel. */
+:root[data-agy-theme="matte"][data-agy-mode="light"] {
+  --m-window: #ebebed;
+  --m-panel:  #f8f8f9;
+  --m-raised: #ffffff;
+  --m-high:   #e7e7ea;
+  --m-inset:  #f1f1f3;
+
+  --m-line:   rgb(0 0 0 / 0.08);
+  --m-line-2: rgb(0 0 0 / 0.12);
+  --m-line-3: rgb(0 0 0 / 0.22);
+  --m-hover:  rgb(0 0 0 / 0.04);
+  --m-select: rgb(0 0 0 / 0.07);
+
+  --m-text-max: #0b0b0d;
+  --m-text:     #1d1d20;   /* 15.8:1 */
+  --m-text-2:   #4b4b51;   /*  8.2:1 */
+  --m-text-3:   #626268;   /*  5.7:1, 5.1:1 on the window */
+
+  --m-primary:     #18181b;
+  --m-primary-ink: #f6f6f7;
+  --m-strong:      #000000;
+
+  --m-success: #277045;
+  --m-warning: #94560a;
+  --m-error:   #b3373a;
+  --m-blue:    #3a63c4;
+  --m-amber:   #a86a12;
+  --m-teal:    #1f7f71;
+  --m-selection: rgb(0 0 0 / 0.12);
+  --m-lineno:    #8e8e94;
+  --m-scroll:    rgb(0 0 0 / 0.14);
+  --m-scroll-2:  rgb(0 0 0 / 0.24);
+  --m-scroll-3:  rgb(0 0 0 / 0.32);
+  --m-find:         rgb(168 106 18 / 0.18);
+  --m-find-current: rgb(168 106 18 / 0.40);
+  --m-find-border:  rgb(168 106 18 / 0.8);
+  --m-shadow:      rgb(0 0 0 / 0.16);
+  --m-shadow-menu: rgb(0 0 0 / 0.18);
+}