@siyahi/ui 0.1.9-next.6 → 0.1.9-next.8

package/report.css

@@ -48,20 +48,20 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    --background: oklch(0.18 0 0);
+    --foreground: oklch(0.922 0 0);
+    --card: oklch(0.18 0 0);
+    --card-foreground: oklch(0.922 0 0);
+    --popover: oklch(0.18 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.985 0 0);
+    --secondary-foreground: oklch(0.922 0 0);
     --muted: oklch(0.269 0 0);
     --muted-foreground: oklch(0.708 0 0);
     --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 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%);
@@ -78,11 +78,11 @@
     --chart-3: oklch(0.86 0.13 80);
     --chart-4: oklch(0.55 0.25 293);
     --chart-5: oklch(0.84 0.085 12);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar: oklch(0.145 0 0);
+    --sidebar-foreground: oklch(0.922 0 0);
     --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-accent-foreground: oklch(0.922 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
   }

package/styles/siyahi.css

@@ -130,20 +130,30 @@
   --sidebar-ring: oklch(0.708 0 0);
 
   @variant dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    /*
+     * The canvas lifts just off black and text sits a step below white:
+     * near-white on near-black (19:1) blurs for many readers, and with the
+     * 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.
+     */
+    --background: oklch(0.18 0 0);
+    --foreground: oklch(0.922 0 0);
+    --card: oklch(0.18 0 0);
+    --card-foreground: oklch(0.922 0 0);
+    --popover: oklch(0.18 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.985 0 0);
+    --secondary-foreground: oklch(0.922 0 0);
     --muted: oklch(0.269 0 0);
     --muted-foreground: oklch(0.708 0 0);
     --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 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%);
@@ -161,12 +171,12 @@
     --chart-3: oklch(0.86 0.13 80);
     --chart-4: oklch(0.55 0.25 293);
     --chart-5: oklch(0.84 0.085 12);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
+    --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-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-accent-foreground: oklch(0.922 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
   }
@@ -215,3 +225,33 @@
     }
   }
 }
+
+/*
+ * 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
+ * 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"]) {
+  [data-slot="card"] {
+    background: none;
+    border-radius: 0;
+    --tw-ring-color: transparent;
+  }
+  [data-slot="card-footer"] {
+    background: none;
+    border-top-width: 0;
+  }
+}
+
+@scope ([data-surface="open"]) to ([data-surface="ruled"], [data-surface="card"]) {
+  [data-slot="card"] {
+    --card-spacing: 0px;
+    gap: calc(var(--spacing) * 4);
+  }
+}