@ds-mo/tokens 2.8.0 → 2.9.1

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 (10) hide show
  1. package/dist/dimensions.css +1 -0
  2. package/dist/effects.css +18 -18
  3. package/dist/index.cjs +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/dist/json/dimensions.json +4 -0
  7. package/dist/json/effects.json +18 -18
  8. package/dist/tokens-index.json +22 -18
  9. package/dist/tokens.json +22 -18
  10. package/package.json +1 -1
package/dist/dimensions.css CHANGED
@@ -78,6 +78,7 @@
78
78
  --dimension-size-800: calc(var(--dimension-size-base) * 8);
79
79
  --dimension-size-000: 0;
80
80
  --dimension-size-050: calc(var(--dimension-size-base) / 2);
81
+ --dimension-size-075: calc(var(--dimension-size-base) * 3 / 4);
81
82
 
82
83
  /* Iconography — semantic icon size aliases, calc() relative to --dimension-size-base */
83
84
  --dimension-iconography-xs: calc(var(--dimension-size-base) * 3 / 2);
package/dist/effects.css CHANGED
@@ -135,10 +135,10 @@
135
135
  /* ── elevated-sm ───────────────────────────────────────────────────────── */
136
136
  --effect-shadow-elevated-sm:
137
137
  0px 2px 4px -2px var(--color-elevation-shadow),
138
- 0px 0px 0px 1px var(--color-elevation-shadow);
138
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
139
139
  --effect-highlight-elevated-sm:
140
140
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
141
- inset 0px 0px 0px 1px var(--color-elevation-highlight);
141
+ inset 0px 0px 0px 0.5px var(--color-elevation-highlight);
142
142
  --effect-elevation-elevated-sm:
143
143
  var(--effect-shadow-elevated-sm),
144
144
  var(--effect-highlight-elevated-sm);
@@ -146,10 +146,10 @@
146
146
  /* ── elevated-md ───────────────────────────────────────────────────────── */
147
147
  --effect-shadow-elevated-md:
148
148
  0px 4px 8px -2px var(--color-elevation-shadow),
149
- 0px 0px 0px 1px var(--color-elevation-shadow);
149
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
150
150
  --effect-highlight-elevated-md:
151
151
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
152
- inset 0px 0px 0px 1px var(--color-elevation-highlight);
152
+ inset 0px 0px 0px 0.5px var(--color-elevation-highlight);
153
153
  --effect-elevation-elevated-md:
154
154
  var(--effect-shadow-elevated-md),
155
155
  var(--effect-highlight-elevated-md);
@@ -157,10 +157,10 @@
157
157
  /* ── elevated-floating ─────────────────────────────────────────────────── */
158
158
  --effect-shadow-elevated-floating:
159
159
  0px 8px 16px -4px var(--color-elevation-shadow),
160
- 0px 0px 0px 1px var(--color-elevation-shadow);
160
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
161
161
  --effect-highlight-elevated-floating:
162
162
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
163
- inset 0px 0px 0px 1px var(--color-elevation-highlight);
163
+ inset 0px 0px 0px 0.5px var(--color-elevation-highlight);
164
164
  --effect-elevation-elevated-floating:
165
165
  var(--effect-shadow-elevated-floating),
166
166
  var(--effect-highlight-elevated-floating);
@@ -170,10 +170,10 @@
170
170
  --effect-shadow-depressed-sm:
171
171
  0px -4px 2px -4px var(--color-elevation-shadow),
172
172
  0px 4px 2px -4px var(--color-elevation-highlight),
173
- 0px 0px 0px 1px var(--color-elevation-highlight);
173
+ 0px 0px 0px 0.5px var(--color-elevation-highlight);
174
174
  --effect-highlight-depressed-sm:
175
175
  inset 0px 2px 4px -2px var(--color-elevation-shadow),
176
- inset 0px 0px 0px 1px var(--color-elevation-shadow);
176
+ inset 0px 0px 0px 0.5px var(--color-elevation-shadow);
177
177
  --effect-elevation-depressed-sm:
178
178
  var(--effect-shadow-depressed-sm),
179
179
  var(--effect-highlight-depressed-sm);
@@ -182,10 +182,10 @@
182
182
  --effect-shadow-depressed-md:
183
183
  0px -4px 2px -4px var(--color-elevation-shadow),
184
184
  0px 4px 2px -4px var(--color-elevation-highlight),
