Updated button style; added transitions

2 files changed, 6 insertions, 5 deletions

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index c4ecd87..84da11b 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -183,6 +183,7 @@
         white-space:      nowrap;
         border:           props.get(vars.$border-width) solid transparent;
         border-radius:    props.get(vars.$rounding);
+        transition:       background-color .1s, border-color .1s, box-shadow .1s;
 
         &::after {
             position:       absolute;
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index cc7b7d5..00a11c3 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -56,21 +56,21 @@ $default-theme: map.deep-merge((
     --shadow-color:         props.get(core.$theme, --shadow),
 
     --hover: (
-        --bg-color:     props.get(core.$theme, --border-mute),
+        --bg-color:     props.get(core.$theme, --bg-l1),
         --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --border-strong),
+        --border-color: props.get(core.$theme, --border),
     ),
 
     --active: (
-        --bg-color:     props.get(core.$theme, --border),
+        --bg-color:     props.get(core.$theme, --border-mute),
         --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --text-mute-more),
+        --border-color: props.get(core.$theme, --border-strong),
     ),
 
     --disabled: (
         --bg-color:     transparent,
         --label-color:  props.get(core.$theme, --border-strong),
-        --border-color: props.get(core.$theme, --border),
+        --border-color: props.get(core.$theme, --text-disabled),
     ),
 
     --key-focus: (