@ds-mo/tokens 2.3.1 → 2.5.0

package/dist/colors.css

@@ -197,6 +197,7 @@
   --color-always-dark-foreground-tertiary: var(--color-reference-white-35);
   --color-always-dark-foreground-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
   --color-always-dark-foreground-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
+  --color-always-dark-interaction-active: var(--color-reference-dark-blue-250-l27-c05-faint);
   --color-always-dark-interaction-focus: var(--color-reference-white-15);
   --color-always-dark-interaction-hover: var(--color-reference-white-10);
   --color-always-dark-interaction-pressed: var(--color-reference-white-15);
@@ -408,17 +409,22 @@
   --color-geofence-category-uncategorized-background: var(--color-reference-grey-l93-light-faint);
   --color-geofence-category-uncategorized-border: var(--color-reference-grey-l75-light-medium);
   --color-geofence-category-uncategorized-foreground: var(--color-reference-grey-l51-light-bold);
+  --color-interaction-active: var(--color-reference-light-blue-250-l92-c04-faint);
   --color-interaction-focus: var(--color-reference-black-15);
   --color-interaction-hover: var(--color-reference-black-10);
+  --color-interaction-on-bold-background-active: var(--color-reference-light-blue-250-l70-c18-medium);
   --color-interaction-on-bold-background-focus: var(--color-reference-white-20);
   --color-interaction-on-bold-background-hover: var(--color-reference-white-15);
   --color-interaction-on-bold-background-pressed: var(--color-reference-white-20);
+  --color-interaction-on-medium-background-active: var(--color-reference-light-blue-250-l50-c18-bold);
   --color-interaction-on-medium-background-focus: var(--color-reference-black-20);
   --color-interaction-on-medium-background-hover: var(--color-reference-black-15);
   --color-interaction-on-medium-background-pressed: var(--color-reference-black-20);
+  --color-interaction-on-strong-background-active: var(--color-reference-light-blue-250-l50-c18-bold);
   --color-interaction-on-strong-background-focus: var(--color-reference-white-15);
   --color-interaction-on-strong-background-hover: var(--color-reference-white-10);
   --color-interaction-on-strong-background-pressed: var(--color-reference-white-15);
+  --color-interaction-on-translucent-background-active: var(--color-reference-light-blue-250-l92-c04-faint);
   --color-interaction-on-translucent-background-focus: var(--color-reference-black-20);
   --color-interaction-on-translucent-background-hover: var(--color-reference-black-15);
   --color-interaction-on-translucent-background-pressed: var(--color-reference-black-20);
@@ -477,6 +483,7 @@
   --color-inverted-foreground-tertiary: var(--color-reference-white-35);
   --color-inverted-foreground-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
   --color-inverted-foreground-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
+  --color-inverted-interaction-active: var(--color-reference-dark-blue-250-l27-c05-faint);
   --color-inverted-interaction-focus: var(--color-reference-white-15);
   --color-inverted-interaction-hover: var(--color-reference-white-10);
   --color-inverted-interaction-pressed: var(--color-reference-white-15);
@@ -490,6 +497,20 @@
   --color-location-marker-interaction-focus: var(--color-reference-black-15);
   --color-location-marker-interaction-hover: var(--color-reference-white-15);
   --color-location-marker-interaction-pressed: var(--color-reference-white-20);
+  --color-navigation-background: var(--color-reference-grey-l18);
+  --color-navigation-border-primary: var(--color-reference-white-20);
+  --color-navigation-border-secondary: var(--color-reference-white-15);
+  --color-navigation-border-tertiary: var(--color-reference-white-10);
+  --color-navigation-divider: var(--color-reference-white-10);
+  --color-navigation-foreground-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
+  --color-navigation-foreground-primary: var(--color-reference-white-100);
+  --color-navigation-foreground-quaternary: var(--color-reference-white-20);
+  --color-navigation-foreground-secondary: var(--color-reference-white-55);
+  --color-navigation-foreground-tertiary: var(--color-reference-white-35);
+  --color-navigation-interaction-active: var(--color-reference-white-10);
+  --color-navigation-interaction-focus: var(--color-reference-white-15);
+  --color-navigation-interaction-hover: var(--color-reference-white-10);
+  --color-navigation-interaction-pressed: var(--color-reference-white-15);
   --color-safety-score-background-excellent: var(--color-reference-light-blue-250-l70-c18-medium);
   --color-safety-score-background-fair: var(--color-reference-light-orange-60-l75-c20-medium);
   --color-safety-score-background-good: var(--color-reference-light-blue-250-l92-c04-faint);
@@ -502,6 +523,8 @@
   --color-settings-profile-background: var(--color-reference-light-orange-60-l93-c05-faint);
   --color-settings-profile-border: var(--color-reference-light-orange-60-l75-c20-medium);
   --color-settings-profile-foreground: var(--color-reference-light-orange-60-l52-c13-bold);
+  --color-shimmer-fade: var(--color-reference-black-15);
+  --color-shimmer-highlight: var(--color-reference-white-10);
   --color-data-category-10: var(--color-reference-light-pink-0-l70-c22-medium);
   --color-data-category-11: var(--color-reference-light-teal-180-l75-c17-medium);
   --color-data-category-12: var(--color-reference-light-orange-60-l52-c13-bold);
@@ -596,11 +619,11 @@
   --color-always-dark-border-tertiary: var(--color-reference-white-10);
   --color-always-dark-divider: var(--color-reference-white-10);
   --color-always-dark-foreground-ai: var(--color-reference-light-purple-290-l52-c20-bold);
