@revikornmann/muka-ui 0.5.0 → 0.6.0

package/tokens/t2-alias/brand/muka/light.json

@@ -53,6 +53,56 @@
         "12": {
           "$type": "color",
           "$value": "{color.mauve.12}"
+        },
+        "alphaHued": {
+          "1": {
+            "$type": "color",
+            "$value": "{color.mauveA.1}"
+          },
+          "2": {
+            "$type": "color",
+            "$value": "{color.mauveA.2}"
+          },
+          "3": {
+            "$type": "color",
+            "$value": "{color.mauveA.3}"
+          },
+          "4": {
+            "$type": "color",
+            "$value": "{color.mauveA.4}"
+          },
+          "5": {
+            "$type": "color",
+            "$value": "{color.mauveA.5}"
+          },
+          "6": {
+            "$type": "color",
+            "$value": "{color.mauveA.6}"
+          },
+          "7": {
+            "$type": "color",
+            "$value": "{color.mauveA.7}"
+          },
+          "8": {
+            "$type": "color",
+            "$value": "{color.mauveA.8}"
+          },
+          "9": {
+            "$type": "color",
+            "$value": "{color.mauveA.9}"
+          },
+          "10": {
+            "$type": "color",
+            "$value": "{color.mauveA.10}"
+          },
+          "11": {
+            "$type": "color",
+            "$value": "{color.mauveA.11}"
+          },
+          "12": {
+            "$type": "color",
+            "$value": "{color.mauveA.12}"
+          }
         }
       },
       "brand": {
@@ -305,4 +355,4 @@
       }
     }
   }
-}
+}

package/tokens/t2-alias/brand/wireframe/dark.json

@@ -53,6 +53,56 @@
         "12": {
           "$type": "color",
           "$value": "{color.grayDark.12}"
+        },
+        "alphaHued": {
+          "1": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.1}"
+          },
+          "2": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.2}"
+          },
+          "3": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.3}"
+          },
+          "4": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.4}"
+          },
+          "5": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.5}"
+          },
+          "6": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.6}"
+          },
+          "7": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.7}"
+          },
+          "8": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.8}"
+          },
+          "9": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.9}"
+          },
+          "10": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.10}"
+          },
+          "11": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.11}"
+          },
+          "12": {
+            "$type": "color",
+            "$value": "{color.grayDarkA.12}"
+          }
         }
       },
       "brand": {
@@ -293,4 +343,4 @@
       }
     }
   }
-}
+}

package/tokens/t2-alias/brand/wireframe/light.json

@@ -53,6 +53,56 @@
         "12": {
           "$type": "color",
           "$value": "{color.gray.12}"
+        },
+        "alphaHued": {
+          "1": {
+            "$type": "color",
+            "$value": "{color.grayA.1}"
+          },
+          "2": {
+            "$type": "color",
+            "$value": "{color.grayA.2}"
+          },
+          "3": {
+            "$type": "color",
+            "$value": "{color.grayA.3}"
+          },
+          "4": {
+            "$type": "color",
+            "$value": "{color.grayA.4}"
+          },
+          "5": {
+            "$type": "color",
+            "$value": "{color.grayA.5}"
+          },
+          "6": {
+            "$type": "color",
+            "$value": "{color.grayA.6}"
+          },
+          "7": {
+            "$type": "color",
+            "$value": "{color.grayA.7}"
+          },
+          "8": {
+            "$type": "color",
+            "$value": "{color.grayA.8}"
+          },
+          "9": {
+            "$type": "color",
+            "$value": "{color.grayA.9}"
+          },
+          "10": {
+            "$type": "color",
+            "$value": "{color.grayA.10}"
+          },
+          "11": {
+            "$type": "color",
+            "$value": "{color.grayA.11}"
+          },
+          "12": {
+            "$type": "color",
+            "$value": "{color.grayA.12}"
+          }
         }
       },
       "brand": {
@@ -261,4 +311,4 @@
       }
     }
   }
-}
+}

package/tokens/t3-semantics/ui.json

@@ -82,30 +82,30 @@
       },
       "hover": {
         "$type": "color",
-        "$value": "{alias.color.neutral.2}",
+        "$value": "{alias.color.neutral.alphaHued.2}",
         "$rag": {
-          "description": "Interactive surface hover tint between level2 and level3",
+          "description": "Brand-hued translucent overlay tint for hover interaction feedback",
           "usage": ["List item hover", "Menu item hover", "Table row hover", "Any interactive surface hover state"],
-          "accessibility": "Provides visible hover feedback without blending into surrounding surface",
-          "relationships": ["color.surface.level2", "color.surface.level3", "color.surface.pressed"],
+          "accessibility": "Theme-adaptive alpha tint (dark-translucent in light themes, light-translucent in dark) that reads on any surface level without blending in",
+          "relationships": ["color.surface.pressed", "alias.color.neutral.alphaHued"],
           "examples": ["ListItem hover background", "Menu option hover", "Table row hover highlight"],
-          "brand-impact": "Low - neutral interaction tint",
-          "semantic-meaning": "Surface tint for hover interaction feedback",
-          "do": ["Use for hover states on interactive surfaces", "Pair with level2 or level3 surfaces"],
+          "brand-impact": "Low - hued neutral interaction tint that tracks the brand gray",
+          "semantic-meaning": "Translucent surface overlay for hover interaction feedback",
+          "do": ["Use for hover states on interactive surfaces", "Layer over any surface level (level1/2/3 or transparent)"],
           "dont": ["Use as a static surface level", "Use for non-interactive elements", "Use for selected states"]
         }
       },
       "pressed": {
         "$type": "color",
-        "$value": "{alias.color.neutral.1}",
+        "$value": "{alias.color.neutral.alphaHued.3}",
         "$rag": {
-          "description": "Interactive surface pressed/active tint",
+          "description": "Brand-hued translucent overlay tint for pressed/active interaction feedback (stronger than hover)",
           "usage": ["List item active/pressed", "Menu item active", "Table row active", "Any interactive surface pressed state"],
-          "accessibility": "Provides visible pressed feedback distinct from hover",
-          "relationships": ["color.surface.hover", "color.surface.level3"],
+          "accessibility": "Theme-adaptive alpha tint stronger than hover, providing visible pressed feedback distinct from hover on any surface level",
+          "relationships": ["color.surface.hover", "alias.color.neutral.alphaHued"],
           "examples": ["ListItem pressed background", "Menu option pressed", "Button active state"],
-          "brand-impact": "Low - neutral interaction tint",
-          "semantic-meaning": "Surface tint for pressed interaction feedback",
+          "brand-impact": "Low - hued neutral interaction tint that tracks the brand gray",
+          "semantic-meaning": "Translucent surface overlay for pressed interaction feedback",
           "do": ["Use for active/pressed states on interactive surfaces", "Pair with hover token for full interaction scale"],
           "dont": ["Use as a static surface level", "Use for hover states", "Use for selected states"]
         }