@ds-mo/tokens 2.3.1 → 2.4.0

package/dist/colors.css

@@ -408,17 +408,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);
@@ -819,17 +824,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);

package/dist/index.cjs

@@ -312,17 +312,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';

package/dist/index.d.ts

@@ -312,17 +312,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';

package/dist/index.mjs

@@ -312,17 +312,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';

package/dist/json/colors.json

@@ -1623,6 +1623,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 +1635,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 +1651,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 +1667,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 +1683,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)"

package/dist/tokens.json

@@ -1623,6 +1623,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 +1635,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 +1651,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 +1667,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 +1683,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)"

package/package.json

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