@ds-mo/tokens 3.0.0 → 3.1.0

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/tokens",
-  "packageVersion": "3.0.0",
+  "packageVersion": "3.1.0",
   "kind": "tokens",
   "entries": [
     {

package/dist/agent.mjs

@@ -1,7 +1,7 @@
 const manifest = {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/tokens",
-  "packageVersion": "3.0.0",
+  "packageVersion": "3.1.0",
   "kind": "tokens",
   "entries": [
     {

package/dist/colors.css

@@ -527,18 +527,19 @@
   --color-foreground-strong-walkthrough: var(--color-reference-light-teal-180-l35-c09-strong);
   --color-foreground-strong-warning: var(--color-reference-light-orange-60-l35-c09-strong);
   --color-foreground-tertiary: var(--color-reference-black-45);
-  --color-interaction-active: var(--color-reference-light-blue-250-l92-c04-faint);
+  --color-interaction-active-brand: var(--color-reference-light-blue-250-l92-c04-faint);
+  --color-interaction-active: var(--color-reference-black-10);
   --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-active: var(--color-reference-white-15);
   --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-active: var(--color-reference-black-15);
   --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-active: var(--color-reference-white-10);
   --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);
@@ -621,7 +622,7 @@
   --color-media-foreground-quaternary: var(--color-reference-white-20);
   --color-media-foreground-secondary: var(--color-reference-white-55);
   --color-media-foreground-tertiary: var(--color-reference-white-35);
-  --color-media-interaction-active: var(--color-reference-white-20);
+  --color-media-interaction-active: var(--color-reference-white-10);
   --color-media-interaction-focus: var(--color-reference-white-15);
   --color-media-interaction-hover: var(--color-reference-white-10);
   --color-media-interaction-pressed: var(--color-reference-white-15);
@@ -1122,18 +1123,19 @@
   --color-foreground-strong-walkthrough: var(--color-reference-dark-teal-180-l93-c08-strong);
   --color-foreground-strong-warning: var(--color-reference-dark-orange-60-l92-c06-strong);
   --color-foreground-tertiary: var(--color-reference-white-35);
-  --color-interaction-active: var(--color-reference-dark-blue-250-l27-c05-faint);
+  --color-interaction-active-brand: var(--color-reference-dark-blue-250-l27-c05-faint);
+  --color-interaction-active: var(--color-reference-white-10);
   --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-active: var(--color-reference-black-15);
   --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-active: var(--color-reference-white-15);
   --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-active: var(--color-reference-black-10);
   --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);
@@ -1216,7 +1218,7 @@
   --color-media-foreground-quaternary: var(--color-reference-white-20);
   --color-media-foreground-secondary: var(--color-reference-white-55);
   --color-media-foreground-tertiary: var(--color-reference-white-35);
-  --color-media-interaction-active: var(--color-reference-white-20);
+  --color-media-interaction-active: var(--color-reference-white-10);
   --color-media-interaction-focus: var(--color-reference-white-15);
   --color-media-interaction-hover: var(--color-reference-white-10);
   --color-media-interaction-pressed: var(--color-reference-white-15);

package/dist/index.cjs

@@ -447,6 +447,7 @@ exports.colorForegroundStrongWalkthrough = '--color-foreground-strong-walkthroug
 exports.colorForegroundStrongWarning = '--color-foreground-strong-warning';
 exports.colorForegroundTertiary = '--color-foreground-tertiary';
 exports.colorInteractionActive = '--color-interaction-active';
+exports.colorInteractionActiveBrand = '--color-interaction-active-brand';
 exports.colorInteractionFocus = '--color-interaction-focus';
 exports.colorInteractionHover = '--color-interaction-hover';
 exports.colorInteractionOnBoldBackgroundActive = '--color-interaction-on-bold-background-active';

package/dist/index.d.ts

@@ -447,6 +447,7 @@ export declare const colorForegroundStrongWalkthrough: '--color-foreground-stron
 export declare const colorForegroundStrongWarning: '--color-foreground-strong-warning';
 export declare const colorForegroundTertiary: '--color-foreground-tertiary';
 export declare const colorInteractionActive: '--color-interaction-active';
+export declare const colorInteractionActiveBrand: '--color-interaction-active-brand';
 export declare const colorInteractionFocus: '--color-interaction-focus';
 export declare const colorInteractionHover: '--color-interaction-hover';
 export declare const colorInteractionOnBoldBackgroundActive: '--color-interaction-on-bold-background-active';

package/dist/index.mjs

@@ -447,6 +447,7 @@ export const colorForegroundStrongWalkthrough = '--color-foreground-strong-walkt
 export const colorForegroundStrongWarning = '--color-foreground-strong-warning';
 export const colorForegroundTertiary = '--color-foreground-tertiary';
 export const colorInteractionActive = '--color-interaction-active';
+export const colorInteractionActiveBrand = '--color-interaction-active-brand';
 export const colorInteractionFocus = '--color-interaction-focus';
 export const colorInteractionHover = '--color-interaction-hover';
 export const colorInteractionOnBoldBackgroundActive = '--color-interaction-on-bold-background-active';

package/dist/json/colors.json

@@ -5171,7 +5171,7 @@
       }
     }
   },
