improve BEM modifier pattern matching to support nested modifiers and add color token variants for badge decoration, button link kind, and split button kind

Author: francisrupert

packages/combinator/src/lib/tokens.js

@@ -97,9 +97,10 @@ export function resolveTokenValue (category, value, propValues) {
  * Resolves a computed color from CSS classes applied to the measure element.
  *
  * classPrefix patterns:
- *   'class[attr]'  — sets attr=value, reads from child element (avatar family)
- *   'class--'      — applies 'class class--{value}' (BEM modifier)
- *   'class'        — applies 'class-{value}' (utility class)
+ *   'class[attr]'       — sets attr=value, reads from child element (avatar family)
+ *   'class--'           — applies 'class class--{value}' (BEM modifier)
+ *   'class--modifier-'  — applies 'class class--modifier-{value}' (BEM sub-modifier)
+ *   'class'             — applies 'class-{value}' (utility class)
  *
  * cssProperty patterns:
  *   'color', 'backgroundColor'  — standard computed style property
@@ -124,12 +125,12 @@ function resolveColor (classPrefix, cssProperty, value) {
         }
         child.className = `${bracketMatch[1]}__canvas-inner`;
       }
-    // Component modifier pattern: prefix ends with '--' (e.g., 'd-badge--')
-    // → class = 'd-badge d-badge--{value}'
-    } else if (classPrefix.endsWith('--')) {
-      const base = classPrefix.slice(0, -2);
+    // BEM modifier pattern: prefix contains '--' (e.g., 'd-badge--', 'd-badge--decorate-')
+    // → class = 'd-badge d-badge--{value}' or 'd-badge d-badge--decorate-{value}'
+    } else if (classPrefix.includes('--')) {
+      const base = classPrefix.slice(0, classPrefix.indexOf('--'));
       el.className = `${base} ${classPrefix}${value}`;
-    // Utility pattern: no '--' suffix (e.g., 'd-fc')
+    // Utility pattern: no '--' (e.g., 'd-fc')
     // → class = 'd-fc-{value}'
     } else {
       el.className = `${classPrefix}-${value}`;

packages/combinator/src/variants/variants_badge.js

@@ -5,6 +5,7 @@ export default {
     props: {
       iconSize: { tokenCategory: 'icon-size' },
       type: { tokenCategory: 'color:d-badge--:backgroundColor' },
+      decoration: { tokenCategory: 'color:d-badge--decorate-:--badge-decorative-color' },
     },
   },
 

packages/combinator/src/variants/variants_button.js

@@ -3,6 +3,7 @@ export default {
   defaults: {
     props: {
       kind: { tokenCategory: 'color:d-btn--:color' },
+      linkKind: { tokenCategory: 'color:d-link--:color' },
     },
   },
 

packages/combinator/src/variants/variants_split_button.js

@@ -2,6 +2,12 @@
 
 
 export default {
+  defaults: {
+    props: {
+      kind: { tokenCategory: 'color:d-btn--:color' },
+    },
+  },
+
   exclusions: [
     {
       when: { importance: v => v !== 'clear' },

packages/dialtone-vue/components/button/button.vue

@@ -324,7 +324,6 @@ export default {
 
     /**
      * The color of the button.
-     * The inverted value is deprecated — use v-dt-mode directive instead.
      * @values default, unstyled, muted, critical, positive
      */
     kind: {

packages/dialtone-vue/components/split_button/split_button.vue

@@ -370,7 +370,7 @@ export default {
 
     /**
      * The color of the button.
-     * @values default, muted, critical
+     * @values default, unstyled, muted, critical, positive
      */
     kind: {
       type: String,