@ds-mo/tokens 2.9.0 → 2.10.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 (8) hide show
  1. package/dist/effects.css +19 -18
  2. package/dist/index.cjs +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.mjs +1 -0
  5. package/dist/json/effects.json +22 -18
  6. package/dist/tokens-index.json +22 -18
  7. package/dist/tokens.json +22 -18
  8. package/package.json +1 -1
package/dist/effects.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --effect-animation-delay-long-3: 6000ms;
33
33
 
34
34
  /* Animation easing curves */
35
+ --effect-animation-easing-linear: cubic-bezier(0,0,1,1);
35
36
  --effect-animation-easing-ease-in: cubic-bezier(0.47,0,0.75,0.72);
36
37
  --effect-animation-easing-ease-out: cubic-bezier(0.17,0.84,0.44,1);
37
38
  --effect-animation-easing-ease-in-out: cubic-bezier(0.77,0,0.18,1);
@@ -135,10 +136,10 @@
135
136
  /* ── elevated-sm ───────────────────────────────────────────────────────── */
136
137
  --effect-shadow-elevated-sm:
137
138
  0px 2px 4px -2px var(--color-elevation-shadow),
138
- 0px 0px 0px 1px var(--color-elevation-shadow);
139
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
139
140
  --effect-highlight-elevated-sm:
140
141
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
141
- inset 0px 0px 0px 1px var(--color-elevation-highlight);
142
+ inset 0px 0px 0px 0.5px var(--color-elevation-highlight);
142
143
  --effect-elevation-elevated-sm:
143
144
  var(--effect-shadow-elevated-sm),
144
145
  var(--effect-highlight-elevated-sm);
@@ -146,10 +147,10 @@
146
147
  /* ── elevated-md ───────────────────────────────────────────────────────── */
147
148
  --effect-shadow-elevated-md:
148
149
  0px 4px 8px -2px var(--color-elevation-shadow),
149
- 0px 0px 0px 1px var(--color-elevation-shadow);
150
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
150
151
  --effect-highlight-elevated-md:
151
152
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
152
- inset 0px 0px 0px 1px var(--color-elevation-highlight);
153
+ inset 0px 0px 0px 0.5px var(--color-elevation-highlight);
153
154
  --effect-elevation-elevated-md:
154
155
  var(--effect-shadow-elevated-md),
155
156
  var(--effect-highlight-elevated-md);
@@ -157,10 +158,10 @@
157
158
  /* ── elevated-floating ─────────────────────────────────────────────────── */
158
159
  --effect-shadow-elevated-floating:
159
160
  0px 8px 16px -4px var(--color-elevation-shadow),
160
- 0px 0px 0px 1px var(--color-elevation-shadow);
161
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
161
162
  --effect-highlight-elevated-floating:
162
163
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
163
- inset 0px 0px 0px 1px var(--color-elevation-highlight);
164
+ inset 0px 0px 0px 0.5px var(--color-elevation-highlight);
164
165
  --effect-elevation-elevated-floating:
165
166
  var(--effect-shadow-elevated-floating),
166
167
  var(--effect-highlight-elevated-floating);
@@ -170,10 +171,10 @@
170
171
  --effect-shadow-depressed-sm:
171
172
  0px -4px 2px -4px var(--color-elevation-shadow),
172
173
  0px 4px 2px -4px var(--color-elevation-highlight),
173
- 0px 0px 0px 1px var(--color-elevation-highlight);
174
+ 0px 0px 0px 0.5px var(--color-elevation-highlight);
174
175
  --effect-highlight-depressed-sm:
175
176
  inset 0px 2px 4px -2px var(--color-elevation-shadow),
176
- inset 0px 0px 0px 1px var(--color-elevation-shadow);
177
+ inset 0px 0px 0px 0.5px var(--color-elevation-shadow);
177
178
  --effect-elevation-depressed-sm:
178
179
  var(--effect-shadow-depressed-sm),
179
180
  var(--effect-highlight-depressed-sm);
@@ -182,10 +183,10 @@
182
183
  --effect-shadow-depressed-md:
183
184
  0px -4px 2px -4px var(--color-elevation-shadow),
184
185
  0px 4px 2px -4px var(--color-elevation-highlight),
185
- 0px 0px 0px 1px var(--color-elevation-highlight);
186
+ 0px 0px 0px 0.5px var(--color-elevation-highlight);
186
187
  --effect-highlight-depressed-md:
