4 files changed, 35 insertions, 42 deletions
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 1404061c..4910a5ac 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -1,23 +1,3 @@
-const buttonInsetFakeBorders = ['$borderSide(#FFFFFF, top, 0.2)', '$borderSide(#000000, bottom, 0.2)']
-const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
-const buttonOuterShadow = {
-  x: 0,
-  y: 0,
-  blur: 2,
-  spread: 0,
-  color: '#000000',
-  alpha: 1
-}
-
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--text',
-  alpha: 1
-}
-
 export default {
   name: 'Button', // Name of the component
   selector: '.button-default', // CSS selector/prefix
@@ -50,51 +30,60 @@ export default {
   // Default rules, used as "default theme", essentially.
   defaultRules: [
     {
+      component: 'Root',
+      directives: {
+        '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
+        '--defaultButtonShadow': 'shadow | 0 0 2 #000000',
+        '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2)',
+        '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
+      }
+    },
+    {
       // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
       // like within it
       directives: {
         background: '--fg',
-        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
         roundness: 3
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
       }
     },
     {
       state: ['pressed'],
       directives: {
-        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['hover', 'pressed'],
       directives: {
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled'],
       directives: {
         background: '--inheritedBackground,-24.2',
-        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
         background: '--inheritedBackground,-24.2',
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
         background: '$blend(--inheritedBackground, 0.25, --parent)',
-        shadow: [...buttonInsetFakeBorders]
+        shadow: ['--defaultButtonBevel']
       }
     },
     {
diff --git a/src/components/input.style.js b/src/components/input.style.js
index b1c9f3db..70c775ad 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -1,5 +1,3 @@
-const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
-
 const hoverGlow = {
   x: 0,
   y: 0,
@@ -26,6 +24,12 @@ export default {
   ],
   defaultRules: [
     {
+      component: 'Root',
+      directives: {
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
+      }
+    },
+    {
       variant: 'checkbox',
       directives: {
         roundness: 1
@@ -42,13 +46,13 @@ export default {
           spread: 0,
           color: '#000000',
           alpha: 1
-        }, ...inputInsetFakeBorders]
+        }, '--defaultInputBevel']
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: [hoverGlow, '--defaultInputBevel']
       }
     }
   ]
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 58f8d44a..dd525920 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -4,15 +4,7 @@ import {
   getContrastRatioLayers
 } from 'src/services/color_convert/color_convert.js'
 import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
+  getThemes
 } from 'src/services/style_setter/style_setter.js'
 import {
   newImporter,
@@ -25,7 +17,15 @@ import {
   CURRENT_VERSION,
   OPACITIES,
   getLayers,
-  getOpacitySlot
+  getOpacitySlot,
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  composePreset,
+  shadows2to3,
+  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index a1d1012b..f8e12dbf 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,7 +1,7 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
 import Select from '../select/select.vue'
-import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {