@ds-mo/tokens 0.1.0 → 0.3.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/colors.css +69 -11
  2. package/dist/index.cjs +30 -1
  3. package/dist/index.d.ts +30 -1
  4. package/dist/index.mjs +30 -1
  5. package/dist/json/colors.json +129 -13
  6. package/dist/json/effects.json +18 -18
  7. package/dist/tokens.json +147 -31
  8. package/package.json +2 -1
package/dist/colors.css CHANGED
@@ -166,7 +166,6 @@
166
166
  --color-always-dark-foreground-positive: var(--color-reference-dark-green-145-l70-c19-bold);
167
167
  --color-always-dark-foreground-primary: var(--color-reference-white-100);
168
168
  --color-always-dark-foreground-quaternary: var(--color-reference-white-20);
169
- --color-always-dark-foreground-quinary: var(--color-reference-white-10);
170
169
  --color-always-dark-foreground-secondary: var(--color-reference-white-55);
171
170
  --color-always-dark-foreground-tertiary: var(--color-reference-white-35);
172
171
  --color-always-dark-foreground-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
@@ -370,6 +369,36 @@
370
369
  --color-interaction-on-translucent-background-hover: var(--color-reference-black-15);
371
370
  --color-interaction-on-translucent-background-pressed: var(--color-reference-black-20);
372
371
  --color-interaction-pressed: var(--color-reference-black-15);
372
+ --color-inverted-background: var(--color-reference-grey-l18);
373
+ --color-inverted-border-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
374
+ --color-inverted-border-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
375
+ --color-inverted-border-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
376
+ --color-inverted-border-guide: var(--color-reference-dark-cyan-215-l70-c15-bold);
377
+ --color-inverted-border-negative: var(--color-reference-dark-red-30-l70-c20-bold);
378
+ --color-inverted-border-neutral: var(--color-reference-grey-l65-dark-bold);
379
+ --color-inverted-border-positive: var(--color-reference-dark-green-145-l70-c19-bold);
380
+ --color-inverted-border-primary: var(--color-reference-white-20);
381
+ --color-inverted-border-secondary: var(--color-reference-white-15);
382
+ --color-inverted-border-tertiary: var(--color-reference-white-10);
383
+ --color-inverted-border-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
384
+ --color-inverted-border-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
385
+ --color-inverted-divider: var(--color-reference-white-10);
386
+ --color-inverted-foreground-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
387
+ --color-inverted-foreground-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
388
+ --color-inverted-foreground-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
389
+ --color-inverted-foreground-guide: var(--color-reference-dark-cyan-215-l70-c15-bold);
390
+ --color-inverted-foreground-negative: var(--color-reference-dark-red-30-l70-c20-bold);
391
+ --color-inverted-foreground-neutral: var(--color-reference-grey-l65-dark-bold);
392
+ --color-inverted-foreground-positive: var(--color-reference-dark-green-145-l70-c19-bold);
393
+ --color-inverted-foreground-primary: var(--color-reference-white-100);
394
+ --color-inverted-foreground-quaternary: var(--color-reference-white-20);
395
+ --color-inverted-foreground-secondary: var(--color-reference-white-55);
396
+ --color-inverted-foreground-tertiary: var(--color-reference-white-35);
397
+ --color-inverted-foreground-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
398
+ --color-inverted-foreground-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
399
+ --color-inverted-interaction-focus: var(--color-reference-white-15);
400
+ --color-inverted-interaction-hover: var(--color-reference-white-10);
401
+ --color-inverted-interaction-pressed: var(--color-reference-white-15);
373
402
  --color-location-marker-background-brand: var(--color-reference-light-blue-250-l50-c18-bold);
374
403
  --color-location-marker-background-caution: var(--color-reference-light-yellow-85-l85-c20-medium);
375
404
  --color-location-marker-background-negative: var(--color-reference-light-red-30-l53-c20-bold);
@@ -458,20 +487,19 @@
458
487
  --color-always-dark-border-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
459
488
  --color-always-dark-border-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
460
489
  --color-always-dark-divider: var(--color-reference-white-10);
461
- --color-always-dark-foreground-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
462
- --color-always-dark-foreground-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
463
- --color-always-dark-foreground-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
464
- --color-always-dark-foreground-guide: var(--color-reference-dark-cyan-215-l70-c15-bold);
465
- --color-always-dark-foreground-negative: var(--color-reference-dark-red-30-l70-c20-bold);
466
- --color-always-dark-foreground-neutral: var(--color-reference-grey-l65-dark-bold);
467
- --color-always-dark-foreground-positive: var(--color-reference-dark-green-145-l70-c19-bold);
490
+ --color-always-dark-foreground-ai: var(--color-reference-light-purple-290-l52-c20-bold);
491
+ --color-always-dark-foreground-brand: var(--color-reference-light-blue-250-l50-c18-bold);
492
+ --color-always-dark-foreground-caution: var(--color-reference-light-yellow-85-l51-c12-bold);
493
+ --color-always-dark-foreground-guide: var(--color-reference-light-cyan-215-l51-c11-bold);
494
+ --color-always-dark-foreground-negative: var(--color-reference-light-red-30-l53-c20-bold);
495
+ --color-always-dark-foreground-neutral: var(--color-reference-grey-l51-light-bold);
496
+ --color-always-dark-foreground-positive: var(--color-reference-light-green-145-l50-c19-bold);
468
497
  --color-always-dark-foreground-primary: var(--color-reference-white-100);
469
498
  --color-always-dark-foreground-quaternary: var(--color-reference-white-20);
470
- --color-always-dark-foreground-quinary: var(--color-reference-white-10);
471
499
  --color-always-dark-foreground-secondary: var(--color-reference-white-55);
472
500
  --color-always-dark-foreground-tertiary: var(--color-reference-white-35);
