From 534397eb054eea646dc0d0c528d43e074aad73c6 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Sat, 30 May 2020 12:06:54 -0500
Subject: [PATCH 1/9] chore(project): update ci-check to include stylelint

---
 packages/cli/src/commands/ci-check.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/cli/src/commands/ci-check.js b/packages/cli/src/commands/ci-check.js
index 71f07fada1ab..d2e411cc8573 100644
--- a/packages/cli/src/commands/ci-check.js
+++ b/packages/cli/src/commands/ci-check.js
@@ -24,6 +24,7 @@ async function check(args, env) {
     'yarn format:diff',
     'yarn lint --quiet',
     'yarn lint:docs',
+    'yarn lint:styles',
     `yarn bundler check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'`,
     `cross-env BABEL_ENV=test yarn test --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,
     `cross-env BABEL_ENV=test yarn test:e2e --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,

From 02c59b5aa01c4965e618b57e76384b96f3823ec6 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 30 Jun 2020 13:38:38 -0700
Subject: [PATCH 2/9] chore(lint): start style linting

---
 packages/components/src/components/accordion/_accordion.scss  | 3 ++-
 .../stylelint-config-carbon/rules/limit-language-features.js  | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
index 2f85b1ef9d66..e8545d5dcec2 100644
--- a/packages/components/src/components/accordion/_accordion.scss
+++ b/packages/components/src/components/accordion/_accordion.scss
@@ -35,6 +35,7 @@
 
   .#{$prefix}--accordion__heading {
     @include button-reset;
+
     color: $text-01;
     display: flex;
     align-items: flex-start;
@@ -66,7 +67,7 @@
       outline: none;
     }
 
-    &:focus:before {
+    &:focus::before {
       @include focus-outline('outline-compat');
     }
   }
diff --git a/packages/stylelint-config-carbon/rules/limit-language-features.js b/packages/stylelint-config-carbon/rules/limit-language-features.js
index 719a77a1ab3e..99f8c0b187d3 100644
--- a/packages/stylelint-config-carbon/rules/limit-language-features.js
+++ b/packages/stylelint-config-carbon/rules/limit-language-features.js
@@ -35,7 +35,7 @@ module.exports = {
 
     // Time
     // Specify the minimum number of milliseconds for time values.
-    'time-min-milliseconds': 100,
+    'time-min-milliseconds': OFF,
 
     // Unit
     // Specify a blacklist of disallowed units.
@@ -49,7 +49,7 @@ module.exports = {
 
     // Value
     // Disallow vendor prefixes for values.
-    'value-no-vendor-prefix': true,
+    'value-no-vendor-prefix': OFF,
 
     // Custom property
     // Specify a pattern for custom properties.

From 2706682d68b3f3dd65334b6049ff90f29541f8e3 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 30 Jun 2020 14:55:44 -0700
Subject: [PATCH 3/9] chore(lint): lint through data-table core

---
 .../src/components/accordion/_accordion.scss  |  2 +-
 .../components/breadcrumb/_breadcrumb.scss    |  3 +
 .../src/components/button/_button.scss        |  5 +-
 .../src/components/checkbox/_checkbox.scss    | 14 ++--
 .../code-snippet/_code-snippet.scss           | 65 +++++++------------
 .../src/components/code-snippet/_mixins.scss  |  1 +
 .../components/copy-button/_copy-button.scss  | 19 +++---
 .../data-table/_data-table-action.scss        | 33 +++++-----
 .../data-table/_data-table-core.scss          | 40 +++++++-----
 .../rules/limit-language-features.js          |  2 +-
 10 files changed, 94 insertions(+), 90 deletions(-)

diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
index e8545d5dcec2..7d7d840b1792 100644
--- a/packages/components/src/components/accordion/_accordion.scss
+++ b/packages/components/src/components/accordion/_accordion.scss
@@ -157,7 +157,7 @@
     }
 
     .#{$prefix}--accordion__arrow {
-      /*rtl:ignore*/
+      /* rtl:ignore */
       transform: rotate(-90deg);
       fill: $ui-05;
     }
diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
index da73052d86f4..60433e092d56 100644
--- a/packages/components/src/components/breadcrumb/_breadcrumb.scss
+++ b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -19,7 +19,9 @@
   .#{$prefix}--breadcrumb {
     @include reset;
     @include type-style('body-short-01');
+
     display: inline;
+
     @include carbon--breakpoint(md) {
       display: flex;
       flex-wrap: wrap;
@@ -71,6 +73,7 @@
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;
+
     width: rem(100px);
     height: 1rem;
   }
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 8cd345ba36e3..0b215d367766 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -24,7 +24,8 @@
   }
 
   .#{$prefix}--btn-set > .#{$prefix}--btn {
-    max-width: rem(196px); // 196px from design kit
+    // 196px from design kit
+    max-width: rem(196px);
     width: 100%;
   }
 
@@ -120,6 +121,7 @@
       currentColor,
       $active-ui
     );
+
     padding: $button-padding-ghost;
 
     .#{$prefix}--btn__icon {
@@ -276,6 +278,7 @@
   // Skeleton State
   .#{$prefix}--btn.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(150px);
   }
 }
diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
index 196b9716ff78..411775e655b1 100644
--- a/packages/components/src/components/checkbox/_checkbox.scss
+++ b/packages/components/src/components/checkbox/_checkbox.scss
@@ -49,6 +49,7 @@
   .#{$prefix}--checkbox-label {
     @include reset;
     @include type-style('body-short-01');
+
     line-height: 1.5rem;
     position: relative;
     display: flex;
@@ -59,7 +60,8 @@
   }
 
   .#{$prefix}--checkbox-label-text {
-    padding-left: rem(6px); // Add extra spacing when label is present
+    // Add extra spacing when label is present
+    padding-left: rem(6px);
   }
 
   // Required because `$css--reset: true` cannot currently apply to this `::before` and `::after`
@@ -161,11 +163,6 @@
   // Disabled
   // ---------------------------------------------
 
-  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
-  [disabled] ~ _ {
-    font-size: inherit;
-  }
-
   .#{$prefix}--checkbox:disabled + .#{$prefix}--checkbox-label,
   .#{$prefix}--checkbox-label[data-contained-checkbox-disabled='true'] {
     cursor: not-allowed;
@@ -191,9 +188,12 @@
 
   .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(100px);
     height: $spacing-05;
-    margin: auto 0 auto rem(6px); // Add extra spacing when label is present
+
+    // Add extra spacing when label is present
+    margin: auto 0 auto rem(6px);
   }
 }
 
diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index ff4132a95a8d..23d2d9ee9e9f 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -55,12 +55,14 @@
 
     &::before {
       @include tooltip--caret;
+
       display: none;
     }
 
     .#{$prefix}--copy-btn__feedback {
-      box-sizing: content-box;
       @include tooltip--content('icon');
+
+      box-sizing: content-box;
       clip: auto;
       margin: auto;
       overflow: visible;
@@ -95,6 +97,7 @@
   // Single Line Snippet
   .#{$prefix}--snippet--single {
     @include bx--snippet;
+
     border: none;
     max-width: rem(760px);
     min-width: rem(320px);
@@ -117,8 +120,9 @@
   }
 
   .#{$prefix}--snippet--single pre {
-    white-space: nowrap;
     @include type-style('code-01');
+
+    white-space: nowrap;
     padding-right: $spacing-03;
   }
 
@@ -137,6 +141,7 @@
   // Multi Line Snippet
   .#{$prefix}--snippet--multi {
     @include bx--snippet;
+
     border: none;
     padding: $carbon--spacing-05;
     min-width: rem(320px);
@@ -200,6 +205,7 @@
 
   .#{$prefix}--snippet-button {
     @include reset;
+
     cursor: pointer;
     position: absolute;
     top: 0;
@@ -217,6 +223,7 @@
 
     &:focus {
       @include focus-outline('outline');
+
       outline-color: $focus;
     }
   }
@@ -238,7 +245,9 @@
 
   .#{$prefix}--btn--copy__feedback {
     @include type-style('body-short-01');
-    @include carbon--font-family('sans'); // Override one in code snippet
+    // Override one in code snippet
+    @include carbon--font-family('sans');
+
     z-index: z('overlay');
     font-weight: 400;
     left: inherit;
@@ -260,15 +269,16 @@
     position: absolute;
     top: 0;
     right: 0;
-    @include carbon--font-family(
-      'sans'
-    ); // Override inherited rule in code snippet
+
+    // Override inherited rule in code snippet
+    @include carbon--font-family('sans');
   }
 
   // Show more / less button
   button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
     @include type-style('body-short-01');
     @include carbon--font-family('sans');
+
     border: 0;
     display: inline-flex;
     align-items: center;
@@ -310,6 +320,7 @@
 
   .#{$prefix}--snippet-btn--expand:focus {
     @include focus-outline('outline');
+
     border-color: transparent;
   }
 
@@ -361,15 +372,15 @@
 
   .#{$prefix}--snippet.#{$prefix}--skeleton code {
     @include skeleton;
+
     width: 100%;
     height: 1rem;
     display: block;
   }
 
   .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    top: rem(
-      50.8px
-    ); // (The height of button) + (The height of the tooltip's triangle) + 4px
+    // (The height of button) + (The height of the tooltip's triangle) + 4px
+    top: rem(50.8px);
     left: 50%;
     right: auto;
 
@@ -377,7 +388,7 @@
       top: 0;
     }
 
-    &:after {
+    &::after {
       top: rem(-4px);
     }
   }
@@ -385,9 +396,8 @@
   .#{$prefix}--snippet--multi
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {
-    top: rem(
-      42.8px
-    ); // (The height of button) + (The height of the tooltip's triangle) + 4px
+    // (The height of button) + (The height of the tooltip's triangle) + 4px
+    top: rem(42.8px);
   }
 
   .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
@@ -406,12 +416,9 @@
     height: rem(56px);
   }
 
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
   .#{$prefix}--snippet.#{$prefix}--skeleton span {
     @include skeleton;
+
     width: 100%;
     height: 1rem;
     display: block;
@@ -434,30 +441,6 @@
     .#{$prefix}--snippet-container {
     padding-bottom: 0;
   }
-
-  .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
-    right: auto;
-  }
-
-  // Skeleton State
-  .#{$prefix}--snippet--code.#{$prefix}--skeleton {
-    height: rem(98px);
-  }
-
-  .#{$prefix}--snippet--terminal.#{$prefix}--skeleton {
-    height: rem(56px);
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton .#{$prefix}--snippet-container {
-    height: 100%;
-  }
-
-  .#{$prefix}--snippet.#{$prefix}--skeleton code {
-    @include skeleton;
-    width: 100%;
-    height: 1rem;
-    display: block;
-  }
 }
 
 @include exports('snippet') {
diff --git a/packages/components/src/components/code-snippet/_mixins.scss b/packages/components/src/components/code-snippet/_mixins.scss
index ba72b0da9a3a..23c2dcb2742b 100644
--- a/packages/components/src/components/code-snippet/_mixins.scss
+++ b/packages/components/src/components/code-snippet/_mixins.scss
@@ -12,6 +12,7 @@
 /// @group code-snippet
 @mixin bx--snippet {
   @include type-style('code-01');
+
   background: $snippet-background-color;
   border: 1px solid $snippet-border-color;
   position: relative;
diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss
index 4ed9938ae780..5ee8b089eac4 100644
--- a/packages/components/src/components/copy-button/_copy-button.scss
+++ b/packages/components/src/components/copy-button/_copy-button.scss
@@ -30,13 +30,10 @@
     top: 1.2rem;
     left: 50%;
 
-    &:focus {
-      border: 2px solid red;
-    }
-
-    &:before {
+    &::before {
       @include box-shadow;
       @include type-style('body-short-01');
+
       top: 1.1rem;
       padding: $spacing-02;
       color: $inverse-01;
@@ -49,7 +46,7 @@
       z-index: 2;
     }
 
-    &:after {
+    &::after {
       top: 0.85rem;
       width: 0.6rem;
       height: 0.6rem;
@@ -61,8 +58,8 @@
       z-index: 1;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       position: absolute;
       display: block;
       background: $inverse-02;
@@ -76,6 +73,7 @@
   // TODO: deprecate above styles
   .#{$prefix}--copy-btn {
     @include reset;
+
     position: relative;
     display: flex;
     justify-content: center;
@@ -93,12 +91,14 @@
 
     &::before {
       @include tooltip--caret;
+
       display: none;
     }
 
     .#{$prefix}--copy-btn__feedback {
-      box-sizing: content-box;
       @include tooltip--content('icon');
+
+      box-sizing: content-box;
       clip: auto;
       margin: auto;
       overflow: visible;
@@ -109,6 +109,7 @@
 
     &:focus {
       @include focus-outline('outline');
+
       outline-color: $focus;
     }
 
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
index a7c739b107b5..0a9829cc5848 100644
--- a/packages/components/src/components/data-table/_data-table-action.scss
+++ b/packages/components/src/components/data-table/_data-table-action.scss
@@ -21,7 +21,9 @@
     display: flex;
     height: $layout-04;
     overflow: hidden;
-    position: relative; //need for batch actions
+
+    // Need for batch actions
+    position: relative;
     width: 100%;
   }
 
@@ -40,7 +42,8 @@
   }
 
   .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
-    background-color: transparent; // For tool bar animation with (esp.) persistent search box
+    // For toolbar animation with (esp.) persistent search box
+    background-color: transparent;
   }
 
   //-------------------------------------------------
@@ -116,7 +119,7 @@
     height: $layout-04;
     width: $layout-04;
 
-    &:before {
+    &::before {
       top: 2px;
       height: calc(100% - 4px);
       background-color: $hover-ui;
@@ -155,6 +158,7 @@
     .#{$prefix}--search
     .#{$prefix}--search-input:focus {
     @include focus-outline('outline');
+
     box-shadow: inset 0 0 0 2px $focus;
   }
 
@@ -200,7 +204,7 @@
   .#{$prefix}--toolbar-search-container-active
     .#{$prefix}--search
     .#{$prefix}--search-close:hover {
-    border: none; //to-do: is there a spec for close button on hover?
+    border: none;
     background-color: transparent;
   }
 
@@ -214,6 +218,7 @@
   //-------------------------------------------------
   .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
     @include button-reset;
+
     display: flex;
     cursor: pointer;
     height: $layout-04;
@@ -225,6 +230,7 @@
   // DEPRECATED prefer .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action instead
   .#{$prefix}--toolbar-action {
     @include button-reset;
+
     display: flex;
     cursor: pointer;
     height: $layout-04;
@@ -391,6 +397,7 @@
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn {
+    min-width: 0;
     color: $text-04;
     padding: $button-padding-ghost;
   }
@@ -406,17 +413,14 @@
   }
 
   .#{$prefix}--batch-download {
-    padding: rem(1px); //makes it smaller to match other icons
+    //makes it smaller to match other icons
+    padding: rem(1px);
   }
 