187
188
  inset 0px 4px 8px -4px var(--color-elevation-shadow),
188
- inset 0px 0px 0px 1px var(--color-elevation-shadow);
189
+ inset 0px 0px 0px 0.5px var(--color-elevation-shadow);
189
190
  --effect-elevation-depressed-md:
190
191
  var(--effect-shadow-depressed-md),
191
192
  var(--effect-highlight-depressed-md);
@@ -193,10 +194,10 @@
193
194
  /* ── elevated-panel-top (shadow casts downward, attaches to bottom of viewport) ── */
194
195
  --effect-shadow-elevated-panel-top:
195
196
  0px 4px 8px 0px var(--color-elevation-shadow),
196
- 0px 0px 0px 1px var(--color-elevation-shadow);
197
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
197
198
  --effect-highlight-elevated-panel-top:
198
199
  inset 0px -4px 2px -4px var(--color-elevation-highlight),
199
- inset 0px -1px 0px 0px var(--color-elevation-highlight);
200
+ inset 0px -0.5px 0px 0px var(--color-elevation-highlight);
200
201
  --effect-elevation-elevated-panel-top:
201
202
  var(--effect-shadow-elevated-panel-top),
202
203
  var(--effect-highlight-elevated-panel-top);
@@ -204,10 +205,10 @@
204
205
  /* ── elevated-panel-right (shadow casts leftward, panel attached to right edge) ── */
205
206
  --effect-shadow-elevated-panel-right:
206
207
  -4px 0px 8px -2px var(--color-elevation-shadow),
207
- 0px 0px 0px 1px var(--color-elevation-shadow);
208
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
208
209
  --effect-highlight-elevated-panel-right:
209
210
  inset 4px 0px 2px -4px var(--color-elevation-highlight),
210
- inset 1px 0px 0px 0px var(--color-elevation-highlight);
211
+ inset 0.5px 0px 0px 0px var(--color-elevation-highlight);
211
212
  --effect-elevation-elevated-panel-right:
212
213
  var(--effect-shadow-elevated-panel-right),
213
214
  var(--effect-highlight-elevated-panel-right);
@@ -215,10 +216,10 @@
215
216
  /* ── elevated-panel-bottom (shadow casts upward, attaches to top of viewport) ── */
216
217
  --effect-shadow-elevated-panel-bottom:
217
218
  0px -4px 8px 0px var(--color-elevation-shadow),
218
- 0px 0px 0px 1px var(--color-elevation-shadow);
219
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
219
220
  --effect-highlight-elevated-panel-bottom:
220
221
  inset 0px 4px 2px -4px var(--color-elevation-highlight),
221
- inset 0px 1px 0px 0px var(--color-elevation-highlight);
222
+ inset 0px 0.5px 0px 0px var(--color-elevation-highlight);
222
223
  --effect-elevation-elevated-panel-bottom:
223
224
  var(--effect-shadow-elevated-panel-bottom),
224
225
  var(--effect-highlight-elevated-panel-bottom);
@@ -226,10 +227,10 @@
226
227
  /* ── elevated-panel-left (shadow casts rightward, panel attached to left edge) ── */
227
228
  --effect-shadow-elevated-panel-left:
228
229
  4px 0px 8px -2px var(--color-elevation-shadow),
229
- 0px 0px 0px 1px var(--color-elevation-shadow);
230
+ 0px 0px 0px 0.5px var(--color-elevation-shadow);
230
231
  --effect-highlight-elevated-panel-left:
231
232
  inset -4px 0px 2px -4px var(--color-elevation-highlight),
232
- inset -1px 0px 0px 0px var(--color-elevation-highlight);
233
+ inset -0.5px 0px 0px 0px var(--color-elevation-highlight);
233
234
  --effect-elevation-elevated-panel-left:
234
235
  var(--effect-shadow-elevated-panel-left),
235
236
  var(--effect-highlight-elevated-panel-left);
package/dist/index.cjs CHANGED
@@ -872,6 +872,7 @@ exports.effectAnimationEasingEaseIn = '--effect-animation-easing-ease-in';
872
872
  exports.effectAnimationEasingEaseInOut = '--effect-animation-easing-ease-in-out';