-  --color-always-dark-foreground-brand: var(--color-reference-light-blue-250-l50-c18-bold);
+  --color-always-dark-foreground-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
   --color-always-dark-foreground-caution: var(--color-reference-light-yellow-85-l51-c12-bold);
   --color-always-dark-foreground-guide: var(--color-reference-light-cyan-215-l51-c11-bold);
   --color-always-dark-foreground-negative: var(--color-reference-light-red-30-l53-c20-bold);
-  --color-always-dark-foreground-neutral: var(--color-reference-grey-l51-light-bold);
+  --color-always-dark-foreground-neutral: var(--color-reference-grey-l65-dark-bold);
   --color-always-dark-foreground-positive: var(--color-reference-light-green-145-l50-c19-bold);
   --color-always-dark-foreground-primary: var(--color-reference-white-100);
   --color-always-dark-foreground-quaternary: var(--color-reference-white-20);
@@ -608,6 +631,7 @@
   --color-always-dark-foreground-tertiary: var(--color-reference-white-35);
   --color-always-dark-foreground-walkthrough: var(--color-reference-light-teal-180-l50-c12-bold);
   --color-always-dark-foreground-warning: var(--color-reference-light-orange-60-l52-c13-bold);
+  --color-always-dark-interaction-active: var(--color-reference-dark-blue-250-l27-c05-faint);
   --color-always-dark-interaction-focus: var(--color-reference-white-15);
   --color-always-dark-interaction-hover: var(--color-reference-white-10);
   --color-always-dark-interaction-pressed: var(--color-reference-white-15);
@@ -819,17 +843,22 @@
   --color-geofence-category-uncategorized-background: var(--color-reference-grey-l27-dark-faint);
   --color-geofence-category-uncategorized-border: var(--color-reference-grey-l50-dark-medium);
   --color-geofence-category-uncategorized-foreground: var(--color-reference-grey-l65-dark-bold);
+  --color-interaction-active: var(--color-reference-dark-blue-250-l27-c05-faint);
   --color-interaction-focus: var(--color-reference-white-15);
   --color-interaction-hover: var(--color-reference-white-10);
+  --color-interaction-on-bold-background-active: var(--color-reference-dark-blue-250-l50-c17-medium);
   --color-interaction-on-bold-background-focus: var(--color-reference-black-20);
   --color-interaction-on-bold-background-hover: var(--color-reference-black-15);
   --color-interaction-on-bold-background-pressed: var(--color-reference-black-20);
+  --color-interaction-on-medium-background-active: var(--color-reference-dark-blue-250-l65-c20-bold);
   --color-interaction-on-medium-background-focus: var(--color-reference-white-20);
   --color-interaction-on-medium-background-hover: var(--color-reference-white-15);
   --color-interaction-on-medium-background-pressed: var(--color-reference-white-20);
+  --color-interaction-on-strong-background-active: var(--color-reference-dark-blue-250-l65-c20-bold);
   --color-interaction-on-strong-background-focus: var(--color-reference-black-15);
   --color-interaction-on-strong-background-hover: var(--color-reference-black-10);
   --color-interaction-on-strong-background-pressed: var(--color-reference-black-15);
+  --color-interaction-on-translucent-background-active: var(--color-reference-dark-blue-250-l27-c05-faint);
   --color-interaction-on-translucent-background-focus: var(--color-reference-white-20);
   --color-interaction-on-translucent-background-hover: var(--color-reference-white-15);
   --color-interaction-on-translucent-background-pressed: var(--color-reference-white-20);
@@ -875,19 +904,20 @@
   --color-inverted-border-strong-warning: var(--color-reference-light-orange-60-l35-c09-strong);
   --color-inverted-border-tertiary: var(--color-reference-black-10);
   --color-inverted-divider: var(--color-reference-black-10);
-  --color-inverted-foreground-ai: var(--color-reference-dark-purple-290-l67-c20-bold);
-  --color-inverted-foreground-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
-  --color-inverted-foreground-caution: var(--color-reference-dark-yellow-85-l80-c18-bold);
-  --color-inverted-foreground-guide: var(--color-reference-dark-cyan-215-l70-c15-bold);
-  --color-inverted-foreground-negative: var(--color-reference-dark-red-30-l70-c20-bold);
-  --color-inverted-foreground-neutral: var(--color-reference-grey-l65-dark-bold);
-  --color-inverted-foreground-positive: var(--color-reference-dark-green-145-l70-c19-bold);
+  --color-inverted-foreground-ai: var(--color-reference-light-purple-290-l52-c20-bold);
+  --color-inverted-foreground-brand: var(--color-reference-light-blue-250-l50-c18-bold);
+  --color-inverted-foreground-caution: var(--color-reference-light-yellow-85-l51-c12-bold);
+  --color-inverted-foreground-guide: var(--color-reference-light-cyan-215-l51-c11-bold);
+  --color-inverted-foreground-negative: var(--color-reference-light-red-30-l53-c20-bold);
+  --color-inverted-foreground-neutral: var(--color-reference-grey-l51-light-bold);
+  --color-inverted-foreground-positive: var(--color-reference-light-green-145-l50-c19-bold);
   --color-inverted-foreground-primary: var(--color-reference-black-100);
   --color-inverted-foreground-quaternary: var(--color-reference-black-20);
   --color-inverted-foreground-secondary: var(--color-reference-black-60);
   --color-inverted-foreground-tertiary: var(--color-reference-black-45);
