@nocoo/basalt 2.0.0-rc.1 → 2.0.2

package/dist/styles/tailwind.css

@@ -10,6 +10,7 @@
 	--color-basalt-popover: hsl(var(--basalt-popover));
 	--color-basalt-popover-foreground: hsl(var(--basalt-popover-foreground));
 	--color-basalt-bright: hsl(var(--basalt-bright));
+	--color-basalt-control: var(--basalt-control-fill);
 	--color-basalt-primary: hsl(var(--basalt-primary));
 	--color-basalt-primary-foreground: hsl(var(--basalt-primary-foreground));
 	--color-basalt-muted: hsl(var(--basalt-muted));

package/dist/styles/tokens.css

@@ -27,6 +27,8 @@
 	--basalt-border: 220 13% 88%;
 	--basalt-input: 220 13% 88%;
 	--basalt-ring: 217 91% 60%;
+	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-zebra-fill: hsl(var(--basalt-bright));
 	--basalt-radius: 0.75rem;
 	--basalt-radius-island: 20px;
 	--basalt-radius-card: 14px;
@@ -105,6 +107,8 @@
 	--basalt-border: 0 0% 16%;
 	--basalt-input: 0 0% 18%;
 	--basalt-ring: 217 91% 60%;
+	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-zebra-fill: hsl(var(--basalt-bright));
 	--basalt-chart-1: 217 91% 65%;
 	--basalt-chart-2: 200 90% 60%;
 	--basalt-chart-3: 186 80% 50%;
@@ -149,6 +153,71 @@
 	--basalt-heatmap-orange-4: 30 65% 55%;
 }
 
+[data-basalt-surface-root] {
+	background: hsl(var(--basalt-card));
+	--basalt-control-fill: hsl(var(--basalt-card));
+	--basalt-zebra-fill: hsl(var(--basalt-secondary));
+}
+
+[data-basalt-surface-root] [data-basalt-surface] {
+	background: hsl(var(--basalt-secondary));
+	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-zebra-fill: hsl(var(--basalt-bright));
+}
+
+[data-basalt-surface-root] [data-basalt-surface] [data-basalt-surface] {
+	background: hsl(var(--basalt-bright));
+	--basalt-control-fill: hsl(var(--basalt-bright));
+	--basalt-zebra-fill: transparent;
+}
+
+[data-basalt-surface-root] [data-basalt-surface] [data-basalt-surface] [data-basalt-surface] {
+	background: transparent;
+	--basalt-control-fill: hsl(var(--basalt-bright));
+	--basalt-zebra-fill: transparent;
+}
+
+[data-basalt-surface]:not([data-basalt-surface-root] *):not([data-basalt-surface] *) {
+	background: hsl(var(--basalt-card));
+	--basalt-control-fill: hsl(var(--basalt-card));
+	--basalt-zebra-fill: hsl(var(--basalt-secondary));
+}
+
+[data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] {
+	background: hsl(var(--basalt-secondary));
+	--basalt-control-fill: hsl(var(--basalt-secondary));
+	--basalt-zebra-fill: hsl(var(--basalt-bright));
+}
+
+[data-basalt-surface]:not([data-basalt-surface-root] *)
+	[data-basalt-surface]
+	[data-basalt-surface] {
+	background: hsl(var(--basalt-bright));
+	--basalt-control-fill: hsl(var(--basalt-bright));
+	--basalt-zebra-fill: transparent;
+}
+
+[data-basalt-surface]:not([data-basalt-surface-root] *)
+	[data-basalt-surface]
+	[data-basalt-surface]
+	[data-basalt-surface] {
+	background: transparent;
+	--basalt-control-fill: hsl(var(--basalt-bright));
+	--basalt-zebra-fill: transparent;
+}
+
+[data-basalt-table] tbody tr[aria-selected="true"] td {
+	background: hsl(var(--basalt-accent));
+}
+
+[data-basalt-table] tbody tr:hover:not([aria-selected="true"]) td {
+	background: color-mix(in oklab, hsl(var(--basalt-primary)) 3%, var(--basalt-control-fill));
+}
+
+[data-basalt-table] tbody tr:nth-child(even):not([aria-selected="true"]):not(:hover) td {
+	background: var(--basalt-zebra-fill);
+}
+
 @keyframes basalt-accordion-down {
 	from {
 		height: 0;

package/dist/utils/control-surface.d.ts

@@ -1,2 +1,2 @@
-export declare const CONTROL_SURFACE_CLASS = "rounded-basalt-md border border-basalt-border bg-basalt-secondary text-sm";
+export declare const CONTROL_SURFACE_CLASS = "rounded-basalt-md border border-basalt-border bg-basalt-control text-sm";
 export declare function controlSurfaceClass(className?: string): string;

package/dist/utils/control-surface.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn as e } from "./cn.js";
 //#region src/utils/control-surface.ts
-var t = "rounded-basalt-md border border-basalt-border bg-basalt-secondary text-sm";
+var t = "rounded-basalt-md border border-basalt-border bg-basalt-control text-sm";
 function n(n) {
 	return e(t, n);
 }

package/dist/utils/control-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-surface.js","names":[],"sources":["../../src/utils/control-surface.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\nexport const CONTROL_SURFACE_CLASS =\n\t\"rounded-basalt-md border border-basalt-border bg-basalt-secondary text-sm\";\n\nexport function controlSurfaceClass(className?: string) {\n\treturn cn(CONTROL_SURFACE_CLASS, className);\n}\n"],"mappings":";;;AAEA,IAAa,IACZ;AAED,SAAgB,EAAoB,GAAoB;CACvD,OAAO,EAAG,GAAuB,CAAS;AAC3C"}
+{"version":3,"file":"control-surface.js","names":[],"sources":["../../src/utils/control-surface.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\nexport const CONTROL_SURFACE_CLASS =\n\t\"rounded-basalt-md border border-basalt-border bg-basalt-control text-sm\";\n\nexport function controlSurfaceClass(className?: string) {\n\treturn cn(CONTROL_SURFACE_CLASS, className);\n}\n"],"mappings":";;;AAEA,IAAa,IACZ;AAED,SAAgB,EAAoB,GAAoB;CACvD,OAAO,EAAG,GAAuB,CAAS;AAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocoo/basalt",
-	"version": "2.0.0-rc.1",
+	"version": "2.0.2",
 	"type": "module",
 	"license": "MIT",
 	"repository": {