@jigs.design/catalog 0.3.4 → 0.3.5

package/dist/shadcn.css

@@ -0,0 +1,68 @@
+/*
+ * The default catalog in a shadcn/ui app's theme. Import it after
+ * `@jigs.design/catalog/styles.css`: it maps the catalog's tokens onto
+ * shadcn's variables, so a jig takes the app's colors, radius and font, and
+ * its dark mode with them (a `.dark` ancestor, or `color-scheme`).
+ *
+ * The tokens are set on the catalog's own elements, not on `:root`, so each
+ * `var()` reads the value of the nearest element that sets it, as shadcn's
+ * `.dark` does. Named chart hues keep their own colors, so "red" stays red;
+ * only the default series color, blue, takes `--chart-1`.
+ */
+
+:where([class^="pk-"], [class*=" pk-"]) {
+	--pk-font-sans: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+	--pk-font-mono: var(--font-mono, ui-monospace, monospace);
+
+	--pk-text-prose: var(--foreground);
+	--pk-text-primary: var(--foreground);
+	--pk-text-emphasis: var(--foreground);
+	--pk-text-secondary: var(--muted-foreground);
+	--pk-text-tertiary: var(--muted-foreground);
+	--pk-text-danger: var(--destructive);
+
+	--pk-surface: var(--background);
+	--pk-surface-secondary: var(--muted);
+	--pk-surface-tertiary: var(--accent);
+	--pk-surface-elevated: var(--card);
+	--pk-surface-elevated-secondary: var(--muted);
+
+	--pk-border: var(--border);
+	--pk-border-subtle: var(--border);
+	--pk-border-strong: var(--input);
+
+	--pk-radius-sm: calc(var(--radius) - 4px);
+	--pk-radius-md: calc(var(--radius) - 2px);
+	--pk-radius-lg: var(--radius);
+	--pk-radius-xl: calc(var(--radius) + 4px);
+
+	--pk-color-primary: var(--primary);
+	--pk-color-primary-on: var(--primary-foreground);
+	--pk-color-primary-soft: var(--accent);
+	--pk-color-primary-text: var(--primary);
+	--pk-color-primary-border: var(--border);
+
+	--pk-color-secondary: var(--secondary);
+	--pk-color-secondary-on: var(--secondary-foreground);
+	--pk-color-secondary-soft: var(--muted);
+	--pk-color-secondary-text: var(--muted-foreground);
+	--pk-color-secondary-border: var(--border);
+
+	--pk-color-danger: var(--destructive);
+	--pk-color-danger-text: var(--destructive);
+	--pk-color-danger-soft: color-mix(
+		in oklab,
+		var(--destructive) 12%,
+		transparent
+	);
+	--pk-color-danger-border: color-mix(
+		in oklab,
+		var(--destructive) 40%,
+		transparent
+	);
+
+	--pk-chart-blue: var(--chart-1);
+
+	--pk-ring: var(--ring);
+	--pk-ring-soft: color-mix(in oklab, var(--ring) 30%, transparent);
+}

package/dist/styles.css

@@ -1,7 +1,16 @@
 /*
- * Styles for the default catalog's React registry. Light theme only.
- * Every class starts with `pk-` and every token with `--pk-`. Spacing props
- * arrive as inline styles in steps of 4px; everything else is a class here.
+ * Styles for the default catalog's React registry. Every class starts with
+ * `pk-` and every token with `--pk-`. Spacing props arrive as inline styles
+ * in steps of 4px; everything else is a class here.
+ *
+ * Light and dark: each color token has a light value on `:root`, and both
+ * values as `light-dark(light, dark)` under `@supports`. The catalog declares
+ * no color scheme of its own: it follows the page's `color-scheme`, and a
+ * `.dark` or `[data-theme="dark"]` ancestor (`.light`, `[data-theme="light"]`
+ * for the other way), the nearest one winning. A page that does nothing
+ * stays light. Override a token on `:root` or on an ancestor of the view;
+ * the tokens stay unregistered custom properties, so `light-dark()` resolves
+ * where each is used, against that element's scheme.
  */
 
 :root {
@@ -151,7 +160,7 @@
 	--pk-chart-red: #e02e2a;
 	--pk-chart-yellow: #f5b800;
 	--pk-chart-pink: #e04c9a;
-	/* Text inside a chart-colored or gray fill: 4.5:1 or more on each */
+	/* Text inside a chart-colored or gray fill: 4.5:1 or more on each, in both schemes */
 	--pk-chart-ink: #000000;
 
 	/* Depth and focus */
@@ -161,6 +170,134 @@
 	--pk-ring-soft: rgb(2 133 255 / 0.16);
 }
 
