@ibodr/editor 0.1.10 → 0.1.12

package/editor.css

@@ -159,9 +159,11 @@
 	/* if you ever update --dr-color-background, update the hardcoded values in theme-init.js and globals.css
 	they're there to make sure the background color matches the user's preference before the actual app loads*/
 	--dr-color-grid: hsl(0, 0%, 43%);
-	--dr-color-board-bg-line: hsl(210, 50%, 55%, 35%);
-	--dr-color-board-bg-line-secondary: hsl(210, 50%, 55%, 18%);
-	--dr-color-board-bg-chalkboard: hsl(160, 30%, 16%);
+	/* Board background patterns (see `.dr-bg-*` in the Background section below).
+	   Light theme: subtle blue-gray lines, like ruled/graph paper on white. */
+	--dr-color-board-bg-line: hsl(210, 40%, 55%, 38%);
+	--dr-color-board-bg-line-secondary: hsl(210, 40%, 55%, 19%);
+	--dr-color-board-bg-dot: var(--dr-color-grid);
 	/* UI */
 	--dr-color-low: hsl(204, 16%, 94%);
 	--dr-color-low-border: hsl(204, 16%, 92%);
@@ -216,9 +218,12 @@
 	/* if you ever update --dr-color-background, update the hardcoded values in theme-init.js and globals.css
 	they're there to make sure the background color matches the user's preference before the actual app loads*/
 	--dr-color-grid: hsl(0, 0%, 40%);
-	--dr-color-board-bg-line: hsl(210, 70%, 70%, 25%);
-	--dr-color-board-bg-line-secondary: hsl(210, 70%, 70%, 13%);
-	--dr-color-board-bg-chalkboard: hsl(160, 25%, 10%);
+	/* Board background patterns (see `.dr-bg-*` in the Background section below).
+	   Dark theme: near-white lines at low opacity so they stay visible on the
+	   near-black canvas without the blue cast used in the light theme. */
+	--dr-color-board-bg-line: hsl(0, 0%, 100%, 16%);
+	--dr-color-board-bg-line-secondary: hsl(0, 0%, 100%, 8%);
+	--dr-color-board-bg-dot: var(--dr-color-grid);
 	/* UI */
 	--dr-color-low: hsl(260, 4.5%, 10.5%);
 	--dr-color-low-border: hsl(207, 10%, 10%);
@@ -348,103 +353,32 @@ input,
 	height: 100%;
 }
 
-/* Board background patterns (`DrInstance.backgroundType`), independent from the
-   dot grid rendered by `DefaultGrid` (used for snapping / `isGridMode`). */
-
-.dr-background__dots {
-	background-image: radial-gradient(circle, var(--dr-color-board-bg-line) 1px, transparent 1px);
-	background-size: 24px 24px;
-}
-
-.dr-background__grid {
-	background-image:
-		linear-gradient(to right, var(--dr-color-board-bg-line) 1px, transparent 1px),
-		linear-gradient(to bottom, var(--dr-color-board-bg-line) 1px, transparent 1px);
-	background-size: 48px 48px;
-}
-
-.dr-background__hex-grid {
-	background-image:
-		repeating-linear-gradient(
-			60deg,
-			var(--dr-color-board-bg-line) 0,
-			var(--dr-color-board-bg-line) 1px,
-			transparent 1px,
-			transparent 26px
-		),
-		repeating-linear-gradient(
-			-60deg,
-			var(--dr-color-board-bg-line) 0,
-			var(--dr-color-board-bg-line) 1px,
-			transparent 1px,
-			transparent 26px
-		),
-		repeating-linear-gradient(
-			0deg,
-			var(--dr-color-board-bg-line) 0,
-			var(--dr-color-board-bg-line) 1px,
-			transparent 1px,
-			transparent 26px
-		);
-}
-
-.dr-background__lined {
-	background-image: repeating-linear-gradient(
-		to bottom,
-		transparent 0,
-		transparent 31px,
-		var(--dr-color-board-bg-line) 31px,
-		var(--dr-color-board-bg-line) 32px
-	);
-}
-
-.dr-background__double-line {
-	background-image: repeating-linear-gradient(
-		to bottom,
-		transparent 0,
-		transparent 24px,
-		var(--dr-color-board-bg-line-secondary) 24px,
-		var(--dr-color-board-bg-line-secondary) 25px,
-		transparent 25px,
-		transparent 39px,
-		var(--dr-color-board-bg-line) 39px,
-		var(--dr-color-board-bg-line) 40px
-	);
-}
-
-.dr-background__double-line-slash {
-	background-image:
-		repeating-linear-gradient(
-			65deg,
-			var(--dr-color-board-bg-line-secondary) 0,
-			var(--dr-color-board-bg-line-secondary) 1px,
-			transparent 1px,
-			transparent 22px
-		),
-		repeating-linear-gradient(
-			to bottom,
-			transparent 0,
-			transparent 24px,
-			var(--dr-color-board-bg-line-secondary) 24px,
-			var(--dr-color-board-bg-line-secondary) 25px,
-			transparent 25px,
-			transparent 39px,
-			var(--dr-color-board-bg-line) 39px,
-			var(--dr-color-board-bg-line) 40px
-		);
-}
-
-.dr-background__checkered {
-	background-image:
-		linear-gradient(to right, var(--dr-color-board-bg-line-secondary) 1px, transparent 1px),
-		linear-gradient(to bottom, var(--dr-color-board-bg-line-secondary) 1px, transparent 1px);
-	background-size: 20px 20px;
-}
-
-.dr-background__chalkboard {
-	background-color: var(--dr-color-board-bg-chalkboard);
-	background-image: radial-gradient(hsl(0, 0%, 100%, 4%) 1px, transparent 1px);
-	background-size: 3px 3px;
+/* Board background patterns (`DrInstance.backgroundType`), rendered as an SVG overlay
+   on top of `.dr-background`. Unlike the old CSS `background-image` version, this is
+   generated dynamically (see `DefaultBackground`) so the pattern pans and scales with
+   the camera exactly like the dot grid rendered by `DefaultGrid`. */
+.dr-background-pattern {
+	position: absolute;
+	inset: 0px;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+.dr-bg-line {
+	stroke: var(--dr-color-board-bg-line);
+	stroke-width: 1px;
+	fill: none;
+}
+
+.dr-bg-line-secondary {
+	stroke: var(--dr-color-board-bg-line-secondary);
+	stroke-width: 1px;
+	fill: none;
+}
+
+.dr-bg-dot {
+	fill: var(--dr-color-board-bg-dot);
 }
 
 /* --------------------- Grid Layer --------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibodr/editor",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -29,12 +29,12 @@
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
     "rbush": "^3.0.1",
-    "@ibodr/schema": "0.1.10",
-    "@ibodr/store": "0.1.10",
-    "@ibodr/state": "0.1.10",
-    "@ibodr/state-react": "0.1.10",
-    "@ibodr/validate": "0.1.10",
-    "@ibodr/utils": "0.1.10"
+    "@ibodr/schema": "0.1.12",
+    "@ibodr/state": "0.1.12",
+    "@ibodr/store": "0.1.12",
+    "@ibodr/state-react": "0.1.12",
+    "@ibodr/utils": "0.1.12",
+    "@ibodr/validate": "0.1.12"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",