873
873
  exports.effectAnimationEasingEaseInOutBack = '--effect-animation-easing-ease-in-out-back';
874
874
  exports.effectAnimationEasingEaseOut = '--effect-animation-easing-ease-out';
875
+ exports.effectAnimationEasingLinear = '--effect-animation-easing-linear';
875
876
  exports.effectBlurLg = '--effect-blur-lg';
876
877
  exports.effectBlurMd = '--effect-blur-md';
877
878
  exports.effectBlurSm = '--effect-blur-sm';
package/dist/index.d.ts CHANGED
@@ -872,6 +872,7 @@ export declare const effectAnimationEasingEaseIn: '--effect-animation-easing-eas
872
872
  export declare const effectAnimationEasingEaseInOut: '--effect-animation-easing-ease-in-out';
873
873
  export declare const effectAnimationEasingEaseInOutBack: '--effect-animation-easing-ease-in-out-back';
874
874
  export declare const effectAnimationEasingEaseOut: '--effect-animation-easing-ease-out';
875
+ export declare const effectAnimationEasingLinear: '--effect-animation-easing-linear';
875
876
  export declare const effectBlurLg: '--effect-blur-lg';
876
877
  export declare const effectBlurMd: '--effect-blur-md';
877
878
  export declare const effectBlurSm: '--effect-blur-sm';
package/dist/index.mjs CHANGED
@@ -872,6 +872,7 @@ export const effectAnimationEasingEaseIn = '--effect-animation-easing-ease-in';
872
872
  export const effectAnimationEasingEaseInOut = '--effect-animation-easing-ease-in-out';
873
873
  export const effectAnimationEasingEaseInOutBack = '--effect-animation-easing-ease-in-out-back';
874
874
  export const effectAnimationEasingEaseOut = '--effect-animation-easing-ease-out';
875
+ export const effectAnimationEasingLinear = '--effect-animation-easing-linear';
875
876
  export const effectBlurLg = '--effect-blur-lg';
876
877
  export const effectBlurMd = '--effect-blur-md';
877
878
  export const effectBlurSm = '--effect-blur-sm';
package/dist/json/effects.json CHANGED
@@ -91,6 +91,10 @@
91
91
  "$type": "effect",
92
92
  "$value": "6000ms"
93
93
  },
94
+ "--effect-animation-easing-linear": {
95
+ "$type": "effect",
96
+ "$value": "cubic-bezier(0,0,1,1)"
97
+ },
94
98
  "--effect-animation-easing-ease-in": {
95
99
  "$type": "effect",
96
100
  "$value": "cubic-bezier(0.47,0,0.75,0.72)"
@@ -361,11 +365,11 @@
361
365
  },
362
366
  "--effect-shadow-elevated-sm": {
363
367
  "$type": "effect",
364
- "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
368
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
365
369
  },
366
370
  "--effect-highlight-elevated-sm": {
367
371
  "$type": "effect",
368
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
372
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
369
373
  },
370
374
  "--effect-elevation-elevated-sm": {
371
375
  "$type": "effect",
@@ -373,11 +377,11 @@
373
377
  },
374
378
  "--effect-shadow-elevated-md": {
375
379
  "$type": "effect",
376
- "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
380
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
377
381
  },
378
382
  "--effect-highlight-elevated-md": {
379
383
  "$type": "effect",
380
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
384
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
381
385
  },
382
386
  "--effect-elevation-elevated-md": {
383
387
  "$type": "effect",
@@ -385,11 +389,11 @@
385
389
  },
386
390
  "--effect-shadow-elevated-floating": {
387
391
  "$type": "effect",
388
- "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
392
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
389
393
  },
390
394
  "--effect-highlight-elevated-floating": {
391
395
  "$type": "effect",
392
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
396
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
393
397
  },
394
398
  "--effect-elevation-elevated-floating": {
395
399
  "$type": "effect",
@@ -397,11 +401,11 @@
397
401
  },
398
402
  "--effect-shadow-depressed-sm": {
399
403
  "$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)"
404
+ "$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
405
  },
402
406
  "--effect-highlight-depressed-sm": {
403
407
  "$type": "effect",
404
- "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
408
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
405
409
  },
406
410
  "--effect-elevation-depressed-sm": {
407
411
  "$type": "effect",
@@ -409,11 +413,11 @@
409
413
  },
