fix themes3 specificity sorting

src/components/button.style.js

@@ -96,6 +96,17 @@ export default {
         textOpacity: 0.25,
         textOpacityMode: 'blend'
       }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
     }
   ]
 }

src/components/input.style.js

@@ -10,17 +10,18 @@ const hoverGlow = {
 export default {
   name: 'Input',
   selector: '.input',
-  variant: {
+  states: {
+    hover: ':hover:not(.disabled)',
+    focused: ':focus-within',
+    disabled: '.disabled'
+  },
+  variants: {
     checkbox: '.-checkbox',
     radio: '.-radio'
   },
-  states: {
-    disabled: ':disabled',
-    hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
-  },
   validInnerComponents: [
-    'Text'
+    'Text',
+    'Icon'
   ],
   defaultRules: [
     {
@@ -55,6 +56,34 @@ export default {
       directives: {
         shadow: [hoverGlow, '--defaultInputBevel']
       }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground, 0.25, --parent)'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Input',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Input',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
     }
   ]
 }

src/services/theme_data/theme_data_3.service.js

@@ -182,7 +182,7 @@ export const init = ({
 
   const rulesetUnsorted = [
     ...Object.values(components)
-      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
+      .map(c => (c.defaultRules || []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
       .reduce((acc, arr) => [...acc, ...arr], []),
     ...inputRuleset
   ].map(rule => {
@@ -198,18 +198,33 @@ export const init = ({
 
   const ruleset = rulesetUnsorted
     .map((data, index) => ({ data, index }))
-    .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+    .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
       const parentsA = unroll(a).length
       const parentsB = unroll(b).length
 
-      if (parentsA === parentsB) {
-        if (a.component === 'Text') return -1
-        if (b.component === 'Text') return 1
+      let aScore = 0
+      let bScore = 0
+
+      aScore += parentsA * 1000
+      bScore += parentsB * 1000
+
+      aScore += a.variant !== 'normal' ? 100 : 0
+      bScore += b.variant !== 'normal' ? 100 : 0
+
+      aScore += a.state.filter(x => x !== 'normal').length * 1000
+      bScore += b.state.filter(x => x !== 'normal').length * 1000
+
+      aScore += a.component === 'Text' ? 1 : 0
+      bScore += b.component === 'Text' ? 1 : 0
+
+      // Debug
+      a.specifityScore = aScore
+      b.specifityScore = bScore
+
+      if (aScore === bScore) {
         return ai - bi
       }
-      if (parentsA === 0 && parentsB !== 0) return -1
-      if (parentsB === 0 && parentsA !== 0) return 1
-      return parentsA - parentsB
+      return aScore - bScore
     })
     .map(({ data }) => data)
 
@@ -235,7 +250,10 @@ export const init = ({
 
     // Inheriting all of the applicable rules
     const existingRules = ruleset.filter(findRules(combination))
-    const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
+    const computedDirectives =
+          existingRules
+            .map(r => r.directives)
+            .reduce((acc, directives) => ({ ...acc, ...directives }), {})
     const computedRule = {
       ...combination,
       directives: computedDirectives