-  --color-inverted-foreground-walkthrough: var(--color-reference-dark-teal-180-l70-c15-bold);
-  --color-inverted-foreground-warning: var(--color-reference-dark-orange-60-l75-c20-bold);
+  --color-inverted-foreground-walkthrough: var(--color-reference-light-teal-180-l50-c12-bold);
+  --color-inverted-foreground-warning: var(--color-reference-light-orange-60-l52-c13-bold);
+  --color-inverted-interaction-active: var(--color-reference-light-blue-250-l92-c04-faint);
   --color-inverted-interaction-focus: var(--color-reference-black-15);
   --color-inverted-interaction-hover: var(--color-reference-black-10);
   --color-inverted-interaction-pressed: var(--color-reference-black-15);
@@ -901,6 +931,20 @@
   --color-location-marker-interaction-focus: var(--color-reference-white-15);
   --color-location-marker-interaction-hover: var(--color-reference-black-15);
   --color-location-marker-interaction-pressed: var(--color-reference-black-20);
+  --color-navigation-background: var(--color-reference-grey-l27-dark-faint);
+  --color-navigation-border-primary: var(--color-reference-white-15);
+  --color-navigation-border-secondary: var(--color-reference-white-10);
+  --color-navigation-border-tertiary: var(--color-reference-white-5);
+  --color-navigation-divider: var(--color-reference-white-5);
+  --color-navigation-foreground-brand: var(--color-reference-dark-blue-250-l65-c20-bold);
+  --color-navigation-foreground-primary: var(--color-reference-white-100);
+  --color-navigation-foreground-quaternary: var(--color-reference-white-15);
+  --color-navigation-foreground-secondary: var(--color-reference-white-50);
+  --color-navigation-foreground-tertiary: var(--color-reference-white-30);
+  --color-navigation-interaction-active: var(--color-reference-white-5);
+  --color-navigation-interaction-focus: var(--color-reference-white-10);
+  --color-navigation-interaction-hover: var(--color-reference-white-5);
+  --color-navigation-interaction-pressed: var(--color-reference-white-10);
   --color-safety-score-background-excellent: var(--color-reference-dark-blue-250-l50-c17-medium);
   --color-safety-score-background-fair: var(--color-reference-dark-orange-60-l75-c20-bold);
   --color-safety-score-background-good: var(--color-reference-dark-blue-250-l27-c05-faint);
@@ -913,6 +957,8 @@
   --color-settings-profile-background: var(--color-reference-dark-orange-60-l28-c05-faint);
   --color-settings-profile-border: var(--color-reference-dark-orange-60-l51-c13-medium);
   --color-settings-profile-foreground: var(--color-reference-dark-orange-60-l75-c20-bold);
+  --color-shimmer-fade: var(--color-reference-black-10);
+  --color-shimmer-highlight: var(--color-reference-white-15);
   --color-data-category-10: var(--color-reference-dark-pink-0-l68-c20-bold);
   --color-data-category-11: var(--color-reference-dark-teal-180-l70-c15-bold);
   --color-data-category-12: var(--color-reference-dark-orange-60-l51-c13-medium);

package/dist/index.cjs

@@ -52,6 +52,7 @@ exports.colorAlwaysDarkForegroundSecondary = '--color-always-dark-foreground-sec
 exports.colorAlwaysDarkForegroundTertiary = '--color-always-dark-foreground-tertiary';
 exports.colorAlwaysDarkForegroundWalkthrough = '--color-always-dark-foreground-walkthrough';
 exports.colorAlwaysDarkForegroundWarning = '--color-always-dark-foreground-warning';
+exports.colorAlwaysDarkInteractionActive = '--color-always-dark-interaction-active';
 exports.colorAlwaysDarkInteractionFocus = '--color-always-dark-interaction-focus';
 exports.colorAlwaysDarkInteractionHover = '--color-always-dark-interaction-hover';
 exports.colorAlwaysDarkInteractionPressed = '--color-always-dark-interaction-pressed';
@@ -312,17 +313,22 @@ exports.colorGeofenceCategoryTerminalForeground = '--color-geofence-category-ter
 exports.colorGeofenceCategoryUncategorizedBackground = '--color-geofence-category-uncategorized-background';
 exports.colorGeofenceCategoryUncategorizedBorder = '--color-geofence-category-uncategorized-border';
 exports.colorGeofenceCategoryUncategorizedForeground = '--color-geofence-category-uncategorized-foreground';
+exports.colorInteractionActive = '--color-interaction-active';
 exports.colorInteractionFocus = '--color-interaction-focus';
 exports.colorInteractionHover = '--color-interaction-hover';
+exports.colorInteractionOnBoldBackgroundActive = '--color-interaction-on-bold-background-active';
 exports.colorInteractionOnBoldBackgroundFocus = '--color-interaction-on-bold-background-focus';
 exports.colorInteractionOnBoldBackgroundHover = '--color-interaction-on-bold-background-hover';
 exports.colorInteractionOnBoldBackgroundPressed = '--color-interaction-on-bold-background-pressed';
+exports.colorInteractionOnMediumBackgroundActive = '--color-interaction-on-medium-background-active';
 exports.colorInteractionOnMediumBackgroundFocus = '--color-interaction-on-medium-background-focus';
 exports.colorInteractionOnMediumBackgroundHover = '--color-interaction-on-medium-background-hover';
 exports.colorInteractionOnMediumBackgroundPressed = '--color-interaction-on-medium-background-pressed';
