@siyahi/ui 0.1.9-next.20 → 0.1.9-next.22

package/styles/siyahi.css

@@ -1,7 +1,10 @@
 /*
  * Siyahi theme: the only file in the package that holds colour values.
- * Stock shadcn/ui `neutral` for both schemes, plus four meaning colours and a
- * five-hue chart palette. `packages/tools/contrast.mjs` checks every value
+ * shadcn/ui `neutral` greys for both schemes, with ink indigo (hue 275)
+ * placed, not spread: links, focus rings, the selected sidebar item's text
+ * and the first chart series. Buttons, badges and toggles stay monochrome,
+ * where black and white read strongest. Plus three meaning
+ * colours and a five-hue chart palette. `packages/tools/contrast.mjs` checks every value
  * here in the build; when a check fails, change the value, never the bar.
  */
 @import "tailwindcss";
@@ -80,8 +83,9 @@
 
 :root {
   color-scheme: light dark;
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  /* shadcn's "small": crisper than its 0.625rem default, still not square. Cards 10px, buttons 7px. */
+  --radius: 0.45rem;
+  --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
@@ -92,42 +96,47 @@
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  /* Below shadcn's 0.556, so muted text keeps 4.5:1 on the muted fill and on every Callout's tint. */
+  --muted-foreground: oklch(0.51 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+  /* Deeper than the loss red, so a destructive button's label reads on its own red tint, hovered too. */
+  --destructive: oklch(0.49 0.19 27.325);
   --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  /* Tailwind green-700, red-600, amber-700, blue-600. */
-  --positive: oklch(0.527 0.154 150.069);
+  /* The edge of a field (input, textarea, select, input group) at 3:1: --border stays faint for dividers. */
+  --input: oklch(0.64 0 0);
+  --ring: oklch(0.62 0.16 275);
+  /* Tailwind green-700, red-600, amber-700, with their chroma lowered to the sRGB edge. */
+  --positive: oklch(0.527 0.145 150.069);
   --positive-foreground: oklch(0.985 0 0);
-  --negative: oklch(0.577 0.245 27.325);
+  --negative: oklch(0.577 0.235 27.325);
   --negative-foreground: oklch(0.985 0 0);
-  --warning: oklch(0.555 0.163 48.998);
+  --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
-  --link: oklch(0.546 0.245 262.881);
+  --link: oklch(0.51 0.2 275);
   /*
-   * Blue, emerald, amber, violet, rose. Each slot reaches 3:1 against the card
-   * and against the slots next to it, which only lightness can give, so
-   * emerald and violet are the deep members in both schemes. Slots two apart
+   * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
+   * gain or a loss. Each slot reaches 3:1 against the canvas, the card and the
+   * slots next to it, which only lightness can give, so indigo, plum and teal
+   * are the deep members and amber and sky the pale ones, in both schemes: a
+   * pale indigo in dark read as lavender and lost the accent. Slots two apart
    * share a lightness and are told apart by hue; series take slots in order.
    * Every chart value is inside sRGB, so the browser paints what the contrast
    * check scored.
    */
-  --chart-1: oklch(0.65 0.17 259.8);
-  --chart-2: oklch(0.35 0.07 163.2);
-  --chart-3: oklch(0.66 0.15 60);
-  --chart-4: oklch(0.36 0.17 293);
-  --chart-5: oklch(0.65 0.21 16.4);
+  --chart-1: oklch(0.4 0.17 275);
+  --chart-2: oklch(0.66 0.13 70);
+  --chart-3: oklch(0.38 0.13 335);
+  --chart-4: oklch(0.65 0.11 235);
+  --chart-5: oklch(0.36 0.06 205);
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent-foreground: oklch(0.45 0.2 275);
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.62 0.16 275);
 
   @variant dark {
     /*
@@ -136,49 +145,54 @@
      * cards' grey gone on a ruled page the canvas is what text sits on.
      * Claude Code (#181818, about #e8e8e8 text) and T3 Code (#0a0a0a, about
      * #bebebe) both narrow that gap; this sits between them, at 14.9:1.
-     * The card matches the canvas, so the contrast check scores the colour
-     * a ruled chart is drawn on, and the sidebar is a shade darker, as in
-     * the light scheme.
+     * Cards sit one step above the canvas, so data reads as raised, as the
+     * white card does on the light canvas; the sidebar is a shade darker.
      */
-    --background: oklch(0.18 0 0);
+    --background: oklch(0.14 0 0);
     --foreground: oklch(0.922 0 0);
-    --card: oklch(0.18 0 0);
+    --card: oklch(0.215 0 0);
     --card-foreground: oklch(0.922 0 0);
-    --popover: oklch(0.18 0 0);
+    --popover: oklch(0.215 0 0);
     --popover-foreground: oklch(0.922 0 0);
     --primary: oklch(0.922 0 0);
     --primary-foreground: oklch(0.205 0 0);
     --secondary: oklch(0.269 0 0);
     --secondary-foreground: oklch(0.922 0 0);
     --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
+    /* A step above shadcn's 0.708: subtitles, footnotes and table labels at data density read too dim. */
+    --muted-foreground: oklch(0.74 0 0);
     --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.922 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
+    /* Paler and calmer than the loss red, so a destructive label reads on its red tint over the card, hovered too. */
+    --destructive: oklch(0.8 0.1 22.216);
     --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    /* Tailwind green-400, red-400, amber-400, blue-400. */
-    --positive: oklch(0.792 0.209 151.711);
+    --input: oklch(0.62 0 0);
+    --ring: oklch(0.6 0.14 275);
+    /*
+     * Green toned down from Tailwind green-400, below red-400's lightness so a
+     * treemap's deepest green tile keeps its light label at 4.5:1; amber-400.
+     * Red, amber and the link sit at the sRGB edge.
+     */
+    --positive: oklch(0.69 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
-    --negative: oklch(0.704 0.191 22.216);
+    --negative: oklch(0.704 0.187 22.216);
     --negative-foreground: oklch(0.145 0 0);
-    --warning: oklch(0.828 0.189 84.429);
+    --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
-    --link: oklch(0.707 0.165 254.624);
-    --chart-1: oklch(0.84 0.08 255);
-    --chart-2: oklch(0.52 0.11 163.2);
-    --chart-3: oklch(0.86 0.13 80);
-    --chart-4: oklch(0.55 0.25 293);
-    --chart-5: oklch(0.84 0.085 12);
+    --link: oklch(0.75 0.128 275);
+    --chart-1: oklch(0.58 0.2 275);
+    --chart-2: oklch(0.88 0.08 75);
+    --chart-3: oklch(0.58 0.16 335);
+    --chart-4: oklch(0.88 0.05 235);
+    --chart-5: oklch(0.56 0.08 205);
     --sidebar: oklch(0.145 0 0);
     --sidebar-foreground: oklch(0.922 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.922 0 0);
+    --sidebar-primary-foreground: oklch(0.205 0 0);
     --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.922 0 0);
+    --sidebar-accent-foreground: oklch(0.8 0.1 275);
     --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar-ring: oklch(0.6 0.14 275);
   }
 }
 
