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

Jump to bottom

SideNav component - Add component-specific design tokens #1313

Merged
merged 4 commits into from
Apr 21, 2023
Merged

SideNav component - Add component-specific design tokens #1313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de64a14
added design tokens for `SideNav` component
didoo Apr 20, 2023
ea1fbcf
regenerated design tokens in output
didoo Apr 20, 2023
6766a5d
removed old CSS variables for `SideNav` and replaced them with new de…
didoo Apr 20, 2023
5a2f577
changeset
didoo Apr 20, 2023
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
6 changes: 6 additions & 0 deletions .changeset/rude-tips-divide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hashicorp/design-system-components": patch
"@hashicorp/design-system-tokens": patch
---

Added design tokens for `SideNav` component
20 changes: 10 additions & 10 deletions packages/components/app/styles/components/side-nav/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
min-height: 34px;
margin-top: var(--token-side-nav-body-list-margin-vertical);
padding: 0 var(--token-side-nav-body-list-item-padding-horizontal);
color: var(--token-side-nav-foreground-faint);
color: var(--token-side-nav-color-foreground-faint);

// Remove margin from title at top of all list-items & lists
.hds-side-nav__list-wrapper:first-child .hds-side-nav__list-item:first-child > & {
Expand Down Expand Up @@ -71,9 +71,9 @@
width: 100%;
min-height: var(--token-side-nav-body-list-item-height);
padding: var(--token-side-nav-body-list-item-padding-vertical) var(--token-side-nav-body-list-item-padding-horizontal);
color: var(--token-side-nav-foreground-primary);
color: var(--token-side-nav-color-foreground-primary);
text-decoration: none;
background: var(--token-side-nav-surface-primary);
background: var(--token-side-nav-color-surface-primary);
// "Link" could render as an HTML button element so this overrides the default border style in that case:
border-color: transparent;
border-radius: var(--token-side-nav-body-list-item-border-radius);
Expand All @@ -85,13 +85,13 @@

&:hover,
&.mock-hover {
background: var(--token-side-nav-interactive-surface-hover);
background: var(--token-side-nav-color-surface-interactive-hover);
border-color: transparent;

.hds-side-nav__list-item-text,
.hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-icon-trailing {
color: var(--token-side-nav-foreground-primary-strong);
color: var(--token-side-nav-color-foreground-strong);
}
}

Expand All @@ -101,12 +101,12 @@
&.active,
&:active,
&.mock-active {
background: var(--token-side-nav-interactive-surface-active);
background: var(--token-side-nav-color-surface-interactive-active);

.hds-side-nav__list-item-text,
.hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-icon-trailing {
color: var(--token-side-nav-foreground-primary-strong);
color: var(--token-side-nav-color-foreground-strong);
}

.hds-badge,
Expand All @@ -126,12 +126,12 @@
.hds-side-nav__list-item-link--back-link {
&:active,
&.mock-active {
background: var(--token-side-nav-surface-primary);
background: var(--token-side-nav-color-surface-primary);

.hds-side-nav__list-item-text,
.hds-side-nav__list-item-icon-leading,
.hds-side-nav__list-item-icon-trailing {
color: var(--token-side-nav-foreground-primary);
color: var(--token-side-nav-color-foreground-primary);
}
}
}
Expand All @@ -140,7 +140,7 @@
// LIST ITEM > INNER ELEMENTS

.hds-side-nav__list-item-text {
color: var(--token-side-nav-foreground-primary);
color: var(--token-side-nav-color-foreground-primary);
text-align: left;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/components/app/styles/components/side-nav/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@use "../../mixins/focus-ring" as *;

@mixin hds-side-nav-icon-button($add-visible-border: false) {
color: var(--token-side-nav-foreground-primary-strong);
color: var(--token-side-nav-color-foreground-strong);
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--token-side-nav-body-list-item-border-radius);
Expand All @@ -27,14 +27,14 @@

&:hover,
&.mock-hover {
color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
background: var(--token-side-nav-interactive-surface-hover);
color: var(--token-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
background: var(--token-side-nav-color-surface-interactive-hover);
}

&:active,
&.mock-active {
color: var(--token-side-nav-foreground-primary-strong); // to avoid overrides by specificity (eg. `a:hover`)
background: var(--token-side-nav-interactive-surface-active);
color: var(--token-side-nav-color-foreground-strong); // to avoid overrides by specificity (eg. `a:hover`)
background: var(--token-side-nav-color-surface-interactive-active);

@if ($add-visible-border) {
border-color: var(--token-color-palette-neutral-400);
Expand Down
6 changes: 3 additions & 3 deletions packages/components/app/styles/components/side-nav/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,8 @@
display: flex;
flex-direction: column;
height: 100%;
color: var(--token-side-nav-foreground-primary); // we set a default color (in case generic content is added to the header/body/footer of the sidenav)
background: var(--token-side-nav-surface-primary);
color: var(--token-side-nav-color-foreground-primary); // we set a default color (in case generic content is added to the header/body/footer of the sidenav)
background: var(--token-side-nav-color-surface-primary);

// RESPONSIVENESS - This controls the width of the "sidenav" container, and is independent (bur related) from the parent "sidebar" grid area

Expand Down Expand Up @@ -157,7 +157,7 @@
.hds-side-nav__wrapper-header {
padding-top: var(--token-side-nav-wrapper-padding-vertical);
padding-right: var(--token-side-nav-wrapper-padding-horizontal);
padding-bottom: var(--token-side-nav-wrapper-header-padding-bottom); // by design
padding-bottom: 8px; // by design
padding-left: var(--token-side-nav-wrapper-padding-horizontal);
}

Expand Down
41 changes: 0 additions & 41 deletions packages/components/app/styles/components/side-nav/vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,44 +33,3 @@
--hds-app-sidenav-animation-duration: 0;
}
}


// DESIGN TOKENS
// will be converted to JSON format in the future
// notice: overriding them should be considered an anti-pattern, and not promoted/publicized

:root {
// Sizes:

// header, body, footer "wrappers":
--token-side-nav-wrapper-padding-horizontal: 16px;
--token-side-nav-wrapper-padding-vertical: 16px;
--token-side-nav-wrapper-header-padding-bottom: 8px;

// header content:
--token-side-nav-header-home-link-padding: 4px;
--token-side-nav-header-home-link-logo-size: 48px;
--token-side-nav-header-actions-spacing: 8px;

// body content:
--token-side-nav-body-list-margin-vertical: 24px;
--token-side-nav-body-list-item-height: 36px;
--token-side-nav-body-list-item-padding-horizontal: 8px;
--token-side-nav-body-list-item-padding-vertical: 4px;
--token-side-nav-body-list-item-spacing-vertical: 2px;
--token-side-nav-body-list-item-content-spacing-horizontal: 8px;
--token-side-nav-body-list-item-border-radius: 5px;

// Colors:

// SideNav container:
--token-side-nav-foreground-primary: #dedfe3;
--token-side-nav-foreground-primary-strong: #fff;
--token-side-nav-foreground-faint: #8c909c;
--token-side-nav-surface-primary: #0c0c0e;

// Interactive elements:
// base:
--token-side-nav-interactive-surface-hover: #3b3d45;
--token-side-nav-interactive-surface-active: #656a76;
}
20 changes: 19 additions & 1 deletion packages/tokens/dist/devdot/css/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Tue, 14 Feb 2023 00:14:16 GMT
* Generated on Thu, 20 Apr 2023 10:45:24 GMT
*/

:root {
Expand Down Expand Up @@ -254,6 +254,24 @@
--token-pagination-nav-indicator-spacing: 6px;
--token-pagination-child-spacing-vertical: 8px;
--token-pagination-child-spacing-horizontal: 20px;
--token-side-nav-wrapper-padding-horizontal: 16px;
--token-side-nav-wrapper-padding-vertical: 16px;
--token-side-nav-header-home-link-padding: 4px;
--token-side-nav-header-home-link-logo-size: 48px;
--token-side-nav-header-actions-spacing: 8px;
--token-side-nav-body-list-margin-vertical: 24px;
--token-side-nav-body-list-item-height: 36px;
--token-side-nav-body-list-item-padding-horizontal: 8px;
--token-side-nav-body-list-item-padding-vertical: 4px;
--token-side-nav-body-list-item-spacing-vertical: 2px;
--token-side-nav-body-list-item-content-spacing-horizontal: 8px;
--token-side-nav-body-list-item-border-radius: 5px;
--token-side-nav-color-foreground-primary: #dedfe3;
--token-side-nav-color-foreground-strong: #fff;
--token-side-nav-color-foreground-faint: #8c909c;
--token-side-nav-color-surface-primary: #0c0c0e;
--token-side-nav-color-surface-interactive-hover: #3b3d45;
--token-side-nav-color-surface-interactive-active: #656a76;
--token-tabs-tab-height: 36px;
--token-tabs-tab-padding-horizontal: 12px;
--token-tabs-tab-padding-vertical: 0px;
Expand Down
Loading