-  //override btn styles
-  .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::before,
+  // Override btn styles
   .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::before,
   .#{$prefix}--action-list .#{$prefix}--btn--primary::before,
-  .#{$prefix}--action-list .#{$prefix}--btn--primary::before,
-  .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::after,
   .#{$prefix}--action-list .#{$prefix}--btn--primary:focus::after,
-  .#{$prefix}--action-list .#{$prefix}--btn--primary::after,
   .#{$prefix}--action-list .#{$prefix}--btn--primary::after {
     display: none;
   }
@@ -426,10 +430,6 @@
     outline-offset: rem(-2px);
   }
 
-  .#{$prefix}--action-list .#{$prefix}--btn {
-    min-width: 0;
-  }
-
   // cancel btn pseudo element
   .#{$prefix}--action-list
     .#{$prefix}--btn--primary:nth-child(3):hover
@@ -444,7 +444,8 @@
     display: block;
     position: absolute;
     opacity: 1;
-    top: rem(15px); //visually 16px spacing is 1px too low
+    //visually 16px spacing is 1px too low
+    top: rem(15px);
     left: 0;
     height: $layout-01;
     width: rem(1px);
@@ -547,6 +548,7 @@
       .#{$prefix}--search
       .#{$prefix}--search-input:focus {
       @include focus-outline('outline');
+
       background: $hover-field;
     }
 
@@ -569,6 +571,7 @@
       .#{$prefix}--search
       .#{$prefix}--search-magnifier:hover {
       @include focus-outline('reset');
+
       background: transparent;
     }
   }
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index f92f2daa4805..6d51cad8a279 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -20,7 +20,8 @@
   .#{$prefix}--data-table-container {
     min-width: rem(500px);
     overflow-x: auto;
-    padding-top: $spacing-01; // allow space for focus styles
+    // Allow space for focus styles
+    padding-top: $spacing-01;
   }
 
   //----------------------------------------------------------------------------
@@ -33,11 +34,13 @@
 
   .#{$prefix}--data-table-header__title {
     @include type-style('productive-heading-03');
+
     color: $text-01;
   }
 
   .#{$prefix}--data-table-header__description {
     @include type-style('body-short-01');
+
     color: $text-02;
   }
 
@@ -52,11 +55,13 @@
 
   .#{$prefix}--data-table thead {
     @include type-style('productive-heading-01');
+
     background-color: $ui-03;
   }
 
   .#{$prefix}--data-table tbody {
     @include type-style('body-short-01');
+
     background-color: $ui-01;
     width: 100%;
   }
@@ -129,7 +134,8 @@
 
   @supports (-moz-appearance: none) {
     .#{$prefix}--data-table td {
-      background-clip: padding-box; // fix to show borders in ff
+      // Fix to show borders in ff
+      background-clip: padding-box;
     }
   }
 
@@ -190,9 +196,8 @@
     svg {
     margin-right: $spacing-03;
     position: relative;
-    top: rem(
-      3px
-    ); //used to center svg without setting display flex //display block needed for overflow text truncation
+    // Used to center svg without setting display flex //display block needed for overflow text truncation
+    top: rem(3px);
   }
 
   .#{$prefix}--data-table .#{$prefix}--overflow-menu,
@@ -270,9 +275,8 @@
     background: $ui-03;
     padding-left: $spacing-05;
     padding-right: $spacing-05;
-    width: rem(
-      44px
-    ); // 16px padding left + 8px padding right + 20px checkbox width
+    // 16px padding left + 8px padding right + 20px checkbox width
+    width: rem(44px);
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
@@ -304,16 +308,18 @@
     color: $text-01;
     background-color: $selected-ui;
     border-top: 1px solid $selected-ui;
-    border-bottom: 1px solid $active-ui; //bottom border acts as separator from other rows
+    // Bottom border acts as separator from other rows
+    border-bottom: 1px solid $active-ui;
   }
 
-  // first row
+  // First row
   .#{$prefix}--data-table--zebra
     tbody
     tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected
     td,
   tr.#{$prefix}--data-table--selected:first-of-type td {
-    border-top: 1px solid $active-ui; //top border acts as separator from thead
+    // Top border acts as separator from thead
+    border-top: 1px solid $active-ui;
   }
 
   // last row + zebra select last
@@ -326,7 +332,8 @@
     tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected
     td,
   tr.#{$prefix}--data-table--selected:last-of-type td {
-    border-top: 1px solid $selected-ui; // doesn't need separators
+    // Doesn't need separators
+    border-top: 1px solid $selected-ui;
     border-bottom: 1px solid $selected-ui;
   }
 
@@ -398,7 +405,8 @@
   .#{$prefix}--data-table.#{$prefix}--data-table--compact
     .#{$prefix}--table-column-checkbox
     .#{$prefix}--checkbox-label {
-    min-height: rem(23px); //24px row - 1px border
+    // 24px row - 1px border
+    min-height: rem(23px);
     height: rem(23px);
   }
 
@@ -494,7 +502,8 @@
       top: 0;
       width: 100%;
       overflow: scroll;
-      -ms-overflow-style: none; //hides ie scrollbar
+      // Hides ie scrollbar
+      -ms-overflow-style: none;
       will-change: transform;
     }
 
@@ -505,7 +514,8 @@
     tbody {
       flex-direction: column;
       overflow-x: scroll;
-      -ms-overflow-style: none; //hides ie scrollbar
+      // Hides ie scrollbar
+      -ms-overflow-style: none;
       will-change: transform;
     }
 
diff --git a/packages/stylelint-config-carbon/rules/limit-language-features.js b/packages/stylelint-config-carbon/rules/limit-language-features.js
index 99f8c0b187d3..581d6ea17092 100644
--- a/packages/stylelint-config-carbon/rules/limit-language-features.js
+++ b/packages/stylelint-config-carbon/rules/limit-language-features.js
@@ -170,6 +170,6 @@ module.exports = {
       },
     ],
     // Disallow unknown animations.
-    'no-unknown-animations': true,
+    'no-unknown-animations': OFF,
   },
 };

From 33dc5ad1154654fd02aadb29bfffbb19a5dd4580 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 1 Jul 2020 14:33:30 -0700
Subject: [PATCH 4/9] chore(lint): fix style lint errors

---
 .../data-table/_data-table-expandable.scss    | 34 ++++++-----
 .../_data-table-inline-edit-cell.scss         | 14 ++---
 .../data-table/_data-table-inline-edit.scss   |  1 +
 .../data-table/_data-table-skeleton.scss      |  3 +
 .../data-table/_data-table-sort.scss          |  2 +-
 .../components/date-picker/_date-picker.scss  |  2 +
 .../src/components/dropdown/_dropdown.scss    | 36 +++++++-----
 .../file-uploader/_file-uploader.scss         | 10 +++-
 .../components/src/components/form/_form.scss |  2 +-
 .../inline-loading/_inline-loading.scss       |  3 +-
 .../components/src/components/link/_link.scss |  2 +
 .../src/components/list-box/_list-box.scss    | 49 ++++++++++------
 .../components/src/components/list/_list.scss |  9 ++-
 .../src/components/loading/_loading.scss      |  1 +
 .../src/components/loading/_mixins.scss       |  2 +-
 .../src/components/modal/_modal.scss          | 21 +++----
 .../notification/_inline-notification.scss    | 36 ++++++------
 .../notification/_toast-notification.scss     |  2 +
 .../number-input/_number-input.scss           | 30 ++++++----
 .../overflow-menu/_overflow-menu.scss         |  8 ++-
 .../pagination-nav/_pagination-nav.scss       | 12 ++--
 .../components/pagination/_pagination.scss    |  4 ++
 .../_progress-indicator.scss                  |  7 +++
 .../radio-button/_radio-button.scss           | 11 ++--
 .../src/components/search/_search.scss        | 17 ++++--
 .../src/components/select/_select.scss        | 23 ++++----
 .../components/skeleton/_skeleton-icon.scss   |  1 +
 .../skeleton/_skeleton-placeholder.scss       |  1 +
 .../components/skeleton/_skeleton-text.scss   |  1 +
 .../src/components/slider/_slider.scss        | 12 ++--
 .../components/structured-list/_mixins.scss   | 12 ++--
 .../structured-list/_structured-list.scss     | 25 +++-----
 .../components/src/components/tabs/_tabs.scss | 46 +++++++--------
 .../components/src/components/tag/_tag.scss   | 11 ++--
 .../src/components/text-area/_text-area.scss  |  2 +
 .../components/text-input/_text-input.scss    |  3 +
 .../components/src/components/tile/_tile.scss | 15 ++---
 .../components/time-picker/_time-picker.scss  |  1 +
 .../src/components/toggle/_toggle.scss        | 58 +++++++++----------
 39 files changed, 294 insertions(+), 235 deletions(-)

diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
index 4fd88e227a37..d807af0b9d99 100644
--- a/packages/components/src/components/data-table/_data-table-expandable.scss
+++ b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -63,6 +63,7 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
+    transition: all $duration--fast-02 motion(standard, productive);
     border-bottom: 1px solid $ui-03;
   }
 
@@ -87,7 +88,8 @@
   }
 
   .#{$prefix}--parent-row.#{$prefix}--expandable-row > td:first-of-type {
-    box-shadow: none; // first td doesn't have a visible border
+    // First td doesn't have a visible border
+    box-shadow: none;
   }
 
   //----------------------------------------------------------------------------
@@ -100,10 +102,6 @@
       background-color $duration--fast-02 motion(standard, productive);
   }
 
-  tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
-    transition: all $duration--fast-02 motion(standard, productive);
-  }
-
   // hovering on collapsed parent
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):first-of-type:hover
     td {
@@ -120,10 +118,11 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover td:first-of-type {
-    border-bottom: 1px solid $hover-ui; // first td doesn't have a visible border
+    // First td doesn't have a visible border
+    border-bottom: 1px solid $hover-ui;
   }
 
-  // child row when hovering on expanded parent
+  // Child row when hovering on expanded parent
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
     + tr[data-child-row]
     td {
@@ -151,7 +150,8 @@
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row.#{$prefix}--expandable-row--hover
     td:first-of-type {
-    border-bottom: 1px solid transparent; // first parent td doesnt have visible bottom border
+    // First parent td doesnt have visible bottom border
+    border-bottom: 1px solid transparent;
   }
 
   //----------------------------------------------------------------------------
@@ -187,6 +187,7 @@
 
   .#{$prefix}--table-expand__button {
     @include button-reset('false');
+
     height: rem(16px);
     vertical-align: inherit;
   }
@@ -196,7 +197,7 @@
   }
 
   .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
-    box-shadow: inset 0px 0px 0px 1px $focus;
+    box-shadow: inset 0 0 0 1px $focus;
   }
 
   .#{$prefix}--table-expand__svg {
@@ -281,7 +282,7 @@
   //----------------------------------------------------------------------------
   // Selected
   //----------------------------------------------------------------------------
-  // parent collapsed
+  // Parent collapsed
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:first-of-type td {
     background: $selected-ui;
     border-top: 1px solid $active-ui;
@@ -302,7 +303,7 @@
     box-shadow: 0 1px $ui-03;
   }
 
-  // parent collapsed hover
+  // Parent collapsed hover
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(.#{$prefix}--expandable-row):hover
     td {
     background: $hover-selected-ui;
@@ -311,16 +312,17 @@
     box-shadow: 0 1px $hover-selected-ui;
   }
 
-  // parent expanded
+  // Parent expanded
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
     td,
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
     td:first-of-type {
     border-bottom: 1px solid transparent;
-    box-shadow: 0 1px $selected-ui; //no visible border when expanded
+    // No visible border when expanded
+    box-shadow: 0 1px $selected-ui;
   }
 
-  // parent expanded hover
+  // Parent expanded hover
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     td,
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
@@ -335,7 +337,7 @@
     box-shadow: 0 1px $hover-selected-ui;
   }
 