473
- --color-always-dark-foreground-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
474
- --color-always-dark-foreground-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
501
+ --color-always-dark-foreground-walkthrough: var(--color-reference-light-teal-180-l50-c12-bold);
502
+ --color-always-dark-foreground-warning: var(--color-reference-light-orange-60-l52-c13-bold);
475
503
  --color-always-dark-interaction-focus: var(--color-reference-white-15);
476
504
  --color-always-dark-interaction-hover: var(--color-reference-white-10);
477
505
  --color-always-dark-interaction-pressed: var(--color-reference-white-15);
@@ -671,6 +699,36 @@
671
699
  --color-interaction-on-translucent-background-hover: var(--color-reference-white-15);
672
700
  --color-interaction-on-translucent-background-pressed: var(--color-reference-white-20);
673
701
  --color-interaction-pressed: var(--color-reference-white-15);
702
+ --color-inverted-background: var(--color-reference-white-100);
703
+ --color-inverted-border-ai: var(--color-reference-light-purple-290-l52-c20-bold);
704
+ --color-inverted-border-brand: var(--color-reference-light-blue-250-l50-c18-bold);
705
+ --color-inverted-border-caution: var(--color-reference-light-yellow-85-l51-c12-bold);
706
+ --color-inverted-border-guide: var(--color-reference-light-cyan-215-l51-c11-bold);
707
+ --color-inverted-border-negative: var(--color-reference-light-red-30-l53-c20-bold);
708
+ --color-inverted-border-neutral: var(--color-reference-grey-l51-light-bold);
709
+ --color-inverted-border-positive: var(--color-reference-light-green-145-l50-c19-bold);
710
+ --color-inverted-border-primary: var(--color-reference-black-20);
711
+ --color-inverted-border-secondary: var(--color-reference-black-15);
712
+ --color-inverted-border-tertiary: var(--color-reference-black-10);
713
+ --color-inverted-border-walkthrough: var(--color-reference-light-teal-180-l50-c12-bold);
714
+ --color-inverted-border-warning: var(--color-reference-light-orange-60-l52-c13-bold);
715
+ --color-inverted-divider: var(--color-reference-black-10);
716
+ --color-inverted-foreground-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
717
+ --color-inverted-foreground-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
718
+ --color-inverted-foreground-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
719
+ --color-inverted-foreground-guide: var(--color-reference-dark-cyan-215-l70-c15-bold);
720
+ --color-inverted-foreground-negative: var(--color-reference-dark-red-30-l70-c20-bold);
721
+ --color-inverted-foreground-neutral: var(--color-reference-grey-l65-dark-bold);
722
+ --color-inverted-foreground-positive: var(--color-reference-dark-green-145-l70-c19-bold);
723
+ --color-inverted-foreground-primary: var(--color-reference-black-100);
724
+ --color-inverted-foreground-quaternary: var(--color-reference-black-20);
725
+ --color-inverted-foreground-secondary: var(--color-reference-black-60);
726
+ --color-inverted-foreground-tertiary: var(--color-reference-black-45);
727
+ --color-inverted-foreground-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
728
+ --color-inverted-foreground-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
729
+ --color-inverted-interaction-focus: var(--color-reference-black-15);
730
+ --color-inverted-interaction-hover: var(--color-reference-black-10);
731
+ --color-inverted-interaction-pressed: var(--color-reference-black-15);
674
732
  --color-location-marker-background-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
675
733
  --color-location-marker-background-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
676
734
  --color-location-marker-background-negative: var(--color-reference-dark-red-30-l70-c20-bold);
package/dist/index.cjs CHANGED
@@ -21,7 +21,6 @@ exports.colorAlwaysDarkForegroundNeutral = '--color-always-dark-foreground-neutr
21
21
  exports.colorAlwaysDarkForegroundPositive = '--color-always-dark-foreground-positive';
22
22
  exports.colorAlwaysDarkForegroundPrimary = '--color-always-dark-foreground-primary';
23
23
  exports.colorAlwaysDarkForegroundQuaternary = '--color-always-dark-foreground-quaternary';
24
- exports.colorAlwaysDarkForegroundQuinary = '--color-always-dark-foreground-quinary';
25
24
  exports.colorAlwaysDarkForegroundSecondary = '--color-always-dark-foreground-secondary';
26
25
  exports.colorAlwaysDarkForegroundTertiary = '--color-always-dark-foreground-tertiary';
27
26
  exports.colorAlwaysDarkForegroundWalkthrough = '--color-always-dark-foreground-walkthrough';
@@ -274,6 +273,36 @@ exports.colorInteractionOnTranslucentBackgroundFocus = '--color-interaction-on-t
274
273
  exports.colorInteractionOnTranslucentBackgroundHover = '--color-interaction-on-translucent-background-hover';
275
274
  exports.colorInteractionOnTranslucentBackgroundPressed = '--color-interaction-on-translucent-background-pressed';
276
275
  exports.colorInteractionPressed = '--color-interaction-pressed';