+exports.colorInteractionOnStrongBackgroundActive = '--color-interaction-on-strong-background-active';
 exports.colorInteractionOnStrongBackgroundFocus = '--color-interaction-on-strong-background-focus';
 exports.colorInteractionOnStrongBackgroundHover = '--color-interaction-on-strong-background-hover';
 exports.colorInteractionOnStrongBackgroundPressed = '--color-interaction-on-strong-background-pressed';
+exports.colorInteractionOnTranslucentBackgroundActive = '--color-interaction-on-translucent-background-active';
 exports.colorInteractionOnTranslucentBackgroundFocus = '--color-interaction-on-translucent-background-focus';
 exports.colorInteractionOnTranslucentBackgroundHover = '--color-interaction-on-translucent-background-hover';
 exports.colorInteractionOnTranslucentBackgroundPressed = '--color-interaction-on-translucent-background-pressed';
@@ -381,6 +387,7 @@ exports.colorInvertedForegroundSecondary = '--color-inverted-foreground-secondar
 exports.colorInvertedForegroundTertiary = '--color-inverted-foreground-tertiary';
 exports.colorInvertedForegroundWalkthrough = '--color-inverted-foreground-walkthrough';
 exports.colorInvertedForegroundWarning = '--color-inverted-foreground-warning';
+exports.colorInvertedInteractionActive = '--color-inverted-interaction-active';
 exports.colorInvertedInteractionFocus = '--color-inverted-interaction-focus';
 exports.colorInvertedInteractionHover = '--color-inverted-interaction-hover';
 exports.colorInvertedInteractionPressed = '--color-inverted-interaction-pressed';
@@ -394,6 +401,20 @@ exports.colorLocationMarkerForeground = '--color-location-marker-foreground';
 exports.colorLocationMarkerInteractionFocus = '--color-location-marker-interaction-focus';
 exports.colorLocationMarkerInteractionHover = '--color-location-marker-interaction-hover';
 exports.colorLocationMarkerInteractionPressed = '--color-location-marker-interaction-pressed';
+exports.colorNavigationBackground = '--color-navigation-background';
+exports.colorNavigationBorderPrimary = '--color-navigation-border-primary';
+exports.colorNavigationBorderSecondary = '--color-navigation-border-secondary';
+exports.colorNavigationBorderTertiary = '--color-navigation-border-tertiary';
+exports.colorNavigationDivider = '--color-navigation-divider';
+exports.colorNavigationForegroundBrand = '--color-navigation-foreground-brand';
+exports.colorNavigationForegroundPrimary = '--color-navigation-foreground-primary';
+exports.colorNavigationForegroundQuaternary = '--color-navigation-foreground-quaternary';
+exports.colorNavigationForegroundSecondary = '--color-navigation-foreground-secondary';
+exports.colorNavigationForegroundTertiary = '--color-navigation-foreground-tertiary';
+exports.colorNavigationInteractionActive = '--color-navigation-interaction-active';
+exports.colorNavigationInteractionFocus = '--color-navigation-interaction-focus';
+exports.colorNavigationInteractionHover = '--color-navigation-interaction-hover';
+exports.colorNavigationInteractionPressed = '--color-navigation-interaction-pressed';
 exports.colorReferenceBlack0 = '--color-reference-black-0';
 exports.colorReferenceBlack10 = '--color-reference-black-10';
 exports.colorReferenceBlack100 = '--color-reference-black-100';
@@ -547,6 +568,8 @@ exports.colorSafetyScoreInteractionPressed = '--color-safety-score-interaction-p
 exports.colorSettingsProfileBackground = '--color-settings-profile-background';
 exports.colorSettingsProfileBorder = '--color-settings-profile-border';
 exports.colorSettingsProfileForeground = '--color-settings-profile-foreground';
+exports.colorShimmerFade = '--color-shimmer-fade';
+exports.colorShimmerHighlight = '--color-shimmer-highlight';
 exports.dimensionBase = '--dimension-base';
 exports.dimensionCardWidthLg = '--dimension-card-width-lg';
 exports.dimensionCardWidthMd = '--dimension-card-width-md';

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export declare const colorAlwaysDarkForegroundSecondary: '--color-always-dark-fo
 export declare const colorAlwaysDarkForegroundTertiary: '--color-always-dark-foreground-tertiary';
 export declare const colorAlwaysDarkForegroundWalkthrough: '--color-always-dark-foreground-walkthrough';
 export declare const colorAlwaysDarkForegroundWarning: '--color-always-dark-foreground-warning';
+export declare const colorAlwaysDarkInteractionActive: '--color-always-dark-interaction-active';
 export declare const colorAlwaysDarkInteractionFocus: '--color-always-dark-interaction-focus';
 export declare const colorAlwaysDarkInteractionHover: '--color-always-dark-interaction-hover';
 export declare const colorAlwaysDarkInteractionPressed: '--color-always-dark-interaction-pressed';
@@ -312,17 +313,22 @@ export declare const colorGeofenceCategoryTerminalForeground: '--color-geofence-
 export declare const colorGeofenceCategoryUncategorizedBackground: '--color-geofence-category-uncategorized-background';
 export declare const colorGeofenceCategoryUncategorizedBorder: '--color-geofence-category-uncategorized-border';
 export declare const colorGeofenceCategoryUncategorizedForeground: '--color-geofence-category-uncategorized-foreground';
+export declare const colorInteractionActive: '--color-interaction-active';
 export declare const colorInteractionFocus: '--color-interaction-focus';
 export declare const colorInteractionHover: '--color-interaction-hover';