-  // child row expanded
+  // Child row expanded
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row
     + tr[data-child-row]
     td {
@@ -353,7 +355,7 @@
     padding-bottom: rem(24px);
   }
 
-  // child row expanded hover
+  // Child row expanded hover
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     + tr[data-child-row]
     td,
diff --git a/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss b/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss
index 533a9d06905e..4de5f4bca14b 100644
--- a/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss
+++ b/packages/components/src/components/data-table/_data-table-inline-edit-cell.scss
@@ -124,6 +124,7 @@
 
   .#{$prefix}--data-table-cell__edit {
     @include button-reset(false);
+
     opacity: 0;
   }
 
@@ -273,22 +274,21 @@
   // Status - Error ------------------------------------------------------------
 
   .#{$prefix}--data-table__status--error {
+    position: relative;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     fill: $support-01;
     width: 100%;
     height: 100%;
+    // Specify outline on child SVG node instead
+    outline: none;
   }
 
   .#{$prefix}--data-table__edit-field--error {
     border-bottom: 2px solid $support-01;
   }
 
-  .#{$prefix}--data-table__status--error {
-    position: relative;
-  }
-
   .#{$prefix}--data-table__error-text {
     @include box-shadow;
 
@@ -296,7 +296,6 @@
     top: rem(-1px);
     right: -1rem;
     color: $text-error;
-    // TODO: sync with caption sizes
     font-size: rem(12px);
     background-color: $inverse-01;
     padding: 1rem;
@@ -329,11 +328,6 @@
     z-index: 1000;
   }
 
-  .#{$prefix}--data-table__status--error {
-    // Specify outline on child SVG node instead
-    outline: none;
-  }
-
   .#{$prefix}--data-table__status--error:focus
     .#{$prefix}--data-table__error-text {
     box-shadow: 0 0 0 1px $brand-01;
diff --git a/packages/components/src/components/data-table/_data-table-inline-edit.scss b/packages/components/src/components/data-table/_data-table-inline-edit.scss
index 45af9355a100..a03e5963186f 100644
--- a/packages/components/src/components/data-table/_data-table-inline-edit.scss
+++ b/packages/components/src/components/data-table/_data-table-inline-edit.scss
@@ -35,6 +35,7 @@
 
     &:focus {
       @include focus-outline;
+
       padding: $spacing-01;
 
       .#{$prefix}--inline-edit-label__icon {
diff --git a/packages/components/src/components/data-table/_data-table-skeleton.scss b/packages/components/src/components/data-table/_data-table-skeleton.scss
index 1af798016d11..8c9768f8aaf1 100644
--- a/packages/components/src/components/data-table/_data-table-skeleton.scss
+++ b/packages/components/src/components/data-table/_data-table-skeleton.scss
@@ -19,6 +19,7 @@
     th span,
     td span {
       @include skeleton;
+
       width: rem(64px);
       height: rem(16px);
       display: block;
@@ -52,6 +53,7 @@
   .#{$prefix}--data-table-container.#{$prefix}--skeleton
     .#{$prefix}--data-table-header__title {
     @include skeleton;
+
     width: rem(120px);
     height: rem(24px);
   }
@@ -59,6 +61,7 @@
   .#{$prefix}--data-table-container.#{$prefix}--skeleton
     .#{$prefix}--data-table-header__description {
     @include skeleton;
+
     margin-top: $spacing-03;
     width: rem(160px);
     height: rem(16px);
diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss
index 98f6d036786c..120f89f1810b 100644
--- a/packages/components/src/components/data-table/_data-table-sort.scss
+++ b/packages/components/src/components/data-table/_data-table-sort.scss
@@ -93,7 +93,7 @@
   .#{$prefix}--table-sort.#{$prefix}--table-sort--active
     .#{$prefix}--table-sort__icon {
     display: block;
-    opacity: 1; //changes opacity when th is active (see line 125)
+    opacity: 1;
   }
 
   .#{$prefix}--table-sort--ascending .#{$prefix}--table-sort__icon {
diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss
index 72c27851c679..c0c9f9714013 100644
--- a/packages/components/src/components/date-picker/_date-picker.scss
+++ b/packages/components/src/components/date-picker/_date-picker.scss
@@ -162,6 +162,7 @@
   .#{$prefix}--date-picker.#{$prefix}--skeleton input,
   .#{$prefix}--date-picker__input.#{$prefix}--skeleton {
     @include skeleton;
+
     width: 100%;
 
     &::placeholder {
@@ -171,6 +172,7 @@
 
   .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label {
     @include skeleton;
+
     width: rem(75px);
     height: rem(14px);
   }
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index 1c2b2b014309..76b4eab21882 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/packages/components/src/components/dropdown/_dropdown.scss
@@ -45,6 +45,7 @@
   .#{$prefix}--dropdown {
     @include reset;
     @include focus-outline('reset');
+
     position: relative;
     list-style: none;
     display: block;
@@ -66,6 +67,7 @@
   // Menu's triggering element updated to button with Downshift v5 upgrade
   .#{$prefix}--dropdown .#{$prefix}--list-box__field {
     @include button-reset;
+
     text-align: left;
     padding: 0 rem(48px) 0 rem(16px);
   }
@@ -96,7 +98,7 @@
     @include focus-outline('invalid');
 
     .#{$prefix}--dropdown-text {
-      padding-right: rem(56px); // TODO: spacing token
+      padding-right: rem(56px);
     }
 
     + .#{$prefix}--form-requirement {
@@ -109,7 +111,7 @@
   .#{$prefix}--dropdown__invalid-icon {
     position: absolute;
     top: 50%;
-    right: rem(40px); // TODO: spacing token
+    right: $spacing-08;
     fill: $support-01;
     transform: translateY(-50%);
   }
@@ -124,6 +126,10 @@
 
   .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
     @include box-shadow;
+
+    // 40px item height * 5.5 items shown
+    max-height: rem(220px);
+    transition: max-height $duration--fast-02 motion(entrance, productive);
   }
 
   .#{$prefix}--dropdown--light {
@@ -159,10 +165,13 @@
 
   .#{$prefix}--dropdown-text {
     @include type-style('body-short-01');
+
     display: block;
-    height: calc(100% + 1px); // Account for the border in `.bx--dropdown`
+    // Account for the border in `.bx--dropdown`
+    height: calc(100% + 1px);
     padding-left: $carbon--spacing-05;
-    padding-right: rem(42px); // 2rem + SVG width
+    // 2rem + SVG width
+    padding-right: rem(42px);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -173,6 +182,7 @@
     @include focus-outline('reset');
     @include box-shadow;
     @include type-style('body-short-01');
+
     background-color: $ui-01;
     display: flex;
     flex-direction: column;
@@ -227,12 +237,13 @@
 
   .#{$prefix}--dropdown-link {
     @include focus-outline('reset');
+
     display: block;
     height: rem(40px);
     color: $text-02;
     text-decoration: none;
     font-weight: normal;
-    line-height: rem(16px);
+    line-height: 1rem;
     padding: rem(11px) 0;
     margin: 0 $carbon--spacing-05;
     border: 1px solid transparent;
@@ -266,6 +277,7 @@
   .#{$prefix}--dropdown--focused,
   .#{$prefix}--dropdown-link:focus {
     @include focus-outline('outline');
+
     margin: 0;
     padding: rem(11px) rem(16px);
   }
@@ -284,6 +296,7 @@
     .#{$prefix}--dropdown--focused:focus {
     // copied from default focus styles
     @include focus-outline('outline');
+
     margin: 0;
     padding: rem(11px) rem(16px);
   }
@@ -311,19 +324,16 @@
     transform: rotate(-180deg);
   }
 
-  .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
-    max-height: rem(220px); // 40px item height * 5.5 items shown
-    transition: max-height $duration--fast-02 motion(entrance, productive);
-  }
-
   .#{$prefix}--dropdown--open.#{$prefix}--dropdown--xl
     .#{$prefix}--dropdown-list {
-    max-height: rem(264px); // 48px item height * 5.5 items shown
+    // 48px item height * 5.5 items shown
+    max-height: rem(264px);
   }
 
   .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm
     .#{$prefix}--dropdown-list {
-    max-height: rem(176px); // 32px item height * 5.5 items shown
+    // 32px item height * 5.5 items shown
+    max-height: rem(176px);
   }
 
   .#{$prefix}--dropdown--open .#{$prefix}--dropdown-item {
@@ -392,7 +402,7 @@
 
   .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text {
     display: inline-block;
-    padding: rem(7px) rem(32px) rem(7px) $carbon--spacing-04; // TODO: spacing token
+    padding: rem(7px) $carbon--spacing-07 rem(7px) $carbon--spacing-04;
     height: rem(32px);
     overflow: visible;
     color: $text-01;
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
index 7d41fd638d85..f374405a0f22 100644
--- a/packages/components/src/components/file-uploader/_file-uploader.scss
+++ b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -31,6 +31,7 @@
   .#{$prefix}--file--label {
     @include reset;
     @include type-style('productive-heading-01');
+
     color: $text-01;
     margin-bottom: $carbon--spacing-03;
   }
@@ -54,7 +55,6 @@
     width: 100%;
     max-width: rem(320px);
     color: $link-01;
-    outline: none;
     transition: $duration--fast-02 motion(standard, productive);
     cursor: pointer;
     outline: 2px solid transparent;
@@ -133,8 +133,7 @@
     }
 
     .#{$prefix}--form-requirement {
-      grid-column-start: 1;
-      grid-column-end: -1;
+      grid-column: 1 / -1;
       max-height: none;
       margin: 0;
     }
@@ -152,6 +151,7 @@
 
     .#{$prefix}--file-filename {
       @include type-style('body-short-01');
+
       margin-left: $carbon--spacing-05;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -170,6 +170,7 @@
   // TODO: deprecate this block
   .#{$prefix}--file__selected-file--invalid__wrapper {
     @include focus-outline('invalid');
+
     outline-width: 1px;
     background-color: $field-01;
     max-width: rem(320px);
@@ -178,6 +179,7 @@
 
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
+
     padding: $carbon--spacing-05 0;
   }
 
@@ -191,6 +193,7 @@
   .#{$prefix}--file__selected-file--invalid
     .#{$prefix}--form-requirement__supplement {
     @include type-style('label-01');
+
     padding: 0 $carbon--spacing-05;
   }
 
@@ -202,6 +205,7 @@
   // TODO: deprecate
   .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
     @include type-style('caption-01');
+
     display: block;
     max-height: rem(200px);
     color: $text-error;
diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
index e2e564711fe3..cde49e83b617 100644
--- a/packages/components/src/components/form/_form.scss
+++ b/packages/components/src/components/form/_form.scss
@@ -42,7 +42,7 @@
     display: inline-block;
     vertical-align: baseline;
     margin-bottom: $carbon--spacing-03;
-    line-height: rem(16px);
+    line-height: 1rem;
   }
 
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {
diff --git a/packages/components/src/components/inline-loading/_inline-loading.scss b/packages/components/src/components/inline-loading/_inline-loading.scss
index c9612ed59e20..bdf1eaf54483 100644
--- a/packages/components/src/components/inline-loading/_inline-loading.scss
+++ b/packages/components/src/components/inline-loading/_inline-loading.scss
@@ -33,6 +33,7 @@
 
   .#{$prefix}--inline-loading__text {
     @include type-style('label-01');
+
     color: $text-02;
   }
 
@@ -68,7 +69,7 @@
     stroke-dasharray: 12;
     stroke-dashoffset: 12;
     animation-name: stroke;
-    animation-duration: 0.25s;
+    animation-duration: 250ms;
     animation-fill-mode: forwards;
   }
 
diff --git a/packages/components/src/components/link/_link.scss b/packages/components/src/components/link/_link.scss
index 6c3e27b066c0..00992be0e98a 100644
--- a/packages/components/src/components/link/_link.scss
+++ b/packages/components/src/components/link/_link.scss
@@ -24,6 +24,7 @@
   .#{$prefix}--link {
     @include reset;
     @include type-style('body-short-01');
+
     color: $link-01;
     text-decoration: none;
     outline: none;
@@ -58,6 +59,7 @@
   .#{$prefix}--link--disabled:hover {
     @include reset;
     @include type-style('body-short-01');
+
     display: inline;
     color: $disabled-02;
     font-weight: 400;
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 4b99d3ecdaa3..b5f32d2f4487 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -69,6 +69,7 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box {
     @include reset;
+
     position: relative;
     width: $list-box-width;
     height: rem(40px);
@@ -264,11 +265,13 @@ $list-box-menu-width: rem(300px);
   // The field we use for input, showing selection, etc.
   .#{$prefix}--list-box__field {
     @include button-reset;
+
     position: relative;
     display: inline-flex;
     align-items: center;
     vertical-align: top;
-    height: calc(100% + 1px); // Account for the border in `.bx--list-box`
+    // Account for the border in `.bx--list-box`
+    height: calc(100% + 1px);
     padding: 0 $carbon--spacing-09 0 $carbon--spacing-05;
     cursor: pointer;
     outline: none;
@@ -295,14 +298,16 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input {
-    padding-right: rem(98px); // to account for clear input button outline
+    // to account for clear input button outline
+    padding-right: rem(98px);
   }
 
   .#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input
     + .#{$prefix}--list-box__invalid-icon {
-    right: rem(66px); // to account for clear input button outline
+    // to account for clear input button outline
+    right: rem(66px);
   }
 
   // empty input field
