@ibodr/editor 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +6 -5
  2. package/dist/index.mjs +66 -48
  3. package/dist/index.mjs.map +1 -1
  4. package/editor.css +105 -0
  5. package/package.json +7 -7
package/editor.css CHANGED
@@ -159,6 +159,9 @@
159
159
  /* if you ever update --dr-color-background, update the hardcoded values in theme-init.js and globals.css
160
160
  they're there to make sure the background color matches the user's preference before the actual app loads*/
161
161
  --dr-color-grid: hsl(0, 0%, 43%);
162
+ --dr-color-board-bg-line: hsl(210, 50%, 55%, 35%);
163
+ --dr-color-board-bg-line-secondary: hsl(210, 50%, 55%, 18%);
164
+ --dr-color-board-bg-chalkboard: hsl(160, 30%, 16%);
162
165
  /* UI */
163
166
  --dr-color-low: hsl(204, 16%, 94%);
164
167
  --dr-color-low-border: hsl(204, 16%, 92%);
@@ -213,6 +216,9 @@
213
216
  /* if you ever update --dr-color-background, update the hardcoded values in theme-init.js and globals.css
214
217
  they're there to make sure the background color matches the user's preference before the actual app loads*/
215
218
  --dr-color-grid: hsl(0, 0%, 40%);
219
+ --dr-color-board-bg-line: hsl(210, 70%, 70%, 25%);
220
+ --dr-color-board-bg-line-secondary: hsl(210, 70%, 70%, 13%);
221
+ --dr-color-board-bg-chalkboard: hsl(160, 25%, 10%);
216
222
  /* UI */
217
223
  --dr-color-low: hsl(260, 4.5%, 10.5%);
218
224
  --dr-color-low-border: hsl(207, 10%, 10%);
@@ -342,6 +348,105 @@ input,
342
348
  height: 100%;
343
349
  }
344
350
 
351
+ /* Board background patterns (`DrInstance.backgroundType`), independent from the
352
+ dot grid rendered by `DefaultGrid` (used for snapping / `isGridMode`). */
353
+
354
+ .dr-background__dots {
355
+ background-image: radial-gradient(circle, var(--dr-color-board-bg-line) 1px, transparent 1px);
356
+ background-size: 24px 24px;
357
+ }
358
+
359
+ .dr-background__grid {
360
+ background-image:
361
+ linear-gradient(to right, var(--dr-color-board-bg-line) 1px, transparent 1px),
362
+ linear-gradient(to bottom, var(--dr-color-board-bg-line) 1px, transparent 1px);
363
+ background-size: 48px 48px;
364
+ }
365
+
366
+ .dr-background__hex-grid {
367
+ background-image:
368
+ repeating-linear-gradient(
369
+ 60deg,
370
+ var(--dr-color-board-bg-line) 0,
371
+ var(--dr-color-board-bg-line) 1px,
372
+ transparent 1px,
373
+ transparent 26px
374
+ ),
375
+ repeating-linear-gradient(
376
+ -60deg,
377
+ var(--dr-color-board-bg-line) 0,
378
+ var(--dr-color-board-bg-line) 1px,
379
+ transparent 1px,
380
+ transparent 26px
381
+ ),
382
+ repeating-linear-gradient(
383
+ 0deg,
384
+ var(--dr-color-board-bg-line) 0,
385
+ var(--dr-color-board-bg-line) 1px,
386
+ transparent 1px,
387
+ transparent 26px
388
+ );
389
+ }
390
+
391
+ .dr-background__lined {
392
+ background-image: repeating-linear-gradient(
393
+ to bottom,
394
+ transparent 0,
395
+ transparent 31px,
396
+ var(--dr-color-board-bg-line) 31px,
397
+ var(--dr-color-board-bg-line) 32px
398
+ );
399
+ }
400
+
401
+ .dr-background__double-line {
402
+ background-image: repeating-linear-gradient(
403
+ to bottom,
404
+ transparent 0,
405
+ transparent 24px,
406
+ var(--dr-color-board-bg-line-secondary) 24px,
407
+ var(--dr-color-board-bg-line-secondary) 25px,
408
+ transparent 25px,
409
+ transparent 39px,
410
+ var(--dr-color-board-bg-line) 39px,
411
+ var(--dr-color-board-bg-line) 40px
412
+ );
413
+ }
414
+
415
+ .dr-background__double-line-slash {
416
+ background-image:
417
+ repeating-linear-gradient(
418
+ 65deg,
419
+ var(--dr-color-board-bg-line-secondary) 0,
420
+ var(--dr-color-board-bg-line-secondary) 1px,
421
+ transparent 1px,
422
+ transparent 22px
423
+ ),
424
+ repeating-linear-gradient(
425
+ to bottom,
426
+ transparent 0,
427
+ transparent 24px,
428
+ var(--dr-color-board-bg-line-secondary) 24px,
429
+ var(--dr-color-board-bg-line-secondary) 25px,
430
+ transparent 25px,
431
+ transparent 39px,
432
+ var(--dr-color-board-bg-line) 39px,
433
+ var(--dr-color-board-bg-line) 40px
434
+ );
435
+ }
436
+
437
+ .dr-background__checkered {
438
+ background-image:
439
+ linear-gradient(to right, var(--dr-color-board-bg-line-secondary) 1px, transparent 1px),
440
+ linear-gradient(to bottom, var(--dr-color-board-bg-line-secondary) 1px, transparent 1px);
441
+ background-size: 20px 20px;
442
+ }
443
+
444
+ .dr-background__chalkboard {
445
+ background-color: var(--dr-color-board-bg-chalkboard);
446
+ background-image: radial-gradient(hsl(0, 0%, 100%, 4%) 1px, transparent 1px);
447
+ background-size: 3px 3px;
448
+ }
449
+
345
450
  /* --------------------- Grid Layer --------------------- */
346
451
 
347
452
  .dr-grid {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibodr/editor",
3
- "version": "0.1.8",
3
+ "version": "0.1.10",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "publishConfig": {
@@ -29,12 +29,12 @@
29
29
  "eventemitter3": "^4.0.7",
30
30
  "idb": "^7.1.1",
31
31
  "rbush": "^3.0.1",
32
- "@ibodr/schema": "0.1.8",
33
- "@ibodr/state-react": "0.1.8",
34
- "@ibodr/store": "0.1.8",
35
- "@ibodr/utils": "0.1.8",
36
- "@ibodr/validate": "0.1.8",
37
- "@ibodr/state": "0.1.8"
32
+ "@ibodr/schema": "0.1.10",
33
+ "@ibodr/store": "0.1.10",
34
+ "@ibodr/state": "0.1.10",
35
+ "@ibodr/state-react": "0.1.10",
36
+ "@ibodr/validate": "0.1.10",
37
+ "@ibodr/utils": "0.1.10"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "^18.2.0 || ^19.2.1",