improvements & performance testing

src/components/button.style.js

@@ -22,7 +22,7 @@ const hoverGlow = {
 
 export default {
   name: 'Button',
-  selector: '.button-default',
+  selector: '.button',
   states: {
     disabled: ':disabled',
     toggled: '.toggled',
@@ -31,9 +31,9 @@ export default {
     focused: ':focus-within'
   },
   variants: {
+    normal: '-default',
     danger: '.danger',
-    unstyled: '.unstyled',
-    sublime: '.sublime'
+    unstyled: '-unstyled'
   },
   validInnerComponents: [
     'Text',
@@ -54,6 +54,14 @@ export default {
         }, ...buttonInsetFakeBorders]
       }
     },
+    {
+      component: 'Button',
+      variant: 'unstyled',
+      directives: {
+        background: '--fg',
+        opacity: 0
+      }
+    },
     {
       component: 'Button',
       state: ['hover'],