anentrypoint-design 0.0.166 → 0.0.168

package/README.md

@@ -4,7 +4,7 @@ The 247420 / AnEntrypoint design system, packaged as a single-file ESM SDK.
 
 friendly rounded sans body, monospace only on real code, tonal surfaces over borders, indicator rails for color-coded separation, generous negative space, terminal-flavoured rhythm.
 
-we fart in its general direction. ◰
+we fart in its general direction.
 
 ## install (the only step)
 

package/app-shell.css

@@ -134,7 +134,7 @@ code {
 
 pre {
   font-family: var(--ff-mono);
-  background: var(--panel-bg, #15151a);
+  background: var(--panel-bg);
   color: var(--panel-text, inherit);
   padding: var(--space-5);
   overflow-x: auto;
@@ -145,7 +145,7 @@ pre {
 }
 pre .k { color: var(--mascot); }
 pre .s { color: var(--sun); }
-pre .c { color: #9A9AA2; }
+pre .c { color: var(--fg-3); }
 pre .n { color: var(--green-2); }
 
 /* ============================================================
@@ -589,10 +589,10 @@ a.row { text-decoration: none; }
 .cli .copy   {
   padding: 8px 16px; background: transparent; color: var(--paper);
   font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
-  cursor: pointer; box-shadow: inset 0 0 0 1px #6A6A70;
+  cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill);
 }
-.cli .copy:hover { background: #6A6A70; }
+.cli .copy:hover { background: var(--fg-3); }
 
 /* Multi-line CLI block: when .cli holds .cli-line / .cli-cmt children
    (quickstart scripts, multi-command snippets) it stacks as a column
@@ -1285,7 +1285,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .btn-primary.danger {
   background: var(--warn);
   border-color: var(--warn);
-  color: #fff;
+  color: var(--on-color);
 }
 
 /* ── Preview ──────────────────────────────────────────────── */
@@ -1469,7 +1469,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);
-  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  box-shadow: var(--shadow-1);
 }
 .ds-theme-toggle.btn {
   font-family: var(--ff-mono); font-size: var(--fs-xs);
@@ -2246,7 +2246,7 @@ textarea::placeholder {
 }
 .ds-field input[aria-invalid="true"],
 .ds-field textarea[aria-invalid="true"] {
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame, #d64545);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
 }
 
 /* Clear button for text inputs */

package/chat.css

@@ -27,21 +27,21 @@
   white-space: nowrap;
   margin-left: auto;
   font-size: .85em;
-  color: var(--muted, #8a8f98);
+  color: var(--fg-3);
 }
 /* status disc — a CSS-drawn dot, not a glyph; pulses while streaming */
 .agentchat-status .status-dot-disc {
   flex: none; width: 8px; height: 8px; border-radius: 50%;
-  background: var(--muted, #8a8f98);
+  background: var(--fg-3);
 }
 .agentchat-status .status-dot-disc.status-dot-live {
-  background: var(--accent, #50c878);
+  background: var(--accent);
   animation: agentchat-pulse 2s infinite;
 }
 @keyframes agentchat-pulse {
-  0%   { box-shadow: 0 0 0 0 rgba(80, 200, 120, .5); }
-  70%  { box-shadow: 0 0 0 6px rgba(80, 200, 120, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); }
+  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); }
+  70%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
 }
 @media (prefers-reduced-motion: reduce) {
   .agentchat-status .status-dot-disc { animation: none !important; }
@@ -53,7 +53,7 @@
   align-items: center;
   gap: var(--space-2, 8px);
   font-size: .85em;
-  color: var(--muted, #8a8f98);
+  color: var(--fg-3);
   flex-wrap: wrap;
 }
 .agentchat-cwd-text {
@@ -64,20 +64,20 @@
 }
 .agentchat-cwd-btn {
   background: none;
-  border: 1px solid var(--border, #2a2f3a);
+  border: 1px solid var(--rule);
   color: inherit;
   border-radius: 6px;
   padding: 2px 8px;
   cursor: pointer;
   font: inherit;
 }
-.agentchat-cwd-btn:hover { border-color: var(--accent, #50c878); }
+.agentchat-cwd-btn:hover { border-color: var(--accent); }
 .agentchat-cwd-input {
   flex: 1;
   min-width: 12ch;
-  background: var(--surface, #11151c);
-  border: 1px solid var(--border, #2a2f3a);
-  color: var(--text, #e6e9ee);
+  background: var(--bg-2);
+  border: 1px solid var(--rule);
+  color: var(--fg);
   border-radius: 6px;
   padding: 4px 8px;
   font: inherit;
@@ -90,7 +90,7 @@
   gap: .5em;
 }
 .agentchat-title { font-size: 1em; margin: 0; }
-.agentchat-sub { font-size: .85em; color: var(--muted, #8a8f98); }
+.agentchat-sub { font-size: .85em; color: var(--fg-3); }
 .agentchat-thread {
   flex: 1;
   min-height: 0;

package/colors_and_type.css

@@ -52,8 +52,32 @@
 
   --accent:      var(--green);
   --accent-fg:   var(--paper);
+  --accent-bright: var(--green-2); /* base value so var(--accent-bright) never falls back empty; ink + [data-accent] retune it */
   --accent-tint: color-mix(in oklab, var(--accent) 26%, var(--bg));
 
+  /* On-color foregrounds — text/icons that sit ON a saturated fill (accent,
+     danger, category chips). Theme-driven so white-on-color never hard-codes
+     #fff. --on-accent tracks --accent-fg; --on-color is the generic light
+     foreground for any colored fill. */
+  --on-accent:   var(--accent-fg);
+  --on-color:    #fff;
+
+  /* Scrims — modal/overlay backdrops. Derived from --fg so a dark theme dims
+     with its own ink rather than a baked rgba(0,0,0). */
+  --scrim:        color-mix(in oklab, var(--fg) 40%, transparent);
+  --scrim-strong: color-mix(in oklab, var(--fg) 72%, transparent);
+  --scrim-media:  color-mix(in oklab, var(--fg) 85%, transparent);
+
+  /* Category palette — surfaces (forum tags, project cards) that color-code by
+     category. Canonical so a theme/accent swap recolors categories instead of
+     drifting from a private --cat-* block. Derived from the base palette. */
+  --cat-green:   var(--green-2);
+  --cat-purple:  var(--purple-2);
+  --cat-mascot:  var(--mascot);
+  --cat-sun:     var(--sun);
+  --cat-flame:   var(--flame);
+  --cat-sky:     var(--sky);
+
   --panel-bg:     var(--bg);
   --panel-bg-2:   var(--bg-2);
   --panel-accent: var(--accent);
@@ -275,6 +299,47 @@ select:focus-visible {
   --panel-text-3: inherit;
   --panel-accent-2: inherit;
   --panel-shadow: inherit;
+  --on-accent: inherit;
+  --on-color: inherit;
+  --scrim: inherit;
+  --scrim-strong: inherit;
+  --scrim-media: inherit;
+  --cat-green: inherit;
+  --cat-purple: inherit;
+  --cat-mascot: inherit;
+  --cat-sun: inherit;
+  --cat-flame: inherit;
+  --cat-sky: inherit;
+}
+
+/* ============================================================
+   Named-theme preset contract
+   ------------------------------------------------------------
+   A theme is one [data-theme="X"] block that overrides ONLY the semantic
+   surface tokens — never component rules, never raw literals in component
+   sheets. The base :root above IS the "paper" theme; [data-theme="paper"]
+   restates it so the attribute is explicit and round-trippable. To add a
+   theme: copy a block, rename the attr, retune the ~8 semantic tokens.
+   ============================================================ */
+[data-theme="paper"] {
+  color-scheme: light;
+  --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
+  --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
+  --accent: var(--green); --accent-fg: var(--paper);
+}
+
+/* thebird — warm-paper brand preset. A first-class swappable theme: it lives
+   here in the canonical layer (not as a global :root override) so any consumer
+   can opt in with data-theme="thebird". The OS-shell chrome (bar heights,
+   window controls) stays in src/kits/os/theme.css; only color lives here. */
+[data-theme="thebird"] {
+  color-scheme: light;
+  --paper:   #F5F0E4;
+  --paper-2: #EFE9DB;
+  --paper-3: #E3DAC7;
+  --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3);
+  --fg: var(--ink);   --fg-2: var(--ink-2);   --fg-3: var(--ink-3);
+  --accent: var(--green); --accent-fg: var(--paper);
 }
 
 [data-density="compact"]     { --density: 0.75; }
@@ -320,6 +385,10 @@ select:focus-visible {
               0 2px 4px  color-mix(in oklab, var(--fg) 6%,  transparent);
   --shadow-3: 0 12px 32px color-mix(in oklab, var(--fg) 14%, transparent),
               0 4px 8px   color-mix(in oklab, var(--fg) 8%,  transparent);
+  /* Overlay elevation — the float for dialogs/lightboxes that sit above a
+     scrim; heavier than --shadow-3 and theme-driven (was raw rgba(0,0,0,.4)). */
+  --shadow-overlay: 0 12px 40px color-mix(in oklab, var(--fg) 28%, transparent),
+                    0 4px 12px  color-mix(in oklab, var(--fg) 16%, transparent);
   --z-dropdown:  600;
   --z-popover:   700;
   --z-modal:     800;

package/community.css

@@ -1437,9 +1437,9 @@
   cursor: pointer; font-size: 16px; line-height: 1;
 }
 .vx-vc-btn:hover { background: var(--bg-4, var(--bg-3)); }
-.vx-vc-on { background: var(--accent); color: var(--accent-fg, #fff); border-color: var(--accent); }
+.vx-vc-on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
 .vx-vc-disabled, .vx-vc-btn:disabled { opacity: .4; cursor: not-allowed; }
-.vx-vc-leave { margin-left: auto; background: var(--danger, #d04545); color: #fff; border-color: var(--danger, #d04545); }
+.vx-vc-leave { margin-left: auto; background: var(--danger); color: var(--on-color); border-color: var(--danger); }
 .vx-vc-glyph { pointer-events: none; }
 
 /* ThreadPanel — cm-thread-panel / cm-tp-* */
@@ -1482,7 +1482,7 @@
 .cm-forum-toolbar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule); }
 .cm-forum-search { flex: 1; padding: var(--space-1) var(--space-2); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
 .cm-forum-sort { padding: var(--space-1); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
-.cm-forum-new { padding: var(--space-1) var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--accent-fg, #fff); cursor: pointer; }
+.cm-forum-new { padding: var(--space-1) var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--accent-fg); cursor: pointer; }
 .cm-forum-list { flex: 1; min-height: 0; overflow-y: auto; }
 .cm-forum-item { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; text-align: left; cursor: pointer; padding: var(--space-2) var(--space-3); border: none; background: transparent; border-bottom: var(--bw-hair) solid var(--rule); color: var(--fg); }
 .cm-forum-item:hover { background: var(--bg-3); }