Merge branch 'master' into modal-esc-event-bubbling

carbon-design-system · Apr 16, 2019 · f183777 · f183777
2 parents 788367b + 4b55b79
commit f183777
Show file tree

Hide file tree

Showing 87 changed files with 191 additions and 8,570 deletions.
diff --git a/demo/js/components/CodeExample/code-example.scss b/demo/js/components/CodeExample/code-example.scss
@@ -1,5 +1,4 @@
 $temp-bg: #fff;
-$temp-text: $color__blue-90;
 
 .code-example {
   display: flex;
@@ -67,7 +66,6 @@ $temp-text: $color__blue-90;
   position: absolute;
   bottom: rem(2px);
   right: rem(2px);
-  color: $temp-text;
   background-color: $temp-bg;
   border: none;
   padding: 1rem;
@@ -79,7 +77,6 @@ $temp-text: $color__blue-90;
 
   &--icon {
     margin-left: 0.5rem;
-    fill: $temp-text;
     transition: $transition--base;
 
     &--rotated {

diff --git a/demo/js/components/ComponentExample/component-example.scss b/demo/js/components/ComponentExample/component-example.scss
@@ -2,7 +2,7 @@
   width: 100%;
   max-width: 100%;
   display: block;
-  color: $color__white;
+  color: $carbon--white-0;
 
   &__live {
     display: flex;
@@ -15,7 +15,7 @@
     margin: 1.5rem 0 0;
     background-color: $ui-02;
     color: $text-01;
-    border: 1px solid $color__gray-1;
+    border: solid $ui-03 1px;
 
     &--rendered {
       display: flex;
@@ -30,7 +30,6 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    color: $color__navy-gray-6;
     font-size: 0.75rem;
     padding: 0.5rem 1rem;
     z-index: z('overlay');

diff --git a/demo/js/components/ComponentExample/component-overrides.scss b/demo/js/components/ComponentExample/component-overrides.scss
@@ -49,7 +49,7 @@
   & .tabs .bx--tabs__nav--hidden {
     display: none;
 
-    @include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {
+    @include breakpoint('42rem') {
       display: flex;
       margin-top: 8px;
     }
@@ -138,7 +138,7 @@
   & .tabs .bx--tabs__nav--hidden {
     display: none;
 
-    @include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {
+    @include breakpoint('42rem') {
       display: flex;
     }
   }
@@ -155,7 +155,7 @@
     & > div {
       min-width: 100%;
 
-      @include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {
+      @include breakpoint('42rem') {
         min-width: 570px;
       }
     }
@@ -184,7 +184,7 @@
 .page-header + div > .bx--tabs {
   background-color: $field-01;
 
-  @include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {
+  @include breakpoint('42rem') {
     background-color: transparent;
   }
 }

diff --git a/demo/js/components/PageHeader/page-header.scss b/demo/js/components/PageHeader/page-header.scss
@@ -19,11 +19,7 @@
 }
 
 .page-header__label {
-  @if not feature-flag-enabled('components-x') {
-    @include typescale('zeta');
-  } @else {
-    @include type-style('label-01');
-  }
+  @include type-style('label-01');
   color: $text-02;
   font-weight: 400;
   margin: 4rem 0 1rem;
@@ -37,18 +33,12 @@
 }
 
 .page-header__title {
-  @if not feature-flag-enabled('components-x') {
-    @include typescale('mega');
-    @include letter-spacing;
-  } @else {
-    @include type-style('display-01');
-  }
+  @include type-style('display-01');
   color: $text-01;
   font-weight: 300;
   margin: -1.15rem 0 0 -3px;
   line-height: 1.25;
   padding: 0;
-  transition: $transition--base $bx--standard-easing;
 
   @include breakpoint('500px') {
     font-size: rem(52px);

diff --git a/demo/scss/_layout.scss b/demo/scss/_layout.scss
@@ -6,13 +6,8 @@
 @import '../../src/globals/scss/functions';
 
 body {
-  @if not feature-flag-enabled('components-x') {
-    font-family: 'ibm-plex-sans', Helvetica Neue, Arial, sans serif;
-  } @else {
-    @include type-style('body-short-01');
-  }
-  background-color: $color__white;
-  color: $color__blue-90;
+  @include type-style('body-short-01');
+  background-color: $carbon--white-0;
 
   hr {
     display: none;
@@ -75,15 +70,7 @@ body {
 }
 
 a {
-  @if not feature-flag-enabled('components-x') {
-    @include font-smoothing;
-  }
-  color: $color__blue-51;
   font-weight: 600;
-
-  &:hover {
-    color: $color__blue-40;
-  }
 }
 
 svg {

diff --git a/demo/scss/_markdown-page.scss b/demo/scss/_markdown-page.scss
@@ -3,12 +3,6 @@
     margin-top: 2rem;
   }
 
-  h3 {
-    @if not feature-flag-enabled('components-x') {
-      @include font-smoothing;
-    }
-  }
-
   video {
     margin: 1rem 0;
     max-width: 38rem;
@@ -60,9 +54,6 @@
     margin-bottom: 4rem;
 
     strong {
-      @if not feature-flag-enabled('components-x') {
-        @include letter-spacing;
-      }
       font-size: 1.125rem;
       line-height: 1.5;
       font-weight: 600;
@@ -91,11 +82,7 @@
   }
 
   p em {
-    @if not feature-flag-enabled('components-x') {
-      @include typescale('zeta');
-    } @else {
-      @include type-style('body-short-01');
-    }
+    @include type-style('body-short-01');
     color: $text-02;
     font-style: normal;
   }
@@ -175,11 +162,7 @@
 
     thead {
       th {
-        @if not feature-flag-enabled('components-x') {
-          @include typescale('zeta');
-        } @else {
-          @include type-style('body-short-01');
-        }
+        @include type-style('body-short-01');
         font-weight: 600;
         text-align: left;
         line-height: 1.25;
@@ -194,20 +177,10 @@
         border-bottom: 1px solid $ui-04;
 
         td {
-          @if not feature-flag-enabled('components-x') {
-            @include typescale('zeta');
-          } @else {
-            @include type-style('body-short-01');
-          }
+          @include type-style('body-short-01');
           padding: 1rem 3rem 1rem 0;
           line-height: 1.25;
 
-          strong {
-            @if not feature-flag-enabled('components-x') {
-              @include letter-spacing;
-            }
-          }
-
           &:first-child {
             font-weight: 600;
             white-space: nowrap;
@@ -249,14 +222,7 @@
 
   ul,
   ol {
-    @if not feature-flag-enabled('components-x') {
-      @include typescale('epsilon');
-    } @else {
-      @include type-style('heading-01');
-    }
-    @if not feature-flag-enabled('components-x') {
-      @include font-smoothing;
-    }
+    @include type-style('heading-01');
     margin-left: 1.5rem;
     margin-bottom: 1rem;
     line-height: 1.75;
@@ -358,11 +324,7 @@
   }
 
   blockquote + p strong {
-    @if not feature-flag-enabled('components-x') {
-      @include typescale('epsilon');
-    } @else {
-      @include type-style('heading-01');
-    }
+    @include type-style('heading-01');
     color: $brand-01;
   }
 
@@ -477,14 +439,11 @@
       margin-bottom: 3rem;
 
       strong {
-        @if not feature-flag-enabled('components-x') {
-          @include letter-spacing;
-        }
         position: absolute;
         top: 0;
         left: 0;
         z-index: 2;
-        color: $color__white;
+        color: $carbon--white-0;
         font-size: 1.625rem;
         top: 2.2rem;
         left: 1.625rem;
@@ -502,7 +461,6 @@
 
   blockquote + hr + p {
     margin-top: 1rem;
-    color: $color__navy-gray-6;
   }
 
   hr + p img {

diff --git a/demo/scss/_page.scss b/demo/scss/_page.scss
@@ -60,10 +60,6 @@ td {
   }
 
   .page__desc {
-    @if not feature-flag-enabled('components-x') {
-      @include font-smoothing;
-      @include letter-spacing;
-    }
     max-width: 38rem;
     color: $text-01;
     word-wrap: break-word;
@@ -84,11 +80,7 @@ td {
     }
 
     .page__divider-heading {
-      @if not feature-flag-enabled('components-x') {
-        @include typescale('zeta');
-      } @else {
-        @include type-style('body-short-01');
-      }
+      @include type-style('body-short-01');
       font-weight: 600;
       width: 100%;
       padding-bottom: 1rem;
@@ -100,12 +92,7 @@ td {
     }
 
     h1 {
-      @if not feature-flag-enabled('components-x') {
-        @include typescale('mega');
-        @include letter-spacing;
-      } @else {
-        @include type-style('heading-01');
-      }
+      @include type-style('heading-01');
       font-weight: 300;
       line-height: 1.25;
 
@@ -115,11 +102,7 @@ td {
     }
 
     h2 {
-      @if not feature-flag-enabled('components-x') {
-        @include typescale('beta');
-      } @else {
-        @include type-style('heading-02');
-      }
+      @include type-style('heading-02');
       position: relative;
       display: flex;
       align-items: center;
@@ -183,12 +166,7 @@ td {
     }
 
     h3 {
-      @if not feature-flag-enabled('components-x') {
-        @include typescale('delta');
-        @include letter-spacing;
-      } @else {
-        @include type-style('heading-02');
-      }
+      @include type-style('heading-02');
       color: $brand-01;
       padding: 4rem 0 1rem;
       font-weight: 600;

diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss
@@ -91,6 +91,7 @@ REASON: #{$reason}';
   position: absolute;
   top: rem(16px);
   right: rem(16px);
+  display: none; // Temporarily hide theme switcher
 }
 
 .bx--tile-container {
@@ -109,7 +110,6 @@ REASON: #{$reason}';
 }
 
 .demo--container__panel {
-  @include grid-container;
   width: 100%;
   max-width: 960px;
   height: 100%;
@@ -223,7 +223,7 @@ REASON: #{$reason}';
   }
 
   [class*='bx--col'] {
-    background-color: $color__gray-1;
+    background-color: #dfe3e6; // Old gray-1
 
     p {
       padding-top: 1rem;
@@ -262,15 +262,11 @@ a.bx--side-nav__link {
   margin-bottom: 2rem;
 }
 
-@if feature-flag-enabled('components-x') {
-  .component-example__live .bx--form-item.bx--checkbox-wrapper,
-  .demo--container__panel .bx--form-item.bx--checkbox-wrapper {
-    margin-bottom: 0;
-  }
+.component-example__live .bx--form-item.bx--checkbox-wrapper,
+.demo--container__panel .bx--form-item.bx--checkbox-wrapper {
+  margin-bottom: 0;
 }
 
-@if feature-flag-enabled('components-x') {
-  .component-variation__name {
-    @include type-style('heading-02');
-  }
+.component-variation__name {
+  @include type-style('heading-02');
 }