276
+ exports.colorInvertedBackground = '--color-inverted-background';
277
+ exports.colorInvertedBorderAi = '--color-inverted-border-ai';
278
+ exports.colorInvertedBorderBrand = '--color-inverted-border-brand';
279
+ exports.colorInvertedBorderCaution = '--color-inverted-border-caution';
280
+ exports.colorInvertedBorderGuide = '--color-inverted-border-guide';
281
+ exports.colorInvertedBorderNegative = '--color-inverted-border-negative';
282
+ exports.colorInvertedBorderNeutral = '--color-inverted-border-neutral';
283
+ exports.colorInvertedBorderPositive = '--color-inverted-border-positive';
284
+ exports.colorInvertedBorderPrimary = '--color-inverted-border-primary';
285
+ exports.colorInvertedBorderSecondary = '--color-inverted-border-secondary';
286
+ exports.colorInvertedBorderTertiary = '--color-inverted-border-tertiary';
287
+ exports.colorInvertedBorderWalkthrough = '--color-inverted-border-walkthrough';
288
+ exports.colorInvertedBorderWarning = '--color-inverted-border-warning';
289
+ exports.colorInvertedDivider = '--color-inverted-divider';
290
+ exports.colorInvertedForegroundAi = '--color-inverted-foreground-ai';
291
+ exports.colorInvertedForegroundBrand = '--color-inverted-foreground-brand';
292
+ exports.colorInvertedForegroundCaution = '--color-inverted-foreground-caution';
293
+ exports.colorInvertedForegroundGuide = '--color-inverted-foreground-guide';
294
+ exports.colorInvertedForegroundNegative = '--color-inverted-foreground-negative';
295
+ exports.colorInvertedForegroundNeutral = '--color-inverted-foreground-neutral';
296
+ exports.colorInvertedForegroundPositive = '--color-inverted-foreground-positive';
297
+ exports.colorInvertedForegroundPrimary = '--color-inverted-foreground-primary';
298
+ exports.colorInvertedForegroundQuaternary = '--color-inverted-foreground-quaternary';
299
+ exports.colorInvertedForegroundSecondary = '--color-inverted-foreground-secondary';
300
+ exports.colorInvertedForegroundTertiary = '--color-inverted-foreground-tertiary';
301
+ exports.colorInvertedForegroundWalkthrough = '--color-inverted-foreground-walkthrough';
302
+ exports.colorInvertedForegroundWarning = '--color-inverted-foreground-warning';
303
+ exports.colorInvertedInteractionFocus = '--color-inverted-interaction-focus';
304
+ exports.colorInvertedInteractionHover = '--color-inverted-interaction-hover';
305
+ exports.colorInvertedInteractionPressed = '--color-inverted-interaction-pressed';
277
306
  exports.colorLocationMarkerBackgroundBrand = '--color-location-marker-background-brand';
278
307
  exports.colorLocationMarkerBackgroundCaution = '--color-location-marker-background-caution';
279
308
  exports.colorLocationMarkerBackgroundNegative = '--color-location-marker-background-negative';
package/dist/index.d.ts CHANGED
@@ -21,7 +21,6 @@ export declare const colorAlwaysDarkForegroundNeutral: '--color-always-dark-fore
21
21
  export declare const colorAlwaysDarkForegroundPositive: '--color-always-dark-foreground-positive';
22
22
  export declare const colorAlwaysDarkForegroundPrimary: '--color-always-dark-foreground-primary';
23
23
  export declare const colorAlwaysDarkForegroundQuaternary: '--color-always-dark-foreground-quaternary';
24
- export declare const colorAlwaysDarkForegroundQuinary: '--color-always-dark-foreground-quinary';
25
24
  export declare const colorAlwaysDarkForegroundSecondary: '--color-always-dark-foreground-secondary';
26
25
  export declare const colorAlwaysDarkForegroundTertiary: '--color-always-dark-foreground-tertiary';
27
26
  export declare const colorAlwaysDarkForegroundWalkthrough: '--color-always-dark-foreground-walkthrough';
@@ -274,6 +273,36 @@ export declare const colorInteractionOnTranslucentBackgroundFocus: '--color-inte
274
273
  export declare const colorInteractionOnTranslucentBackgroundHover: '--color-interaction-on-translucent-background-hover';
275
274
  export declare const colorInteractionOnTranslucentBackgroundPressed: '--color-interaction-on-translucent-background-pressed';
276
275
  export declare const colorInteractionPressed: '--color-interaction-pressed';
276
+ export declare const colorInvertedBackground: '--color-inverted-background';
277
+ export declare const colorInvertedBorderAi: '--color-inverted-border-ai';
278
+ export declare const colorInvertedBorderBrand: '--color-inverted-border-brand';
279
+ export declare const colorInvertedBorderCaution: '--color-inverted-border-caution';
280
+ export declare const colorInvertedBorderGuide: '--color-inverted-border-guide';
281
+ export declare const colorInvertedBorderNegative: '--color-inverted-border-negative';
282
+ export declare const colorInvertedBorderNeutral: '--color-inverted-border-neutral';
283
+ export declare const colorInvertedBorderPositive: '--color-inverted-border-positive';
284
+ export declare const colorInvertedBorderPrimary: '--color-inverted-border-primary';
285
+ export declare const colorInvertedBorderSecondary: '--color-inverted-border-secondary';
286
+ export declare const colorInvertedBorderTertiary: '--color-inverted-border-tertiary';
287
+ export declare const colorInvertedBorderWalkthrough: '--color-inverted-border-walkthrough';
288
+ export declare const colorInvertedBorderWarning: '--color-inverted-border-warning';
289
+ export declare const colorInvertedDivider: '--color-inverted-divider';
290
+ export declare const colorInvertedForegroundAi: '--color-inverted-foreground-ai';
291
+ export declare const colorInvertedForegroundBrand: '--color-inverted-foreground-brand';
292
+ export declare const colorInvertedForegroundCaution: '--color-inverted-foreground-caution';
293
+ export declare const colorInvertedForegroundGuide: '--color-inverted-foreground-guide';
294
+ export declare const colorInvertedForegroundNegative: '--color-inverted-foreground-negative';
295
+ export declare const colorInvertedForegroundNeutral: '--color-inverted-foreground-neutral';
296
+ export declare const colorInvertedForegroundPositive: '--color-inverted-foreground-positive';
297
+ export declare const colorInvertedForegroundPrimary: '--color-inverted-foreground-primary';
298
+ export declare const colorInvertedForegroundQuaternary: '--color-inverted-foreground-quaternary';
299
+ export declare const colorInvertedForegroundSecondary: '--color-inverted-foreground-secondary';
300
+ export declare const colorInvertedForegroundTertiary: '--color-inverted-foreground-tertiary';
301
+ export declare const colorInvertedForegroundWalkthrough: '--color-inverted-foreground-walkthrough';
302
+ export declare const colorInvertedForegroundWarning: '--color-inverted-foreground-warning';
303
+ export declare const colorInvertedInteractionFocus: '--color-inverted-interaction-focus';
304
+ export declare const colorInvertedInteractionHover: '--color-inverted-interaction-hover';
305
+ export declare const colorInvertedInteractionPressed: '--color-inverted-interaction-pressed';
277
306
  export declare const colorLocationMarkerBackgroundBrand: '--color-location-marker-background-brand';
