chore(components): update spacing tokens (#2093)

* chore(components): update spacing tokens And upgrade `carbon-elements`. Refs #1501. * test(grid): update snapshot * chore(breadcrumb): fix missing spacing token migration * chore(styles): update migration map for spacing tokens
carbon-design-system · Mar 15, 2019 · 9f42df0 · 9f42df0
1 parent 8a532c2
commit 9f42df0
Show file tree

Hide file tree

Showing 69 changed files with 1,294 additions and 1,767 deletions.
diff --git a/package.json b/package.json
@@ -47,8 +47,8 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.0.0",
-    "@carbon/elements": "^0.0.1-beta.0",
-    "@carbon/icons-handlebars": "^0.0.1-beta.0",
+    "@carbon/elements": "^0.0.1-beta.1",
+    "@carbon/icons-handlebars": "^0.0.1-beta.1",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",
     "@frctl/fractal": "^1.1.0",

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -224,15 +224,16 @@
 
   .#{$prefix}--accordion__content {
     // Transition property for when the accordion closes
-    transition: height motion(standard, productive) $transition--fast-02, padding motion(standard, productive) $transition--fast-02;
-    padding-left: $spacing-md;
+    transition: height motion(standard, productive) $transition--fast-02,
+      padding motion(standard, productive) $transition--fast-02;
+    padding-left: $carbon--spacing-05;
     padding-right: 25%;
     height: 0;
     visibility: hidden;
     opacity: 0;
 
     @include max-breakpoint('bp--xs--major') {
-      padding-right: $spacing-3xl;
+      padding-right: $carbon--spacing-09;
     }
 
     p {
@@ -246,13 +247,14 @@
     overflow: visible;
 
     .#{$prefix}--accordion__content {
-      padding-bottom: $spacing-lg;
+      padding-bottom: $carbon--spacing-06;
       padding-top: $spacing-xs;
       height: auto;
       visibility: visible;
       opacity: 1;
       // Transition property for when the accordion opens
-      transition: height motion(entrance, productive) $transition--fast-02, padding-top motion(entrance, productive) $transition--fast-02,
+      transition: height motion(entrance, productive) $transition--fast-02,
+        padding-top motion(entrance, productive) $transition--fast-02,
         padding-bottom motion(entrance, productive) $transition--fast-02;
 
       p {

diff --git a/src/components/breadcrumb/_breadcrumb.scss b/src/components/breadcrumb/_breadcrumb.scss
@@ -94,13 +94,13 @@
     position: relative;
     display: flex;
     align-items: center;
-    margin-right: $spacing-xs;
+    margin-right: $carbon--spacing-03;
   }
 
   .#{$prefix}--breadcrumb-item::after {
     content: '/';
     color: $text-01;
-    margin-left: $spacing-xs;
+    margin-left: $carbon--spacing-03;
   }
 
   .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -246,10 +246,10 @@
 
     &:hover,
     &:active {
-      color: $ibm-colors__blue-70;
+      color: $ibm-color__blue-70;
 
       .#{$prefix}--btn__icon {
-        fill: $ibm-colors__blue-70;
+        fill: $ibm-color__blue-70;
       }
     }
 
@@ -299,7 +299,7 @@
 
   .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary,
   .#{$prefix}--btn--tertiary + .#{$prefix}--btn--danger {
-    margin-left: $spacing-md;
+    margin-left: $carbon--spacing-05;
   }
 
   // Skeleton State

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
@@ -94,8 +94,8 @@
   &:disabled {
     cursor: not-allowed;
     color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
+    background: $ibm-color__gray-30;
+    border-color: $ibm-color__gray-30;
   }
 
   .#{$prefix}--btn__icon {
@@ -155,8 +155,8 @@
   &:disabled:hover,
   &:disabled:focus {
     color: $ui-04;
-    background: $ibm-colors__gray-30;
-    border-color: $ibm-colors__gray-30;
+    background: $ibm-color__gray-30;
+    border-color: $ibm-color__gray-30;
     text-decoration: none;
   }
 

diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
@@ -353,16 +353,16 @@
     border: none;
     max-width: rem(760px);
     min-width: rem(320px);
-    height: $spacing-2xl;
-    padding: 0 56px 0 $spacing-md;
+    height: $carbon--spacing-08;
+    padding: 0 56px 0 $carbon--spacing-05;
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
     display: flex;
     align-items: center;
     overflow-x: scroll;
     position: relative;
