From bdb8f385a5f09fca373dfdd1b6d97254a58c9b3b Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 9 Jan 2024 16:11:17 -0800 Subject: [PATCH] fix: update base spacing variable name --- assets/newspack-ui/scss/elements/_tables.scss | 4 ++-- .../scss/elements/forms/_buttons.scss | 2 +- .../scss/elements/forms/_index.scss | 4 ++-- .../newspack-ui/scss/variables/_spacing.scss | 18 +++++++++--------- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/assets/newspack-ui/scss/elements/_tables.scss b/assets/newspack-ui/scss/elements/_tables.scss index 5210b5010e..a5b544035f 100644 --- a/assets/newspack-ui/scss/elements/_tables.scss +++ b/assets/newspack-ui/scss/elements/_tables.scss @@ -3,14 +3,14 @@ border: 0; font-size: var( --newspack-ui-font-size-small ); // Prevent relative font size line-height: var( --newspack-ui-line-height-large ); - margin: calc( var( --newspack-ui-spacer-1 ) / -2 ) 0; // Offset cell padding. + margin: calc( var( --newspack-ui-spacer-base ) / -2 ) 0; // Offset cell padding. th, td { background: transparent; border-color: var( --newspack-ui-color-border ); border-width: 0 0 1px; font-size: var( --newspack-ui-font-size-small ); // Prevent relative font size - padding: calc( var( --newspack-ui-spacer-1 ) / 2 ) 0; + padding: calc( var( --newspack-ui-spacer-base ) / 2 ) 0; vertical-align: top; > * { white-space: nowrap; diff --git a/assets/newspack-ui/scss/elements/forms/_buttons.scss b/assets/newspack-ui/scss/elements/forms/_buttons.scss index 16ce1a83e7..a1e2bf990c 100644 --- a/assets/newspack-ui/scss/elements/forms/_buttons.scss +++ b/assets/newspack-ui/scss/elements/forms/_buttons.scss @@ -16,7 +16,7 @@ gap: var( --newspack-ui-spacer-2 ); justify-content: center; line-height: var( --newspack-ui-line-height-large ); - margin-bottom: var( --newspack-ui-spacer-1 ); + margin-bottom: var( --newspack-ui-spacer-base ); padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-3 ); // TODO: correct this transition: background-color 150ms ease-in-out; diff --git a/assets/newspack-ui/scss/elements/forms/_index.scss b/assets/newspack-ui/scss/elements/forms/_index.scss index 704f7ff58d..9985ed0b85 100644 --- a/assets/newspack-ui/scss/elements/forms/_index.scss +++ b/assets/newspack-ui/scss/elements/forms/_index.scss @@ -19,7 +19,7 @@ // Container for displaying grid of inputs. & &__code-input { display: flex; - gap: var( --newspack-ui-spacer-1 ); + gap: var( --newspack-ui-spacer-base ); } // Container for input description. @@ -27,6 +27,6 @@ display: block; font-size: var( --newspack-ui-font-size-small ); line-height: var( --newspack-ui-line-height-small ); - margin: var( --newspack-ui-spacer-1 ) 0 var( --newspack-ui-spacer-5 ); + margin: var( --newspack-ui-spacer-base ) 0 var( --newspack-ui-spacer-5 ); } } \ No newline at end of file diff --git a/assets/newspack-ui/scss/variables/_spacing.scss b/assets/newspack-ui/scss/variables/_spacing.scss index 64934b7204..7579ddb07d 100644 --- a/assets/newspack-ui/scss/variables/_spacing.scss +++ b/assets/newspack-ui/scss/variables/_spacing.scss @@ -1,12 +1,12 @@ :root { // Spacing - not ems because the font size of the element itself caused a cascade - --newspack-ui-spacer-1: 8px; - --newspack-ui-spacer-2: calc( var( --newspack-ui-spacer-1 ) * 1.5 ); // 12px - --newspack-ui-spacer-3: calc( var( --newspack-ui-spacer-1 ) * 2 ); // 16px - --newspack-ui-spacer-4: calc( var( --newspack-ui-spacer-1 ) * 2.5 ); // 20px - --newspack-ui-spacer-5: calc( var( --newspack-ui-spacer-1 ) * 3 ); // 24px - --newspack-ui-spacer-6: calc( var( --newspack-ui-spacer-1 ) * 4 ); // 32px - TODO: clamp? - --newspack-ui-spacer-7: calc( var( --newspack-ui-spacer-1 ) * 5 ); // 40px - TODO: clamp? - --newspack-ui-spacer-8: calc( var( --newspack-ui-spacer-1 ) * 6 ); // 48px - TODO: clamp? - --newspack-ui-spacer-9: calc( var( --newspack-ui-spacer-1 ) * 8 ); // 64px - TODO: clamp? + --newspack-ui-spacer-base: 8px; + --newspack-ui-spacer-2: calc( var( --newspack-ui-spacer-base ) * 1.5 ); // 12px + --newspack-ui-spacer-3: calc( var( --newspack-ui-spacer-base ) * 2 ); // 16px + --newspack-ui-spacer-4: calc( var( --newspack-ui-spacer-base ) * 2.5 ); // 20px + --newspack-ui-spacer-5: calc( var( --newspack-ui-spacer-base ) * 3 ); // 24px + --newspack-ui-spacer-6: calc( var( --newspack-ui-spacer-base ) * 4 ); // 32px - TODO: clamp? + --newspack-ui-spacer-7: calc( var( --newspack-ui-spacer-base ) * 5 ); // 40px - TODO: clamp? + --newspack-ui-spacer-8: calc( var( --newspack-ui-spacer-base ) * 6 ); // 48px - TODO: clamp? + --newspack-ui-spacer-9: calc( var( --newspack-ui-spacer-base ) * 8 ); // 64px - TODO: clamp? } \ No newline at end of file