278
307
  export declare const colorLocationMarkerBackgroundCaution: '--color-location-marker-background-caution';
279
308
  export declare const colorLocationMarkerBackgroundNegative: '--color-location-marker-background-negative';
package/dist/index.mjs CHANGED
@@ -21,7 +21,6 @@ export const colorAlwaysDarkForegroundNeutral = '--color-always-dark-foreground-
21
21
  export const colorAlwaysDarkForegroundPositive = '--color-always-dark-foreground-positive';
22
22
  export const colorAlwaysDarkForegroundPrimary = '--color-always-dark-foreground-primary';
23
23
  export const colorAlwaysDarkForegroundQuaternary = '--color-always-dark-foreground-quaternary';
24
- export const colorAlwaysDarkForegroundQuinary = '--color-always-dark-foreground-quinary';
25
24
  export const colorAlwaysDarkForegroundSecondary = '--color-always-dark-foreground-secondary';
26
25
  export const colorAlwaysDarkForegroundTertiary = '--color-always-dark-foreground-tertiary';
27
26
  export const colorAlwaysDarkForegroundWalkthrough = '--color-always-dark-foreground-walkthrough';
@@ -274,6 +273,36 @@ export const colorInteractionOnTranslucentBackgroundFocus = '--color-interaction
274
273
  export const colorInteractionOnTranslucentBackgroundHover = '--color-interaction-on-translucent-background-hover';
275
274
  export const colorInteractionOnTranslucentBackgroundPressed = '--color-interaction-on-translucent-background-pressed';
276
275
  export const colorInteractionPressed = '--color-interaction-pressed';
276
+ export const colorInvertedBackground = '--color-inverted-background';
277
+ export const colorInvertedBorderAi = '--color-inverted-border-ai';
278
+ export const colorInvertedBorderBrand = '--color-inverted-border-brand';
279
+ export const colorInvertedBorderCaution = '--color-inverted-border-caution';
280
+ export const colorInvertedBorderGuide = '--color-inverted-border-guide';
281
+ export const colorInvertedBorderNegative = '--color-inverted-border-negative';
282
+ export const colorInvertedBorderNeutral = '--color-inverted-border-neutral';
283
+ export const colorInvertedBorderPositive = '--color-inverted-border-positive';
284
+ export const colorInvertedBorderPrimary = '--color-inverted-border-primary';
285
+ export const colorInvertedBorderSecondary = '--color-inverted-border-secondary';
286
+ export const colorInvertedBorderTertiary = '--color-inverted-border-tertiary';
287
+ export const colorInvertedBorderWalkthrough = '--color-inverted-border-walkthrough';
288
+ export const colorInvertedBorderWarning = '--color-inverted-border-warning';
289
+ export const colorInvertedDivider = '--color-inverted-divider';
290
+ export const colorInvertedForegroundAi = '--color-inverted-foreground-ai';
291
+ export const colorInvertedForegroundBrand = '--color-inverted-foreground-brand';
292
+ export const colorInvertedForegroundCaution = '--color-inverted-foreground-caution';
293
+ export const colorInvertedForegroundGuide = '--color-inverted-foreground-guide';
294
+ export const colorInvertedForegroundNegative = '--color-inverted-foreground-negative';
295
+ export const colorInvertedForegroundNeutral = '--color-inverted-foreground-neutral';
296
+ export const colorInvertedForegroundPositive = '--color-inverted-foreground-positive';
297
+ export const colorInvertedForegroundPrimary = '--color-inverted-foreground-primary';
298
+ export const colorInvertedForegroundQuaternary = '--color-inverted-foreground-quaternary';
299
+ export const colorInvertedForegroundSecondary = '--color-inverted-foreground-secondary';
300
+ export const colorInvertedForegroundTertiary = '--color-inverted-foreground-tertiary';
301
+ export const colorInvertedForegroundWalkthrough = '--color-inverted-foreground-walkthrough';
302
+ export const colorInvertedForegroundWarning = '--color-inverted-foreground-warning';
303
+ export const colorInvertedInteractionFocus = '--color-inverted-interaction-focus';
304
+ export const colorInvertedInteractionHover = '--color-inverted-interaction-hover';
305
+ export const colorInvertedInteractionPressed = '--color-inverted-interaction-pressed';
277
306
  export const colorLocationMarkerBackgroundBrand = '--color-location-marker-background-brand';
278
307
  export const colorLocationMarkerBackgroundCaution = '--color-location-marker-background-caution';
279
308
  export const colorLocationMarkerBackgroundNegative = '--color-location-marker-background-negative';
package/dist/json/colors.json CHANGED
@@ -621,31 +621,31 @@
621
621
  },
622
622
  "--color-always-dark-foreground-ai": {
623
623
  "$type": "color",
624
- "$value": "var(--color-reference-dark-purple-290-l67-c20-bold)"
624
+ "$value": "var(--color-reference-light-purple-290-l52-c20-bold)"
625
625
  },
626
626
  "--color-always-dark-foreground-brand": {
627
627
  "$type": "color",
628
- "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
628
+ "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
629
629
  },
