@surrealdb/ui 1.2.23 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@surrealdb/ui",
-	"version": "1.2.23",
+	"version": "2.0.0",
 	"type": "module",
 	"sideEffects": false,
 	"exports": {
@@ -42,7 +42,8 @@
 		"test:e2e": "vitest run --project=e2e",
 		"test:storybook": "vitest run --project=storybook",
 		"test:watch": "vitest",
-		"icons": "bun run tools/icon-parser.ts"
+		"icons": "bun run tools/icon-parser.ts",
+		"pictos": "bun run tools/picto-generate.ts"
 	},
 	"dependencies": {
 		"@codemirror/lang-markdown": "^6.5.0",

package/res/_mixins.scss

@@ -1,13 +1,30 @@
-@mixin light {
-	:root[data-mantine-color-scheme="light"] & {
-		@content;
-	}
-}
+/**
+ * SCSS mixins exported as `@surrealdb/ui/mixins`.
+ *
+ * There are deliberately no `light` / `dark` mixins: color scheme is expressed
+ * with the CSS `light-dark()` function and the `color-scheme` property, so a
+ * value works the same at the root and inside a scheme island.
+ * See doc/adr/0001-light-dark-color-scheme-islands.md.
+ */
 
-@mixin dark {
-	:root[data-mantine-color-scheme="dark"] & {
-		@content;
-	}
+/**
+ * Derives a colour from the ground the element is standing on, by moving its
+ * OKLCH lightness and leaving chroma and hue untouched.
+ *
+ * Use it for hover, press and any edge that has to stay in a fixed relationship
+ * with the surface beneath it. A positive delta always moves away from the
+ * ground: lighter on a dark scheme, darker on a light one.
+ *
+ * The surface itself must declare `--surreal-ground`; every surface the kit
+ * ships already does, and the root falls back to the page canvas.
+ *
+ *   background-color: surface-shift(0.06);
+ */
+@function surface-shift($delta) {
+	@return light-dark(
+		oklch(from var(--surreal-ground) calc(l - #{$delta}) c h),
+		oklch(from var(--surreal-ground) calc(l + #{$delta}) c h)
+	);
 }
 
 @mixin xs-and-up {