@@ -321,12 +326,14 @@ $list-box-menu-width: rem(300px);
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input--empty
     + .#{$prefix}--list-box__invalid-icon {
-    right: rem(40px); // to account for clear input button outline
+    // to account for clear input button outline
+    right: rem(40px);
   }
 
   // Label for a `list-box__field`
   .#{$prefix}--list-box__label {
     @include type-style('body-short-01');
+
     color: $text-01;
     user-select: none;
     text-overflow: ellipsis;
@@ -358,8 +365,8 @@ $list-box-menu-width: rem(300px);
   // Selection indicator for a `list-box__field`
   .#{$prefix}--list-box__selection {
     position: absolute;
-    right: rem(33px); // to preserve .5rem space between icons according to spec
-    // top/transform used to center the combobox clear selection icon in IE11
+    /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
+    right: rem(33px);
     top: 50%;
     transform: translateY(-50%);
     display: flex;
@@ -376,12 +383,6 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  // reset multiselect selection counter positioning
-  .#{$prefix}--list-box__selection--multi {
-    top: auto;
-    transform: none;
-  }
-
   .#{$prefix}--list-box__selection > svg {
     fill: $icon-02;
   }
@@ -393,20 +394,23 @@ $list-box-menu-width: rem(300px);
   // Modifier for a selection to show that multiple selections have been made
   .#{$prefix}--list-box__selection--multi {
     @include type-style('label-01');
+
     position: static;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0;
     background-color: $inverse-02;
     height: rem(24px);
     width: auto;
     color: $inverse-01;
     line-height: 0;
     padding: rem(8px);
-    padding-right: rem(2px); // Align with hover circle of X button
+    // Align with hover circle of X button
+    padding-right: rem(2px);
     margin-right: rem(10px);
     border-radius: rem(12px);
+    top: auto;
+    transform: none;
   }
 
   .#{$prefix}--list-box__selection--multi > svg {
@@ -428,7 +432,7 @@ $list-box-menu-width: rem(300px);
     fill: $disabled-02;
 
     &:hover {
-      background-color: unset;
+      background-color: initial;
     }
   }
 
@@ -440,6 +444,7 @@ $list-box-menu-width: rem(300px);
   // Descendant of a `list-box` that displays a list of options to select
   .#{$prefix}--list-box__menu {
     @include box-shadow();
+
     position: absolute;
     left: 0;
     right: 0;
@@ -462,22 +467,26 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
-    max-height: rem(220px); // 40px item height * 5.5 items shown
+    // 40px item height * 5.5 items shown
+    max-height: rem(220px);
   }
 
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
     .#{$prefix}--list-box__menu {
-    max-height: rem(264px); // 48px item height * 5.5 items shown
+    // 48px item height * 5.5 items shown
+    max-height: rem(264px);
   }
 
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm
     .#{$prefix}--list-box__menu {
-    max-height: rem(176px); // 32px item height * 5.5 items shown
+    // 32px item height * 5.5 items shown
+    max-height: rem(176px);
   }
 
   // Descendant of a `list-box__menu` that represents a selection for a control
   .#{$prefix}--list-box__menu-item {
     @include type-style('body-short-01');
+
     height: rem(40px);
     color: $text-02;
     cursor: pointer;
@@ -540,12 +549,13 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item__option {
     @include focus-outline('reset');
+
     display: block;
     height: rem(40px);
     color: $text-02;
     text-decoration: none;
     font-weight: normal;
-    line-height: rem(16px);
+    line-height: 1rem;
     padding: rem(11px) 0;
     margin: 0 $carbon--spacing-05;
     padding-right: $carbon--spacing-06;
@@ -560,6 +570,7 @@ $list-box-menu-width: rem(300px);
 
     &:focus {
       @include focus-outline('outline');
+
       margin: 0;
       padding: rem(11px) rem(16px);
       border-color: transparent;
diff --git a/packages/components/src/components/list/_list.scss b/packages/components/src/components/list/_list.scss
index d2032ac7153a..c91c20deb2bf 100644
--- a/packages/components/src/components/list/_list.scss
+++ b/packages/components/src/components/list/_list.scss
@@ -62,14 +62,17 @@
     &::before {
       position: absolute;
       left: -$carbon--spacing-05;
-      content: '\002013'; // – en dash
+      // – en dash
+      content: '\002013';
     }
   }
 
   .#{$prefix}--list--unordered.#{$prefix}--list--nested
     > .#{$prefix}--list__item::before {
-    left: -$carbon--spacing-04; // offset to account for smaller ▪ vs –
-    content: '\0025AA'; // ▪ square
+    // offset to account for smaller ▪ vs –
+    left: -$carbon--spacing-04;
+    // ▪ square
+    content: '\0025AA';
   }
 }
 
diff --git a/packages/components/src/components/loading/_loading.scss b/packages/components/src/components/loading/_loading.scss
index 72070daebec0..d32480deb966 100644
--- a/packages/components/src/components/loading/_loading.scss
+++ b/packages/components/src/components/loading/_loading.scss
@@ -19,6 +19,7 @@
   .#{$prefix}--loading {
     @include reset;
     @include animation__loading--spin;
+
     width: $loading__size;
     height: $loading__size;
   }
diff --git a/packages/components/src/components/loading/_mixins.scss b/packages/components/src/components/loading/_mixins.scss
index c26dae93cb4e..dcbab4b374ac 100644
--- a/packages/components/src/components/loading/_mixins.scss
+++ b/packages/components/src/components/loading/_mixins.scss
@@ -36,7 +36,7 @@
     rotate-end-p2 700ms $carbon--ease-out 700ms forwards;
 
   // Animate the stroke
-  & svg circle {
+  svg circle {
     animation-name: stroke-end;
     animation-duration: 700ms;
     animation-timing-function: $carbon--ease-out;
diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
index c0c20e0656d6..5d5b2ab14670 100644
--- a/packages/components/src/components/modal/_modal.scss
+++ b/packages/components/src/components/modal/_modal.scss
@@ -97,7 +97,8 @@
       }
 
       .#{$prefix}--modal-content--with-form {
-        padding-right: $spacing-05; // Override for `.#{$prefix}--modal-content`
+        // Override for `.#{$prefix}--modal-content`
+        padding-right: $spacing-05;
       }
     }
 
@@ -181,7 +182,8 @@
       }
 
       .#{$prefix}--modal-content--with-form {
-        padding-right: $spacing-05; // Override for `.#{$prefix}--modal-content`
+        // Override for `.#{$prefix}--modal-content`
+        padding-right: $spacing-05;
       }
     }
   }
@@ -207,7 +209,8 @@
       }
 
       .#{$prefix}--modal-content--with-form {
-        padding-right: $spacing-05; // Override for `.#{$prefix}--modal-content`
+        // Override for `.#{$prefix}--modal-content`
+        padding-right: $spacing-05;
       }
     }
 
@@ -260,6 +263,10 @@
     &:focus {
       @include focus-outline('outline');
     }
+
+    > * {
+      @include type-style('body-long-01');
+    }
   }
 
   // Required so overflow-indicator disappears at end of content
@@ -267,12 +274,6 @@
     padding-bottom: $spacing-07;
   }
 
-  .#{$prefix}--modal-content {
-    > * {
-      @include type-style('body-long-01');
-    }
-  }
-
   .#{$prefix}--modal-content--overflow-indicator {
     grid-row: 2/-2;
     grid-column: 1/-1;
@@ -290,7 +291,7 @@
   .#{$prefix}--modal-content:focus
     ~ .#{$prefix}--modal-content--overflow-indicator {
     width: calc(100% - 4px);
-    margin: 0 2px 2px 2px;
+    margin: 0 2px 2px;
   }
 
   .#{$prefix}--modal-footer {
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
index 1931e1498620..519cf7c7c102 100644
--- a/packages/components/src/components/notification/_inline-notification.scss
+++ b/packages/components/src/components/notification/_inline-notification.scss
@@ -100,7 +100,7 @@
       $notification-error-background-color
     );
 
-    &:before {
+    &::before {
       border-color: $support-01;
     }
   }
@@ -115,7 +115,7 @@
       $notification-success-background-color
     );
 
-    &:before {
+    &::before {
       border-color: $support-02;
     }
   }
@@ -132,7 +132,7 @@
       $notification-info-background-color
     );
 
-    &:before {
+    &::before {
       border-color: $support-04;
     }
   }
@@ -149,7 +149,7 @@
       $notification-warning-background-color
     );
 
-    &:before {
+    &::before {
       border-color: $support-03;
     }
   }
@@ -185,11 +185,13 @@
 
   .#{$prefix}--inline-notification__title {
     @include type-style('productive-heading-01');
+
     margin: 0 $carbon--spacing-02 0 0;
   }
 
   .#{$prefix}--inline-notification__subtitle {
     @include type-style('body-short-01');
+
     word-break: break-word;
   }
 
@@ -240,6 +242,7 @@
 
   .#{$prefix}--inline-notification__close-button {
     @include focus-outline('reset');
+
     position: absolute;
     top: 0;
     right: 0;
@@ -277,23 +280,22 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--inline-notification--low-contrast {
+  .#{$prefix}--inline-notification--low-contrast
     .#{$prefix}--inline-notification__close-button
-      .#{$prefix}--inline-notification__close-icon {
-      fill: map-get($carbon--theme--white, 'text-01');
-    }
+    .#{$prefix}--inline-notification__close-icon {
+    fill: map-get($carbon--theme--white, 'text-01');
+  }
 
-    .#{$prefix}--inline-notification__action-button {
-      color: $interactive-01;
+  .#{$prefix}--inline-notification__action-button {
+    color: $interactive-01;
 
-      &:active {
-        color: $interactive-01;
-      }
+    &:active {
+      color: $interactive-01;
+    }
 
-      &:active,
-      &:hover {
-        background-color: $carbon--white-0;
-      }
+    &:active,
+    &:hover {
+      background-color: $carbon--white-0;
     }
   }
 }
diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
index 1d8b76339f04..ea7143a8bf88 100644
--- a/packages/components/src/components/notification/_toast-notification.scss
+++ b/packages/components/src/components/notification/_toast-notification.scss
@@ -136,6 +136,7 @@
 
   .#{$prefix}--toast-notification__close-button {
     @include focus-outline('reset');
+
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -174,6 +175,7 @@
 
   .#{$prefix}--toast-notification__title {
     @include type-style('productive-heading-01');
+
     font-weight: 600;
     margin-top: $carbon--spacing-05;
     word-break: break-word;
diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
index de70c36f47c4..42d6dddf68c2 100644
--- a/packages/components/src/components/number-input/_number-input.scss
+++ b/packages/components/src/components/number-input/_number-input.scss
@@ -18,6 +18,7 @@
 @mixin number-input {
   .#{$prefix}--number {
     @include reset;
+
     display: flex;
     flex-direction: column;
     position: relative;
@@ -26,6 +27,7 @@
   .#{$prefix}--number input[type='number'] {
     @include type-style('body-short-01');
     @include focus-outline('reset');
+
     font-family: carbon--font-family('mono');
     box-sizing: border-box;
     display: inline-flex;
@@ -56,14 +58,17 @@
       fill: $disabled;
     }
 
-    -moz-appearance: textfield; // Firefox: Hide spinner (up and down buttons)
+    // Firefox: Hide spinner (up and down buttons)
+    -moz-appearance: textfield;
 
+    // IE: Hide "clear-field" `x` button on input field
     &::-ms-clear {
-      display: none; // IE: Hide "clear-field" `x` button on input field
+      display: none;
     }
 
+    // Safari: Hide number spinner
     &::-webkit-inner-spin-button {
-      appearance: none; // Safari: Hide number spinner
+      appearance: none;
     }
   }
 
@@ -94,6 +99,7 @@
 
   .#{$prefix}--number__controls {
     @include reset;
+
     position: absolute;
     right: 0;
     display: flex;
@@ -107,6 +113,7 @@
 
   .#{$prefix}--number__control-btn {
     @include button-reset;
+
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -129,6 +136,7 @@
 
     &:focus {
       @include focus-outline;
+
       color: $icon-01;
       outline-width: 2px;
       outline-offset: -2px;
@@ -136,9 +144,6 @@
 
     &:hover {
       cursor: pointer;
-    }
-
-    &:hover {
       color: $icon-01;
     }
 
@@ -237,11 +242,13 @@
   }
 
   .#{$prefix}--number--xl .#{$prefix}--number__control-btn.up-icon svg {
-    top: rem(6.6px); // Needed to maintain arrow spacing between input sizes.
+    // Needed to maintain arrow spacing between input sizes.
+    top: rem(6.6px);
   }
 
   .#{$prefix}--number--xl .#{$prefix}--number__control-btn.down-icon svg {
