Add brand colors and xlarge padding token and increase clearspace aro…

…und logo

src/elements/OcButton.vue

@@ -9,7 +9,7 @@
     :disabled="disabled"
     @click="onClick"
   >
-    <oc-icon v-if="icon" :class="$_ocButton_iconClass" :name="icon" />
+    <oc-icon v-if="icon" :name="icon" />
     <span v-if="$slots.default">
       <slot name="default" />
     </span>
@@ -135,11 +135,6 @@ export default {
     },
   },
   computed: {
-    $_ocButton_iconClass() {
-      return this.$slots.default
-        ? "uk-position-small uk-position-center-left"
-        : "uk-position-center"
-    },
     $_ocButton_buttonClass() {
       if (this.stopClassPropagation) return ""
 

src/styles/theme/_variables.scss

@@ -23,3 +23,5 @@ $navbar-nav-item-height: 60px;
 
 // Transition durations
 $transition-duration-short: 200ms;
+
+$global-font-family: 'Source Sans Pro', sans-serif;

src/styles/theme/oc-button.scss

@@ -4,13 +4,39 @@
 // ========================================================================
 
 @mixin hook-button() {
-  text-transform: uppercase;
+  display: inline-flex;
+  flex-flow: row wrap;
+  border: none;
+  border-radius: 3px;
+  padding: 0.5rem 0.75rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  justify-content: center;
+  align-items: center;
+  transition: background-color $transition-duration-short ease-in-out,
+    color $transition-duration-short ease-in-out,
+    border-color $transition-duration-short ease-in-out;
 }
 
 @mixin hook-button-disabled() {
+  border-color: lighten($global-muted-color, 25%);
+  color: lighten($global-muted-color, 25%);
+
   .oc-icon > svg {
     fill: lighten($global-muted-color, 25%);
   }
+
+  // Workaround for preventing hover effects on disabled buttons
+  &:hover,
+  &:focus {
+    border-color: lighten($global-muted-color, 25%);
+    color: lighten($global-muted-color, 25%);
+
+    .oc-icon > svg {
+      fill: lighten($global-muted-color, 25%);
+    }
+  }
 }
 
 //
@@ -24,7 +50,11 @@
   position: relative;
 
   .oc-icon + span {
-    margin-left: $global-margin;
+    margin-left: $small-margin;
+  }
+
+  .oc-icon > svg {
+    transition: fill $transition-duration-short ease-in-out;
   }
 
   text-transform: none !important;
@@ -39,17 +69,83 @@
 
   &.uk-button-large {
     min-height: $global-control-large-height;
+    font-size: 1.5rem;
   }
 
   &.uk-button-primary,
   &.uk-button-secondary,
   &.uk-button-danger {
+    border: none;
+
     .oc-icon > svg {
       fill: $global-inverse-color;
     }
   }
+
+  &.uk-button-default {
+    border: 1px solid $action-primary;
+    background-color: transparent;
+    color: $action-primary;
+
+    &:hover,
+    &:focus {
+      border-color: $action-primary-hover;
+      color: $action-primary-hover;
+
+      .oc-icon > svg {
+        fill: $action-primary-hover;
+      }
+    }
+
+    .oc-icon > svg {
+      fill: $action-primary;
+    }
+  }
+
+  &.uk-button-primary {
+    border: none;
+    background-color: $action-primary;
+    box-shadow: 0 4px 6px rgba($shadow-action-primary, .11), 0 1px 3px rgba($shadow-global, .08);
+    color: white;
+
+    &:hover,
+    &:focus {
+      background-color: $action-primary-hover;
+    }
+  }
 }
 
 .oc-button.uk-button-raw {
   @extend .oc-button-reset;
 }
+
+.uk-button-group .oc-button {
+  border-radius: 0;
+  // Prevent negative margin which is coming from UIkit
+  margin-left: 0 !important;
+
+  &:first-of-type {
+    border-radius: 3px 0 0 3px;
+  }
+
+  &:last-of-type {
+    border-radius: 0 3px 3px 0;
+  }
+
+  &.uk-button-default {
+    border-left: none;
+    border-right: none;
+
+    &:first-of-type {
+      border-left: 1px solid $action-primary;
+    }
+
+    &:last-of-type {
+      border-right: 1px solid $action-primary;
+    }
+  }
+
+  &.uk-button-primary {
+    box-shadow: none;
+  }
+}

src/styles/theme/oc-sidebar.scss

@@ -2,8 +2,8 @@
   width: $width-medium;
   height: 100vh;
   max-height: 100vh;
-  padding: $gutter 0;
-  background-color: $primary-background;
+  padding: $large-gutter 0 $gutter;
+  background-color: $brand-primary;
   overflow: hidden auto;
   box-sizing: border-box;
 
@@ -26,7 +26,7 @@
     }
 
     &-img {
-      @extend .uk-width-small;
+      height: $height-small;
     }
 
     &-text {
@@ -53,7 +53,7 @@
 
     &:hover,
     &:focus {
-      background-color: darken($primary-background, 5);
+      background-color: lighten($brand-primary, 5);
     }
 
     & > a,
@@ -65,6 +65,8 @@
       display: flex;
       flex-flow: row wrap;
       padding: $small-gutter;
+      font-size: 1.125rem;
+      font-weight: 600;
       align-items: center;
 
       &:hover,
@@ -78,14 +80,11 @@
     }
 
     &.uk-active {
-      background-color: darken($primary-background, 5);
+      background-color: lighten($brand-primary, 5);
 
-      & > a {
-        font-weight: bold;
-
-        &:hover {
-          cursor: default;
-        }
+      // Vue doesn't allow navigating to active route so we do not use pointer as it might mislead users
+      & > a:hover {
+        cursor: default;
       }
     }
   }

src/tokens/color.yml

@@ -18,10 +18,10 @@ props:
     value: "#667fa3"
     category: "Font-colors"
   link-color:
-    value: "#0066ff"
+    value: "#4e85c8"
     category: "Font-colors"
   link-hover-color:
-    value: "#0066ff"
+    value: "#306db5"
     category: "Font-colors"
   invers-color:
     value: "#fff"
@@ -69,6 +69,26 @@ props:
     value: "#e00000"
     category: "Background-colors"
 
+  brand-primary:
+    value: "#1b223d"
+    category: "Brand-colors"
+
+  action-primary:
+    value: "#4e85c8"
+    category: "Action-colors"
+
+  action-primary-hover:
+    value: "#306db5"
+    category: "Action-colors"
+
+  shadow-global:
+    value: "#000000"
+    category: "Shadow-colors"
+
+  shadow-action-primary:
+    value: "#32325d"
+    category: "Shadow-colors"
+
 global:
   type: color
   category: color

src/tokens/paddings.yml

@@ -11,7 +11,10 @@ props:
   medium-gutter:
     value: "30px"
   large-gutter:
+    value: "50px"
+  xlarge-gutter:
     value: "70px"
+
 global:
   type: number
   category: space

src/tokens/size.yml

@@ -12,6 +12,9 @@ props:
   width-medium:
     value: "300px"
 
+  height-small:
+    value: "50px"
+
 global:
   type: number
   category: size