+export declare const colorInteractionOnBoldBackgroundActive: '--color-interaction-on-bold-background-active';
 export declare const colorInteractionOnBoldBackgroundFocus: '--color-interaction-on-bold-background-focus';
 export declare const colorInteractionOnBoldBackgroundHover: '--color-interaction-on-bold-background-hover';
 export declare const colorInteractionOnBoldBackgroundPressed: '--color-interaction-on-bold-background-pressed';
+export declare const colorInteractionOnMediumBackgroundActive: '--color-interaction-on-medium-background-active';
 export declare const colorInteractionOnMediumBackgroundFocus: '--color-interaction-on-medium-background-focus';
 export declare const colorInteractionOnMediumBackgroundHover: '--color-interaction-on-medium-background-hover';
 export declare const colorInteractionOnMediumBackgroundPressed: '--color-interaction-on-medium-background-pressed';
+export declare const colorInteractionOnStrongBackgroundActive: '--color-interaction-on-strong-background-active';
 export declare const colorInteractionOnStrongBackgroundFocus: '--color-interaction-on-strong-background-focus';
 export declare const colorInteractionOnStrongBackgroundHover: '--color-interaction-on-strong-background-hover';
 export declare const colorInteractionOnStrongBackgroundPressed: '--color-interaction-on-strong-background-pressed';
+export declare const colorInteractionOnTranslucentBackgroundActive: '--color-interaction-on-translucent-background-active';
 export declare const colorInteractionOnTranslucentBackgroundFocus: '--color-interaction-on-translucent-background-focus';
 export declare const colorInteractionOnTranslucentBackgroundHover: '--color-interaction-on-translucent-background-hover';
 export declare const colorInteractionOnTranslucentBackgroundPressed: '--color-interaction-on-translucent-background-pressed';
@@ -381,6 +387,7 @@ export declare const colorInvertedForegroundSecondary: '--color-inverted-foregro
 export declare const colorInvertedForegroundTertiary: '--color-inverted-foreground-tertiary';
 export declare const colorInvertedForegroundWalkthrough: '--color-inverted-foreground-walkthrough';
 export declare const colorInvertedForegroundWarning: '--color-inverted-foreground-warning';
+export declare const colorInvertedInteractionActive: '--color-inverted-interaction-active';
 export declare const colorInvertedInteractionFocus: '--color-inverted-interaction-focus';
 export declare const colorInvertedInteractionHover: '--color-inverted-interaction-hover';
 export declare const colorInvertedInteractionPressed: '--color-inverted-interaction-pressed';
@@ -394,6 +401,20 @@ export declare const colorLocationMarkerForeground: '--color-location-marker-for
 export declare const colorLocationMarkerInteractionFocus: '--color-location-marker-interaction-focus';
 export declare const colorLocationMarkerInteractionHover: '--color-location-marker-interaction-hover';
 export declare const colorLocationMarkerInteractionPressed: '--color-location-marker-interaction-pressed';
+export declare const colorNavigationBackground: '--color-navigation-background';
+export declare const colorNavigationBorderPrimary: '--color-navigation-border-primary';
+export declare const colorNavigationBorderSecondary: '--color-navigation-border-secondary';
+export declare const colorNavigationBorderTertiary: '--color-navigation-border-tertiary';
+export declare const colorNavigationDivider: '--color-navigation-divider';
+export declare const colorNavigationForegroundBrand: '--color-navigation-foreground-brand';
+export declare const colorNavigationForegroundPrimary: '--color-navigation-foreground-primary';
+export declare const colorNavigationForegroundQuaternary: '--color-navigation-foreground-quaternary';
+export declare const colorNavigationForegroundSecondary: '--color-navigation-foreground-secondary';
+export declare const colorNavigationForegroundTertiary: '--color-navigation-foreground-tertiary';
+export declare const colorNavigationInteractionActive: '--color-navigation-interaction-active';
+export declare const colorNavigationInteractionFocus: '--color-navigation-interaction-focus';
+export declare const colorNavigationInteractionHover: '--color-navigation-interaction-hover';
+export declare const colorNavigationInteractionPressed: '--color-navigation-interaction-pressed';
 export declare const colorReferenceBlack0: '--color-reference-black-0';
 export declare const colorReferenceBlack10: '--color-reference-black-10';
 export declare const colorReferenceBlack100: '--color-reference-black-100';
@@ -547,6 +568,8 @@ export declare const colorSafetyScoreInteractionPressed: '--color-safety-score-i
 export declare const colorSettingsProfileBackground: '--color-settings-profile-background';
 export declare const colorSettingsProfileBorder: '--color-settings-profile-border';
 export declare const colorSettingsProfileForeground: '--color-settings-profile-foreground';
+export declare const colorShimmerFade: '--color-shimmer-fade';
+export declare const colorShimmerHighlight: '--color-shimmer-highlight';
 export declare const dimensionBase: '--dimension-base';
 export declare const dimensionCardWidthLg: '--dimension-card-width-lg';
 export declare const dimensionCardWidthMd: '--dimension-card-width-md';

package/dist/index.mjs

@@ -52,6 +52,7 @@ export const colorAlwaysDarkForegroundSecondary = '--color-always-dark-foregroun
 export const colorAlwaysDarkForegroundTertiary = '--color-always-dark-foreground-tertiary';
 export const colorAlwaysDarkForegroundWalkthrough = '--color-always-dark-foreground-walkthrough';
 export const colorAlwaysDarkForegroundWarning = '--color-always-dark-foreground-warning';
