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 30, 2018 · 452a195 · 452a195
1 parent 897b2c1
commit 452a195
Show file tree

Hide file tree

Showing 68 changed files with 1,079 additions and 356 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 {
@@ -31,7 +31,7 @@
     }
 
     &:last-child {
-      border-bottom: 1px solid $ui-04;
+      border-bottom: 1px solid $ui-03;
     }
   }
 

diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss
@@ -29,7 +29,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 {
@@ -53,8 +53,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
@@ -36,11 +36,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 {

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
@@ -31,20 +31,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
@@ -30,7 +30,7 @@
 
     &:hover {
       > td {
-        background-color: rgba($brand-02, 0.1);
+        background-color: $hover-row;
       }
 
       > td:first-of-type {
@@ -47,7 +47,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;
         }
@@ -57,7 +57,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>

diff --git a/src/components/data-table-v2/data-table-v2.html b/src/components/data-table-v2/data-table-v2.html
@@ -32,7 +32,7 @@ <h4 class="bx--data-table-v2-header">Table title</h4>
     </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>

diff --git a/src/components/data-table/_data-table.scss b/src/components/data-table/_data-table.scss
@@ -22,7 +22,7 @@
     min-width: 500px;
     border-collapse: collapse;
     border-spacing: 0;
-    border: 2px solid $ui-04;
+    border: 2px solid $ui-03;
 
     td {
       @include reset;
@@ -67,7 +67,7 @@
       @include reset;
       border-collapse: collapse;
       width: auto;
-      border: 2px solid $ui-04;
+      border: 2px solid $ui-03;
 
       tr td:first-child,
       tr th:first-child {
@@ -115,10 +115,10 @@
       }
 
       &--even {
-        background-color: $ui-03;
+        background-color: $ui-02;
 
         & + .#{$prefix}--expandable-row {
-          background-color: $ui-03;
+          background-color: $ui-02;
         }
       }
     }