185
- 0px 0px 0px 1px var(--color-elevation-highlight);
185
+ 0px 0px 0px 0.5px var(--color-elevation-highlight);
186
186
  --effect-highlight-depressed-md:
187
187
  inset 0px 4px 8px -4px var(--color-elevation-shadow),
188
- inset 0px 0px 0px 1px var(--color-elevation-shadow);
188
+ inset 0px 0px 0px 0.5px var(--color-elevation-shadow);
189
189
  --effect-elevation-depressed-md:
190
190
  var(--effect-shadow-depressed-md),
191
191
  var(--effect-highlight-depressed-md);
@@ -193,10 +193,10 @@
193
193
  /* ── elevated-panel-top (shadow casts downward, attaches to bottom of viewport) ── */
194
194
  --effect-shadow-elevated-panel-top:
195
195
  0px 4px 8px 0px var(--color-elevation-shadow),
196
- 0px 0px 0px 1px var(--color-elevation-shadow);
196
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
197
197
  --effect-highlight-elevated-panel-top:
198
198
  inset 0px -4px 2px -4px var(--color-elevation-highlight),
199
- inset 0px -1px 0px 0px var(--color-elevation-highlight);
199
+ inset 0px -0.5px 0px 0px var(--color-elevation-highlight);
200
200
  --effect-elevation-elevated-panel-top:
201
201
  var(--effect-shadow-elevated-panel-top),
202
202
  var(--effect-highlight-elevated-panel-top);
@@ -204,10 +204,10 @@
204
204
  /* ── elevated-panel-right (shadow casts leftward, panel attached to right edge) ── */
205
205
  --effect-shadow-elevated-panel-right:
206
206
  -4px 0px 8px -2px var(--color-elevation-shadow),
207
- 0px 0px 0px 1px var(--color-elevation-shadow);
207
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
208
208
  --effect-highlight-elevated-panel-right:
209
209
  inset 4px 0px 2px -4px var(--color-elevation-highlight),
210
- inset 1px 0px 0px 0px var(--color-elevation-highlight);
210
+ inset 0.5px 0px 0px 0px var(--color-elevation-highlight);
211
211
  --effect-elevation-elevated-panel-right:
212
212
  var(--effect-shadow-elevated-panel-right),
213
213
  var(--effect-highlight-elevated-panel-right);
@@ -215,10 +215,10 @@
215
215
  /* ── elevated-panel-bottom (shadow casts upward, attaches to top of viewport) ── */
216
216
  --effect-shadow-elevated-panel-bottom:
217
217
  0px -4px 8px 0px var(--color-elevation-shadow),
218
- 0px 0px 0px 1px var(--color-elevation-shadow);
218
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
219
219
  --effect-highlight-elevated-panel-bottom:
220
220
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
221
- inset 0px 1px 0px 0px var(--color-elevation-highlight);
221
+ inset 0px 0.5px 0px 0px var(--color-elevation-highlight);
222
222
  --effect-elevation-elevated-panel-bottom:
223
223
  var(--effect-shadow-elevated-panel-bottom),
224
224
  var(--effect-highlight-elevated-panel-bottom);
@@ -226,10 +226,10 @@
226
226
  /* ── elevated-panel-left (shadow casts rightward, panel attached to left edge) ── */
227
227
  --effect-shadow-elevated-panel-left:
228
228
  4px 0px 8px -2px var(--color-elevation-shadow),
229
- 0px 0px 0px 1px var(--color-elevation-shadow);
229
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
230
230
  --effect-highlight-elevated-panel-left:
231
231
  inset -4px 0px 2px -4px var(--color-elevation-highlight),
232
- inset -1px 0px 0px 0px var(--color-elevation-highlight);
232
+ inset -0.5px 0px 0px 0px var(--color-elevation-highlight);
233
233
  --effect-elevation-elevated-panel-left:
234
234
  var(--effect-shadow-elevated-panel-left),
235
235
  var(--effect-highlight-elevated-panel-left);
package/dist/index.cjs CHANGED
@@ -786,6 +786,7 @@ exports.dimensionScaleDefault = '--dimension-scale-default';
786
786
  exports.dimensionScaleSubtle = '--dimension-scale-subtle';
787
787
  exports.dimensionSize000 = '--dimension-size-000';
788
788
  exports.dimensionSize050 = '--dimension-size-050';
789
+ exports.dimensionSize075 = '--dimension-size-075';
789
790
  exports.dimensionSize100 = '--dimension-size-100';
790
791
  exports.dimensionSize150 = '--dimension-size-150';