410
414
  "--effect-shadow-depressed-md": {
411
415
  "$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)"
416
+ "$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
417
  },
414
418
  "--effect-highlight-depressed-md": {
415
419
  "$type": "effect",
416
- "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
420
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
417
421
  },
418
422
  "--effect-elevation-depressed-md": {
419
423
  "$type": "effect",
@@ -421,11 +425,11 @@
421
425
  },
422
426
  "--effect-shadow-elevated-panel-top": {
423
427
  "$type": "effect",
424
- "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
428
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
425
429
  },
426
430
  "--effect-highlight-elevated-panel-top": {
427
431
  "$type": "effect",
428
- "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
432
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -0.5px 0px 0px var(--color-elevation-highlight)"
429
433
  },
430
434
  "--effect-elevation-elevated-panel-top": {
431
435
  "$type": "effect",
@@ -433,11 +437,11 @@
433
437
  },
434
438
  "--effect-shadow-elevated-panel-right": {
435
439
  "$type": "effect",
436
- "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
440
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
437
441
  },
438
442
  "--effect-highlight-elevated-panel-right": {
439
443
  "$type": "effect",
440
- "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
444
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 0.5px 0px 0px 0px var(--color-elevation-highlight)"
441
445
  },
442
446
  "--effect-elevation-elevated-panel-right": {
443
447
  "$type": "effect",
@@ -445,11 +449,11 @@
445
449
  },
446
450
  "--effect-shadow-elevated-panel-bottom": {
447
451
  "$type": "effect",
448
- "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
452
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
449
453
  },
450
454
  "--effect-highlight-elevated-panel-bottom": {
451
455
  "$type": "effect",
452
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
456
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0.5px 0px 0px var(--color-elevation-highlight)"
453
457
  },
454
458
  "--effect-elevation-elevated-panel-bottom": {
455
459
  "$type": "effect",
@@ -457,11 +461,11 @@
457
461
  },
458
462
  "--effect-shadow-elevated-panel-left": {
459
463
  "$type": "effect",
460
- "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
464
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
461
465
  },
462
466
  "--effect-highlight-elevated-panel-left": {
463
467
  "$type": "effect",
464
- "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
468
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -0.5px 0px 0px 0px var(--color-elevation-highlight)"
465
469
  },
466
470
  "--effect-elevation-elevated-panel-left": {
467
471
  "$type": "effect",
package/dist/tokens-index.json CHANGED
@@ -3625,6 +3625,10 @@
3625
3625
  "$type": "effect",
3626
3626
  "$value": "6000ms"
3627
3627
  },
3628
+ "--effect-animation-easing-linear": {
3629
+ "$type": "effect",
3630
+ "$value": "cubic-bezier(0,0,1,1)"
3631
+ },
3628
3632
  "--effect-animation-easing-ease-in": {
3629
3633
  "$type": "effect",
3630
3634
  "$value": "cubic-bezier(0.47,0,0.75,0.72)"
@@ -3895,11 +3899,11 @@
3895
3899
  },
3896
3900
  "--effect-shadow-elevated-sm": {
3897
3901
  "$type": "effect",
3898
- "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3902
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3899
3903
  },
3900
3904
  "--effect-highlight-elevated-sm": {
3901
3905
  "$type": "effect",
3902
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3906
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3903
3907
  },
3904
3908
  "--effect-elevation-elevated-sm": {
3905
3909
  "$type": "effect",
@@ -3907,11 +3911,11 @@
3907
3911
  },
3908
3912
  "--effect-shadow-elevated-md": {
3909
3913
  "$type": "effect",
3910
- "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3914
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3911
3915
  },
3912
3916
  "--effect-highlight-elevated-md": {
3913
3917
  "$type": "effect",
3914
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3918
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3915
3919
  },
3916
3920
  "--effect-elevation-elevated-md": {
3917
3921
  "$type": "effect",
@@ -3919,11 +3923,11 @@
3919
3923
  },
3920
3924
  "--effect-shadow-elevated-floating": {
3921
3925
  "$type": "effect",
3922
- "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3926
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3923
3927
  },
3924
3928
  "--effect-highlight-elevated-floating": {
3925
3929
  "$type": "effect",
3926
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3930
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3927
3931
  },
3928
3932
  "--effect-elevation-elevated-floating": {
3929
3933
  "$type": "effect",
@@ -3931,11 +3935,11 @@
3931
3935
  },