+export const colorAlwaysDarkInteractionActive = '--color-always-dark-interaction-active';
 export const colorAlwaysDarkInteractionFocus = '--color-always-dark-interaction-focus';
 export const colorAlwaysDarkInteractionHover = '--color-always-dark-interaction-hover';
 export const colorAlwaysDarkInteractionPressed = '--color-always-dark-interaction-pressed';
@@ -312,17 +313,22 @@ export const colorGeofenceCategoryTerminalForeground = '--color-geofence-categor
 export const colorGeofenceCategoryUncategorizedBackground = '--color-geofence-category-uncategorized-background';
 export const colorGeofenceCategoryUncategorizedBorder = '--color-geofence-category-uncategorized-border';
 export const colorGeofenceCategoryUncategorizedForeground = '--color-geofence-category-uncategorized-foreground';
+export const colorInteractionActive = '--color-interaction-active';
 export const colorInteractionFocus = '--color-interaction-focus';
 export const colorInteractionHover = '--color-interaction-hover';
+export const colorInteractionOnBoldBackgroundActive = '--color-interaction-on-bold-background-active';
 export const colorInteractionOnBoldBackgroundFocus = '--color-interaction-on-bold-background-focus';
 export const colorInteractionOnBoldBackgroundHover = '--color-interaction-on-bold-background-hover';
 export const colorInteractionOnBoldBackgroundPressed = '--color-interaction-on-bold-background-pressed';
+export const colorInteractionOnMediumBackgroundActive = '--color-interaction-on-medium-background-active';
 export const colorInteractionOnMediumBackgroundFocus = '--color-interaction-on-medium-background-focus';
 export const colorInteractionOnMediumBackgroundHover = '--color-interaction-on-medium-background-hover';
 export const colorInteractionOnMediumBackgroundPressed = '--color-interaction-on-medium-background-pressed';
+export const colorInteractionOnStrongBackgroundActive = '--color-interaction-on-strong-background-active';
 export const colorInteractionOnStrongBackgroundFocus = '--color-interaction-on-strong-background-focus';
 export const colorInteractionOnStrongBackgroundHover = '--color-interaction-on-strong-background-hover';
 export const colorInteractionOnStrongBackgroundPressed = '--color-interaction-on-strong-background-pressed';
+export const colorInteractionOnTranslucentBackgroundActive = '--color-interaction-on-translucent-background-active';
 export const colorInteractionOnTranslucentBackgroundFocus = '--color-interaction-on-translucent-background-focus';
 export const colorInteractionOnTranslucentBackgroundHover = '--color-interaction-on-translucent-background-hover';
 export const colorInteractionOnTranslucentBackgroundPressed = '--color-interaction-on-translucent-background-pressed';
@@ -381,6 +387,7 @@ export const colorInvertedForegroundSecondary = '--color-inverted-foreground-sec
 export const colorInvertedForegroundTertiary = '--color-inverted-foreground-tertiary';
 export const colorInvertedForegroundWalkthrough = '--color-inverted-foreground-walkthrough';
 export const colorInvertedForegroundWarning = '--color-inverted-foreground-warning';
+export const colorInvertedInteractionActive = '--color-inverted-interaction-active';
 export const colorInvertedInteractionFocus = '--color-inverted-interaction-focus';
 export const colorInvertedInteractionHover = '--color-inverted-interaction-hover';
 export const colorInvertedInteractionPressed = '--color-inverted-interaction-pressed';
@@ -394,6 +401,20 @@ export const colorLocationMarkerForeground = '--color-location-marker-foreground
 export const colorLocationMarkerInteractionFocus = '--color-location-marker-interaction-focus';
 export const colorLocationMarkerInteractionHover = '--color-location-marker-interaction-hover';
 export const colorLocationMarkerInteractionPressed = '--color-location-marker-interaction-pressed';
+export const colorNavigationBackground = '--color-navigation-background';
+export const colorNavigationBorderPrimary = '--color-navigation-border-primary';
+export const colorNavigationBorderSecondary = '--color-navigation-border-secondary';
+export const colorNavigationBorderTertiary = '--color-navigation-border-tertiary';
+export const colorNavigationDivider = '--color-navigation-divider';
+export const colorNavigationForegroundBrand = '--color-navigation-foreground-brand';
+export const colorNavigationForegroundPrimary = '--color-navigation-foreground-primary';
+export const colorNavigationForegroundQuaternary = '--color-navigation-foreground-quaternary';
+export const colorNavigationForegroundSecondary = '--color-navigation-foreground-secondary';
+export const colorNavigationForegroundTertiary = '--color-navigation-foreground-tertiary';
+export const colorNavigationInteractionActive = '--color-navigation-interaction-active';
+export const colorNavigationInteractionFocus = '--color-navigation-interaction-focus';
+export const colorNavigationInteractionHover = '--color-navigation-interaction-hover';
+export const colorNavigationInteractionPressed = '--color-navigation-interaction-pressed';
 export const colorReferenceBlack0 = '--color-reference-black-0';
 export const colorReferenceBlack10 = '--color-reference-black-10';
 export const colorReferenceBlack100 = '--color-reference-black-100';
@@ -547,6 +568,8 @@ export const colorSafetyScoreInteractionPressed = '--color-safety-score-interact
 export const colorSettingsProfileBackground = '--color-settings-profile-background';
 export const colorSettingsProfileBorder = '--color-settings-profile-border';
 export const colorSettingsProfileForeground = '--color-settings-profile-foreground';
+export const colorShimmerFade = '--color-shimmer-fade';
+export const colorShimmerHighlight = '--color-shimmer-highlight';
 export const dimensionBase = '--dimension-base';
 export const dimensionCardWidthLg = '--dimension-card-width-lg';
 export const dimensionCardWidthMd = '--dimension-card-width-md';