791
792
  exports.dimensionSize200 = '--dimension-size-200';
package/dist/index.d.ts CHANGED
@@ -786,6 +786,7 @@ export declare const dimensionScaleDefault: '--dimension-scale-default';
786
786
  export declare const dimensionScaleSubtle: '--dimension-scale-subtle';
787
787
  export declare const dimensionSize000: '--dimension-size-000';
788
788
  export declare const dimensionSize050: '--dimension-size-050';
789
+ export declare const dimensionSize075: '--dimension-size-075';
789
790
  export declare const dimensionSize100: '--dimension-size-100';
790
791
  export declare const dimensionSize150: '--dimension-size-150';
791
792
  export declare const dimensionSize200: '--dimension-size-200';
package/dist/index.mjs CHANGED
@@ -786,6 +786,7 @@ export const dimensionScaleDefault = '--dimension-scale-default';
786
786
  export const dimensionScaleSubtle = '--dimension-scale-subtle';
787
787
  export const dimensionSize000 = '--dimension-size-000';
788
788
  export const dimensionSize050 = '--dimension-size-050';
789
+ export const dimensionSize075 = '--dimension-size-075';
789
790
  export const dimensionSize100 = '--dimension-size-100';
790
791
  export const dimensionSize150 = '--dimension-size-150';
791
792
  export const dimensionSize200 = '--dimension-size-200';
package/dist/json/dimensions.json CHANGED
@@ -267,6 +267,10 @@
267
267
  "$type": "dimension",
268
268
  "$value": "calc(var(--dimension-size-base) / 2)"
269
269
  },
270
+ "--dimension-size-075": {
271
+ "$type": "dimension",
272
+ "$value": "calc(var(--dimension-size-base) * 3 / 4)"
273
+ },
270
274
  "--dimension-iconography-xs": {
271
275
  "$type": "dimension",
272
276
  "$value": "calc(var(--dimension-size-base) * 3 / 2)"
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-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
364
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px 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-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
368
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px 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-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
376
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px 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-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
380
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px 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-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
388
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px 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-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
392
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px 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-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 1px var(--color-elevation-highlight)"
400
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 0.5px 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-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
404
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px 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-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 1px var(--color-elevation-highlight)"
412
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 0.5px 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-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
416
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px 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-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
424
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px 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-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
428
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -0.5px 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-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
436
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px 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-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
440
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 0.5px 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-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
448
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px 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-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
452
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0.5px 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-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
460
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px 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-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
464
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -0.5px 0px 0px 0px var(--color-elevation-highlight)"
465
465
  },
466
466
  "--effect-elevation-elevated-panel-left": {
467
467
  "$type": "effect",
package/dist/tokens-index.json CHANGED
@@ -3129,6 +3129,10 @@
3129
3129
  "$type": "dimension",
3130
3130
  "$value": "calc(var(--dimension-size-base) / 2)"
3131
3131
  },
3132
+ "--dimension-size-075": {
3133
+ "$type": "dimension",
3134
+ "$value": "calc(var(--dimension-size-base) * 3 / 4)"
3135
+ },
3132
3136
  "--dimension-iconography-xs": {
3133
3137
  "$type": "dimension",
3134
3138
  "$value": "calc(var(--dimension-size-base) * 3 / 2)"
@@ -3891,11 +3895,11 @@
3891
3895
  },
3892
3896
  "--effect-shadow-elevated-sm": {
3893
3897
  "$type": "effect",
3894
- "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3898
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3895
3899
  },
3896
3900
  "--effect-highlight-elevated-sm": {
3897
3901
  "$type": "effect",
3898
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3902
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3899
3903
  },
3900
3904
  "--effect-elevation-elevated-sm": {
3901
3905
  "$type": "effect",
@@ -3903,11 +3907,11 @@
3903
3907
  },
3904
3908
  "--effect-shadow-elevated-md": {
3905
3909
  "$type": "effect",
3906
- "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3910
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3907
3911
  },
3908
3912
  "--effect-highlight-elevated-md": {
3909
3913
  "$type": "effect",
3910
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3914
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3911
3915
  },
3912
3916
  "--effect-elevation-elevated-md": {
3913
3917
  "$type": "effect",
@@ -3915,11 +3919,11 @@
3915
3919
  },
3916
3920
  "--effect-shadow-elevated-floating": {
3917
3921
  "$type": "effect",
3918
- "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3922
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3919
3923
  },