-  "--color-interaction-active": {
+  "--color-interaction-active-brand": {
     "$type": "color",
     "$value": "var(--color-reference-light-blue-250-l92-c04-faint)",
     "$extensions": {
@@ -5183,6 +5183,18 @@
       }
     }
   },
+  "--color-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-black-10)",
+    "$extensions": {
+      "ds-mo": {
+        "modes": {
+          "light": "var(--color-reference-black-10)",
+          "dark": "var(--color-reference-white-10)"
+        }
+      }
+    }
+  },
   "--color-interaction-focus": {
     "$type": "color",
     "$value": "var(--color-reference-black-15)",
@@ -5209,12 +5221,12 @@
   },
   "--color-interaction-on-bold-background-active": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l70-c18-medium)",
+    "$value": "var(--color-reference-white-15)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-light-blue-250-l70-c18-medium)",
-          "dark": "var(--color-reference-dark-blue-250-l50-c17-medium)"
+          "light": "var(--color-reference-white-15)",
+          "dark": "var(--color-reference-black-15)"
         }
       }
     }
@@ -5257,12 +5269,12 @@
   },
   "--color-interaction-on-medium-background-active": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+    "$value": "var(--color-reference-black-15)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-          "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+          "light": "var(--color-reference-black-15)",
+          "dark": "var(--color-reference-white-15)"
         }
       }
     }
@@ -5305,12 +5317,12 @@
   },
   "--color-interaction-on-strong-background-active": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+    "$value": "var(--color-reference-white-10)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-          "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+          "light": "var(--color-reference-white-10)",
+          "dark": "var(--color-reference-black-10)"
         }
       }
     }
@@ -6301,12 +6313,12 @@
   },
   "--color-media-interaction-active": {
     "$type": "color",
-    "$value": "var(--color-reference-white-20)",
+    "$value": "var(--color-reference-white-10)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-white-20)",
-          "dark": "var(--color-reference-white-20)"
+          "light": "var(--color-reference-white-10)",
+          "dark": "var(--color-reference-white-10)"
         }
       }
     }

package/dist/json/colors.modes.json

@@ -5172,7 +5172,7 @@
         }
       }
     },
-    "--color-interaction-active": {
+    "--color-interaction-active-brand": {
       "$type": "color",
       "$value": "var(--color-reference-light-blue-250-l92-c04-faint)",
       "$extensions": {
@@ -5184,6 +5184,18 @@
         }
       }
     },