@@ -205,6 +219,130 @@
   }
 }
 
+/*
+ * Every selected toggle, a view switch or a filter chip alike, fills with the
+ * foreground, black on white and white on black, so the reader sees at once
+ * what is on; stock shadcn marks it with a faint grey. A default (pill) tab
+ * selects the same way: stock fills it with the canvas colour, 1.05:1 against
+ * its grey list. Unlayered, to outrank the stock aria-pressed:bg-muted.
+ */
+:is([data-slot="toggle"], [data-slot="toggle-group-item"]):is([aria-pressed="true"], [data-pressed]),
+[data-slot="tabs-list"][data-variant="default"] [data-slot="tabs-trigger"][data-active] {
+  background-color: var(--foreground);
+  color: var(--background);
+  border-color: var(--foreground);
+}
+
+/*
+ * --input is the edge of a field, where the reader types or picks. A button,
+ * a toggle and a code block are framed by their label or their content, so
+ * their outline stays the faint divider colour; scoping the variable keeps
+ * the fill each derives from it faint too.
+ */
+:is([data-slot="button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
+  --input: var(--border);
+}
+
+/*
+ * The command palette's search field is a field: the --input edge on a muted
+ * fill, and the muted placeholder every other field uses (stock leaves it at
+ * Tailwind's half-strength text, 3.7:1).
+ */
+[data-slot="command-input-wrapper"] > [data-slot="input-group"] {
+  border-color: var(--input);
+  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+}
+[data-slot="command-input"]::placeholder {
+  color: var(--muted-foreground);
+}
+
+/*
+ * Focus is opaque wherever the ring is the only sign of it: stock draws the
+ * ring at half strength (under 2:1 on the canvas) and relies on an opaque
+ * border these controls do not have. The slider's thumb is a div around a
+ * hidden range input, so it shows the input's focus.
+ */
+:is([data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="scroll-area-viewport"]):focus-visible,
+[data-slot="button"][data-day]:focus-visible {
+  --tw-ring-color: var(--ring);
+}
+[data-slot="slider-thumb"]:has(input:focus-visible) {
+  box-shadow: 0 0 0 3px var(--ring);
+}
+
+/*
+ * A destructive control focuses, and an invalid field is edged, in the full
+ * destructive colour; stock fades both to 40-50%, under 3:1.
+ */
+[data-slot="button"][class~="text-destructive"]:focus-visible,
+[data-slot="code-block"][data-variant="destructive"]:has(> [data-slot="code-block-content"]:focus-visible),
+:is(
+  [data-slot="input"],
+  [data-slot="textarea"],
+  [data-slot="select-trigger"],
+  [data-slot="button"]
+)[aria-invalid="true"],
+[data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
+  border-color: var(--destructive);
+}
+
+/*
+ * A slider's unfilled track is outlined in the field edge, so its extent reads
+ * at 3:1; the muted track alone is 1.05:1 on the canvas.
+ */
+[data-slot="slider-track"] {
+  box-shadow: inset 0 0 0 1px var(--input);
+}
+
+/*
+ * A number column (meta.variant "number") right-aligns its head and cells, so
+ * figures line up by their units down the column, as a ledger reads.
+ */
+:is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
+  text-align: right;
+}
+[data-slot="table-head"][data-numeric] > *,
+[data-slot="table-cell"][data-numeric] > :is(div, span)[class*="flex"] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+/*
+ * A card on the card surface lifts off the tinted canvas with a faint shadow
+ * under its 1px ring (Tailwind composes --tw-shadow with the ring), and a data
+ * table inside it drops its own border, so there is one frame, not two.
+ */
+@scope (:root, [data-surface="card"]) to ([data-surface="ruled"], [data-surface="open"]) {
+  [data-slot="card"] {
+    --tw-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.06), 0 1px 3px 0 oklch(0 0 0 / 0.04);
+  }
+  [data-slot="card"] [data-slot="table-container"] {
+    border-color: transparent;
+  }
+}
+
+/*
+ * Chart gridlines take the full border colour: stock shadcn draws them at half
+ * of it, which all but vanishes on a dark card (5% white).
+ */
+[data-slot="chart"] .recharts-cartesian-grid line {
+  stroke: var(--border);
+}
+
+/*
+ * The selected sub-page marks its stretch of the sidebar's rail in the accent,
+ * so the current place reads at a glance in a long list, as a docs index does.
+ */
+[data-slot="sidebar-menu-sub-item"]:has(> [data-active])::before {
+  content: "";
+  position: absolute;
+  inset-block: 2px;
+  left: -11px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--sidebar-accent-foreground);
+}
+
 /* Touch targets follow input capability, including touch laptops. */
 @media (pointer: coarse) {
   :is(
@@ -251,17 +389,16 @@
 }
 
 /*
- * Surfaces, from SiyahiProvider's surface prop. Ruled, the default, and open
- * take the box off every core Card: no fill, no corner, no ring, and no
- * tinted footer band; PanelGrid draws the hairlines between ruled blocks.
- * Open also drops the card's padding, so a block's content sits level with
- * the page's text. A card provider gives shadcn's own card back. Each scope
- * starts at the root, so a Card outside any provider is ruled too, and stops
- * at a provider that says otherwise. Unlayered, like the rule above, to
+ * Surfaces, from SiyahiProvider's surface prop. Card, the default, is
+ * shadcn's own card on the tinted canvas. Ruled and open take the box off
+ * every core Card: no fill, no corner, no ring, and no tinted footer band;
+ * PanelGrid draws the hairlines between ruled blocks. Open also drops the
+ * card's padding, so a block's content sits level with the page's text. Each
+ * scope stops at a provider that says otherwise. Unlayered, like the rule above, to
  * outrank the core components' utility classes; a picked SectionCards tile
  * keeps its ring, which is important.
  */
-@scope (:root, [data-surface="ruled"], [data-surface="open"]) to ([data-surface="card"]) {
+@scope ([data-surface="ruled"], [data-surface="open"]) to ([data-surface="card"]) {
   [data-slot="card"] {
     background: none;
     border-radius: 0;
@@ -281,3 +418,54 @@
     gap: calc(var(--spacing) * 4);
   }
 }
+
+/*
+ * A table, or a page's section strip, that scrolls sideways fades at the edge
+ * with more behind it,
+ * so a phone reader sees there is more without a visible scrollbar. The fade
+ * follows the scroll position; a table that fits has no timeline and no fade.
+ */
+@property --table-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --table-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@keyframes table-edge-fade {
+  0% {
+    --table-fade-start: 0px;
+    --table-fade-end: 2rem;
+  }
+  8%,
+  92% {
+    --table-fade-start: 2rem;
+    --table-fade-end: 2rem;
+  }
+  100% {
+    --table-fade-start: 2rem;
+    --table-fade-end: 0px;
+  }
+}
+@layer base {
+  :is([data-slot="table-container"], [data-slot="page-toc"] > div) {
+    mask-image: linear-gradient(
+      to right,
+      rgb(0 0 0 / 0.2),
+      #000 var(--table-fade-start),
+      #000 calc(100% - var(--table-fade-end)),
+      rgb(0 0 0 / 0.2)
+    );
+    animation: table-edge-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+  /* Scroll position, not motion: the reduced-motion reset above must not collapse it. */
+  @media (prefers-reduced-motion: reduce) {
+    :is([data-slot="table-container"], [data-slot="page-toc"] > div) {
+      animation-duration: auto !important;
+    }
+  }
+}