3920
3924
  "--effect-highlight-elevated-floating": {
3921
3925
  "$type": "effect",
3922
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3926
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3923
3927
  },
3924
3928
  "--effect-elevation-elevated-floating": {
3925
3929
  "$type": "effect",
@@ -3927,11 +3931,11 @@
3927
3931
  },
3928
3932
  "--effect-shadow-depressed-sm": {
3929
3933
  "$type": "effect",
3930
- "$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)"
3934
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3931
3935
  },
3932
3936
  "--effect-highlight-depressed-sm": {
3933
3937
  "$type": "effect",
3934
- "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3938
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3935
3939
  },
3936
3940
  "--effect-elevation-depressed-sm": {
3937
3941
  "$type": "effect",
@@ -3939,11 +3943,11 @@
3939
3943
  },
3940
3944
  "--effect-shadow-depressed-md": {
3941
3945
  "$type": "effect",
3942
- "$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)"
3946
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3943
3947
  },
3944
3948
  "--effect-highlight-depressed-md": {
3945
3949
  "$type": "effect",
3946
- "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3950
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3947
3951
  },
3948
3952
  "--effect-elevation-depressed-md": {
3949
3953
  "$type": "effect",
@@ -3951,11 +3955,11 @@
3951
3955
  },
3952
3956
  "--effect-shadow-elevated-panel-top": {
3953
3957
  "$type": "effect",
3954
- "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3958
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3955
3959
  },
3956
3960
  "--effect-highlight-elevated-panel-top": {
3957
3961
  "$type": "effect",
3958
- "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
3962
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -0.5px 0px 0px var(--color-elevation-highlight)"
3959
3963
  },
3960
3964
  "--effect-elevation-elevated-panel-top": {
3961
3965
  "$type": "effect",
@@ -3963,11 +3967,11 @@
3963
3967
  },
3964
3968
  "--effect-shadow-elevated-panel-right": {
3965
3969
  "$type": "effect",
3966
- "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3970
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3967
3971
  },
3968
3972
  "--effect-highlight-elevated-panel-right": {
3969
3973
  "$type": "effect",
3970
- "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
3974
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 0.5px 0px 0px 0px var(--color-elevation-highlight)"
3971
3975
  },
3972
3976
  "--effect-elevation-elevated-panel-right": {
3973
3977
  "$type": "effect",
@@ -3975,11 +3979,11 @@
3975
3979
  },
3976
3980
  "--effect-shadow-elevated-panel-bottom": {
3977
3981
  "$type": "effect",
3978
- "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3982
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3979
3983
  },
3980
3984
  "--effect-highlight-elevated-panel-bottom": {
3981
3985
  "$type": "effect",
3982
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
3986
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0.5px 0px 0px var(--color-elevation-highlight)"
3983
3987
  },
3984
3988
  "--effect-elevation-elevated-panel-bottom": {
3985
3989
  "$type": "effect",
@@ -3987,11 +3991,11 @@
3987
3991
  },
3988
3992
  "--effect-shadow-elevated-panel-left": {
3989
3993
  "$type": "effect",
3990
- "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3994
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3991
3995
  },
3992
3996
  "--effect-highlight-elevated-panel-left": {
3993
3997
  "$type": "effect",
3994
- "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
3998
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -0.5px 0px 0px 0px var(--color-elevation-highlight)"
3995
3999
  },
3996
4000
  "--effect-elevation-elevated-panel-left": {
3997
4001
  "$type": "effect",
package/dist/tokens.json CHANGED
@@ -3111,6 +3111,10 @@
3111
3111
  "$type": "dimension",
3112
3112
  "$value": "calc(var(--dimension-size-base) / 2)"
3113
3113
  },
3114
+ "--dimension-size-075": {
3115
+ "$type": "dimension",
3116
+ "$value": "calc(var(--dimension-size-base) * 3 / 4)"
3117
+ },
3114
3118
  "--dimension-iconography-xs": {
3115
3119
  "$type": "dimension",
3116
3120
  "$value": "calc(var(--dimension-size-base) * 3 / 2)"
@@ -3869,11 +3873,11 @@
3869
3873
  },
3870
3874
  "--effect-shadow-elevated-sm": {
3871
3875
  "$type": "effect",
3872
- "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3876
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3873
3877
  },
3874
3878
  "--effect-highlight-elevated-sm": {
3875
3879
  "$type": "effect",
3876
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3880
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3877
3881
  },