3932
3936
  "--effect-shadow-depressed-sm": {
3933
3937
  "$type": "effect",
3934
- "$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)"
3938
+ "$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)"
3935
3939
  },
3936
3940
  "--effect-highlight-depressed-sm": {
3937
3941
  "$type": "effect",
3938
- "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3942
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3939
3943
  },
3940
3944
  "--effect-elevation-depressed-sm": {
3941
3945
  "$type": "effect",
@@ -3943,11 +3947,11 @@
3943
3947
  },
3944
3948
  "--effect-shadow-depressed-md": {
3945
3949
  "$type": "effect",
3946
- "$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)"
3950
+ "$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)"
3947
3951
  },
3948
3952
  "--effect-highlight-depressed-md": {
3949
3953
  "$type": "effect",
3950
- "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3954
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3951
3955
  },
3952
3956
  "--effect-elevation-depressed-md": {
3953
3957
  "$type": "effect",
@@ -3955,11 +3959,11 @@
3955
3959
  },
3956
3960
  "--effect-shadow-elevated-panel-top": {
3957
3961
  "$type": "effect",
3958
- "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3962
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3959
3963
  },
3960
3964
  "--effect-highlight-elevated-panel-top": {
3961
3965
  "$type": "effect",
3962
- "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
3966
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -0.5px 0px 0px var(--color-elevation-highlight)"
3963
3967
  },
3964
3968
  "--effect-elevation-elevated-panel-top": {
3965
3969
  "$type": "effect",
@@ -3967,11 +3971,11 @@
3967
3971
  },
3968
3972
  "--effect-shadow-elevated-panel-right": {
3969
3973
  "$type": "effect",
3970
- "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3974
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3971
3975
  },
3972
3976
  "--effect-highlight-elevated-panel-right": {
3973
3977
  "$type": "effect",
3974
- "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
3978
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 0.5px 0px 0px 0px var(--color-elevation-highlight)"
3975
3979
  },
3976
3980
  "--effect-elevation-elevated-panel-right": {
3977
3981
  "$type": "effect",
@@ -3979,11 +3983,11 @@
3979
3983
  },
3980
3984
  "--effect-shadow-elevated-panel-bottom": {
3981
3985
  "$type": "effect",
3982
- "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3986
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3983
3987
  },
3984
3988
  "--effect-highlight-elevated-panel-bottom": {
3985
3989
  "$type": "effect",
3986
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
3990
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0.5px 0px 0px var(--color-elevation-highlight)"
3987
3991
  },
3988
3992
  "--effect-elevation-elevated-panel-bottom": {
3989
3993
  "$type": "effect",
@@ -3991,11 +3995,11 @@
3991
3995
  },
3992
3996
  "--effect-shadow-elevated-panel-left": {
3993
3997
  "$type": "effect",
3994
- "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3998
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3995
3999
  },
3996
4000
  "--effect-highlight-elevated-panel-left": {
3997
4001
  "$type": "effect",
3998
- "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
4002
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -0.5px 0px 0px 0px var(--color-elevation-highlight)"
3999
4003
  },
4000
4004
  "--effect-elevation-elevated-panel-left": {
4001
4005
  "$type": "effect",
package/dist/tokens.json CHANGED
@@ -3603,6 +3603,10 @@
3603
3603
  "$type": "effect",
3604
3604
  "$value": "6000ms"
3605
3605
  },
3606
+ "--effect-animation-easing-linear": {
3607
+ "$type": "effect",
3608
+ "$value": "cubic-bezier(0,0,1,1)"
3609
+ },
3606
3610
  "--effect-animation-easing-ease-in": {
3607
3611
  "$type": "effect",
3608
3612
  "$value": "cubic-bezier(0.47,0,0.75,0.72)"
@@ -3873,11 +3877,11 @@
3873
3877
  },
3874
3878
  "--effect-shadow-elevated-sm": {
3875
3879
  "$type": "effect",
3876
- "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3880
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3877
3881
  },
3878
3882
  "--effect-highlight-elevated-sm": {
3879
3883
  "$type": "effect",
3880
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3884
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3881
3885
  },
3882
3886
  "--effect-elevation-elevated-sm": {
3883
3887
  "$type": "effect",
@@ -3885,11 +3889,11 @@
3885
3889
  },