-    padding: 0 0 $spacing-md 0;
+    padding: 0 0 $carbon--spacing-05 0;
     height: rem(56px);
   }
 
@@ -385,7 +385,7 @@
   .#{$prefix}--snippet--multi {
     @include bx--snippet--x;
     border: none;
-    padding: $spacing-md;
+    padding: $carbon--spacing-05;
     min-width: rem(320px);
     max-width: 100%;
   }
@@ -435,8 +435,8 @@
     background-color: $ui-01;
     outline: none;
     padding: 0;
-    height: $spacing-2xl;
-    width: $spacing-2xl;
+    height: $carbon--spacing-08;
+    width: $carbon--spacing-08;
     overflow: visible;
 
     &:focus {
@@ -446,8 +446,8 @@
   }
 
   .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
-    height: $spacing-xl;
-    width: $spacing-xl;
+    height: $carbon--spacing-07;
+    width: $carbon--spacing-07;
     top: $spacing-xs;
     right: $spacing-xs;
   }
@@ -486,7 +486,7 @@
     right: $spacing-xs;
     bottom: $spacing-xs;
     padding: $spacing-xs;
-    padding-left: $spacing-md;
+    padding-left: $carbon--spacing-05;
     color: $text-01;
     background-color: $field-01;
   }

diff --git a/src/components/content-switcher/_content-switcher.scss b/src/components/content-switcher/_content-switcher.scss
@@ -131,7 +131,7 @@
     display: inline-block;
     width: 100%;
     height: rem(40px);
-    padding: $spacing-xs $spacing-md;
+    padding: $carbon--spacing-03 $carbon--spacing-05;
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
@@ -203,7 +203,7 @@
   }
 
   .#{$prefix}--content-switcher__icon + span {
-    margin-left: $spacing-xs;
+    margin-left: $carbon--spacing-03;
   }
 
   .#{$prefix}--content-switcher-btn:hover .#{$prefix}--content-switcher__icon,
@@ -218,7 +218,7 @@
 
     // TODO: replace with new disabled color token when finalized
     &:disabled {
-      background-color: $ibm-colors__gray-30;
+      background-color: $ibm-color__gray-30;
     }
   }
 

diff --git a/src/components/date-picker/_date-picker.scss b/src/components/date-picker/_date-picker.scss
@@ -505,7 +505,7 @@
       display: block;
       color: $support-01;
       font-weight: 400;
-      margin-top: $spacing-2xs;
+      margin-top: $carbon--spacing-02;
       overflow: visible;
 
       &::before {
@@ -545,7 +545,7 @@
     position: relative;
     height: rem(40px);
     max-width: rem(288px);
-    padding: 0 $spacing-md;
+    padding: 0 $carbon--spacing-05;
     background-color: $field-01;
     border: none;
     color: $text-01;
@@ -587,7 +587,7 @@
   }
 
   .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input {
-    padding-right: $spacing-3xl;
+    padding-right: $carbon--spacing-09;
   }
 
   .#{$prefix}--date-picker--range > .#{$prefix}--date-picker-container:first-child {
@@ -607,7 +607,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: $spacing-2xs $spacing-2xs $spacing-xs $spacing-2xs;
+    padding: $carbon--spacing-02 $carbon--spacing-02 $carbon--spacing-03 $carbon--spacing-02;
     width: rem(288px) !important;
     height: rem(336px);
     border-radius: 0;
@@ -631,7 +631,7 @@
     align-items: center;
     width: 100%;
     height: rem(40px);
-    margin-bottom: $spacing-2xs;
+    margin-bottom: $carbon--spacing-02;
   }
 
   .#{$prefix}--date-picker__month .flatpickr-prev-month,
@@ -669,7 +669,7 @@
 
   .#{$prefix}--date-picker__month .flatpickr-current-month .cur-month,
   .flatpickr-month .flatpickr-current-month .cur-month {
-    margin-right: $spacing-2xs;
+    margin-right: $carbon--spacing-02;
     color: $text-01;
   }
 
@@ -680,7 +680,7 @@
     background-color: $field-01;
     border: none;
     border-radius: 0;
-    padding: $spacing-2xs;
+    padding: $carbon--spacing-02;
     // Added in when upgraded to Flatpickr 4.5.5
     -moz-appearance: textfield; /* Firefox */
 

diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -338,9 +338,9 @@
     display: flex;
     align-items: center;
     height: rem(40px);
-    padding-top: $spacing-sm;
-    padding-bottom: $spacing-sm;
-    padding-left: $spacing-md;
+    padding-top: $carbon--spacing-04;
+    padding-bottom: $carbon--spacing-04;
+    padding-left: $carbon--spacing-05;
     padding-right: rem(42px); // 2rem + SVG width
     white-space: nowrap;
     overflow: hidden;
@@ -497,7 +497,7 @@
 
   .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text {
     display: inline-block;
-    padding: rem(7px) rem(32px) rem(7px) $spacing-sm; // TODO: spacing token
+    padding: rem(7px) rem(32px) rem(7px) $carbon--spacing-04; // TODO: spacing token
     height: rem(32px);
     overflow: visible;
     color: $text-01;
@@ -525,7 +525,7 @@
 
   .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-link {
     font-weight: normal;
-    margin-right: $spacing-sm;
+    margin-right: $carbon--spacing-04;
     margin-left: rem(10px);
 
     &:focus {

diff --git a/src/components/file-uploader/_file-uploader.scss b/src/components/file-uploader/_file-uploader.scss
@@ -114,7 +114,7 @@
   }
 
   .#{$prefix}--file--invalid {
-    margin-right: $spacing-xs;
+    margin-right: $carbon--spacing-03;
     fill: $support-01;
   }
 
@@ -124,7 +124,7 @@
     @include type-style('heading-01');
 
     color: $text-01;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $carbon--spacing-03;
   }
 
   .#{$prefix}--file-input {
@@ -142,13 +142,13 @@
     @include type-style('body-short-01');
 
     color: $text-02;
-    margin-bottom: $spacing-md;
+    margin-bottom: $carbon--spacing-05;
   }
 
   .#{$prefix}--file-container {
     display: block;
     width: 100%;
-    margin-top: $spacing-lg;
+    margin-top: $carbon--spacing-06;
   }
 
   .#{$prefix}--file__selected-file {
@@ -157,8 +157,8 @@
     justify-content: space-between;
     min-height: rem(40px);
     max-width: rem(300px);
-    margin-bottom: $spacing-xs;
-    padding: 0 $spacing-xs 0 $spacing-md;
+    margin-bottom: $carbon--spacing-03;
+    padding: 0 $carbon--spacing-03 0 $carbon--spacing-05;
     background-color: $field-01;
     overflow: hidden;
 
@@ -176,15 +176,15 @@
 
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
-    margin-bottom: $spacing-2xs;
+    margin-bottom: $carbon--spacing-02;
   }
 
   .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
     display: block;
     max-height: rem(200px);
     color: $support-01;
     font-weight: 400;
-    margin: 0 0 $spacing-xs 0;
+    margin: 0 0 $carbon--spacing-03 0;
     overflow: visible;
   }
 
@@ -194,7 +194,7 @@
     display: inline-block;
     align-items: center;
     color: $text-01;
-    margin-right: $spacing-md;
+    margin-right: $carbon--spacing-05;
     /*rtl:ignore*/
     direction: ltr;
     justify-content: flex-start; /*rtl:{flex-end}*/

diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -110,7 +110,7 @@
 @mixin form--x {
   .#{$prefix}--fieldset {
     @include reset;
-    margin-bottom: $spacing-xl;
+    margin-bottom: $carbon--spacing-07;
   }
 
   .#{$prefix}--form-item {
@@ -129,7 +129,7 @@
     font-weight: $input-label-weight;
     display: inline-block;
     vertical-align: baseline;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $carbon--spacing-03;
     line-height: rem(16px);
   }
 
@@ -178,7 +178,7 @@
   .#{$prefix}--form-requirement {
     @include reset;
     @include type-style('caption-01');
-    margin: $spacing-2xs 0 0;
+    margin: $carbon--spacing-02 0 0;
     max-height: 0;
     overflow: hidden;
     line-height: 1.5;
@@ -195,7 +195,7 @@
     color: $text-02;
     z-index: 0;
     opacity: 1;
-    margin-bottom: $spacing-xs;
+    margin-bottom: $carbon--spacing-03;
   }
 
   .#{$prefix}--label--disabled,