630
630
  "--color-always-dark-foreground-caution": {
631
631
  "$type": "color",
632
- "$value": "var(--color-reference-dark-yellow-85-l80-c18-bold)"
632
+ "$value": "var(--color-reference-light-yellow-85-l51-c12-bold)"
633
633
  },
634
634
  "--color-always-dark-foreground-guide": {
635
635
  "$type": "color",
636
- "$value": "var(--color-reference-dark-cyan-215-l70-c15-bold)"
636
+ "$value": "var(--color-reference-light-cyan-215-l51-c11-bold)"
637
637
  },
638
638
  "--color-always-dark-foreground-negative": {
639
639
  "$type": "color",
640
- "$value": "var(--color-reference-dark-red-30-l70-c20-bold)"
640
+ "$value": "var(--color-reference-light-red-30-l53-c20-bold)"
641
641
  },
642
642
  "--color-always-dark-foreground-neutral": {
643
643
  "$type": "color",
644
- "$value": "var(--color-reference-grey-l65-dark-bold)"
644
+ "$value": "var(--color-reference-grey-l51-light-bold)"
645
645
  },
646
646
  "--color-always-dark-foreground-positive": {
647
647
  "$type": "color",
648
- "$value": "var(--color-reference-dark-green-145-l70-c19-bold)"
648
+ "$value": "var(--color-reference-light-green-145-l50-c19-bold)"
649
649
  },
650
650
  "--color-always-dark-foreground-primary": {
651
651
  "$type": "color",
@@ -655,10 +655,6 @@
655
655
  "$type": "color",
656
656
  "$value": "var(--color-reference-white-20)"
657
657
  },
658
- "--color-always-dark-foreground-quinary": {
659
- "$type": "color",
660
- "$value": "var(--color-reference-white-10)"
661
- },
662
658
  "--color-always-dark-foreground-secondary": {
663
659
  "$type": "color",
664
660
  "$value": "var(--color-reference-white-55)"
@@ -669,11 +665,11 @@
669
665
  },
670
666
  "--color-always-dark-foreground-walkthrough": {
671
667
  "$type": "color",
672
- "$value": "var(--color-reference-dark-teal-180-l70-c15-bold)"
668
+ "$value": "var(--color-reference-light-teal-180-l50-c12-bold)"
673
669
  },
674
670
  "--color-always-dark-foreground-warning": {
675
671
  "$type": "color",
676
- "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
672
+ "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
677
673
  },
678
674
  "--color-always-dark-interaction-focus": {
679
675
  "$type": "color",
@@ -1471,6 +1467,126 @@
1471
1467
  "$type": "color",
1472
1468
  "$value": "var(--color-reference-white-15)"
1473
1469
  },
1470
+ "--color-inverted-background": {
1471
+ "$type": "color",
1472
+ "$value": "var(--color-reference-white-100)"
1473
+ },
1474
+ "--color-inverted-border-ai": {
1475
+ "$type": "color",
1476
+ "$value": "var(--color-reference-light-purple-290-l52-c20-bold)"
1477
+ },
1478
+ "--color-inverted-border-brand": {
1479
+ "$type": "color",
1480
+ "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
1481
+ },
1482
+ "--color-inverted-border-caution": {
1483
+ "$type": "color",
1484
+ "$value": "var(--color-reference-light-yellow-85-l51-c12-bold)"
1485
+ },
1486
+ "--color-inverted-border-guide": {
1487
+ "$type": "color",
1488
+ "$value": "var(--color-reference-light-cyan-215-l51-c11-bold)"
1489
+ },
1490
+ "--color-inverted-border-negative": {
1491
+ "$type": "color",
1492
+ "$value": "var(--color-reference-light-red-30-l53-c20-bold)"
1493
+ },
1494
+ "--color-inverted-border-neutral": {
1495
+ "$type": "color",
1496
+ "$value": "var(--color-reference-grey-l51-light-bold)"
1497
+ },
1498
+ "--color-inverted-border-positive": {
1499
+ "$type": "color",
1500
+ "$value": "var(--color-reference-light-green-145-l50-c19-bold)"
1501
+ },
1502
+ "--color-inverted-border-primary": {
1503
+ "$type": "color",
1504
+ "$value": "var(--color-reference-black-20)"
1505
+ },
1506
+ "--color-inverted-border-secondary": {
1507
+ "$type": "color",
1508
+ "$value": "var(--color-reference-black-15)"
1509
+ },
1510
+ "--color-inverted-border-tertiary": {
1511
+ "$type": "color",
1512
+ "$value": "var(--color-reference-black-10)"
1513
+ },
1514
+ "--color-inverted-border-walkthrough": {
1515
+ "$type": "color",
1516
+ "$value": "var(--color-reference-light-teal-180-l50-c12-bold)"
1517
+ },
1518
+ "--color-inverted-border-warning": {
1519
+ "$type": "color",
1520
+ "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
1521
+ },
1522
+ "--color-inverted-divider": {
1523
+ "$type": "color",
1524
+ "$value": "var(--color-reference-black-10)"
1525
+ },
1526
+ "--color-inverted-foreground-ai": {
1527
+ "$type": "color",
1528
+ "$value": "var(--color-reference-dark-purple-290-l67-c20-bold)"
1529
+ },
1530
+ "--color-inverted-foreground-brand": {
1531
+ "$type": "color",
1532
+ "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
1533
+ },
1534
+ "--color-inverted-foreground-caution": {
1535
+ "$type": "color",
1536
+ "$value": "var(--color-reference-dark-yellow-85-l80-c18-bold)"
1537
+ },
1538
+ "--color-inverted-foreground-guide": {
1539
+ "$type": "color",
1540
+ "$value": "var(--color-reference-dark-cyan-215-l70-c15-bold)"
1541
+ },
1542
+ "--color-inverted-foreground-negative": {
1543
+ "$type": "color",
1544
+ "$value": "var(--color-reference-dark-red-30-l70-c20-bold)"
1545
+ },
1546
+ "--color-inverted-foreground-neutral": {
1547
+ "$type": "color",
1548
+ "$value": "var(--color-reference-grey-l65-dark-bold)"
1549
+ },
1550
+ "--color-inverted-foreground-positive": {
1551
+ "$type": "color",
1552
+ "$value": "var(--color-reference-dark-green-145-l70-c19-bold)"
1553
+ },
1554
+ "--color-inverted-foreground-primary": {
1555
+ "$type": "color",
1556
+ "$value": "var(--color-reference-black-100)"
1557
+ },
1558
+ "--color-inverted-foreground-quaternary": {
1559
+ "$type": "color",
1560
+ "$value": "var(--color-reference-black-20)"
1561
+ },
1562
+ "--color-inverted-foreground-secondary": {
1563
+ "$type": "color",
1564
+ "$value": "var(--color-reference-black-60)"
1565
+ },
1566
+ "--color-inverted-foreground-tertiary": {
1567
+ "$type": "color",
1568
+ "$value": "var(--color-reference-black-45)"
1569
+ },
1570
+ "--color-inverted-foreground-walkthrough": {
1571
+ "$type": "color",
1572
+ "$value": "var(--color-reference-dark-teal-180-l70-c15-bold)"
1573
+ },
1574
+ "--color-inverted-foreground-warning": {
1575
+ "$type": "color",
1576
+ "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
1577
+ },
1578
+ "--color-inverted-interaction-focus": {
1579
+ "$type": "color",
1580
+ "$value": "var(--color-reference-black-15)"
1581
+ },
1582
+ "--color-inverted-interaction-hover": {
1583
+ "$type": "color",
1584
+ "$value": "var(--color-reference-black-10)"
1585
+ },
1586
+ "--color-inverted-interaction-pressed": {
1587
+ "$type": "color",
1588
+ "$value": "var(--color-reference-black-15)"
1589
+ },
1474
1590
  "--color-location-marker-background-brand": {
1475
1591
  "$type": "color",
1476
1592
  "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
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
@@ -621,31 +621,31 @@
621
621
  },