+    "--color-interaction-active": {
+      "$type": "color",
+      "$value": "var(--color-reference-black-10)",
+      "$extensions": {
+        "ds-mo": {
+          "modes": {
+            "light": "var(--color-reference-black-10)",
+            "dark": "var(--color-reference-white-10)"
+          }
+        }
+      }
+    },
     "--color-interaction-focus": {
       "$type": "color",
       "$value": "var(--color-reference-black-15)",
@@ -5210,12 +5222,12 @@
     },
     "--color-interaction-on-bold-background-active": {
       "$type": "color",
-      "$value": "var(--color-reference-light-blue-250-l70-c18-medium)",
+      "$value": "var(--color-reference-white-15)",
       "$extensions": {
         "ds-mo": {
           "modes": {
-            "light": "var(--color-reference-light-blue-250-l70-c18-medium)",
-            "dark": "var(--color-reference-dark-blue-250-l50-c17-medium)"
+            "light": "var(--color-reference-white-15)",
+            "dark": "var(--color-reference-black-15)"
           }
         }
       }
@@ -5258,12 +5270,12 @@
     },
     "--color-interaction-on-medium-background-active": {
       "$type": "color",
-      "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+      "$value": "var(--color-reference-black-15)",
       "$extensions": {
         "ds-mo": {
           "modes": {
-            "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-            "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+            "light": "var(--color-reference-black-15)",
+            "dark": "var(--color-reference-white-15)"
           }
         }
       }
@@ -5306,12 +5318,12 @@
     },
     "--color-interaction-on-strong-background-active": {
       "$type": "color",
-      "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+      "$value": "var(--color-reference-white-10)",
       "$extensions": {
         "ds-mo": {
           "modes": {
-            "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-            "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+            "light": "var(--color-reference-white-10)",
+            "dark": "var(--color-reference-black-10)"
           }
         }
       }
@@ -6302,12 +6314,12 @@
     },
     "--color-media-interaction-active": {
       "$type": "color",
-      "$value": "var(--color-reference-white-20)",
+      "$value": "var(--color-reference-white-10)",
       "$extensions": {
         "ds-mo": {
           "modes": {
-            "light": "var(--color-reference-white-20)",
-            "dark": "var(--color-reference-white-20)"
+            "light": "var(--color-reference-white-10)",
+            "dark": "var(--color-reference-white-10)"
           }
         }
       }
@@ -9206,10 +9218,14 @@
       "$type": "color",
       "$value": "var(--color-reference-white-35)"
     },
-    "--color-interaction-active": {
+    "--color-interaction-active-brand": {
       "$type": "color",
       "$value": "var(--color-reference-dark-blue-250-l27-c05-faint)"
     },
+    "--color-interaction-active": {
+      "$type": "color",
+      "$value": "var(--color-reference-white-10)"
+    },
     "--color-interaction-focus": {
       "$type": "color",
       "$value": "var(--color-reference-white-15)"
@@ -9220,7 +9236,7 @@
     },
     "--color-interaction-on-bold-background-active": {
       "$type": "color",
-      "$value": "var(--color-reference-dark-blue-250-l50-c17-medium)"
+      "$value": "var(--color-reference-black-15)"
     },
     "--color-interaction-on-bold-background-focus": {
       "$type": "color",
@@ -9236,7 +9252,7 @@
     },
     "--color-interaction-on-medium-background-active": {
       "$type": "color",
-      "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+      "$value": "var(--color-reference-white-15)"
     },
     "--color-interaction-on-medium-background-focus": {
       "$type": "color",
@@ -9252,7 +9268,7 @@
     },
     "--color-interaction-on-strong-background-active": {
       "$type": "color",
-      "$value": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+      "$value": "var(--color-reference-black-10)"
     },
     "--color-interaction-on-strong-background-focus": {
       "$type": "color",
@@ -9584,7 +9600,7 @@
     },
     "--color-media-interaction-active": {
       "$type": "color",
-      "$value": "var(--color-reference-white-20)"
+      "$value": "var(--color-reference-white-10)"
     },
     "--color-media-interaction-focus": {
       "$type": "color",

package/dist/tokens-index.json

@@ -5184,7 +5184,7 @@
           }
         }
       },
-      "--color-interaction-active": {
+      "--color-interaction-active-brand": {
         "$type": "color",
         "$value": "var(--color-reference-light-blue-250-l92-c04-faint)",
         "$extensions": {
@@ -5196,6 +5196,18 @@
           }
         }
       },
