@ds-mo/tokens 0.1.0 → 0.2.0

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 (3) hide show
  1. package/dist/json/effects.json +18 -18
  2. package/dist/tokens.json +18 -18
  3. package/package.json +2 -1
package/dist/json/effects.json CHANGED
@@ -361,11 +361,11 @@
361
361
  },
362
362
  "--effect-shadow-elevated-sm": {
363
363
  "$type": "effect",
364
- "$value": "0px 2px 4px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
364
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
365
365
  },
366
366
  "--effect-highlight-elevated-sm": {
367
367
  "$type": "effect",
368
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
368
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
369
369
  },
370
370
  "--effect-elevation-elevated-sm": {
371
371
  "$type": "effect",
@@ -373,11 +373,11 @@
373
373
  },
374
374
  "--effect-shadow-elevated-md": {
375
375
  "$type": "effect",
376
- "$value": "0px 4px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
376
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
377
377
  },
378
378
  "--effect-highlight-elevated-md": {
379
379
  "$type": "effect",
380
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
380
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
381
381
  },
382
382
  "--effect-elevation-elevated-md": {
383
383
  "$type": "effect",
@@ -385,11 +385,11 @@
385
385
  },
386
386
  "--effect-shadow-elevated-floating": {
387
387
  "$type": "effect",
388
- "$value": "0px 8px 16px -4px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
388
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
389
389
  },
390
390
  "--effect-highlight-elevated-floating": {
391
391
  "$type": "effect",
392
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
392
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
393
393
  },
394
394
  "--effect-elevation-elevated-floating": {
395
395
  "$type": "effect",
@@ -397,11 +397,11 @@
397
397
  },
398
398
  "--effect-shadow-depressed-sm": {
399
399
  "$type": "effect",
400
- "$value": "0px -4px 2px -4px var(--color-surface-shadow),\n 0px 4px 2px -4px var(--color-surface-highlight),\n 0px 0px 0px 1px var(--color-surface-highlight)"
400
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 1px var(--color-elevation-highlight)"
401
401
  },
402
402
  "--effect-highlight-depressed-sm": {
403
403
  "$type": "effect",
404
- "$value": "inset 0px 2px 4px -2px var(--color-surface-shadow),\n inset 0px 0px 0px 1px var(--color-surface-shadow)"
404
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
405
405
  },
406
406
  "--effect-elevation-depressed-sm": {
407
407
  "$type": "effect",
@@ -409,11 +409,11 @@
409
409
  },
410
410
  "--effect-shadow-depressed-md": {
411
411
  "$type": "effect",
412
- "$value": "0px -4px 2px -4px var(--color-surface-shadow),\n 0px 4px 2px -4px var(--color-surface-highlight),\n 0px 0px 0px 1px var(--color-surface-highlight)"
412
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 1px var(--color-elevation-highlight)"
413
413
  },
414
414
  "--effect-highlight-depressed-md": {
415
415
  "$type": "effect",
416
- "$value": "inset 0px 4px 8px -4px var(--color-surface-shadow),\n inset 0px 0px 0px 1px var(--color-surface-shadow)"
416
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
417
417
  },
418
418
  "--effect-elevation-depressed-md": {
419
419
  "$type": "effect",
@@ -421,11 +421,11 @@
421
421
  },
422
422
  "--effect-shadow-elevated-panel-top": {
423
423
  "$type": "effect",
424
- "$value": "0px 4px 8px 0px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
424
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
425
425
  },
426
426
  "--effect-highlight-elevated-panel-top": {
427
427
  "$type": "effect",
428
- "$value": "inset 0px -4px 2px -4px var(--color-surface-highlight),\n inset 0px -1px 0px 0px var(--color-surface-highlight)"
428
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
429
429
  },
430
430
  "--effect-elevation-elevated-panel-top": {
431
431
  "$type": "effect",
@@ -433,11 +433,11 @@
433
433
  },
434
434
  "--effect-shadow-elevated-panel-right": {
435
435
  "$type": "effect",
436
- "$value": "-4px 0px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
436
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
437
437
  },