package/dist/json/colors.json

@@ -733,7 +733,7 @@
   },
   "--color-always-dark-foreground-brand": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
   },
   "--color-always-dark-foreground-caution": {
     "$type": "color",
@@ -749,7 +749,7 @@
   },
   "--color-always-dark-foreground-neutral": {
     "$type": "color",
-    "$value": "var(--color-reference-grey-l51-light-bold)"
+    "$value": "var(--color-reference-grey-l65-dark-bold)"
   },
   "--color-always-dark-foreground-positive": {
     "$type": "color",
@@ -779,6 +779,10 @@
     "$type": "color",
     "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
   },
+  "--color-always-dark-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l27-c05-faint)"
+  },
   "--color-always-dark-interaction-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-15)"
@@ -1623,6 +1627,10 @@
     "$type": "color",
     "$value": "var(--color-reference-grey-l65-dark-bold)"
   },
+  "--color-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l27-c05-faint)"
+  },
   "--color-interaction-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-15)"
@@ -1631,6 +1639,10 @@
     "$type": "color",
     "$value": "var(--color-reference-white-10)"
   },
+  "--color-interaction-on-bold-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l50-c17-medium)"
+  },
   "--color-interaction-on-bold-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-black-20)"
@@ -1643,6 +1655,10 @@
     "$type": "color",
     "$value": "var(--color-reference-black-20)"
   },
+  "--color-interaction-on-medium-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+  },
   "--color-interaction-on-medium-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-20)"
@@ -1655,6 +1671,10 @@
     "$type": "color",
     "$value": "var(--color-reference-white-20)"
   },
+  "--color-interaction-on-strong-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+  },
   "--color-interaction-on-strong-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-black-15)"
@@ -1667,6 +1687,10 @@
     "$type": "color",
     "$value": "var(--color-reference-black-15)"
   },
+  "--color-interaction-on-translucent-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l27-c05-faint)"
+  },
   "--color-interaction-on-translucent-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-20)"
@@ -1849,31 +1873,31 @@
   },
   "--color-inverted-foreground-ai": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-purple-290-l67-c20-bold)"
+    "$value": "var(--color-reference-light-purple-290-l52-c20-bold)"
   },
   "--color-inverted-foreground-brand": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
   },
   "--color-inverted-foreground-caution": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-yellow-85-l80-c18-bold)"
+    "$value": "var(--color-reference-light-yellow-85-l51-c12-bold)"
   },
   "--color-inverted-foreground-guide": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-cyan-215-l70-c15-bold)"
+    "$value": "var(--color-reference-light-cyan-215-l51-c11-bold)"
   },
   "--color-inverted-foreground-negative": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-red-30-l70-c20-bold)"
+    "$value": "var(--color-reference-light-red-30-l53-c20-bold)"
   },
   "--color-inverted-foreground-neutral": {
     "$type": "color",
-    "$value": "var(--color-reference-grey-l65-dark-bold)"
+    "$value": "var(--color-reference-grey-l51-light-bold)"
   },
   "--color-inverted-foreground-positive": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-green-145-l70-c19-bold)"
+    "$value": "var(--color-reference-light-green-145-l50-c19-bold)"
   },
   "--color-inverted-foreground-primary": {
     "$type": "color",
@@ -1893,11 +1917,15 @@
   },
   "--color-inverted-foreground-walkthrough": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-teal-180-l70-c15-bold)"
+    "$value": "var(--color-reference-light-teal-180-l50-c12-bold)"
   },
   "--color-inverted-foreground-warning": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
+    "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
+  },
+  "--color-inverted-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-light-blue-250-l92-c04-faint)"
   },
   "--color-inverted-interaction-focus": {
     "$type": "color",
@@ -1951,6 +1979,62 @@
     "$type": "color",
     "$value": "var(--color-reference-black-20)"
   },
+  "--color-navigation-background": {
+    "$type": "color",
+    "$value": "var(--color-reference-grey-l27-dark-faint)"
+  },
+  "--color-navigation-border-primary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-15)"
+  },
+  "--color-navigation-border-secondary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-10)"
+  },
+  "--color-navigation-border-tertiary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-divider": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-foreground-brand": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+  },
+  "--color-navigation-foreground-primary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-100)"
+  },
+  "--color-navigation-foreground-quaternary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-15)"
+  },
+  "--color-navigation-foreground-secondary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-50)"
+  },
+  "--color-navigation-foreground-tertiary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-30)"
+  },
+  "--color-navigation-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-interaction-focus": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-10)"
+  },
+  "--color-navigation-interaction-hover": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-interaction-pressed": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-10)"
+  },
   "--color-safety-score-background-excellent": {
     "$type": "color",
     "$value": "var(--color-reference-dark-blue-250-l50-c17-medium)"
@@ -1999,6 +2083,14 @@
     "$type": "color",
     "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
   },
+  "--color-shimmer-fade": {
+    "$type": "color",
+    "$value": "var(--color-reference-black-10)"
+  },
+  "--color-shimmer-highlight": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-15)"
+  },
   "--color-data-category-10": {
     "$type": "color",
     "$value": "var(--color-reference-dark-pink-0-l68-c20-bold)"

package/dist/tokens.json

@@ -733,7 +733,7 @@
   },
   "--color-always-dark-foreground-brand": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
   },
   "--color-always-dark-foreground-caution": {
     "$type": "color",
@@ -749,7 +749,7 @@
   },
   "--color-always-dark-foreground-neutral": {
     "$type": "color",
-    "$value": "var(--color-reference-grey-l51-light-bold)"
+    "$value": "var(--color-reference-grey-l65-dark-bold)"
   },
   "--color-always-dark-foreground-positive": {
     "$type": "color",
@@ -779,6 +779,10 @@
     "$type": "color",
     "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
   },