+/*
+ * Each color token again, as its light value and its dark one, where
+ * `light-dark()` works. Without it a browser keeps the light values above:
+ * a custom property is never invalid when declared, so a second
+ * declaration on `:root` would win and leave every use of it unset.
+ */
+@supports (color: light-dark(#000, #fff)) {
+	:root {
+		--pk-text-prose: light-dark(#2b2b2b, #dcdcdc);
+		--pk-text-primary: light-dark(#0d0d0d, #f3f3f3);
+		--pk-text-emphasis: light-dark(#000000, #ffffff);
+		--pk-text-secondary: light-dark(#5d5d5d, #afafaf);
+		--pk-text-tertiary: light-dark(#8f8f8f, #8a8a8a);
+		--pk-text-success: light-dark(#008635, #40c870);
+		--pk-text-warning: light-dark(#b25e00, #f0a43c);
+		--pk-text-danger: light-dark(#d0251f, #ff6b63);
+		--pk-text-link: light-dark(#0169cc, #5aa9ff);
+		--pk-surface: light-dark(#ffffff, #1b1b1b);
+		--pk-surface-secondary: light-dark(#f9f9f9, #232323);
+		--pk-surface-tertiary: light-dark(#f3f3f3, #2b2b2b);
+		--pk-surface-elevated: light-dark(#ffffff, #242424);
+		--pk-surface-elevated-secondary: light-dark(#f7f7f8, #2c2c2c);
+		--pk-border: light-dark(rgb(13 13 13 / 0.1), rgb(255 255 255 / 0.12));
+		--pk-border-subtle: light-dark(
+			rgb(13 13 13 / 0.06),
+			rgb(255 255 255 / 0.07)
+		);
+		--pk-border-strong: light-dark(
+			rgb(13 13 13 / 0.18),
+			rgb(255 255 255 / 0.2)
+		);
+		--pk-color-primary: light-dark(#0d0d0d, #f3f3f3);
+		--pk-color-primary-on: light-dark(#ffffff, #0d0d0d);
+		--pk-color-primary-soft: light-dark(#f0f0f0, rgb(255 255 255 / 0.1));
+		--pk-color-primary-text: light-dark(#0d0d0d, #f3f3f3);
+		--pk-color-primary-border: light-dark(
+			rgb(13 13 13 / 0.18),
+			rgb(255 255 255 / 0.22)
+		);
+		--pk-color-secondary: light-dark(#ececec, #3a3a3a);
+		--pk-color-secondary-on: light-dark(#0d0d0d, #f3f3f3);
+		--pk-color-secondary-soft: light-dark(#f3f3f3, rgb(255 255 255 / 0.07));
+		--pk-color-secondary-text: light-dark(#5d5d5d, #b4b4b4);
+		--pk-color-secondary-border: light-dark(
+			rgb(13 13 13 / 0.14),
+			rgb(255 255 255 / 0.16)
+		);
+		--pk-color-info: light-dark(#0285ff, #0285ff);
+		--pk-color-info-on: light-dark(#ffffff, #ffffff);
+		--pk-color-info-soft: light-dark(#e8f3ff, rgb(2 133 255 / 0.2));
+		--pk-color-info-text: light-dark(#0169cc, #6cb2ff);
+		--pk-color-info-border: light-dark(
+			rgb(2 133 255 / 0.4),
+			rgb(2 133 255 / 0.5)
+		);
+		--pk-color-discovery: light-dark(#924ff7, #924ff7);
+		--pk-color-discovery-on: light-dark(#ffffff, #ffffff);
+		--pk-color-discovery-soft: light-dark(#f3ecfe, rgb(146 79 247 / 0.24));
+		--pk-color-discovery-text: light-dark(#7434d9, #c09bff);
+		--pk-color-discovery-border: light-dark(
+			rgb(146 79 247 / 0.4),
+			rgb(146 79 247 / 0.55)
+		);
+		--pk-color-success: light-dark(#00a240, #00a240);
+		--pk-color-success-on: light-dark(#ffffff, #ffffff);
+		--pk-color-success-soft: light-dark(#e6f6ec, rgb(0 162 64 / 0.2));
+		--pk-color-success-text: light-dark(#008635, #4cd07e);
+		--pk-color-success-border: light-dark(
+			rgb(0 162 64 / 0.4),
+			rgb(0 162 64 / 0.5)
+		);
+		--pk-color-caution: light-dark(#e25507, #e25507);
+		--pk-color-caution-on: light-dark(#ffffff, #ffffff);
+		--pk-color-caution-soft: light-dark(#fdefe7, rgb(226 85 7 / 0.22));
+		--pk-color-caution-text: light-dark(#b84300, #ff8f52);
+		--pk-color-caution-border: light-dark(
+			rgb(226 85 7 / 0.4),
+			rgb(226 85 7 / 0.55)
+		);
+		--pk-color-warning: light-dark(#f5a300, #f5a300);
+		--pk-color-warning-on: light-dark(#2b1d00, #2b1d00);
+		--pk-color-warning-soft: light-dark(#fef5df, rgb(245 163 0 / 0.18));
+		--pk-color-warning-text: light-dark(#9a5a00, #f7b84a);
+		--pk-color-warning-border: light-dark(
+			rgb(245 163 0 / 0.5),
+			rgb(245 163 0 / 0.5)
+		);
+		--pk-color-danger: light-dark(#e02e2a, #e02e2a);
+		--pk-color-danger-on: light-dark(#ffffff, #ffffff);
+		--pk-color-danger-soft: light-dark(#fdecec, rgb(224 46 42 / 0.22));
+		--pk-color-danger-text: light-dark(#c7221f, #ff7a73);
+		--pk-color-danger-border: light-dark(
+			rgb(224 46 42 / 0.4),
+			rgb(224 46 42 / 0.55)
+		);
+		--pk-chart-blue: light-dark(#0285ff, #3d9bff);
+		--pk-chart-purple: light-dark(#924ff7, #a77bff);
+		--pk-chart-orange: light-dark(#fb6a22, #ff8448);
+		--pk-chart-green: light-dark(#04b84c, #2ec866);
+		--pk-chart-red: light-dark(#e02e2a, #f2554f);
+		--pk-chart-yellow: light-dark(#f5b800, #f5c400);
+		--pk-chart-pink: light-dark(#e04c9a, #f06cb0);
+		--pk-shadow-sm: 0 1px 2px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.3));
+		--pk-shadow-md:
+			0 1px 2px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.3)),
+			0 4px 16px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4));
+		--pk-ring: light-dark(rgb(2 133 255 / 0.55), rgb(90 169 255 / 0.6));
+		--pk-ring-soft: light-dark(rgb(2 133 255 / 0.16), rgb(90 169 255 / 0.22));
+	}
+}
+
+/*
+ * The host's dark-mode signal, for hosts that set a class or attribute and
+ * not `color-scheme`. `@scope` makes the nearest signal win, so a light
+ * island in a dark page stays light; a browser without it falls back to the
+ * page's `color-scheme`.
+ */
+@scope (:where(.dark, [data-theme="dark"])) {
+	:where([class^="pk-"], [class*=" pk-"]) {
+		color-scheme: dark;
+	}
+}
+@scope (:where(.light, [data-theme="light"])) {
+	:where([class^="pk-"], [class*=" pk-"]) {
+		color-scheme: light;
+	}
+}
+
 /* ---------- Base ---------- */
 
 :where([class^="pk-"], [class*=" pk-"]) {
@@ -614,7 +751,11 @@
 .pk-link {
 	color: var(--pk-text-link);
 	text-decoration: underline;
-	text-decoration-color: rgb(1 105 204 / 0.35);
+	text-decoration-color: color-mix(
+		in srgb,
+		var(--pk-text-link) 35%,
+		transparent
+	);
 	text-underline-offset: 2px;
 }
 .pk-link:hover {
@@ -791,7 +932,7 @@
 	border-color: transparent;
 }
 .pk-field--solid {
-	background: #ececec;
+	background: var(--pk-color-secondary);
 	border-color: transparent;
 }
 .pk-field--ghost {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jigs.design/catalog",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "The default catalog, modeled on ChatKit widgets, and a React registry for it.",
   "license": "MIT",
   "repository": {
@@ -26,6 +26,7 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js"
     },
+    "./shadcn.css": "./dist/shadcn.css",
     "./styles.css": "./dist/styles.css"
   },
   "publishConfig": {
@@ -34,14 +35,14 @@
   "dependencies": {
     "lucide-react": "1.57.0",
     "recharts": "3.10.1",
-    "@jigs.design/host": "0.3.4",
-    "@jigs.design/react": "0.3.4"
+    "@jigs.design/host": "0.3.5",
+    "@jigs.design/react": "0.3.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@jigs.design/prompt": "0.3.4",
-    "@jigs.design/server": "0.3.4"
+    "@jigs.design/prompt": "0.3.5",
+    "@jigs.design/server": "0.3.5"
   }
 }