Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 20 commits into from
Jun 1, 2021
+214 −90
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b7ffd7a
feat(ui-shell): updated ui shell header styles
andreancardona May 4, 2021
87bc71b
feat(ui-shell): updated side nav styles
andreancardona May 6, 2021
cf6770a
feat(ui-shell): updated header-panel & switcher styles
andreancardona May 6, 2021
beb34bb
feat(ui-shell): _side-nav.scss token update
andreancardona May 7, 2021
ce2483f
feat(ui-shell): updated and deprecate styles
andreancardona May 12, 2021
08e17d0
Merge branch 'main' into 8409-ui-shell-theme
andreancardona May 13, 2021
cd6b7f1
Merge branch 'main' of github.com:carbon-design-system/carbon into 84…
jnm2377 May 13, 2021
e267ec5
Merge branch 'main' into 8409-ui-shell-theme
jnm2377 May 13, 2021
e8da4f5
chore: update deprecated component tests
jnm2377 May 13, 2021
b3f3795
Merge branch '8409-ui-shell-theme' of github.com:andreancardona/carbo…
jnm2377 May 13, 2021
252a265
fix: test warning path
jnm2377 May 14, 2021
ada1368
Merge branch 'main' of github.com:carbon-design-system/carbon into 84…
jnm2377 May 18, 2021
049bb8f
Merge branch 'main' of github.com:carbon-design-system/carbon into 84…
jnm2377 May 18, 2021
f67a47e
fix: design feedback changes
jnm2377 May 18, 2021
f9b9d8c
Merge branch 'main' into 8409-ui-shell-theme
tw15egan May 18, 2021
8c52d94
feat(ui-shell): update depcrecation test warning
andreancardona May 18, 2021
702135f
fix(content): added content color with updated styles
andreancardona May 20, 2021
50f4b05
Merge branch 'next' into 8409-ui-shell-theme
tw15egan May 25, 2021
6ddc209
Update packages/react/src/components/UIShell/HeaderPanel.js
andreancardona May 25, 2021
c168ebe
Update HeaderPanel.js
andreancardona May 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/src/components/ui-shell/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
.#{$prefix}--content {
padding: 2rem;
background: $layer;
color: $text-primary;
will-change: margin-left;
}

Expand Down
9 changes: 5 additions & 4 deletions packages/components/src/components/ui-shell/_header-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
}
}

Expand Down
110 changes: 68 additions & 42 deletions packages/components/src/components/ui-shell/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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)
Expand All @@ -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%);
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -227,7 +249,7 @@
bottom: -2px;
left: 0;
width: 100%;
border-bottom: 3px solid $support-info-inverse;
border-bottom: 3px solid $border-interactive;
content: '';
}

Expand All @@ -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 {
Expand All @@ -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']
Expand All @@ -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;
}

Expand Down Expand Up @@ -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;
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/ui-shell/_navigation-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/ui-shell/_product-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading