fix(coachmark): update style to new cobalt color

momentum-design · Apr 30, 2019 · 19c989d · 19c989d
1 parent 1652868
commit 19c989d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 10 deletions.
diff --git a/core/scss/components/button/mixins.scss b/core/scss/components/button/mixins.scss
@@ -135,6 +135,8 @@
 * @parameter $bg-disabled | color | Disabled background color | $button__background-color--disabled
 * @parameter $bg-hover | color | Button Hover Background Color. | $button__background-color--hover
 * @parameter $border | color | Border style | false
+* @parameter $border-active | color | Border Active style | false
+* @parameter $border-hover | color | Border Hover style | false
 * @parameter $border-focus | color | Button Border Color. | $button__border-color--focus
 * @parameter $box-shadow | color | box-shadow style | false
 * @parameter $color | color | Font color. | $md-black-100
@@ -155,6 +157,8 @@
   $bg-disabled: $button__color--disabled,
   $bg-hover: $button__background-color--hover,
   $border: false,
+  $border-hover: false,
+  $border-active: false,
   $border-focus: $button__border-color--focus,
   $box-shadow: false,
   $color: $button__font-color,
@@ -194,17 +198,23 @@
     outline: $outline;
   }
 
-  &:hover,
-  &.hover-state {
+  &:hover {
     color: $color-hover;
     background-color: $bg-hover;
+
+    @if $border-hover {
+      border: $border-hover;
+    }
   }
 
   &:active,
-  &.active-state,
   &.active {
     color: $color-active;
     background-color: $bg-active;
+
+    @if $border-active {
+      border: $border-active;
+    }
   }
 }
 

diff --git a/core/scss/components/coachmark/coachmark.scss b/core/scss/components/coachmark/coachmark.scss
@@ -11,31 +11,31 @@
     &.#{$prefix}-event-overlay {
       &--top {
         > .#{$prefix}-event-overlay__arrow {
-          border-top-color: $md-yellow-70;
+          border-top-color: $md-cobalt-70;
         }
       }
 
       &--left {
         > .#{$prefix}-event-overlay__arrow {
-          border-left-color: $md-yellow-70;
+          border-left-color: $md-cobalt-70;
         }
       }
 
       &--right {
         > .#{$prefix}-event-overlay__arrow {
-          border-right-color: $md-yellow-70;
+          border-right-color: $md-cobalt-70;
         }
       }
 
       &--bottom {
         > .#{$prefix}-event-overlay__arrow {
-          border-bottom-color: $md-yellow-70;
+          border-bottom-color: $md-cobalt-70;
         }
       }
 
       > .#{$prefix}-event-overlay__children {
         color: white;
-        background-color: $md-yellow-70;
+        background-color: $md-cobalt-70;
         border: none;
         box-shadow: $select--children__box-shadow;
 
@@ -64,10 +64,30 @@
           }
 
           > .#{$button__class} {
-            @include button-color($color: $md-white-100);
+            @include button-color(
+              $color: $md-white-100,
+              $color-hover: $md-cobalt-70,
+              $color-active: $md-cobalt-70,
+              $bg: transparent,
+              $bg-hover: $md-gray-10,
+              $bg-active: $md-white-100,
+              $border: 1px solid $md-white-100,
+              $border-hover: 1px solid $md-gray-10,
+              $border-active: 1px solid $md-white-100
+            );
 
             .#{$dark-class} & {
-              @include button-color($color: $md-white-100);
+              @include button-color(
+                $color: $md-white-100,
+                $color-hover: $md-cobalt-70,
+                $color-active: $md-cobalt-70,
+                $bg: transparent,
+                $bg-hover: $md-gray-10,
+                $bg-active: $md-white-100,
+                $border: 1px solid $md-white-100,
+                $border-hover: 1px solid $md-gray-10,
+                $border-active: 1px solid $md-white-100
+              );
             }
           }
         }

diff --git a/react/src/app/containers/EventOverlay/EventOverlayExamples.js b/react/src/app/containers/EventOverlay/EventOverlayExamples.js
@@ -390,6 +390,7 @@ export default class PlaygroundComponent extends React.Component {
             subheader={`Subheader prop(node)`}
             direction="bottom-center"
             ariaLabel="Open Coachmark"
+            onClick={() => {}}
             onClose={() => {
               this.setState({ isCoachmarkOpen: false });
             }}