622
622
  "--color-always-dark-foreground-ai": {
623
623
  "$type": "color",
624
- "$value": "var(--color-reference-dark-purple-290-l67-c20-bold)"
624
+ "$value": "var(--color-reference-light-purple-290-l52-c20-bold)"
625
625
  },
626
626
  "--color-always-dark-foreground-brand": {
627
627
  "$type": "color",
628
- "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
628
+ "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
629
629
  },
630
630
  "--color-always-dark-foreground-caution": {
631
631
  "$type": "color",
632
- "$value": "var(--color-reference-dark-yellow-85-l80-c18-bold)"
632
+ "$value": "var(--color-reference-light-yellow-85-l51-c12-bold)"
633
633
  },
634
634
  "--color-always-dark-foreground-guide": {
635
635
  "$type": "color",
636
- "$value": "var(--color-reference-dark-cyan-215-l70-c15-bold)"
636
+ "$value": "var(--color-reference-light-cyan-215-l51-c11-bold)"
637
637
  },
638
638
  "--color-always-dark-foreground-negative": {
639
639
  "$type": "color",
640
- "$value": "var(--color-reference-dark-red-30-l70-c20-bold)"
640
+ "$value": "var(--color-reference-light-red-30-l53-c20-bold)"
641
641
  },
642
642
  "--color-always-dark-foreground-neutral": {
643
643
  "$type": "color",
644
- "$value": "var(--color-reference-grey-l65-dark-bold)"
644
+ "$value": "var(--color-reference-grey-l51-light-bold)"
645
645
  },
646
646
  "--color-always-dark-foreground-positive": {
647
647
  "$type": "color",
648
- "$value": "var(--color-reference-dark-green-145-l70-c19-bold)"
648
+ "$value": "var(--color-reference-light-green-145-l50-c19-bold)"
649
649
  },
650
650
  "--color-always-dark-foreground-primary": {
651
651
  "$type": "color",
@@ -655,10 +655,6 @@
655
655
  "$type": "color",
656
656
  "$value": "var(--color-reference-white-20)"
657
657
  },
658
- "--color-always-dark-foreground-quinary": {
659
- "$type": "color",
660
- "$value": "var(--color-reference-white-10)"
661
- },
662
658
  "--color-always-dark-foreground-secondary": {
663
659
  "$type": "color",
664
660
  "$value": "var(--color-reference-white-55)"
@@ -669,11 +665,11 @@
669
665
  },
670
666
  "--color-always-dark-foreground-walkthrough": {
671
667
  "$type": "color",
672
- "$value": "var(--color-reference-dark-teal-180-l70-c15-bold)"
668
+ "$value": "var(--color-reference-light-teal-180-l50-c12-bold)"
673
669
  },
674
670
  "--color-always-dark-foreground-warning": {
675
671
  "$type": "color",
676
- "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
672
+ "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
677
673
  },
678
674
  "--color-always-dark-interaction-focus": {
679
675
  "$type": "color",
@@ -1471,6 +1467,126 @@
1471
1467
  "$type": "color",
1472
1468
  "$value": "var(--color-reference-white-15)"
1473
1469
  },
