From de64a143cf9befc08bafb944252d8be0e74b5a15 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 20 Apr 2023 11:47:21 +0100 Subject: [PATCH 1/4] added design tokens for `SideNav` component --- .../tokens/src/products/shared/side-nav.json | 106 ++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 packages/tokens/src/products/shared/side-nav.json diff --git a/packages/tokens/src/products/shared/side-nav.json b/packages/tokens/src/products/shared/side-nav.json new file mode 100644 index 0000000000..c7c0ace531 --- /dev/null +++ b/packages/tokens/src/products/shared/side-nav.json @@ -0,0 +1,106 @@ +{ + "side-nav": { + "wrapper": { + "padding": { + "horizontal": { + "value": "16", + "type": "size" + }, + "vertical": { + "value": "16", + "type": "size" + } + } + }, + "header": { + "home-link": { + "padding": { + "value": "4", + "type": "size" + }, + "logo-size": { + "value": "48", + "type": "size" + } + }, + "actions": { + "spacing": { + "value": "8", + "type": "size" + } + } + }, + "body": { + "list": { + "margin-vertical": { + "value": "24", + "type": "size" + } + }, + "list-item": { + "height": { + "value": "36", + "type": "size" + }, + "padding": { + "horizontal": { + "value": "8", + "type": "size" + }, + "vertical": { + "value": "4", + "type": "size" + } + }, + "spacing-vertical": { + "value": "2", + "type": "size" + }, + "content-spacing-horizontal": { + "value": "8", + "type": "size" + }, + "border-radius": { + "value": "5", + "type": "size" + } + } + }, + "color": { + "foreground": { + "primary": { + "value": "#dedfe3", + "type": "color", + "group": "components" + }, + "strong": { + "value": "#fff", + "type": "color", + "group": "components" + }, + "faint": { + "value": "#8c909c", + "type": "color", + "group": "components" + } + }, + "surface": { + "primary": { + "value": "#0c0c0e", + "type": "color", + "group": "components" + }, + "interactive-hover": { + "value": "#3b3d45", + "type": "color", + "group": "semantic" + }, + "interactive-active": { + "value": "#656a76", + "type": "color", + "group": "semantic" + } + } + } + } +} \ No newline at end of file From ea1fbcfa0e0cb3ef3f263e260154b902ee6b6a5a Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 20 Apr 2023 11:47:54 +0100 Subject: [PATCH 2/4] regenerated design tokens in output --- packages/tokens/dist/devdot/css/tokens.css | 20 +- packages/tokens/dist/docs/devdot/tokens.json | 394 ++++++++++++++++++ .../tokens/dist/docs/products/tokens.json | 394 ++++++++++++++++++ packages/tokens/dist/products/css/tokens.css | 20 +- 4 files changed, 826 insertions(+), 2 deletions(-) diff --git a/packages/tokens/dist/devdot/css/tokens.css b/packages/tokens/dist/devdot/css/tokens.css index 8abff91cea..311ca28dce 100644 --- a/packages/tokens/dist/devdot/css/tokens.css +++ b/packages/tokens/dist/devdot/css/tokens.css @@ -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 { @@ -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; diff --git a/packages/tokens/dist/docs/devdot/tokens.json b/packages/tokens/dist/docs/devdot/tokens.json index 6a262fded9..5ec3e89a7f 100644 --- a/packages/tokens/dist/docs/devdot/tokens.json +++ b/packages/tokens/dist/docs/devdot/tokens.json @@ -5413,6 +5413,400 @@ "horizontal" ] }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav", + "type": "wrapper", + "item": "padding", + "subitem": "horizontal" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav", + "type": "wrapper", + "item": "padding", + "subitem": "vertical" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "value": "4px", + "type": "size", + "original": { + "value": "4", + "type": "size" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav", + "type": "header", + "item": "home-link", + "subitem": "padding" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "value": "48px", + "type": "size", + "original": { + "value": "48", + "type": "size" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav", + "type": "header", + "item": "home-link", + "subitem": "logo-size" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav", + "type": "header", + "item": "actions", + "subitem": "spacing" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "value": "24px", + "type": "size", + "original": { + "value": "24", + "type": "size" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list", + "subitem": "margin-vertical" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "value": "36px", + "type": "size", + "original": { + "value": "36", + "type": "size" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "height" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "padding", + "state": "horizontal" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "value": "4px", + "type": "size", + "original": { + "value": "4", + "type": "size" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "padding", + "state": "vertical" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "value": "2px", + "type": "size", + "original": { + "value": "2", + "type": "size" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "spacing-vertical" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "content-spacing-horizontal" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "value": "5px", + "type": "size", + "original": { + "value": "5", + "type": "size" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "border-radius" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "value": "#dedfe3", + "type": "color", + "group": "components", + "original": { + "value": "#dedfe3", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "foreground", + "subitem": "primary" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "value": "#fff", + "type": "color", + "group": "components", + "original": { + "value": "#fff", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "foreground", + "subitem": "strong" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "value": "#8c909c", + "type": "color", + "group": "components", + "original": { + "value": "#8c909c", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "foreground", + "subitem": "faint" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "value": "#0c0c0e", + "type": "color", + "group": "components", + "original": { + "value": "#0c0c0e", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "surface", + "subitem": "primary" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + { + "value": "#3b3d45", + "type": "color", + "group": "semantic", + "original": { + "value": "#3b3d45", + "type": "color", + "group": "semantic" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "surface", + "subitem": "interactive-hover" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "value": "#656a76", + "type": "color", + "group": "semantic", + "original": { + "value": "#656a76", + "type": "color", + "group": "semantic" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "surface", + "subitem": "interactive-active" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, { "value": "36px", "type": "size", diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json index f6e5b5be14..903c9ec1f1 100644 --- a/packages/tokens/dist/docs/products/tokens.json +++ b/packages/tokens/dist/docs/products/tokens.json @@ -5367,6 +5367,400 @@ "horizontal" ] }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-side-nav-wrapper-padding-horizontal", + "attributes": { + "category": "side-nav", + "type": "wrapper", + "item": "padding", + "subitem": "horizontal" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "horizontal" + ] + }, + { + "value": "16px", + "type": "size", + "original": { + "value": "16", + "type": "size" + }, + "name": "token-side-nav-wrapper-padding-vertical", + "attributes": { + "category": "side-nav", + "type": "wrapper", + "item": "padding", + "subitem": "vertical" + }, + "path": [ + "side-nav", + "wrapper", + "padding", + "vertical" + ] + }, + { + "value": "4px", + "type": "size", + "original": { + "value": "4", + "type": "size" + }, + "name": "token-side-nav-header-home-link-padding", + "attributes": { + "category": "side-nav", + "type": "header", + "item": "home-link", + "subitem": "padding" + }, + "path": [ + "side-nav", + "header", + "home-link", + "padding" + ] + }, + { + "value": "48px", + "type": "size", + "original": { + "value": "48", + "type": "size" + }, + "name": "token-side-nav-header-home-link-logo-size", + "attributes": { + "category": "side-nav", + "type": "header", + "item": "home-link", + "subitem": "logo-size" + }, + "path": [ + "side-nav", + "header", + "home-link", + "logo-size" + ] + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-side-nav-header-actions-spacing", + "attributes": { + "category": "side-nav", + "type": "header", + "item": "actions", + "subitem": "spacing" + }, + "path": [ + "side-nav", + "header", + "actions", + "spacing" + ] + }, + { + "value": "24px", + "type": "size", + "original": { + "value": "24", + "type": "size" + }, + "name": "token-side-nav-body-list-margin-vertical", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list", + "subitem": "margin-vertical" + }, + "path": [ + "side-nav", + "body", + "list", + "margin-vertical" + ] + }, + { + "value": "36px", + "type": "size", + "original": { + "value": "36", + "type": "size" + }, + "name": "token-side-nav-body-list-item-height", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "height" + }, + "path": [ + "side-nav", + "body", + "list-item", + "height" + ] + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-side-nav-body-list-item-padding-horizontal", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "padding", + "state": "horizontal" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "horizontal" + ] + }, + { + "value": "4px", + "type": "size", + "original": { + "value": "4", + "type": "size" + }, + "name": "token-side-nav-body-list-item-padding-vertical", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "padding", + "state": "vertical" + }, + "path": [ + "side-nav", + "body", + "list-item", + "padding", + "vertical" + ] + }, + { + "value": "2px", + "type": "size", + "original": { + "value": "2", + "type": "size" + }, + "name": "token-side-nav-body-list-item-spacing-vertical", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "spacing-vertical" + }, + "path": [ + "side-nav", + "body", + "list-item", + "spacing-vertical" + ] + }, + { + "value": "8px", + "type": "size", + "original": { + "value": "8", + "type": "size" + }, + "name": "token-side-nav-body-list-item-content-spacing-horizontal", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "content-spacing-horizontal" + }, + "path": [ + "side-nav", + "body", + "list-item", + "content-spacing-horizontal" + ] + }, + { + "value": "5px", + "type": "size", + "original": { + "value": "5", + "type": "size" + }, + "name": "token-side-nav-body-list-item-border-radius", + "attributes": { + "category": "side-nav", + "type": "body", + "item": "list-item", + "subitem": "border-radius" + }, + "path": [ + "side-nav", + "body", + "list-item", + "border-radius" + ] + }, + { + "value": "#dedfe3", + "type": "color", + "group": "components", + "original": { + "value": "#dedfe3", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-foreground-primary", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "foreground", + "subitem": "primary" + }, + "path": [ + "side-nav", + "color", + "foreground", + "primary" + ] + }, + { + "value": "#fff", + "type": "color", + "group": "components", + "original": { + "value": "#fff", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-foreground-strong", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "foreground", + "subitem": "strong" + }, + "path": [ + "side-nav", + "color", + "foreground", + "strong" + ] + }, + { + "value": "#8c909c", + "type": "color", + "group": "components", + "original": { + "value": "#8c909c", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-foreground-faint", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "foreground", + "subitem": "faint" + }, + "path": [ + "side-nav", + "color", + "foreground", + "faint" + ] + }, + { + "value": "#0c0c0e", + "type": "color", + "group": "components", + "original": { + "value": "#0c0c0e", + "type": "color", + "group": "components" + }, + "name": "token-side-nav-color-surface-primary", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "surface", + "subitem": "primary" + }, + "path": [ + "side-nav", + "color", + "surface", + "primary" + ] + }, + { + "value": "#3b3d45", + "type": "color", + "group": "semantic", + "original": { + "value": "#3b3d45", + "type": "color", + "group": "semantic" + }, + "name": "token-side-nav-color-surface-interactive-hover", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "surface", + "subitem": "interactive-hover" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-hover" + ] + }, + { + "value": "#656a76", + "type": "color", + "group": "semantic", + "original": { + "value": "#656a76", + "type": "color", + "group": "semantic" + }, + "name": "token-side-nav-color-surface-interactive-active", + "attributes": { + "category": "side-nav", + "type": "color", + "item": "surface", + "subitem": "interactive-active" + }, + "path": [ + "side-nav", + "color", + "surface", + "interactive-active" + ] + }, { "value": "36px", "type": "size", diff --git a/packages/tokens/dist/products/css/tokens.css b/packages/tokens/dist/products/css/tokens.css index 9831795eee..7dcde7aeaf 100644 --- a/packages/tokens/dist/products/css/tokens.css +++ b/packages/tokens/dist/products/css/tokens.css @@ -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 { @@ -252,6 +252,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; From 6766a5db2d23fe6dfb1966481a49bb91fb217e57 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 20 Apr 2023 11:48:30 +0100 Subject: [PATCH 3/4] removed old CSS variables for `SideNav` and replaced them with new design tokens --- .../styles/components/side-nav/content.scss | 20 ++++----- .../styles/components/side-nav/header.scss | 10 ++--- .../app/styles/components/side-nav/main.scss | 6 +-- .../app/styles/components/side-nav/vars.scss | 41 ------------------- 4 files changed, 18 insertions(+), 59 deletions(-) diff --git a/packages/components/app/styles/components/side-nav/content.scss b/packages/components/app/styles/components/side-nav/content.scss index 69718bc25d..194d822a7f 100644 --- a/packages/components/app/styles/components/side-nav/content.scss +++ b/packages/components/app/styles/components/side-nav/content.scss @@ -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 > & { @@ -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); @@ -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); } } @@ -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, @@ -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); } } } @@ -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; } diff --git a/packages/components/app/styles/components/side-nav/header.scss b/packages/components/app/styles/components/side-nav/header.scss index 732a2f0356..9e067c9018 100644 --- a/packages/components/app/styles/components/side-nav/header.scss +++ b/packages/components/app/styles/components/side-nav/header.scss @@ -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); @@ -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); diff --git a/packages/components/app/styles/components/side-nav/main.scss b/packages/components/app/styles/components/side-nav/main.scss index 02c147e065..4d13da459d 100644 --- a/packages/components/app/styles/components/side-nav/main.scss +++ b/packages/components/app/styles/components/side-nav/main.scss @@ -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 @@ -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); } diff --git a/packages/components/app/styles/components/side-nav/vars.scss b/packages/components/app/styles/components/side-nav/vars.scss index d94c775f52..26e36eef80 100644 --- a/packages/components/app/styles/components/side-nav/vars.scss +++ b/packages/components/app/styles/components/side-nav/vars.scss @@ -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; -} From 5a2f5778d5e1d57a7d0d080f01319492e1a5a8b7 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 20 Apr 2023 11:58:15 +0100 Subject: [PATCH 4/4] changeset --- .changeset/rude-tips-divide.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/rude-tips-divide.md diff --git a/.changeset/rude-tips-divide.md b/.changeset/rude-tips-divide.md new file mode 100644 index 0000000000..498993159d --- /dev/null +++ b/.changeset/rude-tips-divide.md @@ -0,0 +1,6 @@ +--- +"@hashicorp/design-system-components": patch +"@hashicorp/design-system-tokens": patch +--- + +Added design tokens for `SideNav` component