3878
3882
  "--effect-elevation-elevated-sm": {
3879
3883
  "$type": "effect",
@@ -3881,11 +3885,11 @@
3881
3885
  },
3882
3886
  "--effect-shadow-elevated-md": {
3883
3887
  "$type": "effect",
3884
- "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3888
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3885
3889
  },
3886
3890
  "--effect-highlight-elevated-md": {
3887
3891
  "$type": "effect",
3888
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3892
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3889
3893
  },
3890
3894
  "--effect-elevation-elevated-md": {
3891
3895
  "$type": "effect",
@@ -3893,11 +3897,11 @@
3893
3897
  },
3894
3898
  "--effect-shadow-elevated-floating": {
3895
3899
  "$type": "effect",
3896
- "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3900
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3897
3901
  },
3898
3902
  "--effect-highlight-elevated-floating": {
3899
3903
  "$type": "effect",
3900
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3904
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3901
3905
  },
3902
3906
  "--effect-elevation-elevated-floating": {
3903
3907
  "$type": "effect",
@@ -3905,11 +3909,11 @@
3905
3909
  },
3906
3910
  "--effect-shadow-depressed-sm": {
3907
3911
  "$type": "effect",
3908
- "$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)"
3912
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3909
3913
  },
3910
3914
  "--effect-highlight-depressed-sm": {
3911
3915
  "$type": "effect",
3912
- "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3916
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3913
3917
  },
3914
3918
  "--effect-elevation-depressed-sm": {
3915
3919
  "$type": "effect",
@@ -3917,11 +3921,11 @@
3917
3921
  },
3918
3922
  "--effect-shadow-depressed-md": {
3919
3923
  "$type": "effect",
3920
- "$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)"
3924
+ "$value": "0px -4px 2px -4px var(--color-elevation-shadow),\n 0px 4px 2px -4px var(--color-elevation-highlight),\n 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3921
3925
  },
3922
3926
  "--effect-highlight-depressed-md": {
3923
3927
  "$type": "effect",
3924
- "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3928
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3925
3929
  },
3926
3930
  "--effect-elevation-depressed-md": {
3927
3931
  "$type": "effect",
@@ -3929,11 +3933,11 @@
3929
3933
  },
3930
3934
  "--effect-shadow-elevated-panel-top": {
3931
3935
  "$type": "effect",
3932
- "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3936
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3933
3937
  },
3934
3938
  "--effect-highlight-elevated-panel-top": {
3935
3939
  "$type": "effect",
3936
- "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
3940
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -0.5px 0px 0px var(--color-elevation-highlight)"
3937
3941
  },
3938
3942
  "--effect-elevation-elevated-panel-top": {
3939
3943
  "$type": "effect",
@@ -3941,11 +3945,11 @@
3941
3945
  },
3942
3946
  "--effect-shadow-elevated-panel-right": {
3943
3947
  "$type": "effect",
3944
- "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3948
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3945
3949
  },
3946
3950
  "--effect-highlight-elevated-panel-right": {
3947
3951
  "$type": "effect",
3948
- "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
3952
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 0.5px 0px 0px 0px var(--color-elevation-highlight)"
3949
3953
  },
3950
3954
  "--effect-elevation-elevated-panel-right": {
3951
3955
  "$type": "effect",
@@ -3953,11 +3957,11 @@
3953
3957
  },
3954
3958
  "--effect-shadow-elevated-panel-bottom": {
3955
3959
  "$type": "effect",
3956
- "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3960
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3957
3961
  },
3958
3962
  "--effect-highlight-elevated-panel-bottom": {
3959
3963
  "$type": "effect",
3960
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
3964
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0.5px 0px 0px var(--color-elevation-highlight)"
3961
3965
  },
3962
3966
  "--effect-elevation-elevated-panel-bottom": {
3963
3967
  "$type": "effect",
@@ -3965,11 +3969,11 @@
3965
3969
  },
3966
3970
  "--effect-shadow-elevated-panel-left": {
3967
3971
  "$type": "effect",
3968
- "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3972
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3969
3973
  },
3970
3974
  "--effect-highlight-elevated-panel-left": {
3971
3975
  "$type": "effect",
3972
- "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
3976
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -0.5px 0px 0px 0px var(--color-elevation-highlight)"
3973
3977
  },
3974
3978
  "--effect-elevation-elevated-panel-left": {
3975
3979
  "$type": "effect",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/tokens",
3
- "version": "2.8.0",
3
+ "version": "2.9.1",
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",