fix(button): update button colors, focus states

carbon-design-system · Jul 30, 2019 · 2d1e62a · 2d1e62a
1 parent fb90613
commit 2d1e62a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/packages/components/demo/js/components/ComponentExample/component-overrides.scss b/packages/components/demo/js/components/ComponentExample/component-overrides.scss
@@ -72,10 +72,6 @@
     width: 100%;
   }
 
-  .bx--tooltip__trigger:hover {
-    color: inherit;
-  }
-
   & .text-input .bx--text-input {
     min-width: 20rem;
   }

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -95,6 +95,15 @@
       color: $inverse-01;
     }
 
+    &:focus {
+      color: $text-04;
+      background-color: $interactive-03;
+    }
+
+    &:active {
+      background-color: $active-primary;
+    }
+
     &:disabled,
     &:hover:disabled,
     &:focus:disabled,
@@ -167,12 +176,25 @@
     }
   }
 
-  .#{$prefix}--btn--icon-only {
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
     @include tooltip--trigger('icon', 'bottom');
+    outline: $button-outline-width solid transparent;
+    outline-offset: -4px;
+  }
+
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:hover
+    svg {
+    fill: red;
+  }
+
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
+    border-color: $focus;
+    outline-color: $ui-02;
   }
 
-  .#{$prefix}--btn--icon-only:focus svg {
-    outline: none;
+  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
+    svg {
+    outline-color: transparent;
   }
 
   .#{$prefix}--btn--icon-only--top {

diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
@@ -44,7 +44,6 @@
     flex-shrink: 0;
     width: rem(16px);
     height: rem(16px);
-    transition: all $duration--fast-01 motion(entrance, productive);
   }
 }