feat(inputs): fixed old pr and added inputs and colors work (#756)

* feat(inputs): fixed old pr and added inputs and colors work * feat(inputs): fixed inline select
carbon-design-system · May 9, 2018 · 18b8687 · 18b8687
1 parent bfceee3
commit 18b8687
Show file tree

Hide file tree

Showing 68 changed files with 1,108 additions and 408 deletions.
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -17,7 +17,7 @@
 
   .#{$prefix}--accordion__item {
     transition: all $transition--base $carbon--standard-easing;
-    border-top: 1px solid $ui-04;
+    border-top: 1px solid $ui-03;
     overflow: hidden;
 
     &:focus {
@@ -26,12 +26,12 @@
       .#{$prefix}--accordion__arrow {
         @include focus-outline('border');
         overflow: visible; // safari fix
-        outline-offset: -.5px; // safari fix
+        outline-offset: -0.5px; // safari fix
       }
     }
 
     &:last-child {
-      border-bottom: 1px solid $ui-04;
+      border-bottom: 1px solid $ui-03;
     }
   }
 
@@ -53,7 +53,7 @@
       .#{$prefix}--accordion__arrow {
         @include focus-outline('border');
         overflow: visible; // safari fix
-        outline-offset: -.5px; // safari fix
+        outline-offset: -0.5px; // safari fix
       }
     }
   }

diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss
@@ -28,7 +28,7 @@
   .#{$prefix}--breadcrumb-item::after {
     content: '/';
     margin-left: $spacing-md;
-    color: $text-03;
+    color: $text-02;
   }
 
   .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
@@ -52,8 +52,8 @@
     &:hover,
     &:focus {
       outline: none;
-      color: $brand-01;
-      border-bottom: 1px solid $brand-01;
+      color: $hover-primary-text;
+      border-bottom: 1px solid $hover-primary-text;
     }
 
     // Applies to Firefox only

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -35,23 +35,11 @@
   }
 
   .#{$prefix}--btn--primary {
-    @include button-theme(
-      $brand-01,
-      transparent,
-      $inverse-01,
-      $brand-02,
-      $ui-01
-    );
+    @include button-theme($brand-01, transparent, $inverse-01, $hover-primary, $ui-01);
   }
 
   .#{$prefix}--btn--secondary {
-    @include button-theme(
-      transparent,
-      $brand-01,
-      $brand-01,
-      $brand-01,
-      $brand-01
-    );
+    @include button-theme(transparent, $brand-01, $brand-01, $hover-secondary, $brand-01);
 
     &:hover,
     &:focus {
@@ -74,13 +62,7 @@
   }
 
   .#{$prefix}--btn--tertiary {
-    @include button-theme(
-      transparent,
-      $ui-05,
-      $ui-05,
-      $ui-05,
-      $ui-05
-    );
+    @include button-theme(transparent, $ui-05, $ui-05, $ui-05, $ui-05);
 
     &:hover,
     &:focus {
@@ -98,13 +80,7 @@
   }
 
   .#{$prefix}--btn--ghost {
-    @include button-theme(
-      transparent,
-      transparent,
-      $brand-01,
-      $brand-01,
-      $brand-01
-    );
+    @include button-theme(transparent, transparent, $brand-01, $brand-01, $brand-01);
 
     &:hover,
     &:focus {
@@ -130,13 +106,7 @@
   }
 
   .#{$prefix}--btn--danger {
-    @include button-theme(
-      transparent,
-      $support-01,
-      $support-01,
-      $support-01,
-      $support-01
-    );
+    @include button-theme(transparent, $support-01, $support-01, $support-01, $support-01);
 
     &:hover {
       color: $inverse-01;
@@ -155,13 +125,7 @@
   }
 
   .#{$prefix}--btn--danger--primary {
-    @include button-theme(
-      $support-01,
-      transparent,
-      $inverse-01,
-      darken($support-01, 10%),
-      $ui-01
-    );
+    @include button-theme($support-01, transparent, $inverse-01, darken($support-01, 10%), $ui-01);
 
     &:hover:disabled,
     &:focus:disabled {

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -26,7 +26,7 @@
       width: rem(200px);
       height: rem(240px);
       background-color: $ui-01;
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
 
       &:focus {
         @include focus-outline('border');
@@ -58,7 +58,7 @@
       align-items: center;
       justify-content: space-between;
       height: rem(48px);
-      background-color: $ui-03;
+      background-color: $ui-02;
       padding-left: 1rem;
       padding-right: 1rem;
 
@@ -130,7 +130,7 @@
       width: rem(50px);
       height: rem(50px);
       background-color: $ui-01;
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
       border-radius: 100%;
 
       .#{$prefix}--about__icon--img {
@@ -181,7 +181,7 @@
       &:hover,
       &:focus {
         .#{$prefix}--app-actions__button--icon {
-          fill: $brand-01;
+          fill: $hover-secondary;
         }
       }
 

diff --git a/src/components/checkbox/_checkbox.scss b/src/components/checkbox/_checkbox.scss
@@ -45,7 +45,7 @@
     top: calc(50% - 9px);
     height: rem(18px);
     width: rem(18px);
-    border: $checkbox-border-width solid $ui-05;
+    border: $checkbox-border-width solid $ui-04;
     background-color: $ui-01;
   }
 
@@ -116,7 +116,7 @@
     width: rem(18px);
     margin-right: $spacing-xs;
     background-color: $ui-01;