438
438
  "--effect-highlight-elevated-panel-right": {
439
439
  "$type": "effect",
440
- "$value": "inset 4px 0px 2px -4px var(--color-surface-highlight),\n inset 1px 0px 0px 0px var(--color-surface-highlight)"
440
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
441
441
  },
442
442
  "--effect-elevation-elevated-panel-right": {
443
443
  "$type": "effect",
@@ -445,11 +445,11 @@
445
445
  },
446
446
  "--effect-shadow-elevated-panel-bottom": {
447
447
  "$type": "effect",
448
- "$value": "0px -4px 8px 0px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
448
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
449
449
  },
450
450
  "--effect-highlight-elevated-panel-bottom": {
451
451
  "$type": "effect",
452
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 1px 0px 0px var(--color-surface-highlight)"
452
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
453
453
  },
454
454
  "--effect-elevation-elevated-panel-bottom": {
455
455
  "$type": "effect",
@@ -457,11 +457,11 @@
457
457
  },
458
458
  "--effect-shadow-elevated-panel-left": {
459
459
  "$type": "effect",
460
- "$value": "4px 0px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
460
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
461
461
  },
462
462
  "--effect-highlight-elevated-panel-left": {
463
463
  "$type": "effect",
464
- "$value": "inset -4px 0px 2px -4px var(--color-surface-highlight),\n inset -1px 0px 0px 0px var(--color-surface-highlight)"
464
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
465
465
  },
466
466
  "--effect-elevation-elevated-panel-left": {
467
467
  "$type": "effect",
package/dist/tokens.json CHANGED
@@ -2741,11 +2741,11 @@
2741
2741
  },
2742
2742
  "--effect-shadow-elevated-sm": {
2743
2743
  "$type": "effect",
2744
- "$value": "0px 2px 4px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2744
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2745
2745
  },
2746
2746
  "--effect-highlight-elevated-sm": {
2747
2747
  "$type": "effect",
2748
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
2748
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
2749
2749
  },
2750
2750
  "--effect-elevation-elevated-sm": {
2751
2751
  "$type": "effect",
@@ -2753,11 +2753,11 @@
2753
2753
  },
2754
2754
  "--effect-shadow-elevated-md": {
2755
2755
  "$type": "effect",
2756
- "$value": "0px 4px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2756
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2757
2757
  },
2758
2758
  "--effect-highlight-elevated-md": {
2759
2759
  "$type": "effect",
2760
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
2760
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
2761
2761
  },
2762
2762
  "--effect-elevation-elevated-md": {
2763
2763
  "$type": "effect",
@@ -2765,11 +2765,11 @@
2765
2765
  },
2766
2766
  "--effect-shadow-elevated-floating": {
2767
2767
  "$type": "effect",
2768
- "$value": "0px 8px 16px -4px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2768
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2769
2769
  },
2770
2770
  "--effect-highlight-elevated-floating": {
2771
2771
  "$type": "effect",
2772
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
2772
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
2773
2773
  },
2774
2774
  "--effect-elevation-elevated-floating": {
2775
2775
  "$type": "effect",
@@ -2777,11 +2777,11 @@
2777
2777
  },
2778
2778
  "--effect-shadow-depressed-sm": {
2779
2779
  "$type": "effect",
2780
- "$value": "0px -4px 2px -4px var(--color-surface-shadow),\n 0px 4px 2px -4px var(--color-surface-highlight),\n 0px 0px 0px 1px var(--color-surface-highlight)"
2780
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 1px var(--color-elevation-highlight)"
2781
2781
  },
2782
2782
  "--effect-highlight-depressed-sm": {
2783
2783
  "$type": "effect",
2784
- "$value": "inset 0px 2px 4px -2px var(--color-surface-shadow),\n inset 0px 0px 0px 1px var(--color-surface-shadow)"
2784
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
2785
2785
  },
2786
2786
  "--effect-elevation-depressed-sm": {
2787
2787
  "$type": "effect",
@@ -2789,11 +2789,11 @@
2789
2789
  },