1470
+ "--color-inverted-background": {
1471
+ "$type": "color",
1472
+ "$value": "var(--color-reference-white-100)"
1473
+ },
1474
+ "--color-inverted-border-ai": {
1475
+ "$type": "color",
1476
+ "$value": "var(--color-reference-light-purple-290-l52-c20-bold)"
1477
+ },
1478
+ "--color-inverted-border-brand": {
1479
+ "$type": "color",
1480
+ "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
1481
+ },
1482
+ "--color-inverted-border-caution": {
1483
+ "$type": "color",
1484
+ "$value": "var(--color-reference-light-yellow-85-l51-c12-bold)"
1485
+ },
1486
+ "--color-inverted-border-guide": {
1487
+ "$type": "color",
1488
+ "$value": "var(--color-reference-light-cyan-215-l51-c11-bold)"
1489
+ },
1490
+ "--color-inverted-border-negative": {
1491
+ "$type": "color",
1492
+ "$value": "var(--color-reference-light-red-30-l53-c20-bold)"
1493
+ },
1494
+ "--color-inverted-border-neutral": {
1495
+ "$type": "color",
1496
+ "$value": "var(--color-reference-grey-l51-light-bold)"
1497
+ },
1498
+ "--color-inverted-border-positive": {
1499
+ "$type": "color",
1500
+ "$value": "var(--color-reference-light-green-145-l50-c19-bold)"
1501
+ },
1502
+ "--color-inverted-border-primary": {
1503
+ "$type": "color",
1504
+ "$value": "var(--color-reference-black-20)"
1505
+ },
1506
+ "--color-inverted-border-secondary": {
1507
+ "$type": "color",
1508
+ "$value": "var(--color-reference-black-15)"
1509
+ },
1510
+ "--color-inverted-border-tertiary": {
1511
+ "$type": "color",
1512
+ "$value": "var(--color-reference-black-10)"
1513
+ },
1514
+ "--color-inverted-border-walkthrough": {
1515
+ "$type": "color",
1516
+ "$value": "var(--color-reference-light-teal-180-l50-c12-bold)"
1517
+ },
1518
+ "--color-inverted-border-warning": {
1519
+ "$type": "color",
1520
+ "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
1521
+ },
1522
+ "--color-inverted-divider": {
1523
+ "$type": "color",
1524
+ "$value": "var(--color-reference-black-10)"
1525
+ },
1526
+ "--color-inverted-foreground-ai": {
1527
+ "$type": "color",
1528
+ "$value": "var(--color-reference-dark-purple-290-l67-c20-bold)"
1529
+ },
1530
+ "--color-inverted-foreground-brand": {
1531
+ "$type": "color",
1532
+ "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
1533
+ },
1534
+ "--color-inverted-foreground-caution": {
1535
+ "$type": "color",
1536
+ "$value": "var(--color-reference-dark-yellow-85-l80-c18-bold)"
1537
+ },
1538
+ "--color-inverted-foreground-guide": {
1539
+ "$type": "color",
1540
+ "$value": "var(--color-reference-dark-cyan-215-l70-c15-bold)"
1541
+ },
1542
+ "--color-inverted-foreground-negative": {
1543
+ "$type": "color",
1544
+ "$value": "var(--color-reference-dark-red-30-l70-c20-bold)"
1545
+ },
1546
+ "--color-inverted-foreground-neutral": {
1547
+ "$type": "color",
1548
+ "$value": "var(--color-reference-grey-l65-dark-bold)"
1549
+ },
1550
+ "--color-inverted-foreground-positive": {
1551
+ "$type": "color",
1552
+ "$value": "var(--color-reference-dark-green-145-l70-c19-bold)"
1553
+ },
1554
+ "--color-inverted-foreground-primary": {
1555
+ "$type": "color",
1556
+ "$value": "var(--color-reference-black-100)"
1557
+ },
1558
+ "--color-inverted-foreground-quaternary": {
1559
+ "$type": "color",
1560
+ "$value": "var(--color-reference-black-20)"
1561
+ },
1562
+ "--color-inverted-foreground-secondary": {
1563
+ "$type": "color",
1564
+ "$value": "var(--color-reference-black-60)"
1565
+ },
1566
+ "--color-inverted-foreground-tertiary": {
1567
+ "$type": "color",
1568
+ "$value": "var(--color-reference-black-45)"
1569
+ },
1570
+ "--color-inverted-foreground-walkthrough": {
1571
+ "$type": "color",
1572
+ "$value": "var(--color-reference-dark-teal-180-l70-c15-bold)"
1573
+ },
1574
+ "--color-inverted-foreground-warning": {
1575
+ "$type": "color",
1576
+ "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
1577
+ },
1578
+ "--color-inverted-interaction-focus": {
1579
+ "$type": "color",
1580
+ "$value": "var(--color-reference-black-15)"
1581
+ },
1582
+ "--color-inverted-interaction-hover": {
1583
+ "$type": "color",
1584
+ "$value": "var(--color-reference-black-10)"
1585
+ },
1586
+ "--color-inverted-interaction-pressed": {
1587
+ "$type": "color",
1588
+ "$value": "var(--color-reference-black-15)"
1589
+ },
1474
1590
  "--color-location-marker-background-brand": {
1475
1591
  "$type": "color",
1476
1592
  "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
@@ -2741,11 +2857,11 @@
2741
2857
  },
2742
2858
  "--effect-shadow-elevated-sm": {
2743
2859
  "$type": "effect",
2744
- "$value": "0px 2px 4px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2860
+ "$value": "0px 2px 4px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2745
2861
  },
2746
2862
  "--effect-highlight-elevated-sm": {
2747
2863
  "$type": "effect",
2748
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
2864
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
2749
2865
  },
2750
2866
  "--effect-elevation-elevated-sm": {
2751
2867
  "$type": "effect",
@@ -2753,11 +2869,11 @@
2753
2869
  },
2754
2870
  "--effect-shadow-elevated-md": {
2755
2871
  "$type": "effect",
2756
- "$value": "0px 4px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2872
+ "$value": "0px 4px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2757
2873
  },
2758
2874
  "--effect-highlight-elevated-md": {
2759
2875
  "$type": "effect",
2760
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
2876
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
2761
2877
  },