+  "--color-always-dark-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l27-c05-faint)"
+  },
   "--color-always-dark-interaction-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-15)"
@@ -1623,6 +1627,10 @@
     "$type": "color",
     "$value": "var(--color-reference-grey-l65-dark-bold)"
   },
+  "--color-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l27-c05-faint)"
+  },
   "--color-interaction-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-15)"
@@ -1631,6 +1639,10 @@
     "$type": "color",
     "$value": "var(--color-reference-white-10)"
   },
+  "--color-interaction-on-bold-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l50-c17-medium)"
+  },
   "--color-interaction-on-bold-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-black-20)"
@@ -1643,6 +1655,10 @@
     "$type": "color",
     "$value": "var(--color-reference-black-20)"
   },
+  "--color-interaction-on-medium-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+  },
   "--color-interaction-on-medium-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-20)"
@@ -1655,6 +1671,10 @@
     "$type": "color",
     "$value": "var(--color-reference-white-20)"
   },
+  "--color-interaction-on-strong-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+  },
   "--color-interaction-on-strong-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-black-15)"
@@ -1667,6 +1687,10 @@
     "$type": "color",
     "$value": "var(--color-reference-black-15)"
   },
+  "--color-interaction-on-translucent-background-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l27-c05-faint)"
+  },
   "--color-interaction-on-translucent-background-focus": {
     "$type": "color",
     "$value": "var(--color-reference-white-20)"
@@ -1849,31 +1873,31 @@
   },
   "--color-inverted-foreground-ai": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-purple-290-l67-c20-bold)"
+    "$value": "var(--color-reference-light-purple-290-l52-c20-bold)"
   },
   "--color-inverted-foreground-brand": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)"
   },
   "--color-inverted-foreground-caution": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-yellow-85-l80-c18-bold)"
+    "$value": "var(--color-reference-light-yellow-85-l51-c12-bold)"
   },
   "--color-inverted-foreground-guide": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-cyan-215-l70-c15-bold)"
+    "$value": "var(--color-reference-light-cyan-215-l51-c11-bold)"
   },
   "--color-inverted-foreground-negative": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-red-30-l70-c20-bold)"
+    "$value": "var(--color-reference-light-red-30-l53-c20-bold)"
   },
   "--color-inverted-foreground-neutral": {
     "$type": "color",
-    "$value": "var(--color-reference-grey-l65-dark-bold)"
+    "$value": "var(--color-reference-grey-l51-light-bold)"
   },
   "--color-inverted-foreground-positive": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-green-145-l70-c19-bold)"
+    "$value": "var(--color-reference-light-green-145-l50-c19-bold)"
   },
   "--color-inverted-foreground-primary": {
     "$type": "color",
@@ -1893,11 +1917,15 @@
   },
   "--color-inverted-foreground-walkthrough": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-teal-180-l70-c15-bold)"
+    "$value": "var(--color-reference-light-teal-180-l50-c12-bold)"
   },
   "--color-inverted-foreground-warning": {
     "$type": "color",
-    "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
+    "$value": "var(--color-reference-light-orange-60-l52-c13-bold)"
+  },
+  "--color-inverted-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-light-blue-250-l92-c04-faint)"
   },
   "--color-inverted-interaction-focus": {
     "$type": "color",
@@ -1951,6 +1979,62 @@
     "$type": "color",
     "$value": "var(--color-reference-black-20)"
   },
+  "--color-navigation-background": {
+    "$type": "color",
+    "$value": "var(--color-reference-grey-l27-dark-faint)"
+  },
+  "--color-navigation-border-primary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-15)"
+  },
+  "--color-navigation-border-secondary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-10)"
+  },
+  "--color-navigation-border-tertiary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-divider": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-foreground-brand": {
+    "$type": "color",
+    "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+  },
+  "--color-navigation-foreground-primary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-100)"
+  },
+  "--color-navigation-foreground-quaternary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-15)"
+  },
+  "--color-navigation-foreground-secondary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-50)"
+  },
+  "--color-navigation-foreground-tertiary": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-30)"
+  },
+  "--color-navigation-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-interaction-focus": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-10)"
+  },
+  "--color-navigation-interaction-hover": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-5)"
+  },
+  "--color-navigation-interaction-pressed": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-10)"
+  },
   "--color-safety-score-background-excellent": {
     "$type": "color",
     "$value": "var(--color-reference-dark-blue-250-l50-c17-medium)"
@@ -1999,6 +2083,14 @@
     "$type": "color",
     "$value": "var(--color-reference-dark-orange-60-l75-c20-bold)"
   },
+  "--color-shimmer-fade": {
+    "$type": "color",
+    "$value": "var(--color-reference-black-10)"
+  },
+  "--color-shimmer-highlight": {
+    "$type": "color",
+    "$value": "var(--color-reference-white-15)"
+  },
   "--color-data-category-10": {
     "$type": "color",
     "$value": "var(--color-reference-dark-pink-0-l68-c20-bold)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/tokens",
-  "version": "2.3.1",
+  "version": "2.5.0",
   "description": "TokoMo design tokens — colors, dimensions, typography, and effects as CSS custom properties, JSON, and TypeScript constants",
   "keywords": [
     "design-tokens",