anentrypoint-design 0.0.272 → 0.0.274

package/app-shell.css

@@ -334,10 +334,17 @@ body.canvas-host { background: transparent !important; }
   font-weight: 600;
 }
 .app-side .count {
-  background: var(--mascot); color: var(--ink);
+  background: color-mix(in oklab, var(--fg) 10%, transparent);
+  color: var(--fg-2);
   padding: 3px 10px; font-size: var(--fs-micro); font-weight: 700;
   border-radius: var(--r-pill);
 }
+/* The lime active pill is the sidebar's one accent moment; its own count
+   chip rides the ink-on-accent pair instead of a second competing hue. */
+.app-side a.active .count {
+  background: color-mix(in oklab, var(--accent-fg) 82%, transparent);
+  color: var(--accent);
+}
 
 .app-main {
   padding: var(--space-5) var(--pad-x) 0;
@@ -430,7 +437,11 @@ body.canvas-host { background: transparent !important; }
   font-weight: 600; font-size: var(--fs-sm);
   text-decoration: none;
   cursor: pointer;
-  /* Rounded-rect app chrome, not a marketing-page stadium CTA. */
+  /* Rounded-rect app chrome, not a marketing-page stadium CTA.
+     Shape vocabulary: r-1/r-2 = actionable buttons, icon-buttons, and
+     containers; r-pill = reserved for status/input/chip/badge/progress
+     surfaces (composer input, chips, badges, progress bars, theme-toggle
+     segments) - never for actions. */
   border-radius: var(--r-1);
   border: var(--bw-hair) solid transparent;
   box-shadow: none;
@@ -452,7 +463,7 @@ body.canvas-host { background: transparent !important; }
 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
 .btn-ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
 .btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
-.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible {
+.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .ds-icon-btn:focus-visible {
   outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
@@ -480,7 +491,6 @@ body.canvas-host { background: transparent !important; }
 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
 .ds-icon-btn-danger:hover { filter: brightness(1.1); }
 .ds-icon-btn:active { transform: translateY(1px); }
-.ds-icon-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-icon-btn:disabled, .ds-icon-btn.is-disabled {
   opacity: 0.5; cursor: not-allowed; pointer-events: none;
 }
@@ -612,7 +622,7 @@ body.canvas-host { background: transparent !important; }
   grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
   gap: var(--space-3);
   align-items: baseline;
-  padding: 16px 22px;
+  padding: var(--space-3) var(--space-4);
   background: var(--bg);
   border-radius: var(--r-2);
   color: var(--fg);
@@ -989,7 +999,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   display: inline-flex; align-items: center; gap: var(--space-hair);
   font-size: var(--fs-xs); font-weight: 600;
 }
-.kpi-delta-up { color: var(--success); }
+.kpi-delta-up { color: var(--green); }
 .kpi-delta-down { color: var(--danger); }
 .ds-sparkline path { stroke: currentColor; }
 .ds-sparkline-up { color: var(--success); }
@@ -1809,7 +1819,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   color: var(--fg-3); text-align: right;
 }
 .ds-upload-item.done .ds-upload-fill { background: var(--success); }
-.ds-upload-item.done .ds-upload-pct { color: var(--success); }
+.ds-upload-item.done .ds-upload-pct { color: var(--green); }
 .ds-upload-item.error .ds-upload-fill { background: var(--warn); }
 .ds-upload-item.error .ds-upload-pct { color: var(--warn); }
 /* Per-row upload recovery actions (replace / dismiss) — error rows are not dead ends. */
@@ -2217,17 +2227,17 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-bubble.chat-md h3,
 .chat-bubble.chat-md h4 {
   font-family: var(--ff-body); font-weight: 600;
-  margin: 12px 0 6px; line-height: 1.3;
+  margin: var(--space-2) 0 var(--space-1); line-height: var(--lh-snug);
 }
 .chat-bubble.chat-md h1 { font-size: 1.15em; }
 .chat-bubble.chat-md h2 { font-size: 1.08em; }
 .chat-bubble.chat-md h3 { font-size: 1.04em; }
-.chat-bubble.chat-md p { margin: 6px 0; }
+.chat-bubble.chat-md p { margin: var(--space-2) 0; }
 .chat-bubble.chat-md ul,
-.chat-bubble.chat-md ol { margin: 6px 0; padding-left: 22px; }
-.chat-bubble.chat-md li { margin: 3px 0; }
+.chat-bubble.chat-md ol { margin: var(--space-2) 0; padding-left: 22px; }
+.chat-bubble.chat-md li { margin: var(--space-1) 0; }
 .chat-bubble.chat-md blockquote {
-  margin: 8px 0; padding: 4px 12px;
+  margin: var(--space-2) 0; padding: 4px 12px;
   border-left: 3px solid color-mix(in oklab, currentColor 30%, transparent);
   color: color-mix(in oklab, currentColor 75%, transparent); font-style: italic;
 }
@@ -2236,7 +2246,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
   padding: 12px 16px; border-radius: var(--r-1); overflow-x: auto;
   font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.55;
-  color: var(--fg); margin: 8px 0;
+  color: var(--fg); margin: var(--space-2) 0;
 }
 /* When injectCodeCopy has wrapped the fence (.chat-code-block), reserve room
    for the absolute .chat-code-lang tab. This selector outranks the bare
@@ -2303,7 +2313,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .chat-bubble.chat-code .token.boolean { color: var(--code-num, var(--sun)); }
 .chat-bubble.chat-code .token.punctuation { color: var(--fg-2); }
 .chat-bubble.chat-code .token.property,
-.chat-bubble.chat-code .token.attr-name { color: var(--sky); }
+.chat-bubble.chat-code .token.attr-name { color: var(--code-keyword, var(--sky)); }
 
 .chat-msg.you .chat-image,
 .chat-msg .chat-image,
@@ -2562,7 +2572,6 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    monospace count chips.
    ============================================================ */
 .app-side .count {
-  background: color-mix(in oklab, var(--mascot) 92%, transparent);
   padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
   font-family: var(--ff-mono); letter-spacing: 0.04em;
   min-width: 18px; text-align: center;
@@ -3255,7 +3264,7 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
 
 .ds-alert-info { --alert-tone: var(--sky); }
 .ds-alert-success { --alert-tone: var(--green); }
-.ds-alert-warn { --alert-tone: var(--sun); }
+.ds-alert-warn { --alert-tone: var(--amber); }
 .ds-alert-error { --alert-tone: var(--warn); }
 
 .ds-alert-icon {

package/chat.css

@@ -392,7 +392,7 @@
    label sticks to the top of the scroll area for Claude-Desktop-style headers. */
 .ds-session-group { display: flex; flex-direction: column; }
 .ds-session-group-rows { display: flex; flex-direction: column; gap: 2px; }
-.ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
+.ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
 .ds-session-row {
   position: relative; display: flex; align-items: center; gap: var(--space-2);
   width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;

package/colors_and_type.css

@@ -56,6 +56,9 @@
      both backgrounds (5.21:1 on --bg-2). */
   --amber:       #7C570F;
   --sky:         #3A6EFF;
+  /* --warn = interactive danger controls (buttons, banners, menus, error
+     inputs); --danger below = passive error/status text and metrics
+     (kpi/sparkline deltas, auth-error text). Two tokens, one convention. */
   --warn:        #E0241A;
   /* Syntax-token aliases: light values pass 4.5:1 on paper; the dark blocks
      restore the bright dark-tuned originals. Components reference ONLY these. */
@@ -65,7 +68,9 @@
   --code-str-alt: var(--mascot-deep);
   --code-num:     #946300;
   /* 0.55 lightness measured 4.70:1 on --paper but only 4.25:1 on --bg-2 (the
-     auth-error banner's actual background) - darkened for AA margin on both. */
+     auth-error banner's actual background) - darkened for AA margin on both.
+     --danger = passive error/status text and metrics; --warn above =
+     interactive danger controls. */
   --danger:      oklch(0.50 0.18 25);
   --success:     var(--green-2);
   --live:        var(--green);

package/community.css

@@ -1208,7 +1208,7 @@
 }
 .cm-banner.tone-success {
   background: color-mix(in oklab, var(--success) 18%, var(--bg));
-  color: var(--success);
+  color: var(--green);
 }
 .cm-banner.tone-error {
   background: color-mix(in oklab, var(--danger) 18%, var(--bg));

package/dist/247420.css

@@ -58,6 +58,9 @@
      both backgrounds (5.21:1 on --bg-2). */
   --amber:       #7C570F;
   --sky:         #3A6EFF;
+  /* --warn = interactive danger controls (buttons, banners, menus, error
+     inputs); --danger below = passive error/status text and metrics
+     (kpi/sparkline deltas, auth-error text). Two tokens, one convention. */
   --warn:        #E0241A;
   /* Syntax-token aliases: light values pass 4.5:1 on paper; the dark blocks
      restore the bright dark-tuned originals. Components reference ONLY these. */
@@ -67,7 +70,9 @@
   --code-str-alt: var(--mascot-deep);
   --code-num:     #946300;
   /* 0.55 lightness measured 4.70:1 on --paper but only 4.25:1 on --bg-2 (the
-     auth-error banner's actual background) - darkened for AA margin on both. */
+     auth-error banner's actual background) - darkened for AA margin on both.
+     --danger = passive error/status text and metrics; --warn above =
+     interactive danger controls. */
   --danger:      oklch(0.50 0.18 25);
   --success:     var(--green-2);
   --live:        var(--green);
@@ -845,10 +850,17 @@
   font-weight: 600;
 }
 .ds-247420 .app-side .count {
-  background: var(--mascot); color: var(--ink);
+  background: color-mix(in oklab, var(--fg) 10%, transparent);
+  color: var(--fg-2);
   padding: 3px 10px; font-size: var(--fs-micro); font-weight: 700;
   border-radius: var(--r-pill);
 }
+/* The lime active pill is the sidebar's one accent moment; its own count
+   chip rides the ink-on-accent pair instead of a second competing hue. */
+.ds-247420 .app-side a.active .count {
+  background: color-mix(in oklab, var(--accent-fg) 82%, transparent);
+  color: var(--accent);
+}
 
 .ds-247420 .app-main {
   padding: var(--space-5) var(--pad-x) 0;
@@ -941,7 +953,11 @@
   font-weight: 600; font-size: var(--fs-sm);
   text-decoration: none;
   cursor: pointer;
-  /* Rounded-rect app chrome, not a marketing-page stadium CTA. */
+  /* Rounded-rect app chrome, not a marketing-page stadium CTA.
+     Shape vocabulary: r-1/r-2 = actionable buttons, icon-buttons, and
+     containers; r-pill = reserved for status/input/chip/badge/progress
+     surfaces (composer input, chips, badges, progress bars, theme-toggle
+     segments) - never for actions. */
   border-radius: var(--r-1);
   border: var(--bw-hair) solid transparent;
   box-shadow: none;
@@ -963,7 +979,7 @@
 .ds-247420 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
 .ds-247420 .btn-ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
 .ds-247420 .btn:active, .ds-247420 .btn-primary:active, .ds-247420 .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
-.ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible {
+.ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible, .ds-247420 .ds-icon-btn:focus-visible {
   outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
@@ -991,7 +1007,6 @@
 .ds-247420 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
 .ds-247420 .ds-icon-btn-danger:hover { filter: brightness(1.1); }
 .ds-247420 .ds-icon-btn:active { transform: translateY(1px); }
-.ds-247420 .ds-icon-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .ds-icon-btn:disabled, .ds-247420 .ds-icon-btn.is-disabled {
   opacity: 0.5; cursor: not-allowed; pointer-events: none;
 }
@@ -1123,7 +1138,7 @@
   grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
   gap: var(--space-3);
   align-items: baseline;
-  padding: 16px 22px;
+  padding: var(--space-3) var(--space-4);
   background: var(--bg);
   border-radius: var(--r-2);
   color: var(--fg);
@@ -1500,7 +1515,7 @@
   display: inline-flex; align-items: center; gap: var(--space-hair);
   font-size: var(--fs-xs); font-weight: 600;
 }
-.ds-247420 .kpi-delta-up { color: var(--success); }
+.ds-247420 .kpi-delta-up { color: var(--green); }
 .ds-247420 .kpi-delta-down { color: var(--danger); }
 .ds-247420 .ds-sparkline path { stroke: currentColor; }
 .ds-247420 .ds-sparkline-up { color: var(--success); }
@@ -2320,7 +2335,7 @@
   color: var(--fg-3); text-align: right;
 }
 .ds-247420 .ds-upload-item.done .ds-upload-fill { background: var(--success); }
-.ds-247420 .ds-upload-item.done .ds-upload-pct { color: var(--success); }
+.ds-247420 .ds-upload-item.done .ds-upload-pct { color: var(--green); }
 .ds-247420 .ds-upload-item.error .ds-upload-fill { background: var(--warn); }
 .ds-247420 .ds-upload-item.error .ds-upload-pct { color: var(--warn); }
 /* Per-row upload recovery actions (replace / dismiss) — error rows are not dead ends. */
@@ -2728,17 +2743,17 @@
 .ds-247420 .chat-bubble.chat-md h3,
 .ds-247420 .chat-bubble.chat-md h4 {
   font-family: var(--ff-body); font-weight: 600;
-  margin: 12px 0 6px; line-height: 1.3;
+  margin: var(--space-2) 0 var(--space-1); line-height: var(--lh-snug);
 }
 .ds-247420 .chat-bubble.chat-md h1 { font-size: 1.15em; }
 .ds-247420 .chat-bubble.chat-md h2 { font-size: 1.08em; }
 .ds-247420 .chat-bubble.chat-md h3 { font-size: 1.04em; }
-.ds-247420 .chat-bubble.chat-md p { margin: 6px 0; }
+.ds-247420 .chat-bubble.chat-md p { margin: var(--space-2) 0; }
 .ds-247420 .chat-bubble.chat-md ul,
-.ds-247420 .chat-bubble.chat-md ol { margin: 6px 0; padding-left: 22px; }
-.ds-247420 .chat-bubble.chat-md li { margin: 3px 0; }
+.ds-247420 .chat-bubble.chat-md ol { margin: var(--space-2) 0; padding-left: 22px; }
+.ds-247420 .chat-bubble.chat-md li { margin: var(--space-1) 0; }
 .ds-247420 .chat-bubble.chat-md blockquote {
-  margin: 8px 0; padding: 4px 12px;
+  margin: var(--space-2) 0; padding: 4px 12px;
   border-left: 3px solid color-mix(in oklab, currentColor 30%, transparent);
   color: color-mix(in oklab, currentColor 75%, transparent); font-style: italic;
 }
@@ -2747,7 +2762,7 @@
   border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
   padding: 12px 16px; border-radius: var(--r-1); overflow-x: auto;
   font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.55;
-  color: var(--fg); margin: 8px 0;
+  color: var(--fg); margin: var(--space-2) 0;
 }
 /* When injectCodeCopy has wrapped the fence (.chat-code-block), reserve room
    for the absolute .chat-code-lang tab. This selector outranks the bare
@@ -2814,7 +2829,7 @@
 .ds-247420 .chat-bubble.chat-code .token.boolean { color: var(--code-num, var(--sun)); }
 .ds-247420 .chat-bubble.chat-code .token.punctuation { color: var(--fg-2); }
 .ds-247420 .chat-bubble.chat-code .token.property,
-.ds-247420 .chat-bubble.chat-code .token.attr-name { color: var(--sky); }
+.ds-247420 .chat-bubble.chat-code .token.attr-name { color: var(--code-keyword, var(--sky)); }
 
 .ds-247420 .chat-msg.you .chat-image,
 .ds-247420 .chat-msg .chat-image,
@@ -3073,7 +3088,6 @@
    monospace count chips.
    ============================================================ */
 .ds-247420 .app-side .count {
-  background: color-mix(in oklab, var(--mascot) 92%, transparent);
   padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
   font-family: var(--ff-mono); letter-spacing: 0.04em;
   min-width: 18px; text-align: center;
@@ -3755,7 +3769,7 @@
 
 .ds-247420 .ds-alert-info { --alert-tone: var(--sky); }
 .ds-247420 .ds-alert-success { --alert-tone: var(--green); }
-.ds-247420 .ds-alert-warn { --alert-tone: var(--sun); }
+.ds-247420 .ds-alert-warn { --alert-tone: var(--amber); }
 .ds-247420 .ds-alert-error { --alert-tone: var(--warn); }
 
 .ds-247420 .ds-alert-icon {
@@ -6035,7 +6049,7 @@
 }
 .ds-247420 .cm-banner.tone-success {
   background: color-mix(in oklab, var(--success) 18%, var(--bg));
-  color: var(--success);
+  color: var(--green);
 }
 .ds-247420 .cm-banner.tone-error {
   background: color-mix(in oklab, var(--danger) 18%, var(--bg));
@@ -6866,7 +6880,7 @@
    label sticks to the top of the scroll area for Claude-Desktop-style headers. */
 .ds-247420 .ds-session-group { display: flex; flex-direction: column; }
 .ds-247420 .ds-session-group-rows { display: flex; flex-direction: column; gap: 2px; }
-.ds-247420 .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
+.ds-247420 .ds-session-group-label { position: sticky; top: 0; z-index: 1; background: var(--bg-1, var(--bg)); font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps); padding: var(--space-2) var(--space-2) var(--space-1); }
 .ds-247420 .ds-session-row {
   position: relative; display: flex; align-items: center; gap: var(--space-2);
   width: 100%; padding: var(--space-2); min-height: 52px; margin-bottom: 2px;