+      "--color-interaction-active": {
+        "$type": "color",
+        "$value": "var(--color-reference-black-10)",
+        "$extensions": {
+          "ds-mo": {
+            "modes": {
+              "light": "var(--color-reference-black-10)",
+              "dark": "var(--color-reference-white-10)"
+            }
+          }
+        }
+      },
       "--color-interaction-focus": {
         "$type": "color",
         "$value": "var(--color-reference-black-15)",
@@ -5222,12 +5234,12 @@
       },
       "--color-interaction-on-bold-background-active": {
         "$type": "color",
-        "$value": "var(--color-reference-light-blue-250-l70-c18-medium)",
+        "$value": "var(--color-reference-white-15)",
         "$extensions": {
           "ds-mo": {
             "modes": {
-              "light": "var(--color-reference-light-blue-250-l70-c18-medium)",
-              "dark": "var(--color-reference-dark-blue-250-l50-c17-medium)"
+              "light": "var(--color-reference-white-15)",
+              "dark": "var(--color-reference-black-15)"
             }
           }
         }
@@ -5270,12 +5282,12 @@
       },
       "--color-interaction-on-medium-background-active": {
         "$type": "color",
-        "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+        "$value": "var(--color-reference-black-15)",
         "$extensions": {
           "ds-mo": {
             "modes": {
-              "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-              "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+              "light": "var(--color-reference-black-15)",
+              "dark": "var(--color-reference-white-15)"
             }
           }
         }
@@ -5318,12 +5330,12 @@
       },
       "--color-interaction-on-strong-background-active": {
         "$type": "color",
-        "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+        "$value": "var(--color-reference-white-10)",
         "$extensions": {
           "ds-mo": {
             "modes": {
-              "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-              "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+              "light": "var(--color-reference-white-10)",
+              "dark": "var(--color-reference-black-10)"
             }
           }
         }
@@ -6314,12 +6326,12 @@
       },
       "--color-media-interaction-active": {
         "$type": "color",
-        "$value": "var(--color-reference-white-20)",
+        "$value": "var(--color-reference-white-10)",
         "$extensions": {
           "ds-mo": {
             "modes": {
-              "light": "var(--color-reference-white-20)",
-              "dark": "var(--color-reference-white-20)"
+              "light": "var(--color-reference-white-10)",
+              "dark": "var(--color-reference-white-10)"
             }
           }
         }

package/dist/tokens.json

@@ -5171,7 +5171,7 @@
       }
     }
   },
-  "--color-interaction-active": {
+  "--color-interaction-active-brand": {
     "$type": "color",
     "$value": "var(--color-reference-light-blue-250-l92-c04-faint)",
     "$extensions": {
@@ -5183,6 +5183,18 @@
       }
     }
   },
+  "--color-interaction-active": {
+    "$type": "color",
+    "$value": "var(--color-reference-black-10)",
+    "$extensions": {
+      "ds-mo": {
+        "modes": {
+          "light": "var(--color-reference-black-10)",
+          "dark": "var(--color-reference-white-10)"
+        }
+      }
+    }
+  },
   "--color-interaction-focus": {
     "$type": "color",
     "$value": "var(--color-reference-black-15)",
@@ -5209,12 +5221,12 @@
   },
   "--color-interaction-on-bold-background-active": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l70-c18-medium)",
+    "$value": "var(--color-reference-white-15)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-light-blue-250-l70-c18-medium)",
-          "dark": "var(--color-reference-dark-blue-250-l50-c17-medium)"
+          "light": "var(--color-reference-white-15)",
+          "dark": "var(--color-reference-black-15)"
         }
       }
     }
@@ -5257,12 +5269,12 @@
   },
   "--color-interaction-on-medium-background-active": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+    "$value": "var(--color-reference-black-15)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-          "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+          "light": "var(--color-reference-black-15)",
+          "dark": "var(--color-reference-white-15)"
         }
       }
     }
@@ -5305,12 +5317,12 @@
   },
   "--color-interaction-on-strong-background-active": {
     "$type": "color",
-    "$value": "var(--color-reference-light-blue-250-l50-c18-bold)",
+    "$value": "var(--color-reference-white-10)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-light-blue-250-l50-c18-bold)",
-          "dark": "var(--color-reference-dark-blue-250-l65-c20-bold)"
+          "light": "var(--color-reference-white-10)",
+          "dark": "var(--color-reference-black-10)"
         }
       }
     }
@@ -6301,12 +6313,12 @@
   },
   "--color-media-interaction-active": {
     "$type": "color",
-    "$value": "var(--color-reference-white-20)",
+    "$value": "var(--color-reference-white-10)",
     "$extensions": {
       "ds-mo": {
         "modes": {
-          "light": "var(--color-reference-white-20)",
-          "dark": "var(--color-reference-white-20)"
+          "light": "var(--color-reference-white-10)",
+          "dark": "var(--color-reference-white-10)"
         }
       }
     }

package/package.json

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