2762
2878
  "--effect-elevation-elevated-md": {
2763
2879
  "$type": "effect",
@@ -2765,11 +2881,11 @@
2765
2881
  },
2766
2882
  "--effect-shadow-elevated-floating": {
2767
2883
  "$type": "effect",
2768
- "$value": "0px 8px 16px -4px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2884
+ "$value": "0px 8px 16px -4px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2769
2885
  },
2770
2886
  "--effect-highlight-elevated-floating": {
2771
2887
  "$type": "effect",
2772
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 0px 0px 1px var(--color-surface-highlight)"
2888
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 0px 0px 1px var(--color-elevation-highlight)"
2773
2889
  },
2774
2890
  "--effect-elevation-elevated-floating": {
2775
2891
  "$type": "effect",
@@ -2777,11 +2893,11 @@
2777
2893
  },
2778
2894
  "--effect-shadow-depressed-sm": {
2779
2895
  "$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)"
2896
+ "$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
2897
  },
2782
2898
  "--effect-highlight-depressed-sm": {
2783
2899
  "$type": "effect",
2784
- "$value": "inset 0px 2px 4px -2px var(--color-surface-shadow),\n inset 0px 0px 0px 1px var(--color-surface-shadow)"
2900
+ "$value": "inset 0px 2px 4px -2px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
2785
2901
  },
2786
2902
  "--effect-elevation-depressed-sm": {
2787
2903
  "$type": "effect",
@@ -2789,11 +2905,11 @@
2789
2905
  },
2790
2906
  "--effect-shadow-depressed-md": {
2791
2907
  "$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)"
2908
+ "$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
2909
  },
2794
2910
  "--effect-highlight-depressed-md": {
2795
2911
  "$type": "effect",
2796
- "$value": "inset 0px 4px 8px -4px var(--color-surface-shadow),\n inset 0px 0px 0px 1px var(--color-surface-shadow)"
2912
+ "$value": "inset 0px 4px 8px -4px var(--color-elevation-shadow),\n inset 0px 0px 0px 1px var(--color-elevation-shadow)"
2797
2913
  },
2798
2914
  "--effect-elevation-depressed-md": {
2799
2915
  "$type": "effect",
@@ -2801,11 +2917,11 @@
2801
2917
  },
2802
2918
  "--effect-shadow-elevated-panel-top": {
2803
2919
  "$type": "effect",
2804
- "$value": "0px 4px 8px 0px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2920
+ "$value": "0px 4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2805
2921
  },
2806
2922
  "--effect-highlight-elevated-panel-top": {
2807
2923
  "$type": "effect",
2808
- "$value": "inset 0px -4px 2px -4px var(--color-surface-highlight),\n inset 0px -1px 0px 0px var(--color-surface-highlight)"
2924
+ "$value": "inset 0px -4px 2px -4px var(--color-elevation-highlight),\n inset 0px -1px 0px 0px var(--color-elevation-highlight)"
2809
2925
  },
2810
2926
  "--effect-elevation-elevated-panel-top": {
2811
2927
  "$type": "effect",
@@ -2813,11 +2929,11 @@
2813
2929
  },
2814
2930
  "--effect-shadow-elevated-panel-right": {
2815
2931
  "$type": "effect",
2816
- "$value": "-4px 0px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2932
+ "$value": "-4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2817
2933
  },
2818
2934
  "--effect-highlight-elevated-panel-right": {
2819
2935
  "$type": "effect",
2820
- "$value": "inset 4px 0px 2px -4px var(--color-surface-highlight),\n inset 1px 0px 0px 0px var(--color-surface-highlight)"
2936
+ "$value": "inset 4px 0px 2px -4px var(--color-elevation-highlight),\n inset 1px 0px 0px 0px var(--color-elevation-highlight)"
2821
2937
  },
2822
2938
  "--effect-elevation-elevated-panel-right": {
2823
2939
  "$type": "effect",
@@ -2825,11 +2941,11 @@
2825
2941
  },
2826
2942
  "--effect-shadow-elevated-panel-bottom": {
2827
2943
  "$type": "effect",
2828
- "$value": "0px -4px 8px 0px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2944
+ "$value": "0px -4px 8px 0px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2829
2945
  },
2830
2946
  "--effect-highlight-elevated-panel-bottom": {
2831
2947
  "$type": "effect",
2832
- "$value": "inset 0px 4px 2px -4px var(--color-surface-highlight),\n inset 0px 1px 0px 0px var(--color-surface-highlight)"
2948
+ "$value": "inset 0px 4px 2px -4px var(--color-elevation-highlight),\n inset 0px 1px 0px 0px var(--color-elevation-highlight)"
2833
2949
  },
2834
2950
  "--effect-elevation-elevated-panel-bottom": {
2835
2951
  "$type": "effect",
@@ -2837,11 +2953,11 @@
2837
2953
  },
2838
2954
  "--effect-shadow-elevated-panel-left": {
2839
2955
  "$type": "effect",
2840
- "$value": "4px 0px 8px -2px var(--color-surface-shadow),\n 0px 0px 0px 1px var(--color-surface-shadow)"
2956
+ "$value": "4px 0px 8px -2px var(--color-elevation-shadow),\n 0px 0px 0px 1px var(--color-elevation-shadow)"
2841
2957
  },
2842
2958
  "--effect-highlight-elevated-panel-left": {
2843
2959
  "$type": "effect",
2844
- "$value": "inset -4px 0px 2px -4px var(--color-surface-highlight),\n inset -1px 0px 0px 0px var(--color-surface-highlight)"
2960
+ "$value": "inset -4px 0px 2px -4px var(--color-elevation-highlight),\n inset -1px 0px 0px 0px var(--color-elevation-highlight)"
2845
2961
  },
2846
2962
  "--effect-elevation-elevated-panel-left": {
2847
2963
  "$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.3.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"