-    top: rem(-6.6px); // Needed to maintain arrow spacing between input sizes.
+    // Needed to maintain arrow spacing between input sizes.
+    top: rem(-6.6px);
   }
 
   .#{$prefix}--number--sm input[type='number'] {
@@ -259,11 +266,13 @@
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__control-btn.up-icon svg {
-    top: rem(3.4px); // Needed to maintain arrow spacing between input sizes.
+    // Needed to maintain arrow spacing between input sizes.
+    top: rem(3.4px);
   }
 
   .#{$prefix}--number--sm .#{$prefix}--number__control-btn.down-icon svg {
-    top: rem(-3.4px); // Needed to maintain arrow spacing between input sizes.
+    // Needed to maintain arrow spacing between input sizes.
+    top: rem(-3.4px);
   }
 
   //No label positioning adjustment
@@ -274,6 +283,7 @@
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;
+
     width: 100%;
     height: 2.5rem;
 
diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss
index 53e2ee001ddb..2710b0368b53 100644
--- a/packages/components/src/components/overflow-menu/_overflow-menu.scss
+++ b/packages/components/src/components/overflow-menu/_overflow-menu.scss
@@ -25,6 +25,7 @@
     @include button-reset;
     @include reset;
     @include focus-outline('reset');
+
     position: relative;
     width: rem(32px);
     height: rem(32px);
@@ -57,6 +58,7 @@
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
     .#{$prefix}--overflow-menu__trigger {
     @include box-shadow;
+
     background-color: $field-01;
     transition: none;
   }
@@ -76,6 +78,7 @@
   .#{$prefix}--overflow-menu-options {
     @include reset;
     @include box-shadow;
+
     display: none;
     flex-direction: column;
     align-items: flex-start;
@@ -162,6 +165,7 @@
 
   .#{$prefix}--overflow-menu-options__option {
     @include reset;
+
     display: flex;
     background-color: transparent;
     align-items: center;
@@ -189,6 +193,7 @@
   .#{$prefix}--overflow-menu-options__btn {
     @include type-style('body-short-01');
     @include focus-outline('reset');
+
     font-weight: 400;
     width: 100%;
     height: 100%;
@@ -271,6 +276,7 @@
     &:active,
     &:focus {
       @include focus-outline('reset');
+
       background-color: $ui-01;
     }
   }
@@ -284,7 +290,7 @@
   .#{$prefix}--overflow-menu--flip {
     left: -140px;
 
-    &:before {
+    &::before {
       left: 145px;
     }
   }
diff --git a/packages/components/src/components/pagination-nav/_pagination-nav.scss b/packages/components/src/components/pagination-nav/_pagination-nav.scss
index 786a7405f351..ad3d7aca192a 100644
--- a/packages/components/src/components/pagination-nav/_pagination-nav.scss
+++ b/packages/components/src/components/pagination-nav/_pagination-nav.scss
@@ -38,7 +38,7 @@
 
   .#{$prefix}--pagination-nav__page--active + &::after,
   &.#{$prefix}--pagination-nav__page--active::after {
-    left: calc(50% - #{$carbon--spacing-05/2});
+    left: calc(50% - #{$carbon--spacing-05 / 2});
     opacity: 1;
     width: $carbon--spacing-05;
   }
@@ -74,6 +74,7 @@
   .#{$prefix}--pagination-nav {
     @include reset;
     @include type-style('body-short-01');
+
     line-height: 0;
   }
 
@@ -98,6 +99,7 @@
   .#{$prefix}--pagination-nav__page {
     @include type-style('body-short-01');
     @include button-reset($width: false);
+
     border-radius: 0;
     color: $text-color;
     display: block;
@@ -109,8 +111,8 @@
     position: relative;
     text-align: center;
     text-decoration: none;
-    transition: background-color, color;
-    transition: $duration--fast-02 motion(standard, productive);
+    transition: background-color $duration--fast-02 motion(standard, productive),
+      color $duration--fast-02 motion(standard, productive);
     user-select: none;
 
     &:hover {
@@ -184,10 +186,10 @@
   }
 
   .#{$prefix}--pagination-nav__select-icon {
-    left: calc(50% - #{$select-icon-top-position/2});
+    left: calc(50% - #{$select-icon-top-position / 2});
     pointer-events: none;
     position: absolute;
-    top: calc(50% - #{$select-icon-top-position/2});
+    top: calc(50% - #{$select-icon-top-position / 2});
   }
 
   .#{$prefix}--pagination-nav__accessibility-label {
diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
index 13ef4152d833..4928aaa1c87a 100644
--- a/packages/components/src/components/pagination/_pagination.scss
+++ b/packages/components/src/components/pagination/_pagination.scss
@@ -28,6 +28,7 @@ $css--helpers: true;
   .#{$prefix}--pagination {
     @include reset;
     @include type-style('body-short-01');
+
     width: 100%;
     overflow-x: auto;
     background-color: $ui-01;
@@ -54,6 +55,7 @@ $css--helpers: true;
 
   .#{$prefix}--pagination .#{$prefix}--select-input {
     @include type-style('body-short-01');
+
     width: auto;
     min-width: auto;
     height: rem(48px);
@@ -125,6 +127,7 @@ $css--helpers: true;
   .#{$prefix}--pagination__button,
   .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
     @include reset;
+
     border: none;
     background: none;
     cursor: pointer;
@@ -143,6 +146,7 @@ $css--helpers: true;
   .#{$prefix}--pagination__button:focus,
   .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
     @include focus-outline('outline');
+
     border-left: 0;
   }
 
diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
index a8a17b63dc90..e90ef9d46c8a 100644
--- a/packages/components/src/components/progress-indicator/_progress-indicator.scss
+++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -18,6 +18,7 @@
 @mixin progress-indicator {
   .#{$prefix}--progress {
     @include reset;
+
     display: flex;
     list-style: none;
   }
@@ -66,6 +67,7 @@
 
   .#{$prefix}--progress-label {
     @include type-style('body-short-01');
+
     color: $text-01;
     line-height: 1.45;
     max-width: rem(88px);
@@ -123,6 +125,7 @@
   //single line tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip {
     @include type-style('body-long-01');
+
     min-width: rem(115px);
     width: rem(125px);
     min-height: $carbon--spacing-06;
@@ -137,6 +140,7 @@
   //multiline tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
     @include type-style('body-long-01');
+
     width: rem(150px);
     height: auto;
     color: $inverse-01;
@@ -145,6 +149,7 @@
   //OPTIONAL HELPER TEXT STYLING
   .#{$prefix}--progress-optional {
     @include type-style('label-01');
+
     position: absolute;
     left: 0;
     margin-left: $carbon--spacing-06;
@@ -181,6 +186,7 @@
   //interactive button
   .#{$prefix}--progress-step-button {
     @include button-reset();
+
     display: flex;
     text-align: left;
   }
@@ -247,6 +253,7 @@
   // Skeleton State
   .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
     @include skeleton;
+
     height: rem(12px);
     width: rem(40px);
   }
diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
index 7734654f2a2e..6dfeca5be9d5 100644
--- a/packages/components/src/components/radio-button/_radio-button.scss
+++ b/packages/components/src/components/radio-button/_radio-button.scss
@@ -52,11 +52,13 @@
 
   .#{$prefix}--radio-button {
     @include hidden;
+
     visibility: inherit;
   }
 
   .#{$prefix}--radio-button__label {
     @include type-style('body-short-01');
+
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -65,6 +67,7 @@
 
   .#{$prefix}--radio-button__appearance {
     @include reset;
+
     background-color: transparent;
     border-radius: 50%;
     border: $radio-border-width solid $icon-01;
@@ -82,7 +85,7 @@
     justify-content: center;
     border-color: $icon-01;
 
-    &:before {
+    &::before {
       content: '';
       display: inline-block;
       position: relative;
@@ -100,11 +103,6 @@
     }
   }
 
-  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
-  [disabled] ~ _ {
-    font-size: inherit;
-  }
-
   .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
     color: $disabled;
     cursor: not-allowed;
@@ -135,6 +133,7 @@
   // Skeleton State
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(100px);
     height: rem(18px);
   }
diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
index 38f33ae9fc8e..bbdfc10756cf 100644
--- a/packages/components/src/components/search/_search.scss
+++ b/packages/components/src/components/search/_search.scss
@@ -34,6 +34,7 @@
     @include reset;
     @include type-style('body-short-02');
     @include focus-outline('reset');
+
     appearance: none;
     border: none;
     background-color: $field-01;
@@ -82,16 +83,19 @@
 
   .#{$prefix}--search--sm .#{$prefix}--search-input {
     @include type-style('body-short-01');
+
     height: rem(32px);
   }
 
   .#{$prefix}--search--lg .#{$prefix}--search-input {
     @include type-style('body-short-02');
+
     height: rem(40px);
   }
 
   .#{$prefix}--search--xl .#{$prefix}--search-input {
     @include type-style('body-short-02');
+
     height: rem(48px);
     padding: 0 rem(64px) 0 rem(48px);
   }
@@ -118,6 +122,7 @@
   .#{$prefix}--search-close {
     @include button-reset(false);
     @include focus-outline('reset');
+
     position: absolute;
     top: 0;
     right: 0;
@@ -137,6 +142,10 @@
 
     &:hover {
       border-bottom: 1px solid $ui-04;
+
+      &::before {
+        background-color: $hover-field;
+      }
     }
   }
 
@@ -180,13 +189,8 @@
 
     &:active {
       @include focus-outline('outline');
-      background-color: $selected-ui;
-    }
-  }
 
-  .#{$prefix}--search-close:hover {
-    &::before {
-      background-color: $hover-field;
+      background-color: $selected-ui;
     }
   }
 
@@ -234,6 +238,7 @@
   .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
     @include skeleton;
+
     width: 100%;
 
     &::placeholder {
diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
index 00cd71451ff5..a3b835344709 100644
--- a/packages/components/src/components/select/_select.scss
+++ b/packages/components/src/components/select/_select.scss
@@ -22,6 +22,7 @@
 @mixin select {
   .#{$prefix}--select {
     @include reset;
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -37,6 +38,7 @@
   .#{$prefix}--select-input {
     @include type-style('body-short-01');
     @include focus-outline('reset');
+
     height: rem(40px);
     appearance: none;
     display: block;
@@ -69,13 +71,14 @@
       &:-moz-focusring,
       &::-moz-focus-inner {
         color: transparent;
-        text-shadow: 0 0 0 #000;
+        text-shadow: 0 0 0 #000000;
         background-image: none;
       }
     }
 
     &:focus {
       @include focus-outline('outline');
+
       color: $text-01;
     }
 
@@ -153,17 +156,13 @@
     ~ .#{$prefix}--select__invalid-icon {
     position: absolute;
     right: $spacing-09;
-  }
-
-  .#{$prefix}--select-input__wrapper[data-invalid]
-    .#{$prefix}--select-input
-    ~ .#{$prefix}--select__invalid-icon {
     fill: $support-01;
   }
 
   .#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
-    color: $text-01; // For the options to show in IE11
+    // For the options to show in IE11
+    color: $text-01;
   }
 
   .#{$prefix}--select-option[disabled] {
@@ -192,7 +191,8 @@
   .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--label,
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
     .#{$prefix}--form__helper-text {
-    margin-top: rem(13px); // offset label text margin
+    // Offset label text margin
+    margin-top: rem(13px);
     align-self: flex-start;
   }
 
@@ -225,7 +225,7 @@
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
     .#{$prefix}--select-input {
-    padding-right: $spacing-09 + $spacing-03; // 3.5rem
+    padding-right: rem(56px);
   }
 
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
@@ -243,13 +243,10 @@
     }
   }
 
-  .#{$prefix}--select--inline .#{$prefix}--select-input:disabled {
-    cursor: not-allowed;
-  }
-
   //Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;
+
     width: 100%;
     height: 2.5rem;
   }
