From 52c2a3d55f96dcd6c8939ff87f1c8d3de6bc9324 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Thu, 5 Dec 2024 15:01:21 -0800 Subject: [PATCH] chore: update storybook spacing with new tokens (#698) --- packages/web/.storybook/manager-head.html | 24 +++++++++--------- packages/web/.storybook/preview-head.html | 30 +++++++++++------------ 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/web/.storybook/manager-head.html b/packages/web/.storybook/manager-head.html index af898c215..90d814089 100644 --- a/packages/web/.storybook/manager-head.html +++ b/packages/web/.storybook/manager-head.html @@ -10,8 +10,8 @@ } .sidebar-container .os-content { - padding: var(--gcds-spacing-100) var(--gcds-spacing-250) - var(--gcds-spacing-400) !important; + padding: var(--gcds-spacing-75) var(--gcds-spacing-175) + var(--gcds-spacing-300) !important; } .sidebar-container .css-d3imve { @@ -50,7 +50,7 @@ .sidebar-header .css-1jtjrtn { flex-shrink: 0; - margin: var(--gcds-spacing-500) 0 0; + margin: var(--gcds-spacing-600) 0 0; } .sidebar-header .css-1rb1jn6 { @@ -62,16 +62,16 @@ .sidebar-header .css-c3junj, .sidebar-header .css-17fv6jh { position: absolute; - top: var(--gcds-spacing-200); + top: var(--gcds-spacing-150); } .sidebar-header .css-c3junj { right: var(--gcds-spacing-450); - margin: 0 0 var(--gcds-spacing-150); + margin: 0 0 var(--gcds-spacing-100); } .sidebar-header .css-17fv6jh { - right: var(--gcds-spacing-600); + right: var(--gcds-spacing-900); } .sidebar-header .css-c3junj button { @@ -85,7 +85,7 @@ /* Sidebar subheadings + welcome story */ .sidebar-subheading, div.sidebar-item[data-item-id='welcome--stories'] { - margin-block-end: var(--gcds-spacing-250) !important; + margin-block-end: var(--gcds-spacing-175) !important; } .sidebar-subheading, @@ -140,12 +140,12 @@ } .search-result-item { - padding: var(--gcds-spacing-150) 0 !important; + padding: var(--gcds-spacing-100) 0 !important; } .search-result-item--label strong { display: block; - margin: 0 0 var(--gcds-spacing-100); + margin: 0 0 var(--gcds-spacing-75); } .search-result-item svg { @@ -175,7 +175,7 @@ } .sidebar-item { - padding-block: var(--gcds-spacing-150) !important; + padding-block: var(--gcds-spacing-100) !important; border-radius: 0 !important; } @@ -203,7 +203,7 @@ button.sidebar-item { border-block-start: var(--gcds-border-width-sm) solid rgba(255, 255, 255, 0.15) !important; - padding: var(--gcds-spacing-250) var(--gcds-spacing-450) !important; + padding: var(--gcds-spacing-175) var(--gcds-spacing-450) !important; } button.sidebar-item:last-of-type { @@ -213,7 +213,7 @@ button.sidebar-item span { margin-inline-start: 0; - margin-inline-end: var(--gcds-spacing-150); + margin-inline-end: var(--gcds-spacing-100); } div.sidebar-item:not([data-item-id='welcome--stories']) { diff --git a/packages/web/.storybook/preview-head.html b/packages/web/.storybook/preview-head.html index 6434aede9..ab9de496e 100644 --- a/packages/web/.storybook/preview-head.html +++ b/packages/web/.storybook/preview-head.html @@ -34,14 +34,14 @@ .intro-boxes { background-color: var(--gcds-color-grayscale-50); margin-block-start: var(--gcds-spacing-450) !important; - margin-block-end: var(--gcds-spacing-500) !important; - padding: var(--gcds-spacing-400); + margin-block-end: var(--gcds-spacing-600) !important; + padding: var(--gcds-spacing-300); } .intro-boxes li { list-style: none; background-color: var(--gcds-color-grayscale-0); - padding: var(--gcds-spacing-400); + padding: var(--gcds-spacing-300); } /* ----- PROPERTIES PAGE ----- */ @@ -56,7 +56,7 @@ /* Add space between component preview + copy & hide code btns */ .docs-story .sb-story { - padding-block-end: var(--gcds-spacing-500); + padding-block-end: var(--gcds-spacing-600); } .docs-story .css-25bv1u, @@ -77,9 +77,9 @@ box-sizing: border-box; font: var(--gcds-button-font) !important; font-size: 0.875rem !important; - margin: 0 var(--gcds-spacing-150) var(--gcds-spacing-250) - var(--gcds-spacing-300) !important; - padding: var(--gcds-spacing-200) var(--gcds-spacing-150) !important; + margin: 0 var(--gcds-spacing-100) var(--gcds-spacing-175) + var(--gcds-spacing-225) !important; + padding: var(--gcds-spacing-150) var(--gcds-spacing-100) !important; transition: all 0.15s ease-in-out 0s; } @@ -134,7 +134,7 @@ border-radius: 0 !important; color: var(--gcds-text-primary) !important; font-weight: var(--gcds-font-weights-bold); - padding-block-start: var(--gcds-spacing-400); + padding-block-start: var(--gcds-spacing-300); border-inline: 0 !important; } @@ -230,7 +230,7 @@ .css-1p58akv { background-color: var(--gcds-color-grayscale-700) !important; border: var(--gcds-border-width-sm) solid var(--gcds-color-grayscale-0) !important; - padding: var(--gcds-spacing-50) !important; + padding: var(--gcds-spacing-25) !important; } .css-tvcum3 span, @@ -320,11 +320,11 @@ } .resources-list { - margin: var(--gcds-spacing-400) 0 !important; + margin: var(--gcds-spacing-300) 0 !important; } .resources-list li { - margin: 0 0 var(--gcds-spacing-300) !important; + margin: 0 0 var(--gcds-spacing-225) !important; } /* ----- CUSTOM COPY CODE BTNS ----- */ @@ -355,7 +355,7 @@ /* gcds-button */ .sbdocs-preview .docs-story gcds-button.hydrated + gcds-button.hydrated, .sb-show-main #storybook-root gcds-button.hydrated + gcds-button.hydrated { - margin: 0 0 0 var(--gcds-spacing-400); + margin: 0 0 0 var(--gcds-spacing-300); } /* gcds-container */ @@ -367,7 +367,7 @@ /* gcds-icon */ .sbdocs-preview .docs-story #story--components-icon--name gcds-icon, .sbdocs-preview .docs-story #story--components-icon--sizes gcds-icon { - margin: 0 var(--gcds-spacing-150) 0 0; + margin: 0 var(--gcds-spacing-100) 0 0; } .sbdocs-preview .docs-story #story--components-icon--margin-left gcds-icon, @@ -382,7 +382,7 @@ } .sbdocs-preview .docs-story #story--components-icon--width gcds-icon { - margin: 0 var(--gcds-spacing-150) 0 0; + margin: 0 var(--gcds-spacing-100) 0 0; border: var(--gcds-border-width-sm) solid var(--gcds-border-default); } @@ -578,7 +578,7 @@ if (tr.children[x].innerText === '-') { let span = document.createElement('span'); span.setAttribute('class', 'sr-only'); - + if (lang === 'en') { tr.children[x].setAttribute('title', 'No default value'); span.innerText = 'No default value';