From 801b9c1769d6fe757d9510ffc3558810d4b44a57 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Wed, 11 Nov 2020 14:14:17 -0600
Subject: [PATCH 01/15] fix(tooltip): add :active:visited styles on links
 (#7276)

---
 packages/components/src/components/tooltip/_tooltip.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index ddb604499e8b..98fe76ca28d3 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -418,7 +418,9 @@
         outline-offset: 2px;
       }
 
-      &:active {
+      &:active,
+      &:active:visited,
+      &:active:visited:hover {
         color: $inverse-01;
       }
 

From 7553cab77e5a6b1d4a2c03546a8acb23c298ade6 Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Wed, 11 Nov 2020 20:32:22 +0000
Subject: [PATCH 02/15] chore(project): sync generated files

---
 packages/components/docs/sass.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index cea877147d5c..01f2a3f6f3d8 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -26819,7 +26819,9 @@ Tooltip styles
         outline-offset: 2px;
       }
 
-      &:active {
+      &:active,
+      &:active:visited,
+      &:active:visited:hover {
         color: $inverse-01;
       }
 

From 22c240947dd2fb82371da1901923e52cf1079a30 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Thu, 12 Nov 2020 10:23:13 -0600
Subject: [PATCH 03/15] feat: add active-light-ui token and update
 hover-light-ui (#7275)

* fix: update hover-light-ui-token values

* feat: add active-light-ui token

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
---
 packages/themes/src/g10.js    |  4 ++--
 packages/themes/src/g100.js   |  4 ++--
 packages/themes/src/g90.js    |  4 ++--
 packages/themes/src/tokens.js | 10 +++++-----
 packages/themes/src/v9.js     |  4 ++--
 packages/themes/src/white.js  |  4 ++--
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 6ba4a2d9d287..9b23b3350759 100644
--- a/packages/themes/src/g10.js
+++ b/packages/themes/src/g10.js
@@ -107,7 +107,9 @@ export const hoverTertiary = '#0353e9';
 export const activeTertiary = blue80;
 
 export const hoverUI = '#e5e5e5';
+export const hoverLightUI = '#e5e5e5';
 export const activeUI = gray30;
+export const activeLightUI = gray30;
 export const selectedUI = gray20;
 export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
@@ -129,8 +131,6 @@ export const highlight = blue10;
 
 export const decorative01 = gray20;
 
-export const hoverLightUI = '#e5e5e5';
-
 export const buttonSeparator = '#e0e0e0';
 
 export const skeleton01 = '#e5e5e5';
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 5eba6d7fd1ae..c44aa719b939 100644
--- a/packages/themes/src/g100.js
+++ b/packages/themes/src/g100.js
@@ -106,7 +106,9 @@ export const hoverTertiary = gray10;
 export const activeTertiary = gray30;
 
 export const hoverUI = '#353535';
+export const hoverLightUI = '#4c4c4c';
 export const activeUI = gray70;
+export const activeLightUI = gray60;
 export const selectedUI = gray80;
 export const selectedLightUI = gray70;
 export const inverseHoverUI = '#e5e5e5';
@@ -128,8 +130,6 @@ export const highlight = blue80;
 
 export const decorative01 = gray70;
 
-export const hoverLightUI = '#525252';
-
 export const buttonSeparator = '#161616';
 
 export const skeleton01 = '#353535';
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index 9fcf604f899e..595674dd3207 100644
--- a/packages/themes/src/g90.js
+++ b/packages/themes/src/g90.js
@@ -108,7 +108,9 @@ export const hoverTertiary = gray10;
 export const activeTertiary = gray30;
 
 export const hoverUI = '#4c4c4c';
+export const hoverLightUI = '#656565';
 export const activeUI = gray60;
+export const activeLightUI = gray50;
 export const selectedUI = gray70;
 export const selectedLightUI = gray60;
 export const inverseHoverUI = '#e5e5e5';
@@ -130,8 +132,6 @@ export const highlight = blue70;
 
 export const decorative01 = gray60;
 
-export const hoverLightUI = '#6f6f6f';
-
 export const buttonSeparator = '#161616';
 
 export const skeleton01 = '#353535';
diff --git a/packages/themes/src/tokens.js b/packages/themes/src/tokens.js
index cc76c3118fc7..4d2fb8965b89 100644
--- a/packages/themes/src/tokens.js
+++ b/packages/themes/src/tokens.js
@@ -76,11 +76,12 @@ const colors = [
   'activeTertiary',
 
   'hoverUI',
+  'hoverLightUI',
+  'hoverSelectedUI',
   'activeUI',
-
+  'activeLightUI',
   'selectedUI',
   'selectedLightUI',
-  'hoverSelectedUI',
   'inverseHoverUI',
 
   'hoverDanger',
@@ -98,8 +99,6 @@ const colors = [
 
   'decorative01',
 
-  'hoverLightUI',
-
   'buttonSeparator',
 
   'skeleton01',
@@ -217,6 +216,7 @@ export const unstable__meta = {
         'hoverSecondary',
         'hoverTertiary',
         'hoverUI',
+        'hoverLightUI',
         'hoverSelectedUI',
         'hoverDanger',
         'hoverRow',
@@ -224,6 +224,7 @@ export const unstable__meta = {
         'activeSecondary',
         'activeTertiary',
         'activeUI',
+        'activeLightUI',
         'activeDanger',
         'selectedUI',
         'selectedLightUI',
@@ -238,7 +239,6 @@ export const unstable__meta = {
         'active01',
         'hoverField',
         'decorative01',
-        'hoverLightUI',
         'buttonSeparator',
       ],
     },
diff --git a/packages/themes/src/v9.js b/packages/themes/src/v9.js
index fb768ee37264..b02db3b9b005 100644
--- a/packages/themes/src/v9.js
+++ b/packages/themes/src/v9.js
@@ -71,7 +71,9 @@ export const hoverTertiary = '#5a6872';
 export const activeTertiary = '#414f59';
 
 export const hoverUI = '#EEF4FC';
+export const hoverLightUI = '#EEF4FC';
 export const activeUI = '#DFEAFA';
+export const activeLightUI = '#DFEAFA';
 export const selectedUI = '#EEF4FC';
 export const selectedLightUI = '#EEF4FC';
 export const inverseHoverUI = '#4c4c4c';
@@ -93,8 +95,6 @@ export const highlight = '#f4f7fb';
 
 export const decorative01 = '#EEF4FC';
 
-export const hoverLightUI = '#EEF4FC';
-
 export const buttonSeparator = '#e0e0e0';
 
 export const skeleton01 = 'rgba(61, 112, 178, .1)';
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index a00eae6ad2ab..728e85706efe 100644
--- a/packages/themes/src/white.js
+++ b/packages/themes/src/white.js
@@ -107,7 +107,9 @@ export const hoverTertiary = '#0353e9';
 export const activeTertiary = blue80;
 
 export const hoverUI = '#e5e5e5';
+export const hoverLightUI = '#e5e5e5';
 export const activeUI = gray30;
+export const activeLightUI = gray30;
 export const selectedUI = gray20;
 export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
@@ -129,8 +131,6 @@ export const highlight = blue20;
 
 export const decorative01 = gray20;
 
-export const hoverLightUI = '#e5e5e5';
-
 export const buttonSeparator = '#e0e0e0';
 
 export const skeleton01 = '#e5e5e5';

From 582762826571700ce5f8c62943a55069be57e5f1 Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Thu, 12 Nov 2020 16:44:15 +0000
Subject: [PATCH 04/15] chore(project): sync generated files

---
 packages/components/docs/sass.md | 235 ++++++++++++++++++-------------
 packages/elements/docs/sass.md   | 213 +++++++++++++++++-----------
 packages/themes/docs/sass.md     | 213 +++++++++++++++++-----------
 3 files changed, 401 insertions(+), 260 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 01f2a3f6f3d8..68dd5ac62e17 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -182,10 +182,12 @@
   - [✅hover-tertiary [variable]](#hover-tertiary-variable)
   - [✅active-tertiary [variable]](#active-tertiary-variable)
   - [✅hover-ui [variable]](#hover-ui-variable)
+  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
+  - [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [✅active-ui [variable]](#active-ui-variable)
+  - [✅active-light-ui [variable]](#active-light-ui-variable)
   - [✅selected-ui [variable]](#selected-ui-variable)
   - [✅selected-light-ui [variable]](#selected-light-ui-variable)
-  - [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [✅inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [✅hover-danger [variable]](#hover-danger-variable)
   - [✅active-danger [variable]](#active-danger-variable)
@@ -196,7 +198,6 @@
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
   - [✅decorative-01 [variable]](#decorative-01-variable)
-  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
   - [✅button-separator [variable]](#button-separator-variable)
   - [✅skeleton-01 [variable]](#skeleton-01-variable)
   - [✅skeleton-02 [variable]](#skeleton-02-variable)
@@ -4246,10 +4247,12 @@ Define theme variables from a map of tokens
   $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
   $active-tertiary: map-get($theme, 'active-tertiary') !global;
   $hover-ui: map-get($theme, 'hover-ui') !global;
+  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
+  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $active-ui: map-get($theme, 'active-ui') !global;
+  $active-light-ui: map-get($theme, 'active-light-ui') !global;
   $selected-ui: map-get($theme, 'selected-ui') !global;
   $selected-light-ui: map-get($theme, 'selected-light-ui') !global;
-  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
   $hover-danger: map-get($theme, 'hover-danger') !global;
   $active-danger: map-get($theme, 'active-danger') !global;
@@ -4260,7 +4263,6 @@ Define theme variables from a map of tokens
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
   $decorative-01: map-get($theme, 'decorative-01') !global;
-  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
   $button-separator: map-get($theme, 'button-separator') !global;
   $skeleton-01: map-get($theme, 'skeleton-01') !global;
   $skeleton-02: map-get($theme, 'skeleton-02') !global;
@@ -4519,10 +4521,22 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-hover-ui,
       map-get($theme, 'hover-ui')
     ) !global;
+    $hover-light-ui: var(
+      --#{$custom-property-prefix}-hover-light-ui,
+      map-get($theme, 'hover-light-ui')
+    ) !global;
+    $hover-selected-ui: var(
+      --#{$custom-property-prefix}-hover-selected-ui,
+      map-get($theme, 'hover-selected-ui')
+    ) !global;
     $active-ui: var(
       --#{$custom-property-prefix}-active-ui,
       map-get($theme, 'active-ui')
     ) !global;
+    $active-light-ui: var(
+      --#{$custom-property-prefix}-active-light-ui,
+      map-get($theme, 'active-light-ui')
+    ) !global;
     $selected-ui: var(
       --#{$custom-property-prefix}-selected-ui,
       map-get($theme, 'selected-ui')
@@ -4531,10 +4545,6 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-selected-light-ui,
       map-get($theme, 'selected-light-ui')
     ) !global;
-    $hover-selected-ui: var(
-      --#{$custom-property-prefix}-hover-selected-ui,
-      map-get($theme, 'hover-selected-ui')
-    ) !global;
     $inverse-hover-ui: var(
       --#{$custom-property-prefix}-inverse-hover-ui,
       map-get($theme, 'inverse-hover-ui')
@@ -4575,10 +4585,6 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-decorative-01,
       map-get($theme, 'decorative-01')
     ) !global;
-    $hover-light-ui: var(
-      --#{$custom-property-prefix}-hover-light-ui,
-      map-get($theme, 'hover-light-ui')
-    ) !global;
     $button-separator: var(
       --#{$custom-property-prefix}-button-separator,
       map-get($theme, 'button-separator')
@@ -5133,44 +5139,70 @@ Define theme variables from a map of tokens
       @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
     }
 
-    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'hover-light-ui',
+      $emit-difference
+    )
     {
-      @include custom-property('active-ui', map-get($theme, 'active-ui'));
+      @include custom-property(
+        'hover-light-ui',
+        map-get($theme, 'hover-light-ui')
+      );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-ui',
+      'hover-selected-ui',
       $emit-difference
     )
     {
-      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+      @include custom-property(
+        'hover-selected-ui',
+        map-get($theme, 'hover-selected-ui')
+      );
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    {
+      @include custom-property('active-ui', map-get($theme, 'active-ui'));
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-light-ui',
+      'active-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'selected-light-ui',
-        map-get($theme, 'selected-light-ui')
+        'active-light-ui',
+        map-get($theme, 'active-light-ui')
       );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'hover-selected-ui',
+      'selected-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'selected-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'hover-selected-ui',
-        map-get($theme, 'hover-selected-ui')
+        'selected-light-ui',
+        map-get($theme, 'selected-light-ui')
       );
     }
 
@@ -5273,19 +5305,6 @@ Define theme variables from a map of tokens
       );
     }
 
-    @if should-emit(
-      $theme,
-      $parent-carbon-theme,
-      'hover-light-ui',
-      $emit-difference
-    )
-    {
-      @include custom-property(
-        'hover-light-ui',
-        map-get($theme, 'hover-light-ui')
-      );
-    }
-
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -6072,10 +6091,12 @@ Define theme variables from a map of tokens
   - [hover-tertiary [variable]](#hover-tertiary-variable)
   - [active-tertiary [variable]](#active-tertiary-variable)
   - [hover-ui [variable]](#hover-ui-variable)
+  - [hover-light-ui [variable]](#hover-light-ui-variable)
+  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [active-ui [variable]](#active-ui-variable)
+  - [active-light-ui [variable]](#active-light-ui-variable)
   - [selected-ui [variable]](#selected-ui-variable)
   - [selected-light-ui [variable]](#selected-light-ui-variable)
-  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [hover-danger [variable]](#hover-danger-variable)
   - [active-danger [variable]](#active-danger-variable)
@@ -6086,7 +6107,6 @@ Define theme variables from a map of tokens
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
   - [decorative-01 [variable]](#decorative-01-variable)
-  - [hover-light-ui [variable]](#hover-light-ui-variable)
   - [button-separator [variable]](#button-separator-variable)
   - [skeleton-01 [variable]](#skeleton-01-variable)
   - [skeleton-02 [variable]](#skeleton-02-variable)
@@ -6234,7 +6254,9 @@ $carbon--theme--g90: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #4c4c4c,
+    hover-light-ui: #656565,
     active-ui: #6f6f6f,
+    active-light-ui: #8d8d8d,
     selected-ui: #525252,
     selected-light-ui: #6f6f6f,
     inverse-hover-ui: #e5e5e5,
@@ -6246,7 +6268,6 @@ $carbon--theme--g90: map-merge(
     disabled-03: #a8a8a8,
     highlight: #0043ce,
     decorative-01: #6f6f6f,
-    hover-light-ui: #6f6f6f,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
@@ -6312,7 +6333,9 @@ $carbon--theme--g100: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #353535,
+    hover-light-ui: #4c4c4c,
     active-ui: #525252,
+    active-light-ui: #6f6f6f,
     selected-ui: #393939,
     selected-light-ui: #525252,
     inverse-hover-ui: #e5e5e5,
@@ -6323,7 +6346,6 @@ $carbon--theme--g100: map-merge(
     disabled-02: #525252,
     highlight: #002d9c,
     decorative-01: #525252,
-    hover-light-ui: #525252,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #393939,
@@ -6392,7 +6414,9 @@ $carbon--theme--v9: map-merge(
     hover-tertiary: #5a6872,
     active-tertiary: #414f59,
     hover-ui: #eef4fc,
+    hover-light-ui: #eef4fc,
     active-ui: #dfeafa,
+    active-light-ui: #dfeafa,
     selected-ui: #eef4fc,
     selected-light-ui: #eef4fc,
     hover-selected-ui: #dfeafa,
@@ -6405,7 +6429,6 @@ $carbon--theme--v9: map-merge(
     disabled-03: #cdd1d4,
     highlight: #f4f7fb,
     decorative-01: #eef4fc,
-    hover-light-ui: #eef4fc,
     skeleton-01: rgba(61, 112, 178, 0.1),
     skeleton-02: rgba(61, 112, 178, 0.1),
     brand-01: #3d70b2,
@@ -6477,10 +6500,12 @@ $carbon--theme: (
   hover-tertiary: if(global-variable-exists('hover-tertiary'), $hover-tertiary, map-get($carbon--theme--white, 'hover-tertiary')),
   active-tertiary: if(global-variable-exists('active-tertiary'), $active-tertiary, map-get($carbon--theme--white, 'active-tertiary')),
   hover-ui: if(global-variable-exists('hover-ui'), $hover-ui, map-get($carbon--theme--white, 'hover-ui')),
+  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
+  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
   active-ui: if(global-variable-exists('active-ui'), $active-ui, map-get($carbon--theme--white, 'active-ui')),
+  active-light-ui: if(global-variable-exists('active-light-ui'), $active-light-ui, map-get($carbon--theme--white, 'active-light-ui')),
   selected-ui: if(global-variable-exists('selected-ui'), $selected-ui, map-get($carbon--theme--white, 'selected-ui')),
   selected-light-ui: if(global-variable-exists('selected-light-ui'), $selected-light-ui, map-get($carbon--theme--white, 'selected-light-ui')),
-  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
   inverse-hover-ui: if(global-variable-exists('inverse-hover-ui'), $inverse-hover-ui, map-get($carbon--theme--white, 'inverse-hover-ui')),
   hover-danger: if(global-variable-exists('hover-danger'), $hover-danger, map-get($carbon--theme--white, 'hover-danger')),
   active-danger: if(global-variable-exists('active-danger'), $active-danger, map-get($carbon--theme--white, 'active-danger')),
@@ -6491,7 +6516,6 @@ $carbon--theme: (
   disabled-03: if(global-variable-exists('disabled-03'), $disabled-03, map-get($carbon--theme--white, 'disabled-03')),
   highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
   decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
-  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
   button-separator: if(global-variable-exists('button-separator'), $button-separator, map-get($carbon--theme--white, 'button-separator')),
   skeleton-01: if(global-variable-exists('skeleton-01'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
   skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
@@ -8014,6 +8038,59 @@ $hover-ui: if(
   - [time-picker [mixin]](#time-picker-mixin)
   - [treeview [mixin]](#treeview-mixin)
 
+### ✅hover-light-ui [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$hover-light-ui: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'hover-light-ui'
+    ),
+  map-get($carbon--theme, 'hover-light-ui'),
+  #e5e5e5
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [content-switcher [mixin]](#content-switcher-mixin)
+
+### ✅hover-selected-ui [variable]
+
+Data table selected row hover
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$hover-selected-ui: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'hover-selected-ui'
+    ),
+  map-get($carbon--theme, 'hover-selected-ui'),
+  #cacaca
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
+  - [tabs [mixin]](#tabs-mixin)
+  - [treeview [mixin]](#treeview-mixin)
+
 ### ✅active-ui [variable]
 
 `$ui-01` active; `$ui-02` active
@@ -8044,21 +8121,19 @@ $active-ui: if(
   - [data-table-core [mixin]](#data-table-core-mixin)
   - [data-table-expandable [mixin]](#data-table-expandable-mixin)
 
-### ✅selected-ui [variable]
-
-Selected UI elements
+### ✅active-light-ui [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$selected-ui: if(
+$active-light-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'selected-ui'
+      'active-light-ui'
     ),
-  map-get($carbon--theme, 'selected-ui'),
-  #e0e0e0
+  map-get($carbon--theme, 'active-light-ui'),
+  #c6c6c6
 );
 ```
 
@@ -8068,25 +8143,21 @@ $selected-ui: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
-  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
-  - [dropdown [mixin]](#dropdown-mixin)
-  - [listbox [mixin]](#listbox-mixin)
-  - [search [mixin]](#search-mixin)
-  - [treeview [mixin]](#treeview-mixin)
 
-### ✅selected-light-ui [variable]
+### ✅selected-ui [variable]
+
+Selected UI elements
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$selected-light-ui: if(
+$selected-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'selected-light-ui'
+      'selected-ui'
     ),
-  map-get($carbon--theme, 'selected-light-ui'),
+  map-get($carbon--theme, 'selected-ui'),
   #e0e0e0
 );
 ```
@@ -8097,23 +8168,26 @@ $selected-light-ui: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [data-table-core [mixin]](#data-table-core-mixin)
+  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
+  - [dropdown [mixin]](#dropdown-mixin)
   - [listbox [mixin]](#listbox-mixin)
+  - [search [mixin]](#search-mixin)
+  - [treeview [mixin]](#treeview-mixin)
 
-### ✅hover-selected-ui [variable]
-
-Data table selected row hover
+### ✅selected-light-ui [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$hover-selected-ui: if(
+$selected-light-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'hover-selected-ui'
+      'selected-light-ui'
     ),
-  map-get($carbon--theme, 'hover-selected-ui'),
-  #cacaca
+  map-get($carbon--theme, 'selected-light-ui'),
+  #e0e0e0
 );
 ```
 
@@ -8123,10 +8197,7 @@ $hover-selected-ui: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
-  - [data-table-expandable [mixin]](#data-table-expandable-mixin)
-  - [tabs [mixin]](#tabs-mixin)
-  - [treeview [mixin]](#treeview-mixin)
+  - [listbox [mixin]](#listbox-mixin)
 
 ### ✅inverse-hover-ui [variable]
 
@@ -8421,30 +8492,6 @@ $decorative-01: if(
   - [listbox [mixin]](#listbox-mixin)
   - [overflow-menu [mixin]](#overflow-menu-mixin)
 
-### ✅hover-light-ui [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-light-ui: if(
-  global-variable-exists('carbon--theme') and map-has-key(
-      $carbon--theme,
-      'hover-light-ui'
-    ),
-  map-get($carbon--theme, 'hover-light-ui'),
-  #e5e5e5
-);
-```
-
-</details>
-
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `{undefined}`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [content-switcher [mixin]](#content-switcher-mixin)
-
 ### ✅button-separator [variable]
 
 <details>
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index d49c57034efd..b9d464d73d27 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -182,10 +182,12 @@
   - [✅hover-tertiary [variable]](#hover-tertiary-variable)
   - [✅active-tertiary [variable]](#active-tertiary-variable)
   - [✅hover-ui [variable]](#hover-ui-variable)
+  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
+  - [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [✅active-ui [variable]](#active-ui-variable)
+  - [✅active-light-ui [variable]](#active-light-ui-variable)
   - [✅selected-ui [variable]](#selected-ui-variable)
   - [✅selected-light-ui [variable]](#selected-light-ui-variable)
-  - [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [✅inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [✅hover-danger [variable]](#hover-danger-variable)
   - [✅active-danger [variable]](#active-danger-variable)
@@ -196,7 +198,6 @@
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
   - [✅decorative-01 [variable]](#decorative-01-variable)
-  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
   - [✅button-separator [variable]](#button-separator-variable)
   - [✅skeleton-01 [variable]](#skeleton-01-variable)
   - [✅skeleton-02 [variable]](#skeleton-02-variable)
@@ -3857,10 +3858,12 @@ Define theme variables from a map of tokens
   $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
   $active-tertiary: map-get($theme, 'active-tertiary') !global;
   $hover-ui: map-get($theme, 'hover-ui') !global;
+  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
+  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $active-ui: map-get($theme, 'active-ui') !global;
+  $active-light-ui: map-get($theme, 'active-light-ui') !global;
   $selected-ui: map-get($theme, 'selected-ui') !global;
   $selected-light-ui: map-get($theme, 'selected-light-ui') !global;
-  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
   $hover-danger: map-get($theme, 'hover-danger') !global;
   $active-danger: map-get($theme, 'active-danger') !global;
@@ -3871,7 +3874,6 @@ Define theme variables from a map of tokens
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
   $decorative-01: map-get($theme, 'decorative-01') !global;
-  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
   $button-separator: map-get($theme, 'button-separator') !global;
   $skeleton-01: map-get($theme, 'skeleton-01') !global;
   $skeleton-02: map-get($theme, 'skeleton-02') !global;
@@ -4130,10 +4132,22 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-hover-ui,
       map-get($theme, 'hover-ui')
     ) !global;
+    $hover-light-ui: var(
+      --#{$custom-property-prefix}-hover-light-ui,
+      map-get($theme, 'hover-light-ui')
+    ) !global;
+    $hover-selected-ui: var(
+      --#{$custom-property-prefix}-hover-selected-ui,
+      map-get($theme, 'hover-selected-ui')
+    ) !global;
     $active-ui: var(
       --#{$custom-property-prefix}-active-ui,
       map-get($theme, 'active-ui')
     ) !global;
+    $active-light-ui: var(
+      --#{$custom-property-prefix}-active-light-ui,
+      map-get($theme, 'active-light-ui')
+    ) !global;
     $selected-ui: var(
       --#{$custom-property-prefix}-selected-ui,
       map-get($theme, 'selected-ui')
@@ -4142,10 +4156,6 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-selected-light-ui,
       map-get($theme, 'selected-light-ui')
     ) !global;
-    $hover-selected-ui: var(
-      --#{$custom-property-prefix}-hover-selected-ui,
-      map-get($theme, 'hover-selected-ui')
-    ) !global;
     $inverse-hover-ui: var(
       --#{$custom-property-prefix}-inverse-hover-ui,
       map-get($theme, 'inverse-hover-ui')
@@ -4186,10 +4196,6 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-decorative-01,
       map-get($theme, 'decorative-01')
     ) !global;
-    $hover-light-ui: var(
-      --#{$custom-property-prefix}-hover-light-ui,
-      map-get($theme, 'hover-light-ui')
-    ) !global;
     $button-separator: var(
       --#{$custom-property-prefix}-button-separator,
       map-get($theme, 'button-separator')
@@ -4744,44 +4750,70 @@ Define theme variables from a map of tokens
       @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
     }
 
-    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'hover-light-ui',
+      $emit-difference
+    )
     {
-      @include custom-property('active-ui', map-get($theme, 'active-ui'));
+      @include custom-property(
+        'hover-light-ui',
+        map-get($theme, 'hover-light-ui')
+      );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-ui',
+      'hover-selected-ui',
       $emit-difference
     )
     {
-      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+      @include custom-property(
+        'hover-selected-ui',
+        map-get($theme, 'hover-selected-ui')
+      );
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    {
+      @include custom-property('active-ui', map-get($theme, 'active-ui'));
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-light-ui',
+      'active-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'selected-light-ui',
-        map-get($theme, 'selected-light-ui')
+        'active-light-ui',
+        map-get($theme, 'active-light-ui')
       );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'hover-selected-ui',
+      'selected-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'selected-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'hover-selected-ui',
-        map-get($theme, 'hover-selected-ui')
+        'selected-light-ui',
+        map-get($theme, 'selected-light-ui')
       );
     }
 
@@ -4884,19 +4916,6 @@ Define theme variables from a map of tokens
       );
     }
 
-    @if should-emit(
-      $theme,
-      $parent-carbon-theme,
-      'hover-light-ui',
-      $emit-difference
-    )
-    {
-      @include custom-property(
-        'hover-light-ui',
-        map-get($theme, 'hover-light-ui')
-      );
-    }
-
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -5683,10 +5702,12 @@ Define theme variables from a map of tokens
   - [hover-tertiary [variable]](#hover-tertiary-variable)
   - [active-tertiary [variable]](#active-tertiary-variable)
   - [hover-ui [variable]](#hover-ui-variable)
+  - [hover-light-ui [variable]](#hover-light-ui-variable)
+  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [active-ui [variable]](#active-ui-variable)
+  - [active-light-ui [variable]](#active-light-ui-variable)
   - [selected-ui [variable]](#selected-ui-variable)
   - [selected-light-ui [variable]](#selected-light-ui-variable)
-  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [hover-danger [variable]](#hover-danger-variable)
   - [active-danger [variable]](#active-danger-variable)
@@ -5697,7 +5718,6 @@ Define theme variables from a map of tokens
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
   - [decorative-01 [variable]](#decorative-01-variable)
-  - [hover-light-ui [variable]](#hover-light-ui-variable)
   - [button-separator [variable]](#button-separator-variable)
   - [skeleton-01 [variable]](#skeleton-01-variable)
   - [skeleton-02 [variable]](#skeleton-02-variable)
@@ -5845,7 +5865,9 @@ $carbon--theme--g90: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #4c4c4c,
+    hover-light-ui: #656565,
     active-ui: #6f6f6f,
+    active-light-ui: #8d8d8d,
     selected-ui: #525252,
     selected-light-ui: #6f6f6f,
     inverse-hover-ui: #e5e5e5,
@@ -5857,7 +5879,6 @@ $carbon--theme--g90: map-merge(
     disabled-03: #a8a8a8,
     highlight: #0043ce,
     decorative-01: #6f6f6f,
-    hover-light-ui: #6f6f6f,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
@@ -5923,7 +5944,9 @@ $carbon--theme--g100: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #353535,
+    hover-light-ui: #4c4c4c,
     active-ui: #525252,
+    active-light-ui: #6f6f6f,
     selected-ui: #393939,
     selected-light-ui: #525252,
     inverse-hover-ui: #e5e5e5,
@@ -5934,7 +5957,6 @@ $carbon--theme--g100: map-merge(
     disabled-02: #525252,
     highlight: #002d9c,
     decorative-01: #525252,
-    hover-light-ui: #525252,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #393939,
@@ -6003,7 +6025,9 @@ $carbon--theme--v9: map-merge(
     hover-tertiary: #5a6872,
     active-tertiary: #414f59,
     hover-ui: #eef4fc,
+    hover-light-ui: #eef4fc,
     active-ui: #dfeafa,
+    active-light-ui: #dfeafa,
     selected-ui: #eef4fc,
     selected-light-ui: #eef4fc,
     hover-selected-ui: #dfeafa,
@@ -6016,7 +6040,6 @@ $carbon--theme--v9: map-merge(
     disabled-03: #cdd1d4,
     highlight: #f4f7fb,
     decorative-01: #eef4fc,
-    hover-light-ui: #eef4fc,
     skeleton-01: rgba(61, 112, 178, 0.1),
     skeleton-02: rgba(61, 112, 178, 0.1),
     brand-01: #3d70b2,
@@ -6088,10 +6111,12 @@ $carbon--theme: (
   hover-tertiary: if(global-variable-exists('hover-tertiary'), $hover-tertiary, map-get($carbon--theme--white, 'hover-tertiary')),
   active-tertiary: if(global-variable-exists('active-tertiary'), $active-tertiary, map-get($carbon--theme--white, 'active-tertiary')),
   hover-ui: if(global-variable-exists('hover-ui'), $hover-ui, map-get($carbon--theme--white, 'hover-ui')),
+  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
+  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
   active-ui: if(global-variable-exists('active-ui'), $active-ui, map-get($carbon--theme--white, 'active-ui')),
+  active-light-ui: if(global-variable-exists('active-light-ui'), $active-light-ui, map-get($carbon--theme--white, 'active-light-ui')),
   selected-ui: if(global-variable-exists('selected-ui'), $selected-ui, map-get($carbon--theme--white, 'selected-ui')),
   selected-light-ui: if(global-variable-exists('selected-light-ui'), $selected-light-ui, map-get($carbon--theme--white, 'selected-light-ui')),
-  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
   inverse-hover-ui: if(global-variable-exists('inverse-hover-ui'), $inverse-hover-ui, map-get($carbon--theme--white, 'inverse-hover-ui')),
   hover-danger: if(global-variable-exists('hover-danger'), $hover-danger, map-get($carbon--theme--white, 'hover-danger')),
   active-danger: if(global-variable-exists('active-danger'), $active-danger, map-get($carbon--theme--white, 'active-danger')),
@@ -6102,7 +6127,6 @@ $carbon--theme: (
   disabled-03: if(global-variable-exists('disabled-03'), $disabled-03, map-get($carbon--theme--white, 'disabled-03')),
   highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
   decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
-  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
   button-separator: if(global-variable-exists('button-separator'), $button-separator, map-get($carbon--theme--white, 'button-separator')),
   skeleton-01: if(global-variable-exists('skeleton-01'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
   skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
@@ -7329,6 +7353,54 @@ $hover-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
+### ✅hover-light-ui [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$hover-light-ui: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'hover-light-ui'
+    ),
+  map-get($carbon--theme, 'hover-light-ui'),
+  #e5e5e5
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅hover-selected-ui [variable]
+
+Data table selected row hover
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$hover-selected-ui: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'hover-selected-ui'
+    ),
+  map-get($carbon--theme, 'hover-selected-ui'),
+  #cacaca
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅active-ui [variable]
 
 `$ui-01` active; `$ui-02` active
@@ -7356,21 +7428,19 @@ $active-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅selected-ui [variable]
-
-Selected UI elements
+### ✅active-light-ui [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$selected-ui: if(
+$active-light-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'selected-ui'
+      'active-light-ui'
     ),
-  map-get($carbon--theme, 'selected-ui'),
-  #e0e0e0
+  map-get($carbon--theme, 'active-light-ui'),
+  #c6c6c6
 );
 ```
 
@@ -7381,18 +7451,20 @@ $selected-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅selected-light-ui [variable]
+### ✅selected-ui [variable]
+
+Selected UI elements
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$selected-light-ui: if(
+$selected-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'selected-light-ui'
+      'selected-ui'
     ),
-  map-get($carbon--theme, 'selected-light-ui'),
+  map-get($carbon--theme, 'selected-ui'),
   #e0e0e0
 );
 ```
@@ -7404,21 +7476,19 @@ $selected-light-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅hover-selected-ui [variable]
-
-Data table selected row hover
+### ✅selected-light-ui [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$hover-selected-ui: if(
+$selected-light-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'hover-selected-ui'
+      'selected-light-ui'
     ),
-  map-get($carbon--theme, 'hover-selected-ui'),
-  #cacaca
+  map-get($carbon--theme, 'selected-light-ui'),
+  #e0e0e0
 );
 ```
 
@@ -7671,29 +7741,6 @@ $decorative-01: if(
 
 </details>
 
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `{undefined}`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-light-ui [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-light-ui: if(
-  global-variable-exists('carbon--theme') and map-has-key(
-      $carbon--theme,
-      'hover-light-ui'
-    ),
-  map-get($carbon--theme, 'hover-light-ui'),
-  #e5e5e5
-);
-```
-
-</details>
-
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `{undefined}`
 - **Used by**:
diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
index d4d13404f504..b5c10064833e 100644
--- a/packages/themes/docs/sass.md
+++ b/packages/themes/docs/sass.md
@@ -64,10 +64,12 @@
   - [✅hover-tertiary [variable]](#hover-tertiary-variable)
   - [✅active-tertiary [variable]](#active-tertiary-variable)
   - [✅hover-ui [variable]](#hover-ui-variable)
+  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
+  - [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [✅active-ui [variable]](#active-ui-variable)
+  - [✅active-light-ui [variable]](#active-light-ui-variable)
   - [✅selected-ui [variable]](#selected-ui-variable)
   - [✅selected-light-ui [variable]](#selected-light-ui-variable)
-  - [✅hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [✅inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [✅hover-danger [variable]](#hover-danger-variable)
   - [✅active-danger [variable]](#active-danger-variable)
@@ -78,7 +80,6 @@
   - [✅disabled-03 [variable]](#disabled-03-variable)
   - [✅highlight [variable]](#highlight-variable)
   - [✅decorative-01 [variable]](#decorative-01-variable)
-  - [✅hover-light-ui [variable]](#hover-light-ui-variable)
   - [✅button-separator [variable]](#button-separator-variable)
   - [✅skeleton-01 [variable]](#skeleton-01-variable)
   - [✅skeleton-02 [variable]](#skeleton-02-variable)
@@ -273,10 +274,12 @@ Define theme variables from a map of tokens
   $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
   $active-tertiary: map-get($theme, 'active-tertiary') !global;
   $hover-ui: map-get($theme, 'hover-ui') !global;
+  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
+  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $active-ui: map-get($theme, 'active-ui') !global;
+  $active-light-ui: map-get($theme, 'active-light-ui') !global;
   $selected-ui: map-get($theme, 'selected-ui') !global;
   $selected-light-ui: map-get($theme, 'selected-light-ui') !global;
-  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
   $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
   $hover-danger: map-get($theme, 'hover-danger') !global;
   $active-danger: map-get($theme, 'active-danger') !global;
@@ -287,7 +290,6 @@ Define theme variables from a map of tokens
   $disabled-03: map-get($theme, 'disabled-03') !global;
   $highlight: map-get($theme, 'highlight') !global;
   $decorative-01: map-get($theme, 'decorative-01') !global;
-  $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
   $button-separator: map-get($theme, 'button-separator') !global;
   $skeleton-01: map-get($theme, 'skeleton-01') !global;
   $skeleton-02: map-get($theme, 'skeleton-02') !global;
@@ -546,10 +548,22 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-hover-ui,
       map-get($theme, 'hover-ui')
     ) !global;
+    $hover-light-ui: var(
+      --#{$custom-property-prefix}-hover-light-ui,
+      map-get($theme, 'hover-light-ui')
+    ) !global;
+    $hover-selected-ui: var(
+      --#{$custom-property-prefix}-hover-selected-ui,
+      map-get($theme, 'hover-selected-ui')
+    ) !global;
     $active-ui: var(
       --#{$custom-property-prefix}-active-ui,
       map-get($theme, 'active-ui')
     ) !global;
+    $active-light-ui: var(
+      --#{$custom-property-prefix}-active-light-ui,
+      map-get($theme, 'active-light-ui')
+    ) !global;
     $selected-ui: var(
       --#{$custom-property-prefix}-selected-ui,
       map-get($theme, 'selected-ui')
@@ -558,10 +572,6 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-selected-light-ui,
       map-get($theme, 'selected-light-ui')
     ) !global;
-    $hover-selected-ui: var(
-      --#{$custom-property-prefix}-hover-selected-ui,
-      map-get($theme, 'hover-selected-ui')
-    ) !global;
     $inverse-hover-ui: var(
       --#{$custom-property-prefix}-inverse-hover-ui,
       map-get($theme, 'inverse-hover-ui')
@@ -602,10 +612,6 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-decorative-01,
       map-get($theme, 'decorative-01')
     ) !global;
-    $hover-light-ui: var(
-      --#{$custom-property-prefix}-hover-light-ui,
-      map-get($theme, 'hover-light-ui')
-    ) !global;
     $button-separator: var(
       --#{$custom-property-prefix}-button-separator,
       map-get($theme, 'button-separator')
@@ -1160,44 +1166,70 @@ Define theme variables from a map of tokens
       @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
     }
 
-    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'hover-light-ui',
+      $emit-difference
+    )
     {
-      @include custom-property('active-ui', map-get($theme, 'active-ui'));
+      @include custom-property(
+        'hover-light-ui',
+        map-get($theme, 'hover-light-ui')
+      );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-ui',
+      'hover-selected-ui',
       $emit-difference
     )
     {
-      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+      @include custom-property(
+        'hover-selected-ui',
+        map-get($theme, 'hover-selected-ui')
+      );
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
+    {
+      @include custom-property('active-ui', map-get($theme, 'active-ui'));
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'selected-light-ui',
+      'active-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'selected-light-ui',
-        map-get($theme, 'selected-light-ui')
+        'active-light-ui',
+        map-get($theme, 'active-light-ui')
       );
     }
 
     @if should-emit(
       $theme,
       $parent-carbon-theme,
-      'hover-selected-ui',
+      'selected-ui',
+      $emit-difference
+    )
+    {
+      @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
+    }
+
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'selected-light-ui',
       $emit-difference
     )
     {
       @include custom-property(
-        'hover-selected-ui',
-        map-get($theme, 'hover-selected-ui')
+        'selected-light-ui',
+        map-get($theme, 'selected-light-ui')
       );
     }
 
@@ -1300,19 +1332,6 @@ Define theme variables from a map of tokens
       );
     }
 
-    @if should-emit(
-      $theme,
-      $parent-carbon-theme,
-      'hover-light-ui',
-      $emit-difference
-    )
-    {
-      @include custom-property(
-        'hover-light-ui',
-        map-get($theme, 'hover-light-ui')
-      );
-    }
-
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -2099,10 +2118,12 @@ Define theme variables from a map of tokens
   - [hover-tertiary [variable]](#hover-tertiary-variable)
   - [active-tertiary [variable]](#active-tertiary-variable)
   - [hover-ui [variable]](#hover-ui-variable)
+  - [hover-light-ui [variable]](#hover-light-ui-variable)
+  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [active-ui [variable]](#active-ui-variable)
+  - [active-light-ui [variable]](#active-light-ui-variable)
   - [selected-ui [variable]](#selected-ui-variable)
   - [selected-light-ui [variable]](#selected-light-ui-variable)
-  - [hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [hover-danger [variable]](#hover-danger-variable)
   - [active-danger [variable]](#active-danger-variable)
@@ -2113,7 +2134,6 @@ Define theme variables from a map of tokens
   - [disabled-03 [variable]](#disabled-03-variable)
   - [highlight [variable]](#highlight-variable)
   - [decorative-01 [variable]](#decorative-01-variable)
-  - [hover-light-ui [variable]](#hover-light-ui-variable)
   - [button-separator [variable]](#button-separator-variable)
   - [skeleton-01 [variable]](#skeleton-01-variable)
   - [skeleton-02 [variable]](#skeleton-02-variable)
@@ -2261,7 +2281,9 @@ $carbon--theme--g90: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #4c4c4c,
+    hover-light-ui: #656565,
     active-ui: #6f6f6f,
+    active-light-ui: #8d8d8d,
     selected-ui: #525252,
     selected-light-ui: #6f6f6f,
     inverse-hover-ui: #e5e5e5,
@@ -2273,7 +2295,6 @@ $carbon--theme--g90: map-merge(
     disabled-03: #a8a8a8,
     highlight: #0043ce,
     decorative-01: #6f6f6f,
-    hover-light-ui: #6f6f6f,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
@@ -2339,7 +2360,9 @@ $carbon--theme--g100: map-merge(
     hover-tertiary: #f4f4f4,
     active-tertiary: #c6c6c6,
     hover-ui: #353535,
+    hover-light-ui: #4c4c4c,
     active-ui: #525252,
+    active-light-ui: #6f6f6f,
     selected-ui: #393939,
     selected-light-ui: #525252,
     inverse-hover-ui: #e5e5e5,
@@ -2350,7 +2373,6 @@ $carbon--theme--g100: map-merge(
     disabled-02: #525252,
     highlight: #002d9c,
     decorative-01: #525252,
-    hover-light-ui: #525252,
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #393939,
@@ -2419,7 +2441,9 @@ $carbon--theme--v9: map-merge(
     hover-tertiary: #5a6872,
     active-tertiary: #414f59,
     hover-ui: #eef4fc,
+    hover-light-ui: #eef4fc,
     active-ui: #dfeafa,
+    active-light-ui: #dfeafa,
     selected-ui: #eef4fc,
     selected-light-ui: #eef4fc,
     hover-selected-ui: #dfeafa,
@@ -2432,7 +2456,6 @@ $carbon--theme--v9: map-merge(
     disabled-03: #cdd1d4,
     highlight: #f4f7fb,
     decorative-01: #eef4fc,
-    hover-light-ui: #eef4fc,
     skeleton-01: rgba(61, 112, 178, 0.1),
     skeleton-02: rgba(61, 112, 178, 0.1),
     brand-01: #3d70b2,
@@ -2504,10 +2527,12 @@ $carbon--theme: (
   hover-tertiary: if(global-variable-exists('hover-tertiary'), $hover-tertiary, map-get($carbon--theme--white, 'hover-tertiary')),
   active-tertiary: if(global-variable-exists('active-tertiary'), $active-tertiary, map-get($carbon--theme--white, 'active-tertiary')),
   hover-ui: if(global-variable-exists('hover-ui'), $hover-ui, map-get($carbon--theme--white, 'hover-ui')),
+  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
+  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
   active-ui: if(global-variable-exists('active-ui'), $active-ui, map-get($carbon--theme--white, 'active-ui')),
+  active-light-ui: if(global-variable-exists('active-light-ui'), $active-light-ui, map-get($carbon--theme--white, 'active-light-ui')),
   selected-ui: if(global-variable-exists('selected-ui'), $selected-ui, map-get($carbon--theme--white, 'selected-ui')),
   selected-light-ui: if(global-variable-exists('selected-light-ui'), $selected-light-ui, map-get($carbon--theme--white, 'selected-light-ui')),
-  hover-selected-ui: if(global-variable-exists('hover-selected-ui'), $hover-selected-ui, map-get($carbon--theme--white, 'hover-selected-ui')),
   inverse-hover-ui: if(global-variable-exists('inverse-hover-ui'), $inverse-hover-ui, map-get($carbon--theme--white, 'inverse-hover-ui')),
   hover-danger: if(global-variable-exists('hover-danger'), $hover-danger, map-get($carbon--theme--white, 'hover-danger')),
   active-danger: if(global-variable-exists('active-danger'), $active-danger, map-get($carbon--theme--white, 'active-danger')),
@@ -2518,7 +2543,6 @@ $carbon--theme: (
   disabled-03: if(global-variable-exists('disabled-03'), $disabled-03, map-get($carbon--theme--white, 'disabled-03')),
   highlight: if(global-variable-exists('highlight'), $highlight, map-get($carbon--theme--white, 'highlight')),
   decorative-01: if(global-variable-exists('decorative-01'), $decorative-01, map-get($carbon--theme--white, 'decorative-01')),
-  hover-light-ui: if(global-variable-exists('hover-light-ui'), $hover-light-ui, map-get($carbon--theme--white, 'hover-light-ui')),
   button-separator: if(global-variable-exists('button-separator'), $button-separator, map-get($carbon--theme--white, 'button-separator')),
   skeleton-01: if(global-variable-exists('skeleton-01'), $skeleton-01, map-get($carbon--theme--white, 'skeleton-01')),
   skeleton-02: if(global-variable-exists('skeleton-02'), $skeleton-02, map-get($carbon--theme--white, 'skeleton-02')),
@@ -3745,6 +3769,54 @@ $hover-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
+### ✅hover-light-ui [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$hover-light-ui: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'hover-light-ui'
+    ),
+  map-get($carbon--theme, 'hover-light-ui'),
+  #e5e5e5
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅hover-selected-ui [variable]
+
+Data table selected row hover
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$hover-selected-ui: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'hover-selected-ui'
+    ),
+  map-get($carbon--theme, 'hover-selected-ui'),
+  #cacaca
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅active-ui [variable]
 
 `$ui-01` active; `$ui-02` active
@@ -3772,21 +3844,19 @@ $active-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅selected-ui [variable]
-
-Selected UI elements
+### ✅active-light-ui [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$selected-ui: if(
+$active-light-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'selected-ui'
+      'active-light-ui'
     ),
-  map-get($carbon--theme, 'selected-ui'),
-  #e0e0e0
+  map-get($carbon--theme, 'active-light-ui'),
+  #c6c6c6
 );
 ```
 
@@ -3797,18 +3867,20 @@ $selected-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅selected-light-ui [variable]
+### ✅selected-ui [variable]
+
+Selected UI elements
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$selected-light-ui: if(
+$selected-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'selected-light-ui'
+      'selected-ui'
     ),
-  map-get($carbon--theme, 'selected-light-ui'),
+  map-get($carbon--theme, 'selected-ui'),
   #e0e0e0
 );
 ```
@@ -3820,21 +3892,19 @@ $selected-light-ui: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅hover-selected-ui [variable]
-
-Data table selected row hover
+### ✅selected-light-ui [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$hover-selected-ui: if(
+$selected-light-ui: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'hover-selected-ui'
+      'selected-light-ui'
     ),
-  map-get($carbon--theme, 'hover-selected-ui'),
-  #cacaca
+  map-get($carbon--theme, 'selected-light-ui'),
+  #e0e0e0
 );
 ```
 
@@ -4087,29 +4157,6 @@ $decorative-01: if(
 
 </details>
 
-- **Group**: [@carbon/themes](#carbonthemes)
-- **Type**: `{undefined}`
-- **Used by**:
-  - [carbon--theme [mixin]](#carbon--theme-mixin)
-
-### ✅hover-light-ui [variable]
-
-<details>
-<summary>Source code</summary>
-
-```scss
-$hover-light-ui: if(
-  global-variable-exists('carbon--theme') and map-has-key(
-      $carbon--theme,
-      'hover-light-ui'
-    ),
-  map-get($carbon--theme, 'hover-light-ui'),
-  #e5e5e5
-);
-```
-
-</details>
-
 - **Group**: [@carbon/themes](#carbonthemes)
 - **Type**: `{undefined}`
 - **Used by**:

From cb3f770c73670af833ff2faebfef84a74ff01972 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 12 Nov 2020 09:08:07 -0800
Subject: [PATCH 05/15] fix(modal): fix wrapFocus issue with disabled primary
 button (#7254)

* fix(modal): fix wrapFocus issue with disabled primary button

* fix(wrapFocus): update selectorTabbable list to omit disabled items

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/react/src/components/Modal/Modal-story.js | 4 ++++
 packages/react/src/internal/keyboard/navigation.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
index 8e6238dc17ae..87ba944dd602 100644
--- a/packages/react/src/components/Modal/Modal-story.js
+++ b/packages/react/src/components/Modal/Modal-story.js
@@ -68,6 +68,10 @@ const props = () => ({
     'Prevent closing on click outside of modal (preventCloseOnClickOutside)',
     false
   ),
+  primaryButtonDisabled: boolean(
+    'Disable primary button (primaryButtonDisabled)',
+    false
+  ),
 });
 
 const titleOnlyProps = () => {
diff --git a/packages/react/src/internal/keyboard/navigation.js b/packages/react/src/internal/keyboard/navigation.js
index ba80f43c14e7..c155363bcae7 100644
--- a/packages/react/src/internal/keyboard/navigation.js
+++ b/packages/react/src/internal/keyboard/navigation.js
@@ -58,7 +58,7 @@ export const selectorTabbable = `
   a[href], area[href], input:not([disabled]):not([tabindex='-1']),
   button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
   textarea:not([disabled]):not([tabindex='-1']),
-  iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true]
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
 `;
 
 /**

From ca73d8c3a39a2b665b94a7423897a335cbe77ff1 Mon Sep 17 00:00:00 2001
From: Lee Chase <leechase@live.com>
Date: Thu, 12 Nov 2020 17:28:13 +0000
Subject: [PATCH 06/15] fix: high contrast focus (#7268)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/components/src/components/tag/_tag.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 9d650de2ff75..5de6edc04b39 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -182,6 +182,10 @@
     box-shadow: inset 0 0 0 2px $focus;
   }
 
+  .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+  }
+
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
     .#{$prefix}--tag__close-icon:hover {
     background-color: transparent;

From 54b95583e1506b4e6f9631236e4a2ab84bcd9ce1 Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Thu, 12 Nov 2020 17:47:40 +0000
Subject: [PATCH 07/15] chore(project): sync generated files

---
 packages/components/docs/sass.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 68dd5ac62e17..14b723645207 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -7805,6 +7805,7 @@ $inverse-focus-ui: if(
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [toast-notifications [mixin]](#toast-notifications-mixin)
+  - [tags [mixin]](#tags-mixin)
   - [tooltip [mixin]](#tooltip-mixin)
 
 ### ✅hover-primary [variable]
@@ -24995,6 +24996,10 @@ Tag styles
     box-shadow: inset 0 0 0 2px $focus;
   }
 
+  .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+  }
+
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
     .#{$prefix}--tag__close-icon:hover {
     background-color: transparent;
@@ -25029,6 +25034,7 @@ Tag styles
   - [disabled-01 [variable]](#disabled-01-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
   - [focus [variable]](#focus-variable)
+  - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [text-01 [variable]](#text-01-variable)
 

From a45b20aed72e81c8cff7c8f9d0f9ae311754310f Mon Sep 17 00:00:00 2001
From: LMapes <56092796+LMapes@users.noreply.github.com>
Date: Thu, 12 Nov 2020 12:07:04 -0600
Subject: [PATCH 08/15] chore(icons): update icons.yml (#7235)

* Update icons.yml

Updated icons metadata, normalized friendly names.

* Update packages/icons/icons.yml

Co-authored-by: emyarod <emyarod@users.noreply.github.com>

* Update packages/icons/icons.yml

Co-authored-by: emyarod <emyarod@users.noreply.github.com>

* chore(icons): update syntax and alias fixes

Co-authored-by: emyarod <emyarod@users.noreply.github.com>
Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/icons/icons.yml | 1421 +++++++++++++++++++++++++++++---------
 1 file changed, 1076 insertions(+), 345 deletions(-)

diff --git a/packages/icons/icons.yml b/packages/icons/icons.yml
index 8ee61c2ff0c9..b0ea78631a42 100644
--- a/packages/icons/icons.yml
+++ b/packages/icons/icons.yml
@@ -217,7 +217,7 @@
   sizes:
     - 32
 - name: accumulation--ice
-  friendly_name: accumulation--ice
+  friendly_name: Accumulation ice
   aliases: 
     - gauge
     - measurement
@@ -231,7 +231,7 @@
   sizes:
     - 32
 - name: accumulation--precipitation
-  friendly_name: accumulation--precipitation
+  friendly_name: Accumulation precipitation
   aliases: 
     - gauge
     - measurement
@@ -244,7 +244,7 @@
   sizes:
     - 32
 - name: accumulation--rain
-  friendly_name: accumulation--rain
+  friendly_name: Accumulation rain
   aliases: 
     - gauge
     - measurement
@@ -258,7 +258,7 @@
   sizes:
     - 32
 - name: accumulation--snow
-  friendly_name: accumulation--snow
+  friendly_name: Accumulation snow
   aliases: 
     - gauge
     - measurement
@@ -338,7 +338,7 @@
   sizes:
     - 32
 - name: agriculture-analytics
-  friendly_name: agriculture-analytics
+  friendly_name: Agriculture analytics
   aliases: 
     - agriculture
     - analytics
@@ -464,7 +464,7 @@
   sizes:
     - 32
 - name: airline--digital-gate
-  friendly_name: airline--digital-gate
+  friendly_name: Airline digital gate
   aliases: 
     - airline
     - gate
@@ -476,7 +476,7 @@
   sizes:
     - 32
 - name: airline--manage-gates
-  friendly_name: airline--manage-gates
+  friendly_name: Airline manage gates
   aliases:
     - airline
     - gate
@@ -489,7 +489,7 @@
   sizes:
     - 32
 - name: airline--passenger-care
-  friendly_name: airline--passenger-care
+  friendly_name: Airline passenger care
   aliases: 
     - airline
     - customer service
@@ -500,7 +500,7 @@
   sizes:
     - 32
 - name: airline--rapid-board
-  friendly_name: airline--rapid-board
+  friendly_name: Airline rapid board
   aliases: 
     - airline
     - gate
@@ -513,7 +513,7 @@
   sizes:
     - 32
 - name: airport--01
-  friendly_name: airport--01
+  friendly_name: Airport 01
   aliases: 
   - airport
   - transportation
@@ -522,7 +522,7 @@
   sizes:
     - 32
 - name: airport--02
-  friendly_name: airport--02
+  friendly_name: Airport 02
   aliases: 
   - airport
   - transportation
@@ -531,7 +531,7 @@
   sizes:
     - 32
 - name: airport-location
-  friendly_name: airport-location
+  friendly_name: Airport location
   aliases: 
   - airport
   - transportation
@@ -946,7 +946,7 @@
   sizes:
     - 32
 - name: area
-  friendly_name: area
+  friendly_name: Area
   aliases: 
     - area
     - boundary
@@ -956,7 +956,7 @@
   sizes:
     - 32
 - name: area--custom
-  friendly_name: area--custom
+  friendly_name: Area custom
   aliases: 
     - area
     - custom
@@ -1277,7 +1277,7 @@
   sizes:
     - 32
 - name: baggage-claim
-  friendly_name: baggage-claim
+  friendly_name: Baggage claim
   aliases: 
   - baggage
   - claim
@@ -1420,7 +1420,7 @@
   sizes:
     - 32
 - name: bee-bat
-  friendly_name: bee-bat
+  friendly_name: Bee bat
   aliases: 
     - ibm
     - fly
@@ -1511,7 +1511,7 @@
     - communication
     - wireless communication
 - name: book
-  friendly_name: book
+  friendly_name: Book
   aliases: 
     - book
     - read
@@ -1592,7 +1592,7 @@
   sizes:
     - 32
 - name: bot
-  friendly_name: bot
+  friendly_name: Bot
   aliases:
     - bot
     - robot
@@ -1736,7 +1736,7 @@
   sizes:
     - 32
 - name: buoy
-  friendly_name: buoy
+  friendly_name: Buoy
   aliases: 
     - weather
     - buoy
@@ -1950,7 +1950,7 @@
     - snapshot
     - technology
 - name: campsite
-  friendly_name: campsite
+  friendly_name: Campsite
   aliases:
     - campsite
     - tent
@@ -2376,8 +2376,12 @@
   sizes:
     - 32
 - name: chart--average
-  friendly_name: chart--average
-  aliases: []
+  friendly_name: Chart average
+  aliases: 
+    - chart average
+    - graph
+    - chart
+    - data
   sizes:
     - 32
 - name: chart--bar
@@ -2620,13 +2624,21 @@
   sizes:
     - 32
 - name: chart--maximum
-  friendly_name: chart--maximum
-  aliases: []
+  friendly_name: Chart maximum
+  aliases: 
+    - chart maximum
+    - graph
+    - chart
+    - data
   sizes:
     - 32
 - name: chart--minimum
-  friendly_name: chart--minimum
-  aliases: []
+  friendly_name: Chart minimum
+  aliases: 
+    - chart minimum
+    - graph
+    - chart
+    - data
   sizes:
     - 32
 - name: chart--multi-line
@@ -3345,10 +3357,9 @@
 - name: cloud
   friendly_name: Cloud
   aliases:
-    - donwload
-    - compute
-    - data
-    - hybrid
+    - weather
+    - cloud
+    - forecast
   sizes:
     - 32
 - name: cloud--data-ops
@@ -3376,28 +3387,30 @@
   sizes:
     - 32
   aliases:
-    - donwload
-    - compute
-    - data
-    - hybrid
+    - weather
+    - cloud
+    - lightning
+    - forecast
 - name: cloud--rain
   friendly_name: Cloud rain
   sizes:
     - 32
   aliases:
-    - donwload
-    - compute
-    - data
-    - hybrid
+    - weather
+    - cloud
+    - rain
+    - precipitation
+    - forecast
 - name: cloud--snow
   friendly_name: Cloud snow
   sizes:
     - 32
   aliases:
-    - donwload
-    - compute
-    - data
-    - hybrid
+    - weather
+    - cloud
+    - snow
+    - precipitation
+    - forecast
 - name: cloud--upload
   friendly_name: Cloud upload
   sizes:
@@ -3417,8 +3430,14 @@
   sizes:
     - 32
 - name: cloud-ceiling
-  friendly_name: cloud-ceiling
-  aliases: []
+  friendly_name: Cloud ceiling
+  aliases: 
+    - weather
+    - cloud
+    - rain
+    - precipitation
+    - forecast
+    - sky
   sizes:
     - 32
 - name: cloud-foundry--1
@@ -3455,6 +3474,8 @@
     - cloudy
     - weather
     - cloudy weather
+    - forecast
+    - sky
   sizes:
     - 32
 - name: cobb-angle
@@ -3551,13 +3572,19 @@
   sizes:
     - 32
 - name: column--delete
-  friendly_name: column--delete
-  aliases: []
+  friendly_name: Column delete
+  aliases: 
+    - column
+    - delete
+    - formatting
   sizes:
     - 32
 - name: column--insert
-  friendly_name: column--insert
-  aliases: []
+  friendly_name: Column insert
+  aliases: 
+    - column
+    - insert
+    - formatting
   sizes:
     - 32
 - name: compare
@@ -3622,8 +3649,12 @@
   sizes:
     - 32
 - name: construction
-  friendly_name: construction
-  aliases: []
+  friendly_name: Construction
+  aliases: 
+    - construction
+    - transportation
+    - travel
+    - roadwork
   sizes:
     - 32
 - name: container-software
@@ -3679,8 +3710,12 @@
     - clipboard
     - copied
 - name: copy--link
-  friendly_name: copy--link
-  aliases: []
+  friendly_name: Copy link
+  aliases: 
+    - copy
+    - link
+    - file
+    
   sizes:
     - 32
 - name: corn
@@ -3747,13 +3782,23 @@
   sizes:
     - 32
 - name: crop-growth
-  friendly_name: crop-growth
-  aliases: []
+  friendly_name: Crop growth
+  aliases: 
+    - crop
+    - growth
+    - agriculture
+    - food
+    - production
   sizes:
     - 32
 - name: crop-health
-  friendly_name: crop-health
-  aliases: []
+  friendly_name: Crop health
+  aliases: 
+    - crop
+    - health
+    - agriculture
+    - food
+    - production
   sizes:
     - 32
 - name: cross-reference
@@ -3776,18 +3821,31 @@
   sizes:
     - 32
 - name: crossroads
-  friendly_name: crossroads
-  aliases: []
+  friendly_name: Crossroads
+  aliases: 
+    - crossroads
+    - travel
+    - map
+    - wayfinding
   sizes:
     - 32
 - name: crowd-report
-  friendly_name: crowd-report
-  aliases: []
+  friendly_name: Crowd report
+  aliases: 
+    - crowd
+    - report
+    - travel
+    - groups
   sizes:
     - 32
 - name: crowd-report--filled
-  friendly_name: crowd-report--filled
-  aliases: []
+  friendly_name: Crowd report filled
+  aliases: 
+    - crowd
+    - report
+    - travel
+    - groups
+    - filled
   sizes:
     - 32
 - name: CSV
@@ -3828,48 +3886,84 @@
   sizes:
     - 32
 - name: currency--baht
-  friendly_name: currency--baht
-  aliases: []
+  friendly_name: Currency baht
+  aliases: 
+    - currency
+    - money
+    - baht
+    - finance
   sizes:
     - 32
 - name: currency--dollar
-  friendly_name: currency--dollar
-  aliases: []
+  friendly_name: Currency dollar
+  aliases: 
+    - currency
+    - money
+    - dollar
+    - finance
   sizes:
     - 32
 - name: currency--euro
-  friendly_name: currency--euro
-  aliases: []
+  friendly_name: Currency euro
+  aliases: 
+    - currency
+    - money
+    - euro
+    - finance
   sizes:
     - 32
 - name: currency--lira
-  friendly_name: currency--lira
-  aliases: []
+  friendly_name: Currency lira
+  aliases: 
+    - currency
+    - money
+    - lira
+    - finance
   sizes:
     - 32
 - name: currency--pound
-  friendly_name: currency--pound
-  aliases: []
+  friendly_name: Currency pound
+  aliases: 
+    - currency
+    - money
+    - pound
+    - finance
   sizes:
     - 32
 - name: currency--rupee
-  friendly_name: currency--rupee
-  aliases: []
+  friendly_name: Currency rupee
+  aliases: 
+    - currency
+    - money
+    - rupee
+    - finance
   sizes:
     - 32
 - name: currency--shekel
-  friendly_name: currency--shekel
-  aliases: []
+  friendly_name: Currency shekel
+  aliases: 
+    - currency
+    - money
+    - shekel
+    - finance
   sizes:
     - 32
 - name: currency--won
-  friendly_name: currency--won
-  aliases: []
+  friendly_name: Currency won
+  aliases: 
+    - currency
+    - money
+    - won
+    - finance
   sizes:
     - 32
 - name: currency--yen
-  friendly_name: currency--yen
-  aliases: []
+  friendly_name: Currency yen
+  aliases: 
+    - currency
+    - money
+    - yen
+    - finance
   sizes:
     - 32
 - name: cursor--1
@@ -4080,8 +4174,14 @@
   sizes:
     - 32
 - name: data-collection
-  friendly_name: data-collection
-  aliases: []
+  friendly_name: Data collection
+  aliases: 
+    - data collection
+    - input
+    - aggregate
+    - combine
+    - gather
+    - repository
   sizes:
     - 32
 - name: data-player
@@ -4872,8 +4972,14 @@
     - photo sharing
     - camera
 - name: drought
-  friendly_name: drought
-  aliases: []
+  friendly_name: Drought
+  aliases: 
+    - drought
+    - precipitation
+    - weather
+    - agriculture
+    - food
+    - production
   sizes:
     - 32
 - name: DVR
@@ -4959,8 +5065,12 @@
     - globe Southeast Asia filled
     - world Southeast Asia filled
 - name: earthquake
-  friendly_name: earthquake
-  aliases: []
+  friendly_name: Earthquake
+  aliases: 
+    - weather
+    - earthquake
+    - forecast
+    - disaster
   sizes:
     - 32
 - name: edge-cluster
@@ -5737,28 +5847,50 @@
     - storm
     - flash off filled
 - name: flight--international
-  friendly_name: flight--international
-  aliases: []
+  friendly_name: Flight international
+  aliases: 
+    - flight
+    - international
+    - travel
+    - airline
+    - plane
   sizes:
     - 32
 - name: flight--roster
-  friendly_name: flight--roster
-  aliases: []
+  friendly_name: Flight roster
+  aliases: 
+    - flight
+    - roster
+    - manifest
+    - passenger list
+    - travel
   sizes:
     - 32
 - name: flight--schedule
-  friendly_name: flight--schedule
-  aliases: []
+  friendly_name: Flight schedule
+  aliases: 
+    - flight
+    - schedule
+    - travel
+    - calendar
   sizes:
     - 32
 - name: flood
-  friendly_name: flood
-  aliases: []
+  friendly_name: Flood
+  aliases: 
+    - flood
+    - weather
+    - forecast
+    - warning
+    - disaster
   sizes:
     - 32
 - name: flood--warning
-  friendly_name: flood--warning
-  aliases: []
+  friendly_name: Flood warning
+  aliases: 
+    - flood
+    - warning
+    - disaster
   sizes:
     - 32
 - name: flow
@@ -5823,6 +5955,8 @@
     - fog
     - mist
     - mistly
+    - precipitation
+    - weather
   sizes:
     - 32
 - name: folder
@@ -5902,23 +6036,40 @@
   sizes:
     - 32
 - name: forecast--hail
-  friendly_name: forecast--hail
-  aliases: []
+  friendly_name: Forecast hail
+  aliases:
+    - weather
+    - forecast
+    - hail
+    - precipitation
+    - warning
   sizes:
     - 32
 - name: forecast--hail-30
-  friendly_name: forecast--hail-30
-  aliases: []
+  friendly_name: Forecast hail 30
+  aliases: 
+    - weather
+    - forecast
+    - hail
+    - precipitation
+    - warning
   sizes:
     - 32
 - name: forecast--lightning
-  friendly_name: forecast--lightning
-  aliases: []
+  friendly_name: Forecast lightning
+  aliases: 
+   - forecast
+   - lightning
+   - weather
   sizes:
     - 32
 - name: forecast--lightning-30
-  friendly_name: forecast--lightning-30
-  aliases: []
+  friendly_name: Forecast lightning 30
+  aliases: 
+   - forecast
+   - lightning
+   - weather
+   - warning
   sizes:
     - 32
 - name: fork
@@ -6189,8 +6340,9 @@
     - hail
     - ice
     - ice ball
-    - hail store
+    - hail stone
     - weather
+    - precipitation
   sizes:
     - 32
 - name: hanging-protocol
@@ -6226,6 +6378,7 @@
     - fog
     - weather
     - overcast
+    - forecast
   sizes:
     - 32
 - name: haze--night
@@ -6237,6 +6390,7 @@
     - fog
     - weather
     - overcast
+    - forecast
 - name: HD
   friendly_name: HD
   aliases:
@@ -6521,6 +6675,7 @@
     - steaminess
     - steam
     - drop
+    - forecast
   sizes:
     - 32
 - name: humidity--alt
@@ -6538,6 +6693,7 @@
     - humidity alt
     - cloud
     - cloudy
+    - forecast
   sizes:
     - 32
 - name: hurricane
@@ -6546,6 +6702,7 @@
     - hurricane
     - storm
     - weather
+    - forecast
   sizes:
     - 32
 - name: hybrid-networking
@@ -6598,8 +6755,12 @@
   sizes:
     - 32
 - name: ice--accretion
-  friendly_name: ice--accretion
-  aliases: []
+  friendly_name: Ice accretion
+  aliases: 
+    - ice
+    - accretion
+    - ice dam
+    - precipitation
   sizes:
     - 32
 - name: iD
@@ -6911,8 +7072,11 @@
   sizes:
     - 32
 - name: intersect
-  friendly_name: intersect
-  aliases: []
+  friendly_name: Intersect
+  aliases: 
+    - intersect
+    - operations
+    - converge
   sizes:
     - 32
 - name: inventory-management
@@ -7176,8 +7340,10 @@
     - server
     - drive
 - name: layers
-  friendly_name: layers
-  aliases: []
+  friendly_name: Layers
+  aliases: 
+    - operations
+    - layers
   sizes:
     - 32
 - name: legend
@@ -7398,38 +7564,67 @@
     - language
     - english
 - name: license
-  friendly_name: license
-  aliases: []
+  friendly_name: License
+  aliases: 
+    - license
+    - document
+    - file
   sizes:
     - 32
 - name: license--draft
-  friendly_name: license--draft
-  aliases: []
+  friendly_name: License draft
+  aliases: 
+    - license
+    - draft
+    - file
+    - document
   sizes:
     - 32
 - name: license--global
-  friendly_name: license--global
-  aliases: []
+  friendly_name: License global
+  aliases: 
+    - license
+    - global
+    - file
+    - document
   sizes:
     - 32
 - name: license--maintenance
-  friendly_name: license--maintenance
-  aliases: []
+  friendly_name: License maintenance
+  aliases: 
+    - license
+    - maintenance
+    - file
+    - document
   sizes:
     - 32
 - name: license--maintenance-draft
-  friendly_name: license--maintenance-draft
-  aliases: []
+  friendly_name: License maintenance draft
+  aliases: 
+    - license
+    - maintenance
+    - draft
+    - file
+    - document
   sizes:
     - 32
 - name: license--third-party
-  friendly_name: license--third-party
-  aliases: []
+  friendly_name: License third-party
+  aliases: 
+    - license
+    - third-party
+    - file
+    - document
   sizes:
     - 32
 - name: license--third-party-draft
-  friendly_name: license--third-party-draft
-  aliases: []
+  friendly_name: License third-party draft
+  aliases: 
+    - license
+    - third-party
+    - draft
+    - file
+    - document
   sizes:
     - 32
 - name: light
@@ -7479,13 +7674,17 @@
   sizes:
     - 32
 - name: linux
-  friendly_name: linux
-  aliases: []
+  friendly_name: Linux®
+  aliases: 
+    - linux
+    - OS
   sizes:
     - 32
 - name: linux--alt
-  friendly_name: linux--alt
-  aliases: []
+  friendly_name: Linux® alt
+  aliases: 
+    - linux
+    - OS
   sizes:
     - 32
 - name: list
@@ -7579,56 +7778,183 @@
     - site
     - area
     - legend
+    - location
+    - travel
   sizes:
     - 32
 - name: location--company
-  friendly_name: location--company
-  aliases: []
-  sizes:
-    - 32
+  friendly_name: Location company
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - company
+    - location
+    - travel
+  sizes:
+    - 32
 - name: location--company--filled
-  friendly_name: location--company--filled
-  aliases: []
+  friendly_name: Location company filled
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - company 
+    - filled
+    - location
+    - travel
   sizes:
     - 32
 - name: location--hazard
-  friendly_name: location--hazard
-  aliases: []
+  friendly_name: Location hazard
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - hazard
+    - travel
   sizes:
     - 32
 - name: location--hazard--filled
-  friendly_name: location--hazard--filled
-  aliases: []
+  friendly_name: Location hazard filled
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - hazard
+    - travel
+    - filled
   sizes:
     - 32
 - name: location--heart
-  friendly_name: location--heart
-  aliases: []
+  friendly_name: Location heart
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - heart
+    - travel
   sizes:
     - 32
 - name: location--heart--filled
-  friendly_name: location--heart--filled
-  aliases: []
+  friendly_name: Location heart filled
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - heart
+    - travel
+    - filled
   sizes:
     - 32
 - name: location--person
-  friendly_name: location--person
-  aliases: []
+  friendly_name: Location person
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - person
+    - travel
   sizes:
     - 32
 - name: location--person--filled
-  friendly_name: location--person--filled
-  aliases: []
+  friendly_name: Location person filled
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - person
+    - travel
+    - filled
   sizes:
     - 32
 - name: location--star
-  friendly_name: location--star
-  aliases: []
+  friendly_name: Location star
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - star
+    - travel
   sizes:
     - 32
 - name: location--star--filled
-  friendly_name: location--star--filled
-  aliases: []
+  friendly_name: Location star filled
+  aliases: 
+    - place
+    - locate
+    - gps
+    - destination
+    - map
+    - pin
+    - site
+    - area
+    - legend
+    - location
+    - star
+    - travel
+    - filled
   sizes:
     - 32
 - name: locked
@@ -8133,13 +8459,26 @@
   sizes:
     - 32
 - name: map-boundary
-  friendly_name: map-boundary
-  aliases: []
+  friendly_name: Map boundary
+  aliases: 
+    - place
+    - locate
+    - destination
+    - map
+    - site
+    - area
+    - location
+    - boundary
+    - travel
   sizes:
     - 32
 - name: marine-warning
-  friendly_name: marine-warning
-  aliases: []
+  friendly_name: Marine warning
+  aliases: 
+    - weather
+    - marine
+    - warning
+    - forecast
   sizes:
     - 32
 - name: math-curve
@@ -8548,8 +8887,10 @@
   sizes:
     - 32
 - name: monster
-  friendly_name: monster
-  aliases: []
+  friendly_name: Monster
+  aliases: 
+    - monster
+    - commerce
   sizes:
     - 32
 - name: monument
@@ -8689,78 +9030,139 @@
   sizes:
     - 32
 - name: name-space
-  friendly_name: name-space
-  aliases: []
+  friendly_name: Name space
+  aliases: 
+    - name
+    - space
+    - data
   sizes:
     - 32
 - name: navaid--civil
-  friendly_name: navaid--civil
-  aliases: []
+  friendly_name: Navaid civil
+  aliases:
+    - travel
+    - navigation
+    - navaid
+    - civil
   sizes:
     - 32
 - name: navaid--dme
-  friendly_name: navaid--dme
-  aliases: []
+  friendly_name: Navaid dme
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - dme
   sizes:
     - 32
 - name: navaid--helipad
-  friendly_name: navaid--helipad
-  aliases: []
+  friendly_name: Navaid helipad
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - helipad
   sizes:
     - 32
 - name: navaid--military
-  friendly_name: navaid--military
-  aliases: []
+  friendly_name: Navaid military
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - military
   sizes:
     - 32
 - name: navaid--military-civil
-  friendly_name: navaid--military-civil
-  aliases: []
+  friendly_name: Navaid military civil
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - military
+    - civil
   sizes:
     - 32
 - name: navaid--ndb
-  friendly_name: navaid--ndb
-  aliases: []
+  friendly_name: Navaid ndb
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - ndb
   sizes:
     - 32
 - name: navaid--ndb-dme
-  friendly_name: navaid--ndb-dme
-  aliases: []
+  friendly_name: Navaid ndb dme
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - ndb
+    - dme
   sizes:
     - 32
 - name: navaid--private
-  friendly_name: navaid--private
-  aliases: []
+  friendly_name: Navaid private
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - private
   sizes:
     - 32
 - name: navaid--seaplane
-  friendly_name: navaid--seaplane
-  aliases: []
+  friendly_name: Navaid seaplane
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - seaplane
   sizes:
     - 32
 - name: navaid--tacan
-  friendly_name: navaid--tacan
-  aliases: []
+  friendly_name: Navaid tacan
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - tacan
   sizes:
     - 32
 - name: navaid--vhfor
-  friendly_name: navaid--vhfor
-  aliases: []
+  friendly_name: Navaid vhfor
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - vhfor
   sizes:
     - 32
 - name: navaid--vor
-  friendly_name: navaid--vor
-  aliases: []
+  friendly_name: Navaid vor
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - vor
   sizes:
     - 32
 - name: navaid--vordme
-  friendly_name: navaid--vordme
-  aliases: []
+  friendly_name: Navaid vordme
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - vordme
   sizes:
     - 32
 - name: navaid--vortac
-  friendly_name: navaid--vortac
-  aliases: []
+  friendly_name: Navaid vortac
+  aliases: 
+    - travel
+    - navigation
+    - navaid
+    - vortac
   sizes:
     - 32
 - name: network--1
@@ -8856,8 +9258,11 @@
   sizes:
     - 32
 - name: non-certified
-  friendly_name: non-certified
-  aliases: []
+  friendly_name: Non-certified
+  aliases: 
+    - non-certified
+    - file
+    - document
   sizes:
     - 32
 - name: noodle-bowl
@@ -9229,13 +9634,22 @@
   sizes:
     - 32
 - name: observed--hail
-  friendly_name: observed--hail
-  aliases: []
+  friendly_name: Observed hail
+  aliases: 
+    - weather
+    - observed
+    - hail
+    - warning
+    - precipitation
   sizes:
     - 32
 - name: observed--lightning
-  friendly_name: observed--lightning
-  aliases: []
+  friendly_name: Observed lightning
+  aliases: 
+    - weather
+    - observed
+    - lightning
+    - warning
   sizes:
     - 32
 - name: omega
@@ -9407,13 +9821,19 @@
     - 16
     - 32
 - name: outage
-  friendly_name: outage
-  aliases: []
+  friendly_name: Outage
+  aliases: 
+    - outage
+    - technology
   sizes:
     - 32
 - name: outlook-severe
-  friendly_name: outlook-severe
-  aliases: []
+  friendly_name: Outlook severe
+  aliases: 
+    - outlook
+    - severe
+    - weather
+    - warning
   sizes:
     - 32
 - name: overflow-menu--horizontal
@@ -9437,8 +9857,10 @@
     - hidden
     - navigation
 - name: overlay
-  friendly_name: overlay
-  aliases: []
+  friendly_name: Overlay
+  aliases: 
+    - overlay
+    - operations
   sizes:
     - 32
 - name: package
@@ -9477,13 +9899,19 @@
     - back
     - navigation
 - name: page-break
-  friendly_name: page-break
-  aliases: []
+  friendly_name: Page break
+  aliases: 
+    - page
+    - break
+    - formatting
   sizes:
     - 32
 - name: page-number
-  friendly_name: page-number
-  aliases: []
+  friendly_name: Page number
+  aliases: 
+    - page
+    - number
+    - formatting
   sizes:
     - 32
 - name: page-scroll
@@ -9527,8 +9955,10 @@
     - palette
     - formatting
 - name: palm-tree
-  friendly_name: palm-tree
-  aliases: []
+  friendly_name: Palm tree
+  aliases: 
+    - palm tree
+    - travel
   sizes:
     - 32
 - name: pan--horizontal
@@ -9602,13 +10032,20 @@
   sizes:
     - 32
 - name: passenger--drinks
-  friendly_name: passenger--drinks
-  aliases: []
+  friendly_name: Passenger drinks
+  aliases: 
+    - travel
+    - passenger
+    - drinks
+    - cabin service
   sizes:
     - 32
 - name: passenger--plus
-  friendly_name: passenger--plus
-  aliases: []
+  friendly_name: Passenger plus
+  aliases: 
+    - travel
+    - passenger
+    - plus
   sizes:
     - 32
 - name: password
@@ -9675,13 +10112,21 @@
     - controls
     - control
 - name: pause-future
-  friendly_name: pause-future
-  aliases: []
+  friendly_name: Pause future
+  aliases: 
+    - pause
+    - future
+    - operations
+    - controls
   sizes:
     - 32
 - name: pause-past
-  friendly_name: pause-past
-  aliases: []
+  friendly_name: Pause past
+  aliases: 
+    - pause
+    - past
+    - operations
+    - controls
   sizes:
     - 32
 - name: PDF
@@ -9783,8 +10228,14 @@
     - user
     - people
 - name: pest
-  friendly_name: pest
-  aliases: []
+  friendly_name: Pest
+  aliases: 
+    - weather
+    - pest
+    - crop
+    - agriculture
+    - food
+    - production
   sizes:
     - 32
 - name: pet-image--B
@@ -9936,13 +10387,27 @@
   sizes:
     - 32
 - name: plane--private
-  friendly_name: plane--private
-  aliases: []
+  friendly_name: Plane private
+  aliases: 
+    - airplane
+    - flight
+    - travel
+    - jet
+    - transportation
+    - private
+    - plane
   sizes:
     - 32
 - name: plane--sea
-  friendly_name: plane--sea
-  aliases: []
+  friendly_name: Plane sea
+  aliases: 
+    - airplane
+    - flight
+    - travel
+    - jet
+    - transportation
+    - plane
+    - sea plane
   sizes:
     - 32
 - name: play
@@ -10204,8 +10669,11 @@
   sizes:
     - 32
 - name: query
-  friendly_name: query
-  aliases: []
+  friendly_name: Query
+  aliases: 
+    - query
+    - operations
+    - search
   sizes:
     - 32
 - name: query-queue
@@ -10229,18 +10697,26 @@
   sizes:
     - 32
 - name: radar
-  friendly_name: radar
-  aliases: []
+  friendly_name: Radar
+  aliases: 
+    - radar
+    - instruments
   sizes:
     - 32
 - name: radar--enhanced
-  friendly_name: radar--enhanced
-  aliases: []
+  friendly_name: Radar enhanced
+  aliases: 
+    - radar
+    - enhanced
+    - instruments
   sizes:
     - 32
 - name: radar--weather
-  friendly_name: radar--weather
-  aliases: []
+  friendly_name: Radar weather
+  aliases: 
+    - radar
+    - weather
+    - instruments
   sizes:
     - 32
 - name: radio
@@ -10385,8 +10861,11 @@
     - 24
     - 32
 - name: ref-evapotranspiration
-  friendly_name: ref-evapotranspiration
-  aliases: []
+  friendly_name: Ref evapotranspiration
+  aliases: 
+    - weather
+    - ref
+    - evapotranspiration
   sizes:
     - 32
 - name: reflect--horizontal
@@ -10607,13 +11086,21 @@
     - past
     - reverse
 - name: road
-  friendly_name: road
-  aliases: []
+  friendly_name: Road
+  aliases: 
+    - road
+    - travel
+    - highway
   sizes:
     - 32
 - name: road--weather
-  friendly_name: road--weather
-  aliases: []
+  friendly_name: Road weather
+  aliases: 
+    - road
+    - travel
+    - weather
+    - caution
+    - warning
   sizes:
     - 32
 - name: roadmap
@@ -10766,8 +11253,11 @@
   sizes:
     - 32
 - name: row--delete
-  friendly_name: row--delete
-  aliases: []
+  friendly_name: Row delete
+  aliases: 
+    - row
+    - delete
+    - formatting
   sizes:
     - 32
 - name: row--expand
@@ -10779,8 +11269,11 @@
   sizes:
     - 32
 - name: row--insert
-  friendly_name: row--insert
-  aliases: []
+  friendly_name: Row insert
+  aliases: 
+    - row
+    - insert
+    - formatting
   sizes:
     - 32
 - name: rss
@@ -10852,13 +11345,19 @@
     - alphabet
     - alt
 - name: sailboat--coastal
-  friendly_name: sailboat--coastal
-  aliases: []
+  friendly_name: Sailboat coastal
+  aliases: 
+    - sailboat
+    - coastal
+    - weather
   sizes:
     - 32
 - name: sailboat--offshore
-  friendly_name: sailboat--offshore
-  aliases: []
+  friendly_name: Sailboat offshore
+  aliases: 
+    - sailboat
+    - offshore
+    - weather
   sizes:
     - 32
 - name: sankey-diagram
@@ -10870,18 +11369,25 @@
   sizes:
     - 32
 - name: satellite
-  friendly_name: satellite
-  aliases: []
+  friendly_name: Satellite
+  aliases: 
+    - satellite
+    - technology
   sizes:
     - 32
 - name: satellite--radar
-  friendly_name: satellite--radar
-  aliases: []
+  friendly_name: Satellite radar
+  aliases: 
+    - satellite
+    - radar
+    - weather
   sizes:
     - 32
 - name: satellite--weather
-  friendly_name: satellite--weather
-  aliases: []
+  friendly_name: Satellite weather
+  aliases: 
+    - satellite
+    - weather
   sizes:
     - 32
 - name: save
@@ -10958,13 +11464,21 @@
   sizes:
     - 32
 - name: scales
-  friendly_name: scales
-  aliases: []
+  friendly_name: Scales
+  aliases: 
+    - instruments
+    - scales
+    - balance
+    - justice
   sizes:
     - 32
 - name: scales--tipped
-  friendly_name: scales--tipped
-  aliases: []
+  friendly_name: Scales tipped
+  aliases: 
+    - scales
+    - tipped
+    - instruments
+    - unequal
   sizes:
     - 32
 - name: scalpel
@@ -11246,9 +11760,13 @@
     - options
     - alternatives
     - gear
+    - controls
 - name: settings--check
-  friendly_name: settings--check
-  aliases: []
+  friendly_name: Settings check
+  aliases: 
+    - settings
+    - controls
+    - check
   sizes:
     - 32
 - name: share
@@ -11680,8 +12198,12 @@
     - snow
     - precipitation
 - name: snow-density
-  friendly_name: snow-density
-  aliases: []
+  friendly_name: Snow density
+  aliases: 
+    - weather
+    - snow
+    - density
+    - precipitation
   sizes:
     - 32
 - name: snowflake
@@ -11699,33 +12221,55 @@
   sizes:
     - 32
 - name: soil-moisture
-  friendly_name: soil-moisture
-  aliases: []
+  friendly_name: Soil moisture
+  aliases: 
+    - soil
+    - moisture
+    - agriculture
   sizes:
     - 32
 - name: soil-moisture--field
-  friendly_name: soil-moisture--field
-  aliases: []
+  friendly_name: Soil moisture field
+  aliases: 
+    - soil
+    - moisture
+    - agriculture
+    - field
   sizes:
     - 32
 - name: soil-moisture--global
-  friendly_name: soil-moisture--global
-  aliases: []
+  friendly_name: Soil moisture global
+  aliases: 
+    - soil
+    - moisture
+    - agriculture
+    - global
   sizes:
     - 32
 - name: soil-temperature
-  friendly_name: soil-temperature
-  aliases: []
+  friendly_name: Soil temperature
+  aliases: 
+    - soil
+    - temperature
+    - agriculture
   sizes:
     - 32
 - name: soil-temperature--field
-  friendly_name: soil-temperature--field
-  aliases: []
+  friendly_name: Soil temperature field
+  aliases: 
+    - soil
+    - temperature
+    - agriculture
+    - field
   sizes:
     - 32
 - name: soil-temperature--global
-  friendly_name: soil-temperature--global
-  aliases: []
+  friendly_name: Soil temperature global
+  aliases: 
+    - global
+    - soil
+    - temperature
+    - agriculture
   sizes:
     - 32
 - name: spell-check
@@ -11904,8 +12448,11 @@
   sizes:
     - 32
 - name: stay-inside
-  friendly_name: stay-inside
-  aliases: []
+  friendly_name: Stay inside
+  aliases: 
+    - stay inside
+    - weather
+    - warning
   sizes:
     - 32
 - name: stem-leaf-plot
@@ -11989,8 +12536,9 @@
     - pause
     - conclude
 - name: storage-request
-  friendly_name: storage-request
-  aliases: []
+  friendly_name: Storage request
+  aliases: 
+    - storage request
   sizes:
     - 32
 - name: store
@@ -12008,8 +12556,10 @@
   sizes:
     - 32
 - name: storm-tracker
-  friendly_name: storm-tracker
-  aliases: []
+  friendly_name: Storm tracker
+  aliases: 
+    - storm tracker
+    - weather
   sizes:
     - 32
 - name: strawberry
@@ -12313,8 +12863,15 @@
   sizes:
     - 32
 - name: temperature--feels-like
-  friendly_name: temperature--feels-like
-  aliases: []
+  friendly_name: Temperature feels-like
+  aliases: 
+    - weather
+    - thermometer
+    - degree
+    - heat
+    - hot
+    - cold
+    - feels like
   sizes:
     - 32
 - name: temperature--frigid
@@ -12340,23 +12897,59 @@
     - hot
     - cold
 - name: temperature--inversion
-  friendly_name: temperature--inversion
-  aliases: []
+  friendly_name: Temperature inversion
+  aliases: 
+    - weather
+    - thermometer
+    - degree
+    - heat
+    - hot
+    - cold
+    - inversion
+    - temperature
+    - forecast
   sizes:
     - 32
 - name: temperature--max
-  friendly_name: temperature--max
-  aliases: []
+  friendly_name: Temperature max
+  aliases: 
+    - weather
+    - thermometer
+    - degree
+    - heat
+    - hot
+    - cold
+    - max
+    - temperature
+    - forecast
   sizes:
     - 32
 - name: temperature--min
-  friendly_name: temperature--min
-  aliases: []
+  friendly_name: Temperature min
+  aliases: 
+    - weather
+    - thermometer
+    - degree
+    - heat
+    - hot
+    - cold
+    - min
+    - temperature
+    - forecast
   sizes:
     - 32
 - name: temperature--water
-  friendly_name: temperature--water
-  aliases: []
+  friendly_name: Temperature water
+  aliases: 
+    - weather
+    - thermometer
+    - degree
+    - heat
+    - hot
+    - cold
+    - water
+    - temperature
+    - forecast
   sizes:
     - 32
 - name: template
@@ -12479,8 +13072,11 @@
     - alphabet
     - editor
 - name: text--footnote
-  friendly_name: text--footnote
-  aliases: []
+  friendly_name: Text footnote
+  aliases: 
+  - text
+  - footnote
+  - formatting
   sizes:
     - 32
 - name: text--highlight
@@ -12788,8 +13384,11 @@
   sizes:
     - 32
 - name: tides
-  friendly_name: tides
-  aliases: []
+  friendly_name: Tides
+  aliases: 
+    - tides
+    - weather
+    - forecast
   sizes:
     - 32
 - name: TIF
@@ -12841,8 +13440,10 @@
   sizes:
     - 32
 - name: tools--alt
-  friendly_name: tools--alt
-  aliases: []
+  friendly_name: Tools alt
+  aliases: 
+    - tools
+    - instruments
   sizes:
     - 32
 - name: tornado
@@ -12852,8 +13453,12 @@
   sizes:
     - 32
 - name: tornado-warning
-  friendly_name: tornado-warning
-  aliases: []
+  friendly_name: Tornado warning
+  aliases: 
+    - tornado
+    - warning
+    - weather
+    - forecast
   sizes:
     - 32
 - name: touch--1
@@ -12886,33 +13491,66 @@
   sizes:
     - 32
 - name: traffic--event
-  friendly_name: traffic--event
-  aliases: []
+  friendly_name: Traffic event
+  aliases: 
+    - traffic event
+    - travel
+    - crowd
+    - transportation
   sizes:
     - 32
 - name: traffic--flow
-  friendly_name: traffic--flow
-  aliases: []
+  friendly_name: Traffic flow
+  aliases: 
+    - traffic flow
+    - travel
+    - flow
+    - transportation
   sizes:
     - 32
 - name: traffic--flow-incident
-  friendly_name: traffic--flow-incident
-  aliases: []
+  friendly_name: Traffic flow incident
+  aliases: 
+    - traffic flow incident
+    - travel
+    - accident
+    - flow
+    - transportation
   sizes:
     - 32
 - name: traffic--incident
-  friendly_name: traffic--incident
-  aliases: []
+  friendly_name: Traffic incident
+  aliases: 
+    - traffic incident
+    - travel
+    - accident
+    - transportation
   sizes:
     - 32
 - name: traffic--weather-incident
-  friendly_name: traffic--weather-incident
-  aliases: []
+  friendly_name: Traffic weather incident
+  aliases:
+    - traffic weather incident
+    - weather
+    - travel
+    - incident
+    - transportation
   sizes:
     - 32
 - name: traffic-cone
-  friendly_name: traffic-cone
-  aliases: []
+  friendly_name: Traffic cone
+  aliases: 
+    - traffic flow incident
+    - travel
+    - incident
+    - transportation
+    - traffic cone
+    - traffic
+    - cone
+    - travel
+    - transportation
+    - roadwork
+    - construction
   sizes:
     - 32
 - name: train
@@ -12926,18 +13564,31 @@
   sizes:
     - 32
 - name: train--heart
-  friendly_name: train--heart
-  aliases: []
+  friendly_name: Train heart
+  aliases: 
+    - train
+    - heart
+    - transportation
+    - travel
   sizes:
     - 32
 - name: train--ticket
-  friendly_name: train--ticket
-  aliases: []
+  friendly_name: Train ticket
+  aliases: 
+    - train
+    - ticket
+    - transportation
+    - travel
   sizes:
     - 32
 - name: train--time
-  friendly_name: train--time
-  aliases: []
+  friendly_name: Train time
+  aliases: 
+    - train
+    - time
+    - schedule
+    - transportation
+    - travel
   sizes:
     - 32
 - name: tram
@@ -13025,23 +13676,41 @@
 - name: tropical-storm
   friendly_name: Tropical storm
   aliases:
-    - tropical-storm
+    - tropical storm
     - precipitation
+    - weather
   sizes:
     - 32
 - name: tropical-storm--model-tracks
-  friendly_name: tropical-storm--model-tracks
-  aliases: []
+  friendly_name: Tropical storm model tracks
+  aliases: 
+    - tropical storm
+    - precipitation
+    - model
+    - weather
+    - tracks
+    - storm
   sizes:
     - 32
 - name: tropical-storm--tracks
   friendly_name: tropical-storm--tracks
-  aliases: []
+  aliases: 
+    - tropical storm
+    - precipitation
+    - model
+    - weather
+    - tracks
+    - storm
   sizes:
     - 32
 - name: tropical-warning
-  friendly_name: tropical-warning
-  aliases: []
+  friendly_name: Tropical warning
+  aliases: 
+    - tropical warning
+    - precipitation
+    - warning
+    - weather
+    - storm
   sizes:
     - 32
 - name: TSV
@@ -13479,17 +14148,27 @@
   friendly_name: UV index
   aliases:
     - sun exposure
+    - uv
+    - index
+    - forecast
   sizes:
     - 32
 - name: uv-index--alt
-  friendly_name: uv-index--alt
-  aliases: []
+  friendly_name: UV index alt
+  aliases: 
+    - uv
+    - index
+    - sun exposure
+    - forecast
   sizes:
     - 32
 - name: uv-index--filled
   friendly_name: UV index filled
   aliases:
     - sun exposure
+    - uv
+    - index
+    - forecast
   sizes:
     - 32
 - name: van
@@ -13619,14 +14298,19 @@
     - inspect
     - visible
 - name: view-next
-  friendly_name: view-next
-  aliases: []
+  friendly_name: View next
+  aliases: 
+    - view
+    - view next
+    - next
+    - operations
+    - forward
   sizes:
     - 32
 - name: virtual-column
   friendly_name: Virtual column
   aliases:
-    - virtual-column
+    - virtual column
   sizes:
     - 32
 - name: virtual-column--key
@@ -13634,7 +14318,7 @@
   sizes:
     - 32
   aliases:
-    - virtual-column
+    - virtual column key
 - name: virtual-machine
   friendly_name: Virtual machine
   aliases:
@@ -13812,8 +14496,14 @@
     - alert
     - notification
 - name: warning--other
-  friendly_name: warning--other
-  aliases: []
+  friendly_name: Warning other
+  aliases:
+    - warning
+    - caution
+    - danger
+    - warn
+    - alert
+    - notification
   sizes:
     - 32
 - name: warning-square
@@ -13848,43 +14538,71 @@
   aliases:
     - ai
 - name: wave-direction
-  friendly_name: wave-direction
-  aliases: []
+  friendly_name: Wave direction
+  aliases: 
+    - weather
+    - wave 
+    - direction
+    - forecast
   sizes:
     - 32
 - name: wave-height
-  friendly_name: wave-height
-  aliases: []
+  friendly_name: Wave height
+  aliases: 
+    - weather
+    - wave
+    - height
+    - forecast
   sizes:
     - 32
 - name: wave-period
-  friendly_name: wave-period
-  aliases: []
+  friendly_name: Wave period
+  aliases: 
+    - weather
+    - wave
+    - period
+    - forecast
   sizes:
     - 32
 - name: weather-front--cold
-  friendly_name: weather-front--cold
-  aliases: []
+  friendly_name: Weather front cold
+  aliases: 
+    - weather
+    - front
+    - cold
+    - forecast
   sizes:
     - 32
 - name: weather-front--stationary
-  friendly_name: weather-front--stationary
-  aliases: []
+  friendly_name: Weather front stationary
+  aliases: 
+    - weather
+    - front
+    - stationery
+    - forecast
   sizes:
     - 32
 - name: weather-front--warm
-  friendly_name: weather-front--warm
-  aliases: []
+  friendly_name: Weather front warm
+  aliases: 
+    - weather
+    - front
+    - warm
+    - forecast
   sizes:
     - 32
 - name: weather-station
-  friendly_name: weather-station
-  aliases: []
+  friendly_name: Weather station
+  aliases: 
+    - weather station
+    - weather
   sizes:
     - 32
 - name: websheet
-  friendly_name: websheet
-  aliases: []
+  friendly_name: Websheet
+  aliases: 
+    - file
+    - websheet
   sizes:
     - 32
 - name: wheat
@@ -13921,13 +14639,21 @@
   sizes:
     - 32
 - name: wind-gusts
-  friendly_name: wind-gusts
-  aliases: []
+  friendly_name: Wind gusts
+  aliases: 
+    - weather
+    - wind 
+    - gusts
+    - forecast
   sizes:
     - 32
 - name: wind-stream
-  friendly_name: wind-stream
-  aliases: []
+  friendly_name: Wind stream
+  aliases: 
+    - weather
+    - wind 
+    - stream
+    - forecast
   sizes:
     - 32
 - name: window--auto
@@ -13987,8 +14713,12 @@
   aliases:
     - windy
 - name: winter-warning
-  friendly_name: winter-warning
-  aliases: []
+  friendly_name: Winter warning
+  aliases: 
+    - weather
+    - winter
+    - warning
+    - forecast
   sizes:
     - 32
 - name: wintry-mix
@@ -13996,6 +14726,7 @@
   aliases:
     - wintry-mix
     - precipitation
+    - forecast
   sizes:
     - 32
 - name: wireless-checkout

From 5e9b3fc9362e6bb4f79b9fdb6af70bf2bc74033a Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Thu, 12 Nov 2020 14:29:00 -0400
Subject: [PATCH 09/15] fix(radio-button): margin bug fix (#7133)

* fix(radio-button): margin bug fix

* Update packages/components/src/components/radio-button/_radio-button.scss

Co-authored-by: Josh Black <josh@josh.black>

* fix(radio-button): added left margin

Co-authored-by: andrea.cardonaibm.com <andrea.cardonaibm.com>
Co-authored-by: Josh Black <josh@josh.black>
---
 .../components/src/components/radio-button/_radio-button.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
index b1772617222d..4fd7828002d0 100644
--- a/packages/components/src/components/radio-button/_radio-button.scss
+++ b/packages/components/src/components/radio-button/_radio-button.scss
@@ -71,7 +71,7 @@
     flex-shrink: 0;
     width: rem(18px);
     height: rem(18px);
-    margin-right: $carbon--spacing-03;
+    margin: 2px $carbon--spacing-03 2px $carbon--spacing-03;
     background-color: transparent;
     border: $radio-border-width solid $icon-01;
     border-radius: 50%;

From de6fdcc637f63ccb7bebfab33d464cdd01040c6e Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Thu, 12 Nov 2020 18:48:24 +0000
Subject: [PATCH 10/15] chore(project): sync generated files

---
 packages/components/docs/sass.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 14b723645207..87e98ab76729 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -22907,7 +22907,7 @@ Radio button styles
     flex-shrink: 0;
     width: rem(18px);
     height: rem(18px);
-    margin-right: $carbon--spacing-03;
+    margin: 2px $carbon--spacing-03 2px $carbon--spacing-03;
     background-color: transparent;
     border: $radio-border-width solid $icon-01;
     border-radius: 50%;

From 9f740a192df241723584ba1836762fb2100dca5f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 12 Nov 2020 11:06:47 -0800
Subject: [PATCH 11/15] fix(data-table): style audit fixes for data-table
 (#7255)

* fix(data-table): style audit fixes for data-table

* fix(DataTable): use light overflow, flip zebra styles

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/components/docs/sass.md              | 20 +++++++++----------
 .../data-table/_data-table-core.scss          | 20 +++++++++----------
 .../components/DataTable/DataTable-story.js   |  2 +-
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 87e98ab76729..33315c3b8545 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -8692,7 +8692,6 @@ $hover-field: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
-  - [data-table-core [mixin]](#data-table-core-mixin)
   - [data-table-expandable [mixin]](#data-table-expandable-mixin)
   - [search [mixin]](#search-mixin)
 - **Deprecated**: This may not be available in future releases
@@ -16330,15 +16329,15 @@ Data table core styles
   }
 
   .#{$prefix}--data-table tbody tr:hover {
-    background: $hover-field;
+    background: $hover-ui;
   }
 
   .#{$prefix}--data-table tbody tr:hover td,
   .#{$prefix}--data-table tbody tr:hover th {
     color: $text-01;
-    background: $hover-field;
-    border-top: 1px solid $hover-field;
-    border-bottom: 1px solid $hover-field;
+    background: $hover-ui;
+    border-top: 1px solid $hover-ui;
+    border-bottom: 1px solid $hover-ui;
   }
 
   .#{$prefix}--data-table th,
@@ -16461,7 +16460,7 @@ Data table core styles
   .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu,
   .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu__trigger {
     &:hover {
-      background-color: $hover-field;
+      background-color: $hover-ui;
     }
   }
 
@@ -16504,9 +16503,9 @@ Data table core styles
     tbody
     tr:not(.#{$prefix}--parent-row):hover
     td {
-    background-color: $hover-field;
-    border-top: 1px solid $hover-field;
-    border-bottom: 1px solid $hover-field;
+    background-color: $hover-ui;
+    border-top: 1px solid $hover-ui;
+    border-bottom: 1px solid $hover-ui;
   }
 
   //----------------------------------------------------------------------------
@@ -16994,13 +16993,12 @@ Data table core styles
   - [text-02 [variable]](#text-02-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [layout-04 [variable]](#layout-04-variable)
-  - [hover-field [variable]](#hover-field-variable)
+  - [hover-ui [variable]](#hover-ui-variable)
   - [spacing-04 [variable]](#spacing-04-variable)
   - [spacing-03 [variable]](#spacing-03-variable)
   - [hover-selected-ui [variable]](#hover-selected-ui-variable)
   - [selected-ui [variable]](#selected-ui-variable)
   - [active-ui [variable]](#active-ui-variable)
-  - [hover-ui [variable]](#hover-ui-variable)
 
 ### ❌data-table-expandable [mixin]
 
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 362b1f897036..bb76e0b8c4d0 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -81,15 +81,15 @@
   }
 
   .#{$prefix}--data-table tbody tr:hover {
-    background: $hover-field;
+    background: $hover-ui;
   }
 
   .#{$prefix}--data-table tbody tr:hover td,
   .#{$prefix}--data-table tbody tr:hover th {
     color: $text-01;
-    background: $hover-field;
-    border-top: 1px solid $hover-field;
-    border-bottom: 1px solid $hover-field;
+    background: $hover-ui;
+    border-top: 1px solid $hover-ui;
+    border-bottom: 1px solid $hover-ui;
   }
 
   .#{$prefix}--data-table th,
@@ -212,7 +212,7 @@
   .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu,
   .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu__trigger {
     &:hover {
-      background-color: $hover-field;
+      background-color: $hover-ui;
     }
   }
 
@@ -237,14 +237,14 @@
 
   .#{$prefix}--data-table--zebra
     tbody
-    tr:not(.#{$prefix}--parent-row):nth-child(even)
+    tr:not(.#{$prefix}--parent-row):nth-child(odd)
     td {
     border-bottom: 1px solid $ui-01;
   }
 
   .#{$prefix}--data-table--zebra
     tbody
-    tr:not(.#{$prefix}--parent-row):nth-child(odd)
+    tr:not(.#{$prefix}--parent-row):nth-child(even)
     td {
     background-color: $data-table-zebra-color;
     border-top: 1px solid $data-table-zebra-color;
@@ -255,9 +255,9 @@
     tbody
     tr:not(.#{$prefix}--parent-row):hover
     td {
-    background-color: $hover-field;
-    border-top: 1px solid $hover-field;
-    border-bottom: 1px solid $hover-field;
+    background-color: $hover-ui;
+    border-top: 1px solid $hover-ui;
+    border-bottom: 1px solid $hover-ui;
   }
 
   //----------------------------------------------------------------------------
diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
index d737a61d029b..c50546426d09 100644
--- a/packages/react/src/components/DataTable/DataTable-story.js
+++ b/packages/react/src/components/DataTable/DataTable-story.js
@@ -173,7 +173,7 @@ export const WithOverflowMenu = () => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>
                 ))}
                 <TableCell className="bx--table-column-menu">
-                  <OverflowMenu flipped>
+                  <OverflowMenu light flipped>
                     <OverflowMenuItem>Action 1</OverflowMenuItem>
                     <OverflowMenuItem>Action 2</OverflowMenuItem>
                     <OverflowMenuItem>Action 3</OverflowMenuItem>

From c36c1797675506ee96e07b2f2484cef55e417180 Mon Sep 17 00:00:00 2001
From: Alessandra Davila <aledavila@ibm.com>
Date: Thu, 12 Nov 2020 13:25:39 -0600
Subject: [PATCH 12/15] chore(release): v10.24.0 (#7281)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/colors/package.json           | 2 +-
 packages/components/package.json       | 8 ++++----
 packages/elements/package.json         | 8 ++++----
 packages/icons-handlebars/package.json | 4 ++--
 packages/icons-react/package.json      | 4 ++--
 packages/icons-vue/package.json        | 4 ++--
 packages/icons/package.json            | 2 +-
 packages/react-hooks/package.json      | 4 ++--
 packages/react/package.json            | 6 +++---
 packages/sketch/package.json           | 8 ++++----
 packages/themes/package.json           | 4 ++--
 11 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/colors/package.json b/packages/colors/package.json
index 75d8479d2789..5ad7ae59e698 100644
--- a/packages/colors/package.json
+++ b/packages/colors/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/colors",
   "description": "Colors for digital and software products using the Carbon Design System",
-  "version": "10.16.0-rc.0",
+  "version": "10.16.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/components/package.json b/packages/components/package.json
index 2ae6aa0dc536..52189da7d726 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.24.0-rc.0",
+  "version": "10.24.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -79,9 +79,9 @@
     "@babel/preset-env": "^7.10.0",
     "@babel/preset-react": "^7.10.0",
     "@babel/runtime": "^7.10.0",
-    "@carbon/elements": "^10.23.0-rc.0",
-    "@carbon/icons-handlebars": "^10.21.0-rc.0",
-    "@carbon/icons-react": "^10.21.0-rc.0",
+    "@carbon/elements": "^10.23.0",
+    "@carbon/icons-handlebars": "^10.21.0",
+    "@carbon/icons-react": "^10.21.0",
     "@carbon/test-utils": "^10.12.0",
     "@frctl/fractal": "^1.1.0",
     "adaro": "1.0.4",
diff --git a/packages/elements/package.json b/packages/elements/package.json
index 8366b37b0166..d05747f2b374 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.23.0-rc.0",
+  "version": "10.23.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -31,13 +31,13 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.16.0-rc.0",
+    "@carbon/colors": "^10.16.0",
     "@carbon/grid": "^10.16.0",
-    "@carbon/icons": "^10.21.0-rc.0",
+    "@carbon/icons": "^10.21.0",
     "@carbon/import-once": "^10.3.0",
     "@carbon/layout": "^10.14.0",
     "@carbon/motion": "^10.9.0",
-    "@carbon/themes": "^10.23.0-rc.0",
+    "@carbon/themes": "^10.23.0",
     "@carbon/type": "^10.17.0"
   },
   "devDependencies": {
diff --git a/packages/icons-handlebars/package.json b/packages/icons-handlebars/package.json
index a0b4f63eecfa..d373fd0b9363 100644
--- a/packages/icons-handlebars/package.json
+++ b/packages/icons-handlebars/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-handlebars",
   "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System",
-  "version": "10.21.0-rc.0",
+  "version": "10.21.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/icons-handlebars",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "^10.9.0",
-    "@carbon/icons": "^10.21.0-rc.0"
+    "@carbon/icons": "^10.21.0"
   },
   "devDependencies": {
     "handlebars": "^4.0.12"
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
index c6093223a72e..9f43a2758813 100644
--- a/packages/icons-react/package.json
+++ b/packages/icons-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "10.21.0-rc.0",
+  "version": "10.21.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.11.0",
-    "@carbon/icons": "^10.21.0-rc.0"
+    "@carbon/icons": "^10.21.0"
   },
   "sideEffects": false
 }
diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json
index a20ef4031181..5f6ea223205b 100644
--- a/packages/icons-vue/package.json
+++ b/packages/icons-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.21.0-rc.0",
+  "version": "10.21.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.3.0",
-    "@carbon/icons": "^10.21.0-rc.0",
+    "@carbon/icons": "^10.21.0",
     "fs-extra": "^8.1.0",
     "prettier": "^2.1.0",
     "rimraf": "^3.0.0",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 1fcfcfb67573..a42b9b0ef33d 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons",
   "description": "Icons for digital and software products using the Carbon Design System",
-  "version": "10.21.0-rc.0",
+  "version": "10.21.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/react-hooks/package.json b/packages/react-hooks/package.json
index 46f24e186526..70ff6860e7b2 100644
--- a/packages/react-hooks/package.json
+++ b/packages/react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react-hooks",
   "private": true,
-  "version": "10.18.0-rc.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,7 +39,7 @@
     "autoprefixer": "^9.7.4",
     "babel-loader": "^8.1.0",
     "browserslist-config-carbon": "^10.5.0",
-    "carbon-components": "^10.24.0-rc.0",
+    "carbon-components": "^10.24.0",
     "css-loader": "^3.4.2",
     "node-sass": "^4.13.1",
     "postcss-loader": "^3.0.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 635741433e98..e1b6e23ff92e 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "7.24.0-rc.0",
+  "version": "7.24.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,7 +39,7 @@
     "react-dom": "^16.8.6 || ^17.0.1"
   },
   "dependencies": {
-    "@carbon/icons-react": "^10.21.0-rc.0",
+    "@carbon/icons-react": "^10.21.0",
     "classnames": "2.2.6",
     "downshift": "5.2.1",
     "flatpickr": "4.6.1",
@@ -84,7 +84,7 @@
     "babel-plugin-react-docgen": "^4.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "browserslist-config-carbon": "^10.5.0",
-    "carbon-components": "^10.24.0-rc.0",
+    "carbon-components": "^10.24.0",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",
diff --git a/packages/sketch/package.json b/packages/sketch/package.json
index 81774b3232af..e430eb26efbd 100644
--- a/packages/sketch/package.json
+++ b/packages/sketch/package.json
@@ -2,7 +2,7 @@
   "name": "@carbon/sketch",
   "private": true,
   "description": "Tooling for generating a sketch plugin to bring code to design",
-  "version": "10.22.0-rc.0",
+  "version": "10.22.0",
   "license": "Apache-2.0",
   "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/sketch",
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.8.7",
-    "@carbon/colors": "^10.16.0-rc.0",
+    "@carbon/colors": "^10.16.0",
     "@carbon/icon-helpers": "^10.9.0",
-    "@carbon/icons": "^10.21.0-rc.0",
-    "@carbon/themes": "^10.23.0-rc.0",
+    "@carbon/icons": "^10.21.0",
+    "@carbon/themes": "^10.23.0",
     "@carbon/type": "^10.17.0",
     "@skpm/builder": "^0.7.0",
     "color-string": "^1.5.3",
diff --git a/packages/themes/package.json b/packages/themes/package.json
index 6af6a223ac1f..e933f2005aeb 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.23.0-rc.0",
+  "version": "10.23.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,7 +24,7 @@
     "build": "yarn clean && bundler bundle src/index.js --name CarbonThemes && node tasks/build.js && bundler check \"scss/*.scss\" && bundler sassdoc \"scss/**/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^10.16.0-rc.0",
+    "@carbon/colors": "^10.16.0",
     "@carbon/layout": "^10.14.0",
     "@carbon/type": "^10.17.0",
     "color": "^3.1.2"

From 824c1b003d90d8de39939921e535afc26f83ce0d Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Thu, 12 Nov 2020 19:45:29 +0000
Subject: [PATCH 13/15] chore(project): sync generated files

---
 packages/components/docs/sass.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 33315c3b8545..308d1e8cd9fa 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -16485,14 +16485,14 @@ Data table core styles
 
   .#{$prefix}--data-table--zebra
     tbody
-    tr:not(.#{$prefix}--parent-row):nth-child(even)
+    tr:not(.#{$prefix}--parent-row):nth-child(odd)
     td {
     border-bottom: 1px solid $ui-01;
   }
 
   .#{$prefix}--data-table--zebra
     tbody
-    tr:not(.#{$prefix}--parent-row):nth-child(odd)
+    tr:not(.#{$prefix}--parent-row):nth-child(even)
     td {
     background-color: $data-table-zebra-color;
     border-top: 1px solid $data-table-zebra-color;

From caea2ab2675d14415bcbb3f5974d4841b09e138e Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Thu, 12 Nov 2020 14:07:04 -0600
Subject: [PATCH 14/15] fix(code-snippet): update component to spec (#7214)

* feat(copy-button): add active state background color

* fix(code-snippet): reposition multiline copy button

* docs(CodeSnippet): remove container div width rule

* fix(code-snippet): use correct light color token

* feat(code-snippet): add active light copy button styles

* fix(code-snippet): decrease copy button size

* fix(code-snippet): reposition expand button

* fix(code-snippet): replace ui-02 token

* refactor(code-snippet): replace ui-01 usage

* fix(code-snippet): use new active-light-ui token

* docs(CodeSnippet): set default playground story type

* refactor(code-snippet): reduce selector specificity

* fix(code-snippet): remove hover effect on light no-copy inline snippet

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../code-snippet/_code-snippet.scss           | 63 ++++++++++++-------
 .../src/components/code-snippet/_mixins.scss  |  2 +-
 .../components/copy-button/_copy-button.scss  |  4 ++
 .../src/globals/scss/_theme-tokens.scss       |  3 +-
 .../CodeSnippet/CodeSnippet-story.js          | 18 +++---
 5 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index 3d2eb89fd1fb..255c1845b580 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -35,7 +35,7 @@
     display: inline;
     padding: 0;
     color: $text-01;
-    background-color: $ui-01;
+    background-color: $field-01;
     border: 2px solid transparent;
     border-radius: 4px;
     cursor: pointer;
@@ -98,11 +98,16 @@
     display: inline-block;
 
     &:hover {
-      background-color: $ui-01;
+      background-color: $field-01;
       cursor: auto;
     }
   }
 
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
+    background-color: $field-02;
+    cursor: auto;
+  }
+
   // Single Line Snippet
   .#{$prefix}--snippet--single {
     @include bx--snippet;
@@ -149,7 +154,7 @@
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
+    background-image: linear-gradient(to right, rgba($field-01, 0), $field-01);
     content: '';
   }
 
@@ -211,7 +216,7 @@
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
+    background-image: linear-gradient(to right, rgba($field-01, 0), $field-01);
     content: '';
   }
 
@@ -240,7 +245,7 @@
     height: $carbon--spacing-08;
     padding: 0;
     overflow: visible;
-    background-color: $ui-01;
+    background-color: $field-01;
     border: none;
     outline: none;
     cursor: pointer;
@@ -304,12 +309,11 @@
     @include carbon--font-family('sans');
 
     position: absolute;
-    right: $spacing-03;
+    right: 0;
     bottom: $spacing-03;
     display: inline-flex;
     align-items: center;
-    padding: $spacing-03;
-    padding-left: $carbon--spacing-05;
+    padding: $spacing-03 $spacing-05;
     color: $text-01;
     background-color: $field-01;
     border: 0;
@@ -356,29 +360,33 @@
   }
 
   // Light version
-  .#{$prefix}--snippet.#{$prefix}--snippet--light,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--snippet-button,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light
-    .#{$prefix}--snippet-btn--expand,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn {
-    background-color: $ui-02;
+  .#{$prefix}--snippet--light,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-button,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand,
+  .#{$prefix}--snippet--light .#{$prefix}--copy-btn {
+    background-color: $field-02;
   }
 
-  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light
-    .#{$prefix}--snippet-button:hover,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light
-    .#{$prefix}--snippet-btn--expand:hover,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $hover-ui-light;
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-button:hover,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand:hover,
+  .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
+    background-color: $hover-light-ui;
   }
 
-  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--multi
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-button:active,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand:active,
+  .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
+    background-color: $active-light-ui;
+  }
+
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--multi
     .#{$prefix}--snippet-container
     pre::after {
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($ui-02, 0), $ui-02);
+    background-image: linear-gradient(to right, rgba($field-02, 0), $field-02);
   }
 
   // Skeleton State
@@ -417,6 +425,13 @@
     }
   }
 
+  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
+    top: $carbon--spacing-03;
+    right: $carbon--spacing-03;
+    width: $carbon--spacing-07;
+    height: $carbon--spacing-07;
+  }
+
   .#{$prefix}--snippet--multi
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {
diff --git a/packages/components/src/components/code-snippet/_mixins.scss b/packages/components/src/components/code-snippet/_mixins.scss
index 765848960022..5f463d847dbd 100644
--- a/packages/components/src/components/code-snippet/_mixins.scss
+++ b/packages/components/src/components/code-snippet/_mixins.scss
@@ -16,5 +16,5 @@
   position: relative;
   width: 100%;
   max-width: rem(600px);
-  background: $snippet-background-color;
+  background-color: $snippet-background-color;
 }
diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss
index 8e243417cd86..8c113acf3577 100644
--- a/packages/components/src/components/copy-button/_copy-button.scss
+++ b/packages/components/src/components/copy-button/_copy-button.scss
@@ -94,6 +94,10 @@
       background-color: $hover-ui;
     }
 
+    &:active {
+      background-color: $active-ui;
+    }
+
     &::before {
       @include tooltip--caret;
 
diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
index 6cbeae475a9b..c381a663332c 100644
--- a/packages/components/src/globals/scss/_theme-tokens.scss
+++ b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -189,8 +189,7 @@ $checkbox-border-width: 2px !default;
 /// @type Color
 /// @access public
 /// @group code-snippet
-/// TODO: Define for experimental
-$snippet-background-color: $ui-01 !default;
+$snippet-background-color: $field-01 !default;
 
 /// @type Color
 /// @access public
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
index 573fbd1bec07..f7a3a6273e0a 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -72,7 +72,7 @@ export const singleline = () => (
 );
 
 export const skeleton = () => (
-  <div style={{ width: '800px' }}>
+  <div>
     <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
     <CodeSnippetSkeleton type="multi" />
   </div>
@@ -99,11 +99,15 @@ const lightPropMessage = (
 );
 
 const props = () => ({
-  type: select('Type', {
-    inline: 'inline',
-    'single line': 'single',
-    'multiple line': 'multi',
-  }),
+  type: select(
+    'Type',
+    {
+      inline: 'inline',
+      'single line': 'single',
+      'multiple line': 'multi',
+    },
+    'inline'
+  ),
   light: boolean('Light variant', false),
   feedback: text('Feedback text', 'Copied to clipboard'),
   showMoreText: text('Text for "show more" button', 'Show more'),
@@ -116,7 +120,7 @@ const props = () => ({
 });
 
 export const playground = () => (
-  <div className={props().light ? 'bx--tile' : ''} style={{ width: '800px' }}>
+  <div className={props().light ? 'bx--tile' : ''}>
     {props().light && lightPropMessage}
     <CodeSnippet {...props()}>
       {props().type === 'multi'

From c8bb7cd25e5e4f92b3e12feb90261bcc87572470 Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Thu, 12 Nov 2020 20:25:02 +0000
Subject: [PATCH 15/15] chore(project): sync generated files

---
 packages/components/docs/sass.md | 79 ++++++++++++++++++++------------
 1 file changed, 49 insertions(+), 30 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 308d1e8cd9fa..738b2ff4ba46 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -3436,6 +3436,7 @@ $carbon--spacing-03: 0.5rem;
   - [accordion [mixin]](#accordion-mixin)
   - [breadcrumb [mixin]](#breadcrumb-mixin)
   - [button [mixin]](#button-mixin)
+  - [snippet [mixin]](#snippet-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
   - [file-uploader [mixin]](#file-uploader-mixin)
   - [form [mixin]](#form-mixin)
@@ -6771,7 +6772,6 @@ $ui-01: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [snippet [mixin]](#snippet-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
   - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
   - [data-table-core [mixin]](#data-table-core-mixin)
@@ -6813,7 +6813,6 @@ $ui-02: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [snippet [mixin]](#snippet-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
   - [number-input [mixin]](#number-input-mixin)
   - [tile [mixin]](#tile-mixin)
@@ -7353,6 +7352,7 @@ $field-02: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [snippet [mixin]](#snippet-mixin)
   - [date-picker [mixin]](#date-picker-mixin)
   - [dropdown [mixin]](#dropdown-mixin)
   - [listbox [mixin]](#listbox-mixin)
@@ -8061,6 +8061,7 @@ $hover-light-ui: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [snippet [mixin]](#snippet-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
 
 ### ✅hover-selected-ui [variable]
@@ -8144,6 +8145,7 @@ $active-light-ui: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
+  - [snippet [mixin]](#snippet-mixin)
 
 ### ✅selected-ui [variable]
 
@@ -14895,7 +14897,7 @@ Code snippet styles
     display: inline;
     padding: 0;
     color: $text-01;
-    background-color: $ui-01;
+    background-color: $field-01;
     border: 2px solid transparent;
     border-radius: 4px;
     cursor: pointer;
@@ -14958,11 +14960,16 @@ Code snippet styles
     display: inline-block;
 
     &:hover {
-      background-color: $ui-01;
+      background-color: $field-01;
       cursor: auto;
     }
   }
 
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
+    background-color: $field-02;
+    cursor: auto;
+  }
+
   // Single Line Snippet
   .#{$prefix}--snippet--single {
     @include bx--snippet;
@@ -15009,7 +15016,7 @@ Code snippet styles
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
+    background-image: linear-gradient(to right, rgba($field-01, 0), $field-01);
     content: '';
   }
 
@@ -15071,7 +15078,7 @@ Code snippet styles
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($ui-01, 0), $ui-01);
+    background-image: linear-gradient(to right, rgba($field-01, 0), $field-01);
     content: '';
   }
 
@@ -15100,7 +15107,7 @@ Code snippet styles
     height: $carbon--spacing-08;
     padding: 0;
     overflow: visible;
-    background-color: $ui-01;
+    background-color: $field-01;
     border: none;
     outline: none;
     cursor: pointer;
@@ -15164,12 +15171,11 @@ Code snippet styles
     @include carbon--font-family('sans');
 
     position: absolute;
-    right: $spacing-03;
+    right: 0;
     bottom: $spacing-03;
     display: inline-flex;
     align-items: center;
-    padding: $spacing-03;
-    padding-left: $carbon--spacing-05;
+    padding: $spacing-03 $spacing-05;
     color: $text-01;
     background-color: $field-01;
     border: 0;
@@ -15216,29 +15222,33 @@ Code snippet styles
   }
 
   // Light version
-  .#{$prefix}--snippet.#{$prefix}--snippet--light,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--snippet-button,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light
-    .#{$prefix}--snippet-btn--expand,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn {
-    background-color: $ui-02;
+  .#{$prefix}--snippet--light,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-button,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand,
+  .#{$prefix}--snippet--light .#{$prefix}--copy-btn {
+    background-color: $field-02;
+  }
+
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-button:hover,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand:hover,
+  .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
+    background-color: $hover-light-ui;
   }
 
-  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light
-    .#{$prefix}--snippet-button:hover,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light
-    .#{$prefix}--snippet-btn--expand:hover,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $hover-ui-light;
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-button:active,
+  .#{$prefix}--snippet--light .#{$prefix}--snippet-btn--expand:active,
+  .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
+    background-color: $active-light-ui;
   }
 
-  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
-  .#{$prefix}--snippet.#{$prefix}--snippet--light.#{$prefix}--snippet--multi
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
+  .#{$prefix}--snippet--light.#{$prefix}--snippet--multi
     .#{$prefix}--snippet-container
     pre::after {
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($ui-02, 0), $ui-02);
+    background-image: linear-gradient(to right, rgba($field-02, 0), $field-02);
   }
 
   // Skeleton State
@@ -15277,6 +15287,13 @@ Code snippet styles
     }
   }
 
+  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
+    top: $carbon--spacing-03;
+    right: $carbon--spacing-03;
+    width: $carbon--spacing-07;
+    height: $carbon--spacing-07;
+  }
+
   .#{$prefix}--snippet--multi
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {
@@ -15336,18 +15353,20 @@ Code snippet styles
   - [carbon--font-family [mixin]](#carbon--font-family-mixin)
   - [prefix [variable]](#prefix-variable)
   - [text-01 [variable]](#text-01-variable)
-  - [ui-01 [variable]](#ui-01-variable)
+  - [field-01 [variable]](#field-01-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [focus [variable]](#focus-variable)
   - [spacing-03 [variable]](#spacing-03-variable)
+  - [field-02 [variable]](#field-02-variable)
   - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [spacing-05 [variable]](#spacing-05-variable)
   - [icon-01 [variable]](#icon-01-variable)
   - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
   - [hover-ui [variable]](#hover-ui-variable)
-  - [field-01 [variable]](#field-01-variable)
-  - [ui-02 [variable]](#ui-02-variable)
+  - [hover-light-ui [variable]](#hover-light-ui-variable)
+  - [active-light-ui [variable]](#active-light-ui-variable)
+  - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
 
 ### ❌bx--snippet [mixin]
 
@@ -15363,7 +15382,7 @@ Code snippet base styles
   position: relative;
   width: 100%;
   max-width: rem(600px);
-  background: $snippet-background-color;
+  background-color: $snippet-background-color;
 }
 ```