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

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";
@@ -81,7 +84,7 @@
 :root {
   color-scheme: light dark;
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
+  --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.145 0 0);
@@ -98,7 +101,7 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: oklch(0.62 0.16 275);
   /* Tailwind green-700, red-600, amber-700, blue-600. */
   --positive: oklch(0.527 0.154 150.069);
   --positive-foreground: oklch(0.985 0 0);
@@ -106,28 +109,30 @@
   --negative-foreground: oklch(0.985 0 0);
   --warning: oklch(0.555 0.163 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 card and against 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.66 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 +141,49 @@
      * 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);
     --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);
+    --ring: oklch(0.6 0.14 275);
+    /* Green toned down from Tailwind green-400 to the lightness and calm of red-400 beside it, so gains do not shout; amber-400. */
+    --positive: oklch(0.74 0.16 151.711);
     --positive-foreground: oklch(0.145 0 0);
     --negative: oklch(0.704 0.191 22.216);
     --negative-foreground: oklch(0.145 0 0);
     --warning: oklch(0.828 0.189 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.13 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 +210,67 @@
   }
 }
 
+/*
+ * 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. Unlayered, to outrank
+ * the stock aria-pressed:bg-muted.
+ */
+:is([data-slot="toggle"], [data-slot="toggle-group-item"]):is([aria-pressed="true"], [data-pressed]) {
+  background-color: var(--foreground);
+  color: var(--background);
+  border-color: var(--foreground);
+}
+
+/*
+ * 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 +317,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 +346,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;
+    }
+  }
+}