style button variants

webapp/assets/_new/styles/tokens.scss

@@ -4,6 +4,8 @@
  */
 
  $color-primary: rgb(23, 181, 63);
+ $color-primary-light: rgb(96, 214, 98);
+ $color-primary-dark: rgb(25, 122, 49);
  $color-primary-active: rgb(25, 194, 67);
  $color-primary-inverse: rgb(241, 253, 244);
  $color-secondary: rgb(0, 142, 230);
@@ -13,6 +15,8 @@
  $color-success-active: rgb(26, 203, 71);
  $color-success-inverse: rgb(241, 253, 244);
  $color-danger: rgb(219, 57, 36);
+ $color-danger-light: rgb(242, 97, 65);
+ $color-danger-dark: rgb(158, 43, 28);
  $color-danger-active: rgb(224, 81, 62);
  $color-danger-inverse: rgb(253, 243, 242);
  $color-warning: rgb(230, 121, 25);

webapp/components/_new/generic/BaseButton/BaseButton.story.js

@@ -54,7 +54,7 @@ storiesOf('Generic/BaseButton', module)
     components: { BaseButton },
     template: `
       <div>
-        <base-button circle icon="flag" />
+        <base-button circle icon="eye" />
         <base-button circle>EN</base-button>
         <base-button circle disabled icon="eye-slash" />
         <base-button circle loading icon="eye-slash" />

webapp/components/_new/generic/BaseButton/BaseButton.vue

@@ -9,6 +9,10 @@
 <script>
 export default {
   props: {
+    circle: {
+      type: Boolean,
+      default: false,
+    },
     icon: {
       type: String,
     },
@@ -30,6 +34,7 @@ export default {
       let buttonClass = 'base-button'
 
       if (this.$slots.default == null) buttonClass += ' --icon-only'
+      if (this.circle) buttonClass += ' --circle'
       if (this.primary) buttonClass += ' --primary'
       else if (this.danger) buttonClass += ' --danger'
 
@@ -43,18 +48,20 @@ export default {
 .base-button {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   height: 36px;
   padding: 0 12px;
   color: $color-primary;
   background-color: $color-neutral-90;
   border: 1px solid $color-primary;
   border-radius: 6px;
+  overflow: hidden;
   font-weight: $font-weight-bold;
   cursor: pointer;
+  transition: background-color .1s;
 
   &:focus {
     outline: 1px dashed $color-primary;
-    outline-offset: 2px;
   }
 
   &:hover {
@@ -64,7 +71,8 @@ export default {
 
   &:active {
     color: $color-neutral-100;
-    background-color: $color-primary-active;
+    border-color: $color-primary-dark;
+    background-color: $color-primary-dark;
   }
 
   &:disabled {
@@ -80,7 +88,15 @@ export default {
     background-color: $color-primary;
 
     &:hover {
-      background-color: $color-primary-active;
+      background-color: $color-primary-light;
+    }
+
+    &:active {
+      background-color: $color-primary-dark;
+    }
+
+    &:disabled {
+      background-color: $color-neutral-60;
     }
   }
 
@@ -90,8 +106,21 @@ export default {
     background-color: $color-danger;
 
     &:hover {
-      background-color: $color-danger-active;
+      background-color: $color-danger-light;
     }
+
+    &:active {
+      background-color: $color-danger-dark;
+    }
+
+    &:disabled {
+      background-color: $color-neutral-60;
+    }
+  }
+
+  &.--circle {
+    width: 36px;
+    border-radius: 50%;
   }
 
   &:not(.--icon-only) > .base-icon {