diff --git a/packages/components/src/components/skeleton/_skeleton-icon.scss b/packages/components/src/components/skeleton/_skeleton-icon.scss
index 52f63dc2da8c..a98412b924a2 100644
--- a/packages/components/src/components/skeleton/_skeleton-icon.scss
+++ b/packages/components/src/components/skeleton/_skeleton-icon.scss
@@ -12,6 +12,7 @@
 @include exports('skeleton-icon') {
   .#{$prefix}--icon--skeleton {
     @include skeleton;
+
     display: inline-block;
     width: rem(16px);
     height: rem(16px);
diff --git a/packages/components/src/components/skeleton/_skeleton-placeholder.scss b/packages/components/src/components/skeleton/_skeleton-placeholder.scss
index 07ec5f0c411d..9c3f13830773 100644
--- a/packages/components/src/components/skeleton/_skeleton-placeholder.scss
+++ b/packages/components/src/components/skeleton/_skeleton-placeholder.scss
@@ -12,6 +12,7 @@
 @include exports('skeleton-placeholder') {
   .#{$prefix}--skeleton__placeholder {
     @include skeleton;
+
     height: rem(100px);
     width: rem(100px);
   }
diff --git a/packages/components/src/components/skeleton/_skeleton-text.scss b/packages/components/src/components/skeleton/_skeleton-text.scss
index 09ba8672892f..c7423bfc1436 100644
--- a/packages/components/src/components/skeleton/_skeleton-text.scss
+++ b/packages/components/src/components/skeleton/_skeleton-text.scss
@@ -12,6 +12,7 @@
 @include exports('skeleton-text') {
   .#{$prefix}--skeleton__text {
     @include skeleton;
+
     width: 100%;
     height: 1rem;
     margin-bottom: $carbon--spacing-03;
diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
index f42f85af31b1..a6baa10d7c57 100644
--- a/packages/components/src/components/slider/_slider.scss
+++ b/packages/components/src/components/slider/_slider.scss
@@ -36,6 +36,7 @@
 
   .#{$prefix}--slider__range-label {
     @include type-style('code-02');
+
     color: $text-01;
 
     &:last-of-type {
@@ -92,19 +93,19 @@
     z-index: 3;
 
     &:hover {
-      // 20px / 14px = 1.4285714286
-      transform: translate(-50%, -50%) scale(1.4285714286);
+      // 20px / 14px = 1.4286
+      transform: translate(-50%, -50%) scale(1.4286);
     }
 
     &:focus {
-      // 20px / 14px = 1.4285714286
-      transform: translate(-50%, -50%) scale(1.4285714286);
+      // 20px / 14px = 1.4286
+      transform: translate(-50%, -50%) scale(1.4286);
       box-shadow: inset 0 0 0 2px $interactive-04, inset 0 0 0 3px $ui-01;
       background-color: $interactive-04;
     }
 
     &:active {
-      transform: translate(-50%, -50%) scale(1.4285714286);
+      transform: translate(-50%, -50%) scale(1.4286);
       box-shadow: inset 0 0 0 2px $interactive-04;
     }
   }
@@ -189,6 +190,7 @@
   .#{$prefix}--slider-container.#{$prefix}--skeleton
     .#{$prefix}--slider__range-label {
     @include skeleton;
+
     width: rem(20px);
     height: rem(12px);
   }
diff --git a/packages/components/src/components/structured-list/_mixins.scss b/packages/components/src/components/structured-list/_mixins.scss
index c543c65a1208..ca9c7cb16832 100644
--- a/packages/components/src/components/structured-list/_mixins.scss
+++ b/packages/components/src/components/structured-list/_mixins.scss
@@ -34,10 +34,8 @@
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-th($padding: $structured-list-padding) {
-  padding-left: $carbon--spacing-05;
-  padding-right: $carbon--spacing-05;
-  padding-top: $carbon--spacing-05;
-  padding-bottom: $carbon--spacing-03;
+  padding: $carbon--spacing-05 $carbon--spacing-05 $carbon--spacing-03
+    $carbon--spacing-05;
 }
 
 /// Used only for normal structured-list
@@ -45,8 +43,6 @@
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td($padding: $structured-list-padding) {
-  padding-top: $carbon--spacing-05;
-  padding-right: $carbon--spacing-05;
-  padding-bottom: $carbon--spacing-06;
-  padding-left: $carbon--spacing-05;
+  padding: $carbon--spacing-05 $carbon--spacing-05 $carbon--spacing-06
+    $carbon--spacing-05;
 }
diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index 0071873ae409..6d3d2d6f4390 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -24,6 +24,7 @@
 
   .#{$prefix}--structured-list {
     @include reset;
+
     display: table;
     overflow-x: auto;
     overflow-y: hidden;
@@ -88,6 +89,8 @@
     @include reset;
     @include padding-th;
     @include type-style('productive-heading-01');
+
+    color: $text-01;
     display: table-cell;
     font-weight: 600;
     height: rem(40px);
@@ -105,20 +108,14 @@
     @include reset;
     @include type-style('body-long-01');
     @include padding-td;
-    line-height: carbon--rem(21px);
+
+    color: $text-02;
     position: relative;
     display: table-cell;
     max-width: 36rem;
     transition: color $duration--fast-02 motion(standard, productive);
   }
 
-  .#{$prefix}--structured-list-th {
-    color: $text-01;
-  }
-  .#{$prefix}--structured-list-td {
-    color: $text-02;
-  }
-
   .#{$prefix}--structured-list-content--nowrap {
     white-space: nowrap;
   }
@@ -159,23 +156,15 @@
       }
     }
 
-    .#{$prefix}--structured-list-th span {
+    span {
       @include skeleton;
+
       width: 75%;
       height: 1rem;
       display: block;
     }
   }
 
-  .#{$prefix}--structured-list.#{$prefix}--skeleton
-    .#{$prefix}--structured-list-th
-    span {
-    @include skeleton;
-    width: 75%;
-    height: 1rem;
-    display: block;
-  }
-
   .#{$prefix}--structured-list.#{$prefix}--structured-list--selection.#{$prefix}--skeleton
     .#{$prefix}--structured-list-th:first-child {
     width: 5%;
diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
index 2f5ba9429a58..5e21af5cda9e 100644
--- a/packages/components/src/components/tabs/_tabs.scss
+++ b/packages/components/src/components/tabs/_tabs.scss
@@ -21,6 +21,7 @@
   .#{$prefix}--tabs {
     @include reset;
     @include type-style('body-short-01');
+
     color: $text-01;
     height: auto;
     width: 100%;
@@ -68,6 +69,7 @@
   .#{$prefix}--tabs-trigger--open:focus,
   .#{$prefix}--tabs-trigger--open:active {
     @include focus-outline('reset');
+
     transition: outline $duration--fast-01 motion(standard, productive);
   }
 
@@ -104,6 +106,7 @@
 
   .#{$prefix}--tabs__nav {
     @include box-shadow;
+
     margin: 0;
     padding: 0;
     position: absolute;
@@ -145,6 +148,7 @@
   //-----------------------------
   .#{$prefix}--tabs__nav-item {
     @include reset;
+
     background-color: $ui-01;
     display: flex;
     padding: 0;
@@ -167,13 +171,13 @@
     @include carbon--breakpoint(md) {
       background-color: $ui-03;
 
-      & + .#{$prefix}--tabs__nav-item {
+      + .#{$prefix}--tabs__nav-item {
         margin-left: 0;
         // Draws the border without affecting the inner-content
         box-shadow: -1px 0 0 0 $ui-04;
       }
 
-      & + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
+      + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
       &.#{$prefix}--tabs__nav-item--selected + .#{$prefix}--tabs__nav-item {
         box-shadow: none;
       }
@@ -202,8 +206,7 @@
     @include carbon--breakpoint(md) {
       background-color: transparent;
 
-      &,
-      & + .#{$prefix}--tabs__nav-item {
+      + .#{$prefix}--tabs__nav-item {
         box-shadow: none;
       }
     }
@@ -225,10 +228,6 @@
     outline: none;
   }
 
-  .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
-    pointer-events: none;
-  }
-
   .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
   .#{$prefix}--tabs--container
@@ -243,6 +242,7 @@
     .#{$prefix}--tabs__nav-link {
     @include carbon--breakpoint(md) {
       color: $disabled-03;
+      border-bottom: none;
     }
   }
 
@@ -260,6 +260,7 @@
       .#{$prefix}--tabs__nav-link:focus,
       .#{$prefix}--tabs__nav-link:active {
         @include type-style('productive-heading-01');
+
         color: $text-01;
         border-bottom: 2px solid $interactive-04;
       }
@@ -274,10 +275,11 @@
       background-color: $ui-01;
 
       .#{$prefix}--tabs__nav-link {
-        line-height: calc(
-          #{rem(48px)} - (#{$spacing-03} * 2)
-        ); // height - vertical padding
+        // height - vertical padding
         // Draws the border without affecting the inner-content
+        /* stylelint-disable declaration-property-unit-whitelist */
+        line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+        /* stylelint-enable declaration-property-unit-whitelist */
         box-shadow: inset 0 2px 0 0 $interactive-04;
         border-bottom: none;
         padding: $spacing-03 $spacing-05;
@@ -295,6 +297,7 @@
   //-----------------------------
   a.#{$prefix}--tabs__nav-link {
     @include focus-outline('reset');
+
     display: inline-block;
     color: $text-02;
     text-decoration: none;
@@ -305,7 +308,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0 $spacing-05;
-    line-height: rem(16px);
+    line-height: 1rem;
     border-bottom: 1px solid $ui-03;
     overflow: hidden;
     transition: border $duration--fast-01 motion(standard, productive),
@@ -314,6 +317,7 @@
     &:focus,
     &:active {
       @include focus-outline('outline');
+
       width: 100%;
       margin: 0;
       padding-left: 16px;
@@ -337,9 +341,10 @@
   .#{$prefix}--tabs--container a.#{$prefix}--tabs__nav-link {
     @include carbon--breakpoint(md) {
       height: rem(48px);
-      line-height: calc(
-        #{rem(48px)} - (#{$spacing-03} * 2)
-      ); // height - vertical padding
+      // Height - vertical padding
+      /* stylelint-disable declaration-property-unit-whitelist */
+      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
+      /* stylelint-enable declaration-property-unit-whitelist */
       border-bottom: none;
       padding: $spacing-03 $spacing-05;
     }
@@ -371,6 +376,7 @@
   .#{$prefix}--tabs__nav-item--disabled .#{$prefix}--tabs__nav-link {
     color: $tab-text-disabled;
     border-bottom: $tab-underline-disabled;
+    pointer-events: none;
   }
 
   .#{$prefix}--tabs__nav-item--disabled:hover .#{$prefix}--tabs__nav-link {
@@ -384,14 +390,6 @@
     border-bottom: $tab-underline-disabled;
   }
 
-  .#{$prefix}--tabs--container
-    .#{$prefix}--tabs__nav-item--disabled
-    .#{$prefix}--tabs__nav-link {
-    @include carbon--breakpoint(md) {
-      border-bottom: none;
-    }
-  }
-
   //-----------------------------
   //  Link Focus
   //-----------------------------
@@ -419,12 +417,14 @@
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
     @include skeleton;
+
     width: rem(75px);
     height: rem(12px);
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs-trigger {
     @include skeleton;
+
     width: rem(100px);
   }
 
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index a4ed697f3b67..ba6be33fe9b2 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -31,8 +31,10 @@
     justify-content: center;
     padding: $carbon--spacing-02 $carbon--spacing-03;
     min-height: 1.5rem;
-    max-width: 100%; // restricts size of contained elements
-    min-width: rem(32px); // ensures tag stays pill shaped;
+    // restricts size of contained elements
+    max-width: 100%;
+    // ensures tag stays pill shaped;
+    min-width: rem(32px);
     margin: $carbon--spacing-02;
     border-radius: rem(15px);
     word-break: break-word;
@@ -41,10 +43,6 @@
     &:not(:first-child) {
       margin-left: 0;
     }
-
-    &.#{$prefix}--skeleton {
-      @include tag-theme($bg-color: $ui-03, $text-color: $text-01);
-    }
   }
 
   .#{$prefix}--tag--red {
@@ -197,6 +195,7 @@
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
+    @include tag-theme($bg-color: $ui-03, $text-color: $text-01);
 
     width: rem(60px);
     overflow: hidden;
diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
index 9e847e094b6f..bad53c58e713 100644
--- a/packages/components/src/components/text-area/_text-area.scss
+++ b/packages/components/src/components/text-area/_text-area.scss
@@ -47,6 +47,7 @@
   .#{$prefix}--text-area::placeholder {
     @include placeholder-colors;
     @include type-style('body-long-01');
+
     opacity: 1;
   }
 
@@ -92,6 +93,7 @@
   // Skeleton State
   #{$prefix}--text-area.#{$prefix}--skeleton {
     @include skeleton;
+
     height: rem(100px);
 
     &::placeholder {
diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
index 790b691041c0..66e3a3f42130 100644
--- a/packages/components/src/components/text-input/_text-input.scss
+++ b/packages/components/src/components/text-input/_text-input.scss
@@ -24,6 +24,7 @@
     @include reset;
     @include type-style('body-short-01');
     @include focus-outline('reset');
+
     background-color: $field-01;
     width: 100%;
     height: rem(40px);
@@ -142,6 +143,7 @@
   //-----------------------------
   .#{$prefix}--text-input:disabled {
     @include focus-outline('reset');
+
     cursor: not-allowed;
     background-color: $disabled-01;
     border-bottom: 1px solid transparent;
@@ -162,6 +164,7 @@
   //-----------------------------
   .#{$prefix}--text-input--invalid {
     @include focus-outline('invalid');
+
     box-shadow: none;
 
     .#{$prefix}--text-input--password__visibility,
diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
index 485f12db2a35..085487f8f429 100644
--- a/packages/components/src/components/tile/_tile.scss
+++ b/packages/components/src/components/tile/_tile.scss
@@ -50,6 +50,10 @@
 
   .#{$prefix}--tile--clickable,
   .#{$prefix}--tile--expandable {
+    &:focus {
+      @include focus-outline('outline');
+    }
+
     &:hover,
     &:focus {
       .#{$prefix}--tile__checkmark {
@@ -58,13 +62,6 @@
     }
   }
 
-  .#{$prefix}--tile--clickable,
-  .#{$prefix}--tile--expandable {
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
   // Removes Firefox automatic border on buttons
   .#{$prefix}--tile--expandable::-moz-focus-inner {
     border: 0;
@@ -73,6 +70,7 @@
   .#{$prefix}--tile--clickable {
     @include reset;
     @include type-style('body-short-01');