2790
2790
  "--effect-shadow-depressed-md": {
2791
2791
  "$type": "effect",
2792
- "$value": "0px -4px 2px -4px var(--color-surface-shadow),\n 0px 4px 2px -4px var(--color-surface-highlight),\n 0px 0px 0px 1px var(--color-surface-highlight)"
2792
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 1px var(--color-elevation-highlight)"
2793
2793
  },
2794
2794
  "--effect-highlight-depressed-md": {
2795
2795
  "$type": "effect",
2796
- "$value": "inset 0px 4px 8px -4px var(--color-surface-shadow),\n inset 0px 0px 0px 1px var(--color-surface-shadow)"
2796
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
2797
2797
  },
2798
2798
  "--effect-elevation-depressed-md": {
2799
2799
  "$type": "effect",
@@ -2801,11 +2801,11 @@
2801
2801
  },
2802
2802
  "--effect-shadow-elevated-panel-top": {
2803
2803
  "$type": "effect",
2804
- "$value": "0px 4px 8px 0px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2804
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2805
2805
  },
2806
2806
  "--effect-highlight-elevated-panel-top": {
2807
2807
  "$type": "effect",
2808
- "$value": "inset 0px -4px 2px -4px var(--color-surface-highlight),\n inset 0px -1px 0px 0px var(--color-surface-highlight)"
2808
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
2809
2809
  },
2810
2810
  "--effect-elevation-elevated-panel-top": {
2811
2811
  "$type": "effect",
@@ -2813,11 +2813,11 @@
2813
2813
  },
2814
2814
  "--effect-shadow-elevated-panel-right": {
2815
2815
  "$type": "effect",
2816
- "$value": "-4px 0px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2816
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2817
2817
  },
2818
2818
  "--effect-highlight-elevated-panel-right": {
2819
2819
  "$type": "effect",
2820
- "$value": "inset 4px 0px 2px -4px var(--color-surface-highlight),\n inset 1px 0px 0px 0px var(--color-surface-highlight)"
2820
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
2821
2821
  },
2822
2822
  "--effect-elevation-elevated-panel-right": {
2823
2823
  "$type": "effect",
@@ -2825,11 +2825,11 @@
2825
2825
  },
2826
2826
  "--effect-shadow-elevated-panel-bottom": {
2827
2827
  "$type": "effect",
2828
- "$value": "0px -4px 8px 0px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2828
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2829
2829
  },
2830
2830
  "--effect-highlight-elevated-panel-bottom": {
2831
2831
  "$type": "effect",
2832
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 1px 0px 0px var(--color-surface-highlight)"
2832
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
2833
2833
  },
2834
2834
  "--effect-elevation-elevated-panel-bottom": {
2835
2835
  "$type": "effect",
@@ -2837,11 +2837,11 @@
2837
2837
  },
2838
2838
  "--effect-shadow-elevated-panel-left": {
2839
2839
  "$type": "effect",
2840
- "$value": "4px 0px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2840
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2841
2841
  },
2842
2842
  "--effect-highlight-elevated-panel-left": {
2843
2843
  "$type": "effect",
2844
- "$value": "inset -4px 0px 2px -4px var(--color-surface-highlight),\n inset -1px 0px 0px 0px var(--color-surface-highlight)"
2844
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
2845
2845
  },
2846
2846
  "--effect-elevation-elevated-panel-left": {
2847
2847
  "$type": "effect",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/tokens",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "TokoMo design tokens — colors, dimensions, typography, and effects as CSS custom properties, JSON, and TypeScript constants",
5
5
  "keywords": [
6
6
  "design-tokens",
@@ -59,6 +59,7 @@
59
59
  "build": "node scripts/build.mjs",
60
60
  "build:colors": "node scripts/generate-color-tokens.mjs",
61
61
  "build:json": "node scripts/generate-json-tokens.mjs",
62
+ "build:docs": "node scripts/build-docs.mjs",
62
63
  "build:ts": "node scripts/generate-ts-constants.mjs",
63
64
  "clean": "rm -rf dist",
64
65
  "dev": "node scripts/build.mjs --watch"