feat(ui-shell): add theming support (#8579)

* feat(ui-shell): updated ui shell header styles * feat(ui-shell): updated side nav styles * feat(ui-shell): updated header-panel & switcher styles * feat(ui-shell): _side-nav.scss token update * feat(ui-shell): updated and deprecate styles * chore: update deprecated component tests * fix: test warning path * fix: design feedback changes * feat(ui-shell): update depcrecation test warning * fix(content): added content color with updated styles * Update packages/react/src/components/UIShell/HeaderPanel.js Co-authored-by: Taylor Jones <[email protected]> * Update HeaderPanel.js Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Jun 1, 2021 · f79b628 · f79b628
1 parent 30d28f9
commit f79b628
Show file tree

Hide file tree

Showing 17 changed files with 214 additions and 90 deletions.
diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss
@@ -16,6 +16,7 @@
   .#{$prefix}--content {
     padding: 2rem;
     background: $layer;
+    color: $text-primary;
     will-change: margin-left;
   }
 

diff --git a/packages/components/src/components/ui-shell/_header-panel.scss b/packages/components/src/components/ui-shell/_header-panel.scss
@@ -16,6 +16,7 @@
 /// UI shell side nav
 /// @access private
 /// @group ui-shell
+/// @deprecated currently not being used and will be removed in v11
 @mixin carbon-header-panel {
   //----------------------------------------------------------------------------
   // Header Panel
@@ -31,16 +32,16 @@
     overflow: hidden;
     width: 0;
     border: none;
-    background-color: $shell-panel-bg-01;
-    color: $shell-panel-text-01;
+    background-color: $layer;
+    color: $text-secondary;
     transition: width 0.11s;
     will-change: width;
   }
 
   .#{$prefix}--header-panel--expanded {
     width: carbon--mini-units(32);
-    border-right: 1px solid $shell-panel-border;
-    border-left: 1px solid $shell-panel-border;
+    border-right: 1px solid $border-subtle;
+    border-left: 1px solid $border-subtle;
   }
 }
 

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
@@ -27,8 +27,8 @@
     display: flex;
     height: mini-units(6);
     align-items: center;
-    border-bottom: 1px solid $shell-header-border-01;
-    background-color: $shell-header-bg-01;
+    border-bottom: 1px solid $border-subtle;
+    background-color: $background;
   }
 
   .#{$prefix}--header__action {
@@ -54,38 +54,54 @@
   }
 
   .#{$prefix}--header__action:hover {
-    background-color: $shell-header-bg-04;
+    background-color: $background-hover;
   }
 
   .#{$prefix}--header__action--active {
-    border-right: 1px solid $shell-header-border-01;
-    border-bottom: 1px solid $shell-header-bg-01;
-    border-left: 1px solid $shell-header-border-01;
+    border-right: 1px solid $border-subtle;
+    border-bottom: 1px solid transparent;
+    border-left: 1px solid $border-subtle;
+    background: $layer;
+  }
+
+  .#{$prefix}--header__action--active > svg {
+    fill: $icon-primary;
   }
 
   .#{$prefix}--header__action:focus {
-    border-color: $shell-header-focus;
+    border-color: $focus;
     outline: none;
   }
 
   .#{$prefix}--header__action:active {
-    background-color: $shell-header-bg-03;
+    background-color: $background-active;
   }
 
   .#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
     justify-content: center;
   }
 
-  .#{$prefix}--header__action > svg {
-    fill: $shell-header-icon-02;
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action
+    svg {
+    fill: $icon-secondary;
+  }
+
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:hover
+    svg,
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:active
+    svg,
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action--active
+    svg {
+    fill: $icon-primary;
   }
 
   .#{$prefix}--header__menu-trigger > svg {
-    fill: $shell-header-icon-01;
+    fill: $icon-primary;
   }
 
-  .#{$prefix}--header__menu-trigger:hover {
-    fill: $shell-header-bg-02;
+  .#{$prefix}--header__menu-trigger:hover > svg {
+    fill: $icon-primary;
+    //TO-DO: ask design if this color changes on hover, missing spec for it
   }
 
   .#{$prefix}--header__menu-toggle {
@@ -121,7 +137,8 @@
   }
 
   a.#{$prefix}--header__name:focus {
-    border-color: $shell-header-focus;
+    border-color: $focus;
+    //TO-DO: follow up with design to see if this is correct, missing focus spec for it
   }
 
   .#{$prefix}--header__name--prefix {
@@ -130,7 +147,7 @@
 
   a.#{$prefix}--header__name,
   a.#{$prefix}--header__name:hover {
-    color: $shell-header-text-01;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__menu-toggle:not(.#{$prefix}--header__menu-toggle__hidden)
@@ -151,14 +168,15 @@
       display: block;
     }
 
+    // header nav divider
     &::before {
       position: absolute;
       top: 50%;
       left: 0;
       display: block;
       width: rem(1px);
       height: rem(24px);
-      background-color: $shell-header-border-01;
+      background-color: $border-subtle;
       content: '';
       transform: translateY(-50%);
     }