3886
3890
  "--effect-shadow-elevated-md": {
3887
3891
  "$type": "effect",
3888
- "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3892
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3889
3893
  },
3890
3894
  "--effect-highlight-elevated-md": {
3891
3895
  "$type": "effect",
3892
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3896
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3893
3897
  },
3894
3898
  "--effect-elevation-elevated-md": {
3895
3899
  "$type": "effect",
@@ -3897,11 +3901,11 @@
3897
3901
  },
3898
3902
  "--effect-shadow-elevated-floating": {
3899
3903
  "$type": "effect",
3900
- "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3904
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3901
3905
  },
3902
3906
  "--effect-highlight-elevated-floating": {
3903
3907
  "$type": "effect",
3904
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
3908
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 0.5px var(--color-elevation-highlight)"
3905
3909
  },
3906
3910
  "--effect-elevation-elevated-floating": {
3907
3911
  "$type": "effect",
@@ -3909,11 +3913,11 @@
3909
3913
  },
3910
3914
  "--effect-shadow-depressed-sm": {
3911
3915
  "$type": "effect",
3912
- "$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)"
3916
+ "$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)"
3913
3917
  },
3914
3918
  "--effect-highlight-depressed-sm": {
3915
3919
  "$type": "effect",
3916
- "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3920
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3917
3921
  },
3918
3922
  "--effect-elevation-depressed-sm": {
3919
3923
  "$type": "effect",
@@ -3921,11 +3925,11 @@
3921
3925
  },
3922
3926
  "--effect-shadow-depressed-md": {
3923
3927
  "$type": "effect",
3924
- "$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)"
3928
+ "$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)"
3925
3929
  },
3926
3930
  "--effect-highlight-depressed-md": {
3927
3931
  "$type": "effect",
3928
- "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
3932
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3929
3933
  },
3930
3934
  "--effect-elevation-depressed-md": {
3931
3935
  "$type": "effect",
@@ -3933,11 +3937,11 @@
3933
3937
  },
3934
3938
  "--effect-shadow-elevated-panel-top": {
3935
3939
  "$type": "effect",
3936
- "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3940
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3937
3941
  },
3938
3942
  "--effect-highlight-elevated-panel-top": {
3939
3943
  "$type": "effect",
3940
- "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
3944
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -0.5px 0px 0px var(--color-elevation-highlight)"
3941
3945
  },
3942
3946
  "--effect-elevation-elevated-panel-top": {
3943
3947
  "$type": "effect",
@@ -3945,11 +3949,11 @@
3945
3949
  },
3946
3950
  "--effect-shadow-elevated-panel-right": {
3947
3951
  "$type": "effect",
3948
- "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3952
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3949
3953
  },
3950
3954
  "--effect-highlight-elevated-panel-right": {
3951
3955
  "$type": "effect",
3952
- "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
3956
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 0.5px 0px 0px 0px var(--color-elevation-highlight)"
3953
3957
  },
3954
3958
  "--effect-elevation-elevated-panel-right": {
3955
3959
  "$type": "effect",
@@ -3957,11 +3961,11 @@
3957
3961
  },
3958
3962
  "--effect-shadow-elevated-panel-bottom": {
3959
3963
  "$type": "effect",
3960
- "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3964
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3961
3965
  },
3962
3966
  "--effect-highlight-elevated-panel-bottom": {
3963
3967
  "$type": "effect",
3964
- "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
3968
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0.5px 0px 0px var(--color-elevation-highlight)"
3965
3969
  },
3966
3970
  "--effect-elevation-elevated-panel-bottom": {
3967
3971
  "$type": "effect",
@@ -3969,11 +3973,11 @@
3969
3973
  },
3970
3974
  "--effect-shadow-elevated-panel-left": {
3971
3975
  "$type": "effect",
3972
- "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
3976
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 0.5px var(--color-elevation-shadow)"
3973
3977
  },
3974
3978
  "--effect-highlight-elevated-panel-left": {
3975
3979
  "$type": "effect",
3976
- "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
3980
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -0.5px 0px 0px 0px var(--color-elevation-highlight)"
3977
3981
  },
3978
3982
  "--effect-elevation-elevated-panel-left": {
3979
3983
  "$type": "effect",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/tokens",
3
- "version": "2.9.0",
3
+ "version": "2.10.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",