-    border: $checkbox-border-width solid $ui-05;
+    border: $checkbox-border-width solid $ui-04;
     min-width: rem(18px);
   }
 

diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
@@ -29,10 +29,10 @@
 
     &:focus {
       outline: 1px solid transparent;
-      box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
-      background-color: $brand-02;
+      // box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
+      background-color: $hover-primary;
       z-index: 2;
-      border-color: $brand-02;
+      border-color: $hover-primary;
       text-decoration: underline;
       color: $inverse-01;
     }
@@ -43,8 +43,8 @@
 
     &:hover,
     &:active {
-      background-color: $brand-02;
-      border-color: $brand-02;
+      background-color: $hover-primary;
+      border-color: $hover-primary;
       color: $inverse-01;
     }
   }
@@ -64,18 +64,22 @@
 
   .#{$prefix}--content-switcher-btn:not(:first-of-type) {
     border-left: $content-switcher-option-border;
+
+    &:hover {
+      border-left-color: $hover-primary;
+    }
   }
 
   .#{$prefix}--content-switcher-btn:first-of-type {
     border-bottom-left-radius: $content-switcher-border-radius;
     border-top-left-radius: $content-switcher-border-radius;
 
     &:hover {
-      border-color: $brand-02;
+      border-color: $hover-primary;
     }
 
     &:focus {
-      box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
+      // box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
       z-index: 0;
     }
   }
@@ -85,11 +89,11 @@
     border-bottom-right-radius: $content-switcher-border-radius;
 
     &:hover {
-      border-color: $brand-02;
+      border-color: $hover-primary;
     }
 
     &:focus {
-      box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
+      // box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
       z-index: 0;
     }
   }
@@ -100,8 +104,10 @@
     font-weight: 400;
     outline: 1px solid transparent;
 
-    &:hover {
-      border-color: $brand-01;
+    &:hover,
+    &:focus {
+      border-color: $hover-primary;
+      background-color: $hover-primary;
     }
   }
 }
diff --git a/src/components/copy-button/_copy-button.scss b/src/components/copy-button/_copy-button.scss
@@ -28,7 +28,7 @@
       @include typescale('omega');
       top: 1.1rem;
       padding: 0.5rem 1rem;
-      border: 1px solid $ui-04;
+      border: 1px solid $ui-03;
       color: $text-01;
       content: attr(data-feedback);
       transform: translateX(-50%);
@@ -40,8 +40,8 @@
       top: 0.85rem;
       width: 0.5rem;
       height: 0.5rem;
-      border-right: 1px solid $ui-04;
-      border-bottom: 1px solid $ui-04;
+      border-right: 1px solid $ui-03;
+      border-bottom: 1px solid $ui-03;
       content: '';
       transform: rotate(-135deg);
     }

diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss
@@ -37,20 +37,20 @@
 
     &:hover {
       > .#{$prefix}--toolbar-action__icon {
-        fill: $brand-01;
+        fill: $hover-secondary;
       }
     }
 
     &:focus {
       @include focus-outline;
       > .#{$prefix}--toolbar-action__icon {
-        fill: $brand-01;
+        fill: $hover-secondary;
       }
     }
 
     &:active {
       > .#{$prefix}--toolbar-action__icon {
-        fill: darken($brand-01, 5%);
+        fill: $hover-secondary;
       }
     }
 

diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -12,7 +12,7 @@
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $ui-03;
 
     thead {
       @include typescale('zeta');
@@ -50,24 +50,24 @@
     }
 
     th {
-      border-top: 1px solid $ui-04;
+      border-top: 1px solid $ui-03;
     }
 
     th,
     td {
-      border-top: 1px solid $ui-04;
+      border-top: 1px solid $ui-03;
       padding-left: $spacing-sm;
       vertical-align: middle;
       text-align: left;
 
       &:first-of-type {
         padding-left: rem(24px);
-        border-left: 1px solid $ui-04;
+        border-left: 1px solid $ui-03;
       }
 
       &:last-of-type {
         padding-right: $spacing-lg;
-        border-right: 1px solid $ui-04;
+        border-right: 1px solid $ui-03;
       }
     }
 
@@ -123,7 +123,7 @@
       }
 
       &:last-of-type {
-        border-right-color: $ui-04;
+        border-right-color: $ui-03;
       }
     }
   }

diff --git a/src/components/data-table-v2/_data-table-v2-expandable.scss b/src/components/data-table-v2/_data-table-v2-expandable.scss
@@ -34,7 +34,7 @@
 
     &:hover {
       > td {
-        background-color: rgba($brand-02, 0.1);
+        background-color: $hover-row;
       }
 
       > td:first-of-type {
@@ -51,7 +51,7 @@
 
       + tr[data-child-row] {
         > td {
-          background-color: rgba($brand-02, 0.1);
+          background-color: $hover-row;
           border-bottom: 1px solid $brand-01;
           border-right: 1px solid $brand-01;
         }
@@ -61,7 +61,7 @@
 
   tr.#{$prefix}--expandable-row--hover-v2 {
     > td {
-      background-color: rgba($brand-02, 0.1);
+      background-color: $hover-row;
       border-top: 1px solid $brand-01;
     }
 

diff --git a/src/components/data-table-v2/data-table-v2--pagination.html b/src/components/data-table-v2/data-table-v2--pagination.html
@@ -31,7 +31,7 @@ <h4 class="bx--data-table-v2-header">Table title</h4>
       </div>
     </div>
     <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm" role="search">
+      <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
         <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
           <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
           <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>