@@ -181,7 +199,8 @@
     padding: 0 mini-units(2);
     // Used for focus styles
     border: 2px solid transparent;
-    color: $shell-header-text-02;
+    background-color: $background;
+    color: $text-secondary;
     // Text styles
     font-size: rem(14px);
     font-weight: 400;
@@ -195,30 +214,33 @@
   }
 
   a.#{$prefix}--header__menu-item:hover {
-    background-color: $shell-header-bg-02;
-    color: $shell-header-text-01;
+    background-color: $background-hover;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__action:active,
   a.#{$prefix}--header__menu-item:active {
-    background-color: $shell-header-bg-03;
-    color: $shell-header-text-01;
+    background-color: $background-active;
+    color: $text-primary;
   }
 
   a.#{$prefix}--header__menu-item:focus {
-    border-color: $shell-header-focus;
-    color: $shell-header-text-01;
+    border-color: $focus;
     outline: none;
   }
 
   a.#{$prefix}--header__menu-item:hover > svg,
-  a.#{$prefix}--header__menu-item:active > svg,
-  a.#{$prefix}--header__menu-item:focus > svg {
-    fill: $shell-header-icon-01;
+  a.#{$prefix}--header__menu-item:active > svg {
+    fill: $icon-primary;
   }
 
   // Styles for selected state
 
+  a.#{$prefix}--header__menu-item[aria-current='page'],
+  .#{$prefix}--header__menu-item--current {
+    color: $text-primary;
+  }
+
   a.#{$prefix}--header__menu-item[aria-current='page']::after,
   .#{$prefix}--header__menu-item--current::after {
     position: absolute;
@@ -227,7 +249,7 @@
     bottom: -2px;
     left: 0;
     width: 100%;
-    border-bottom: 3px solid $support-info-inverse;
+    border-bottom: 3px solid $border-interactive;
     content: '';
   }
 
@@ -238,7 +260,7 @@
 
   a.#{$prefix}--header__menu-item[aria-current='page']:focus,
   a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
-    border: 2px solid $shell-header-focus;
+    border: 2px solid $focus;
   }
 
   .#{$prefix}--header__submenu {
@@ -253,8 +275,8 @@
     // Note: needs to be higher than menu. Adding 1 here instead of moving to
     // the next level.
     z-index: #{z('header') + 1};
-    background-color: $shell-header-bg-06;
-    color: $shell-header-focus;
+    background-color: $layer;
+    color: $text-secondary;
   }
 
   .#{$prefix}--header__menu-title[aria-expanded='true']
@@ -278,35 +300,38 @@
     display: flex;
     width: mini-units(25);
     flex-direction: column;
-    background-color: $shell-header-bg-06;
+    background-color: $layer;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
     transform: translateY(100%);
   }
 
+  .#{$prefix}--header__menu-title[aria-expanded='true']
+    + .#{$prefix}--header__menu
+    .#{$prefix}--header__menu-item {
+    background-color: $layer;
+  }
+
   .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu
     .#{$prefix}--header__menu-item:hover {
-    background-color: $shell-header-bg-04;
+    background-color: $layer-hover;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu
     .#{$prefix}--header__menu-item:active {
-    background-color: $shell-header-bg-03;
+    background-color: $layer-active;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
     height: mini-units(6);
   }
 
-  .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: $shell-header-bg-06;
-    color: $shell-header-text-01;
-  }
-
   .#{$prefix}--header__menu-arrow {
     margin-left: mini-units(1);
-    fill: $shell-header-icon-03;
+    fill: $icon-secondary;
     transition: transform $duration--fast-02, fill $duration--fast-02;
   }
 
@@ -345,10 +370,11 @@
     height: 3rem;
     align-items: center;
     padding: 0 1rem;
-    border: 4px solid $ibm-color__blue-60;
-    background-color: $shell-header-bg-01;
+    border: 4px solid $focus;
+    background-color: $background;
     clip: auto;
-    color: $shell-header-text-01;
+    color: $text-secondary;
+    //TO-DO: double check with design that these tokens are correct, missing spec for it
     outline: none;
   }
 }

diff --git a/packages/components/src/components/ui-shell/_navigation-menu.scss b/packages/components/src/components/ui-shell/_navigation-menu.scss
@@ -13,6 +13,7 @@
 /// UI shell navigation
 /// @access private
 /// @group ui-shell
+/// @deprecated currently not being used and will be removed in v11
 @mixin carbon-navigation {
   //----------------------------------------------------------------------------
   // Navigation

diff --git a/packages/components/src/components/ui-shell/_product-switcher.scss b/packages/components/src/components/ui-shell/_product-switcher.scss
@@ -14,6 +14,7 @@
 /// UI shell product switcher
 /// @access private
 /// @group ui-shell
+/// @deprecated currently not being used and will be removed in v11
 @mixin product-switcher {
   //--------------------------------------------------------------------------
   // Global Panel