diff --git a/src/components/button.style.js b/src/components/button.style.js
index 95ef3e40..248da8bb 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -35,11 +35,11 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--defaultButtonFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
-        '--defaultButtonShadow': 'shadow | 0 0 2 #000000',
-        '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
-        '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
+        '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
+        '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
+        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
+        '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
       }
     },
     {
@@ -47,53 +47,53 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
         roundness: 3
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
+        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
       }
     },
     {
       state: ['focused'],
       directives: {
-        shadow: ['--defaultButtonFocusGlow', '--defaultButtonBevel']
+        shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
       }
     },
     {
       state: ['pressed'],
       directives: {
-        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
       }
     },
     {
       state: ['pressed', 'hover'],
       directives: {
-        shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow']
+        shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
       }
     },
     {
       state: ['toggled'],
       directives: {
         background: '--inheritedBackground,-14.2',
-        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
         background: '--inheritedBackground,-14.2',
-        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
         background: '$blend(--inheritedBackground 0.25 --parent)',
-        shadow: ['--defaultButtonBevel']
+        shadow: ['--buttonDefaultBevel']
       }
     },
     {
diff --git a/src/components/input.style.js b/src/components/input.style.js
index c60ac1e4..087de1e1 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -18,9 +18,9 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
-        '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
+        '--inputDefaultBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--inputDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--inputDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }
     },
     {
@@ -41,25 +41,25 @@ export default {
           spread: 0,
           color: '#000000',
           alpha: 1
-        }, '--defaultInputBevel']
+        }, '--inputDefaultBevel']
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
+        shadow: ['--inputDefaultHoverGlow', '--inputDefaultBevel']
       }
     },
     {
       state: ['focused'],
       directives: {
-        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
+        shadow: ['--inputDefaultFocusGlow', '--inputDefaultBevel']
       }
     },
     {
       state: ['focused', 'hover'],
       directives: {
-        shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
+        shadow: ['--inputDefaultFocusGlow', '--inputDefaultHoverGlow', '--inputDefaultBevel']
       }
     },
     {
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
index 217d42eb..814d3304 100644
--- a/src/components/tab_switcher/tab.style.js
+++ b/src/components/tab_switcher/tab.style.js
@@ -14,14 +14,14 @@ export default {
     {
       directives: {
         background: '--fg',
-        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
         roundness: 3
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
+        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
       }
     },
     {
@@ -33,14 +33,14 @@ export default {
     {
       state: ['hover', 'active'],
       directives: {
-        shadow: ['--defaultButtonShadow', '--defaultButtonBevel']
+        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
         background: '$blend(--inheritedBackground 0.25 --parent)',
-        shadow: ['--defaultButtonBevel']
+        shadow: ['--buttonDefaultBevel']
       }
     },
     {