+
     color: $text-01;
     text-decoration: none;
   }
@@ -132,9 +130,6 @@
     font-size: inherit;
     text-align: left;
     border: 0;
-  }
-
-  .#{$prefix}--tile--expandable {
     overflow: hidden;
     transition: max-height $duration--moderate-01 motion(standard, productive);
   }
diff --git a/packages/components/src/components/time-picker/_time-picker.scss b/packages/components/src/components/time-picker/_time-picker.scss
index 5c36aedf68a5..a9e11152118c 100644
--- a/packages/components/src/components/time-picker/_time-picker.scss
+++ b/packages/components/src/components/time-picker/_time-picker.scss
@@ -53,6 +53,7 @@
     @include reset;
     @include focus-outline('reset');
     @include type-style('code-02');
+
     display: flex;
     align-items: center;
     width: 4.875rem;
diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index 156dc89feb08..d670a9117307 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -43,7 +43,7 @@
     height: carbon--rem(24px);
 
     // Toggle background oval
-    &:before {
+    &::before {
       position: absolute;
       display: block;
       content: '';
@@ -62,7 +62,7 @@
     }
 
     // Toggle circle
-    &:after {
+    &::after {
       box-sizing: border-box;
       position: absolute;
       display: block;
@@ -93,6 +93,7 @@
   .#{$prefix}--toggle__text--left,
   .#{$prefix}--toggle__text--right {
     @include type-style('body-short-01');
+
     position: relative;
     margin-left: $carbon--spacing-03;
   }
@@ -123,11 +124,11 @@
   .#{$prefix}--toggle:checked
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__appearance {
-    &:before {
+    &::before {
       background-color: $support-02;
     }
 
-    &:after {
+    &::after {
       background-color: $icon-03;
       transform: translateX(carbon--rem(24px));
     }
@@ -136,18 +137,18 @@
   //----------------------------------------------
   // Focus
   // ---------------------------------------------
-  .#{$prefix}--toggle + .#{$prefix}--toggle__label,
-  .#{$prefix}--toggle + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`)
-      box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
-    }
+  .#{$prefix}--toggle
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance::before {
+    // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`)
+    box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
   }
+
   .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label,
-  .#{$prefix}--toggle:active + .#{$prefix}--toggle__label {
-    .#{$prefix}--toggle__appearance:before {
-      box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus;
-    }
+  .#{$prefix}--toggle:active
+    + .#{$prefix}--toggle__label
+    .#{$prefix}--toggle__appearance::before {
+    box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus;
   }
 
   //----------------------------------------------
@@ -160,16 +161,16 @@
   .#{$prefix}--toggle:disabled
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__appearance {
-    &:before {
+    &::before {
       background-color: $disabled-01;
     }
 
-    &:after {
+    &::after {
       background-color: $disabled-02;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       cursor: not-allowed;
       transition: $duration--fast-01 motion(exit, productive);
     }
@@ -206,7 +207,7 @@
     width: carbon--rem(32px);
     height: carbon--rem(16px);
 
-    &:before {
+    &::before {
       box-sizing: border-box;
       height: carbon--rem(16px);
       width: carbon--rem(32px);
@@ -214,7 +215,7 @@
       top: 0;
     }
 
-    &:after {
+    &::after {
       width: carbon--rem(10px);
       height: carbon--rem(10px);
       top: carbon--rem(3px);
@@ -238,9 +239,9 @@
   .#{$prefix}--toggle--small:checked
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__appearance {
-    &:after {
-      margin-left: 0px;
-      transform: translateX(carbon--rem(17px));
+    &::after {
+      margin-left: 0;
+      transform: translateX(rem(17px));
     }
   }
 
@@ -259,6 +260,7 @@
 
   .#{$prefix}--toggle-input__label {
     @include type-style('label-01');
+
     color: $text-02;
     display: flex;
     flex-direction: column;
@@ -314,9 +316,10 @@
 
   .#{$prefix}--toggle__text--off,
   .#{$prefix}--toggle__text--on {
-    position: absolute;
-    margin-left: carbon--rem(56px);
     @include type-style('body-short-01');
+
+    position: absolute;
+    margin-left: rem(56px);
     user-select: none;
     white-space: nowrap;
     // top offset needed to vertically center absolutely positioned flex child in IE11
@@ -367,6 +370,7 @@
   // Disabled
   // ---------------------------------------------
   .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label {
+    color: $disabled;
     cursor: not-allowed;
   }
 
@@ -390,10 +394,6 @@
     }
   }
 
-  .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label {
-    color: $disabled;
-  }
-
   .#{$prefix}--toggle-input:disabled:active
     + .#{$prefix}--toggle-input__label
     > .#{$prefix}--toggle__switch::before {

From cafb3e60e7559eb043c65c43a23302b7a0ea78f9 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 2 Jul 2020 11:06:36 -0700
Subject: [PATCH 5/9] chore(lint): clear rest of stylelint errors

---
 .stylelintignore                              |  1 +
 .../src/components/toolbar/_toolbar.scss      |  1 +
 .../src/components/tooltip/_tooltip.scss      | 14 ++++++++------
 .../src/components/ui-shell/_header.scss      | 16 ++--------------
 .../ui-shell/_product-switcher.scss           |  4 ++--
 .../src/components/ui-shell/_side-nav.scss    | 19 ++++++-------------
 .../src/components/ui-shell/_theme.scss       | 12 ++++++++++++
 .../rules/limit-language-features.js          |  4 ++--
 8 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/.stylelintignore b/.stylelintignore
index 32e1678bf0a8..7b5e977c9e31 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -14,6 +14,7 @@ packages/components/demo/**
 packages/components/tests/**
 packages/components/css/**
 packages/components/scss/**
+packages/components/src/components/date-picker/_flatpickr.scss
 
 # packages/react
 packages/react/storybook-static/**
diff --git a/packages/components/src/components/toolbar/_toolbar.scss b/packages/components/src/components/toolbar/_toolbar.scss
index aa28e88b9bd5..57367e449940 100644
--- a/packages/components/src/components/toolbar/_toolbar.scss
+++ b/packages/components/src/components/toolbar/_toolbar.scss
@@ -114,6 +114,7 @@ $css--helpers: true;
 
   .#{$prefix}--toolbar-menu__title {
     @include type-style('caption-01');
+
     font-weight: 600;
     padding: 0.5rem 1.25rem;
   }
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index caad32d869e9..48a631f6e295 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -98,6 +98,8 @@
   $rotate-caret: if($position == 'top', 180deg, 0);
 
   &::before {
+    transform: translate($translate-x, $translate-y-caret) rotate($rotate-caret);
+
     @if ($position == 'top') {
       top: 1px;
     } @else {
@@ -110,10 +112,11 @@
       left: auto;
       right: 0;
     }
-    transform: translate($translate-x, $translate-y-caret) rotate($rotate-caret);
   }
 
   &::after {
+    transform: translate($translate-x, $translate-y-body);
+
     @if ($position == 'top') {
       top: 0;
     } @else {
@@ -125,7 +128,6 @@
     @if ($align == 'end') {
       right: 0;
     }
-    transform: translate($translate-x, $translate-y-body);
   }
 }
 
@@ -424,7 +426,7 @@
       border-bottom: $caret-size solid $inverse-02;
       position: absolute;
       left: 0;
-      top: calc(#{$caret-size * -1} + 1px);
+      top: calc(#{$caret-size * (-1)} + 1px);
       right: 0;
       width: 0;
       height: 0;
@@ -444,7 +446,7 @@
         left: auto;
         top: 50%;
         // left position has an additional space between caret and tooltip
-        right: calc(#{$caret-size * -1} + 1px);
+        right: calc(#{$caret-size * (-1)} + 1px);
         transform: rotate(90deg) translate(50%, -50%);
       }
     }
@@ -452,14 +454,14 @@
     &[data-floating-menu-direction='top'] {
       .#{$prefix}--tooltip__caret {
         top: auto;
-        bottom: calc(#{$caret-size * -1} + 1px);
+        bottom: calc(#{$caret-size * (-1)} + 1px);
         transform: rotate(180deg);
       }
     }
 
     &[data-floating-menu-direction='right'] {
       .#{$prefix}--tooltip__caret {
-        left: calc(#{$caret-size * -1} + 1px);
+        left: calc(#{$caret-size * (-1)} + 1px);
         top: 50%;
         right: auto;
         transform: rotate(270deg) translate(50%, -50%);
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index ecc32143dafe..8f406b44028c 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -53,18 +53,6 @@
     display: inline;
   }
 
-  .#{$prefix}--header__action
-    > svg.#{$prefix}--navigation-menu-panel-collapse-icon,
-  .#{$prefix}--header__action--active
-    > svg.#{$prefix}--navigation-menu-panel-expand-icon {
-    display: none;
-  }
-
-  .#{$prefix}--header__action--active
-    > svg.#{$prefix}--navigation-menu-panel-collapse-icon {
-    display: inline;
-  }
-
   .#{$prefix}--header__action:hover {
     background-color: $shell-header-bg-04;
   }
@@ -119,7 +107,7 @@
     text-decoration: none;
     font-weight: 600;
     letter-spacing: 0.1px;
-    line-height: 20px;
+    line-height: 1.25rem;
     user-select: none;
     border: rem(2px) solid transparent;
     transition: border-color $duration--fast-02;
@@ -185,7 +173,7 @@
     font-size: rem(14px);
     font-weight: 400;
     letter-spacing: 0;
-    line-height: rem(18px);
+    line-height: 1.125rem;
     // Reset link styles and make sure the text isn't selectable
     text-decoration: none;
     user-select: none;
diff --git a/packages/components/src/components/ui-shell/_product-switcher.scss b/packages/components/src/components/ui-shell/_product-switcher.scss
index c496e248bdaf..e4f33c47aa6e 100644
--- a/packages/components/src/components/ui-shell/_product-switcher.scss
+++ b/packages/components/src/components/ui-shell/_product-switcher.scss
@@ -94,10 +94,10 @@
   }
 
   .#{$prefix}--product-switcher__back-btn {
-    display: flex;
-    align-items: center;
     @include type-style('body-short-01');
 
+    display: flex;
+    align-items: center;
     padding: mini-units(1) mini-units(2);
   }
 
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index 182e3ebfacf8..d51d53f45743 100644
--- a/packages/components/src/components/ui-shell/_side-nav.scss
+++ b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -279,16 +279,13 @@
     height: 100%;
     text-align: left;
     transition: outline $duration--fast-02;
+    padding-left: mini-units(2);
   }
 
   .#{$prefix}--side-nav__toggle:focus {
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--side-nav__toggle {
-    padding-left: mini-units(2);
-  }
-
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > Item(s)
   //----------------------------------------------------------------------------
@@ -404,10 +401,8 @@
     transform: rotate(180deg);
   }
 
-  .#{$prefix}--side-nav__item--large {
-    .#{$prefix}--side-nav__submenu {
-      height: mini-units(6);
-    }
+  .#{$prefix}--side-nav__item--large .#{$prefix}--side-nav__submenu {
+    height: mini-units(6);
   }
 
   .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
@@ -491,10 +486,8 @@
       outline $duration--fast-02;
   }
 
-  .#{$prefix}--side-nav__item--large {
-    a.#{$prefix}--side-nav__link {
-      height: mini-units(6);
-    }
+  .#{$prefix}--side-nav__item--large a.#{$prefix}--side-nav__link {
+    height: mini-units(6);
   }
 
   a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
@@ -506,7 +499,7 @@
     color: $shell-side-nav-text-01;
     font-size: rem(14px);
     letter-spacing: 0.1px;
-    line-height: rem(20px);
+    line-height: 1.25rem;
     user-select: none;
   }
 
diff --git a/packages/components/src/components/ui-shell/_theme.scss b/packages/components/src/components/ui-shell/_theme.scss
index 86830f17e062..1e621bb9526e 100644
--- a/packages/components/src/components/ui-shell/_theme.scss
+++ b/packages/components/src/components/ui-shell/_theme.scss
@@ -20,7 +20,11 @@ $shell-header-bg-01: $carbon--gray-100;
 /// @type Color
 /// @access private
 /// @group ui-shell
+<<<<<<< HEAD
 /// TODO needs color var gray-100-hover
+=======
+//TODO needs color var gray-100-hover
+>>>>>>> chore(lint): clear rest of stylelint errors
 $shell-header-bg-02: #2c2c2c;
 
 /// Header action active background
@@ -33,7 +37,11 @@ $shell-header-bg-03: $carbon--gray-80;
 /// @type Color
 /// @access private
 /// @group ui-shell
+<<<<<<< HEAD
 /// TODO needs color var gray-90-hover
+=======
+//TODO needs color var gray-90-hover
+>>>>>>> chore(lint): clear rest of stylelint errors
 $shell-header-bg-04: #353535;
 
 /// Header nav link active and focus background
@@ -110,7 +118,11 @@ $shell-panel-bg-01: $carbon--gray-100;
 /// @type Color
 /// @access private
 /// @group ui-shell
+<<<<<<< HEAD
 /// TODO needs color var gray-100-hover
+=======
+//TODO needs color var gray-100-hover
+>>>>>>> chore(lint): clear rest of stylelint errors
 $shell-panel-bg-02: #2c2c2c;
 
 /// Panel item focus and active background
diff --git a/packages/stylelint-config-carbon/rules/limit-language-features.js b/packages/stylelint-config-carbon/rules/limit-language-features.js
index 581d6ea17092..4760957e2756 100644
--- a/packages/stylelint-config-carbon/rules/limit-language-features.js
+++ b/packages/stylelint-config-carbon/rules/limit-language-features.js
@@ -59,7 +59,7 @@ module.exports = {
     // Specify a blacklist of disallowed properties.
     'property-blacklist': OFF,
     // Disallow vendor prefixes for properties.
-    'property-no-vendor-prefix': true,
+    'property-no-vendor-prefix': OFF,
     // Specify a whitelist of allowed properties.
     'property-whitelist': OFF,
 
@@ -127,7 +127,7 @@ module.exports = {
     // Disallow qualifying a selector by type.
     'selector-no-qualifying-type': OFF,
     // Disallow vendor prefixes for selectors.
-    'selector-no-vendor-prefix': true,
+    'selector-no-vendor-prefix': OFF,
     // Specify a blacklist of disallowed pseudo-class selectors.
     'selector-pseudo-class-blacklist': OFF,
     // Specify a whitelist of allowed pseudo-class selectors.

From 51829f50704860cd550f94eaa7e6109bacc3c1a0 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 7 Jul 2020 14:24:21 -0700
Subject: [PATCH 6/9] chore(test): ignore react style errors

---
 .stylelintignore                     |  1 +
 packages/components/.stylelintignore | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 packages/components/.stylelintignore

diff --git a/.stylelintignore b/.stylelintignore
index 7b5e977c9e31..7033cfcd95f2 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -18,3 +18,4 @@ packages/components/src/components/date-picker/_flatpickr.scss
 
 # packages/react
 packages/react/storybook-static/**
+packages/react/src/components/**
diff --git a/packages/components/.stylelintignore b/packages/components/.stylelintignore
new file mode 100644
index 000000000000..ba79adff08d5
--- /dev/null
+++ b/packages/components/.stylelintignore
@@ -0,0 +1,20 @@
+**/build/**
+**/dist/**
+**/examples/**
+**/vendor/**
+**/_inlined/**
+
+# Generated SCSS directories and files
+**/packages/colors/**/*.scss
+**/packages/elements/scss/**/*.scss
+**/packages/themes/**/*.scss
+
+# packages/components
+demo/**
+tests/**
+css/**
+scss/**
+src/components/date-picker/_flatpickr.scss
+
+# packages/react
+packages/react/storybook-static/**

From 3e240ed530301be771ce26d91cd974cf7d644477 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 7 Jul 2020 14:42:34 -0700
Subject: [PATCH 7/9] chore(lint): fix more linting errors

---
 packages/components/.stylelintignore              | 13 -------------
 .../components/data-table/_data-table-core.scss   |  4 ----
 .../components/data-table/_data-table-sort.scss   |  1 +
 .../pagination/_unstable_pagination.scss          | 13 ++++++++-----
 .../src/components/ui-shell/_theme.scss           | 12 ------------
 .../components/src/globals/scss/_css--body.scss   |  1 +
 .../src/globals/scss/_css--helpers.scss           |  1 +
 .../components/src/globals/scss/_css--reset.scss  | 15 +++++++--------
 .../src/globals/scss/_helper-mixins.scss          |  3 ++-
 .../components/src/globals/scss/_tooltip.scss     |  2 --
 10 files changed, 20 insertions(+), 45 deletions(-)

diff --git a/packages/components/.stylelintignore b/packages/components/.stylelintignore
index ba79adff08d5..383c4007862e 100644
--- a/packages/components/.stylelintignore
+++ b/packages/components/.stylelintignore
@@ -1,14 +1,3 @@
-**/build/**
-**/dist/**
-**/examples/**
-**/vendor/**
-**/_inlined/**
-
-# Generated SCSS directories and files
-**/packages/colors/**/*.scss
-**/packages/elements/scss/**/*.scss
-**/packages/themes/**/*.scss
-
 # packages/components
 demo/**
 tests/**
@@ -16,5 +5,3 @@ css/**
 scss/**
 src/components/date-picker/_flatpickr.scss
 
-# packages/react
-packages/react/storybook-static/**
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index 6d51cad8a279..9cb81a440915 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -218,10 +218,6 @@
   .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
     padding-top: 0;
     padding-bottom: 0;
-  }
-
-  .#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
-  .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
     height: rem(24px);
   }
 
diff --git a/packages/components/src/components/data-table/_data-table-sort.scss b/packages/components/src/components/data-table/_data-table-sort.scss
index 120f89f1810b..626ce4b1c0a6 100644
--- a/packages/components/src/components/data-table/_data-table-sort.scss
+++ b/packages/components/src/components/data-table/_data-table-sort.scss
@@ -27,6 +27,7 @@
   // -------------------------------------
   .#{$prefix}--table-sort {
     @include button-reset(false);
+
     font: inherit;
     line-height: 1;
     display: flex;
diff --git a/packages/components/src/components/pagination/_unstable_pagination.scss b/packages/components/src/components/pagination/_unstable_pagination.scss
index 2241450a49b7..ac5e7512de4c 100644
--- a/packages/components/src/components/pagination/_unstable_pagination.scss
+++ b/packages/components/src/components/pagination/_unstable_pagination.scss
@@ -22,6 +22,7 @@ $css--helpers: true;
   .#{$prefix}--unstable-pagination {
     @include reset;
     @include carbon--type-style('body-short-01');
+
     width: 100%;
     background-color: $ui-01;
     display: flex;
@@ -70,6 +71,7 @@ $css--helpers: true;
 
   .#{$prefix}--unstable-pagination__button {
     @include reset;
+
     border: none;
     border-left: 1px solid $ui-03;
     background: none;
@@ -80,16 +82,16 @@ $css--helpers: true;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: $ui-05; // for currentColor
+    color: $ui-05;
     fill: $ui-05;
-    transition: outline $duration--fast-02 motion(standard, productive);
-    transition: background-color $duration--fast-02 motion(standard, productive);
+    transition: outline $duration--fast-02 motion(standard, productive),
+      background-color $duration--fast-02 motion(standard, productive);
   }
 
   // Unset height/width set by icon-only button:
   .#{$prefix}--unstable-pagination__button .#{$prefix}--btn__icon {
-    height: unset;
-    width: unset;
+    height: initial;
+    width: initial;
   }
 
   .#{$prefix}--unstable-pagination__button.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
@@ -135,6 +137,7 @@ $css--helpers: true;
   .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select-input,
   .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input {
     @include carbon--type-style('body-short-01');
+
     width: auto;
     min-width: auto;
     height: 100%;
diff --git a/packages/components/src/components/ui-shell/_theme.scss b/packages/components/src/components/ui-shell/_theme.scss
index 1e621bb9526e..86830f17e062 100644
--- a/packages/components/src/components/ui-shell/_theme.scss
+++ b/packages/components/src/components/ui-shell/_theme.scss
@@ -20,11 +20,7 @@ $shell-header-bg-01: $carbon--gray-100;
 /// @type Color
 /// @access private
 /// @group ui-shell
-<<<<<<< HEAD
 /// TODO needs color var gray-100-hover
-=======
-//TODO needs color var gray-100-hover
->>>>>>> chore(lint): clear rest of stylelint errors
 $shell-header-bg-02: #2c2c2c;
 
 /// Header action active background
@@ -37,11 +33,7 @@ $shell-header-bg-03: $carbon--gray-80;
 /// @type Color
 /// @access private
 /// @group ui-shell
-<<<<<<< HEAD
 /// TODO needs color var gray-90-hover
-=======
-//TODO needs color var gray-90-hover
->>>>>>> chore(lint): clear rest of stylelint errors
 $shell-header-bg-04: #353535;
 
 /// Header nav link active and focus background
@@ -118,11 +110,7 @@ $shell-panel-bg-01: $carbon--gray-100;
 /// @type Color
 /// @access private
 /// @group ui-shell
-<<<<<<< HEAD
 /// TODO needs color var gray-100-hover
-=======
-//TODO needs color var gray-100-hover
->>>>>>> chore(lint): clear rest of stylelint errors
 $shell-panel-bg-02: #2c2c2c;
 
 /// Panel item focus and active background
diff --git a/packages/components/src/globals/scss/_css--body.scss b/packages/components/src/globals/scss/_css--body.scss
index a2b95aea1361..f3d40b442ba2 100644
--- a/packages/components/src/globals/scss/_css--body.scss
+++ b/packages/components/src/globals/scss/_css--body.scss
@@ -17,6 +17,7 @@
   body {
     @include reset;
     @include type-style('body-short-01');
+
     color: $text-01;
     background-color: $ui-background;
     line-height: 1;
diff --git a/packages/components/src/globals/scss/_css--helpers.scss b/packages/components/src/globals/scss/_css--helpers.scss
index 2b4cd3caa81b..62aefb34d703 100644
--- a/packages/components/src/globals/scss/_css--helpers.scss
+++ b/packages/components/src/globals/scss/_css--helpers.scss
@@ -31,6 +31,7 @@
   .#{$prefix}--body {
     @include reset;
     @include type-style('body-short-01');
+
     color: $text-01;
     background-color: $ui-background;
     line-height: 1;
diff --git a/packages/components/src/globals/scss/_css--reset.scss b/packages/components/src/globals/scss/_css--reset.scss
index 8d60fd07128d..7ca80f4df72f 100644
--- a/packages/components/src/globals/scss/_css--reset.scss
+++ b/packages/components/src/globals/scss/_css--reset.scss
@@ -23,8 +23,8 @@
     vertical-align: baseline;
 
     *,
-    *:before,
-    *:after {
+    *::before,
+    *::after {
       box-sizing: inherit;
     }
   }
@@ -117,8 +117,8 @@
       margin: 0;
       padding: 0;
       border: 0;
-      font-size: 100%;
       font: inherit;
+      font-size: 100%;
       vertical-align: baseline;
     }
 
@@ -173,12 +173,11 @@
       quotes: none;
     }
 
-    blockquote:before,
-    blockquote:after,
-    q:before,
-    q:after {
+    blockquote::before,
+    blockquote::after,
+    q::before,
+    q::after {
       content: '';
-      content: none;
     }
 
     table {
diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss
index 3ec729c9c5b4..69ebc1642c5a 100644
--- a/packages/components/src/globals/scss/_helper-mixins.scss
+++ b/packages/components/src/globals/scss/_helper-mixins.scss
@@ -129,6 +129,7 @@
 /// @group global-helpers
 @mixin button-reset($width: true) {
   @include reset;
+
   display: inline-block;
   background: none;
   appearance: none;
@@ -165,7 +166,7 @@
     cursor: default;
   }
 
-  &:before {
+  &::before {
     content: '';
     width: 0%;
     height: 100%;
diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
index 9b1228b4c48b..7729ca1e64b8 100644
--- a/packages/components/src/globals/scss/_tooltip.scss
+++ b/packages/components/src/globals/scss/_tooltip.scss
@@ -272,8 +272,6 @@
   // @todo Simplify CSS selectors on next major release
   &::after,
   .#{$prefix}--assistive-text,
-  .#{$prefix}--assistive-text,
-  + .#{$prefix}--assistive-text,
   + .#{$prefix}--assistive-text {
     @if ($position == 'top') {
       top: -$body-spacing;

From dff0eae0077cb9bce656c6f5d1237a554e78caf4 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 7 Jul 2020 15:07:38 -0700
Subject: [PATCH 8/9] chore(lint): remove unused stylelint ignore

---
 packages/components/src/components/tabs/_tabs.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
index 5e21af5cda9e..a7f1246f3d2d 100644
--- a/packages/components/src/components/tabs/_tabs.scss
+++ b/packages/components/src/components/tabs/_tabs.scss
@@ -277,9 +277,7 @@
       .#{$prefix}--tabs__nav-link {
         // height - vertical padding
         // Draws the border without affecting the inner-content
-        /* stylelint-disable declaration-property-unit-whitelist */
         line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-        /* stylelint-enable declaration-property-unit-whitelist */
         box-shadow: inset 0 2px 0 0 $interactive-04;
         border-bottom: none;
         padding: $spacing-03 $spacing-05;
@@ -342,9 +340,7 @@
     @include carbon--breakpoint(md) {
       height: rem(48px);
       // Height - vertical padding
-      /* stylelint-disable declaration-property-unit-whitelist */
       line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-      /* stylelint-enable declaration-property-unit-whitelist */
       border-bottom: none;
       padding: $spacing-03 $spacing-05;
     }

From e253e92d21b6a5115532c5964b75db832db41b6d Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 10 Jul 2020 09:55:52 -0700
Subject: [PATCH 9/9] chore(lint): fix lint error

---
 packages/components/src/components/text-input/_text-input.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
index 66e3a3f42130..adf75a5ad02d 100644
--- a/packages/components/src/components/text-input/_text-input.scss
+++ b/packages/components/src/components/text-input/_text-input.scss
@@ -233,8 +233,7 @@
   //-----------------------------
 
   .#{$prefix}--text-input-wrapper--inline {
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
   }
 
   .#{$prefix}--label--inline {