From dfe96c9430d719d6172d56380e3110c7c1177abb Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Thu, 9 Feb 2023 16:53:25 -0600 Subject: [PATCH 01/12] add additional sizes to design tokens config --- source/assets/sass/_breakpoints.scss | 4 +- source/assets/sass/components/_alerts.scss | 2 +- .../assets/sass/components/_attribution.scss | 6 +-- source/assets/sass/components/_buttons.scss | 5 +- source/assets/sass/components/_callouts.scss | 14 +++--- source/assets/sass/components/_inputs.scss | 2 +- .../assets/sass/components/_introduction.scss | 2 +- .../assets/sass/components/_link-header.scss | 11 ++-- source/assets/sass/components/_lists.scss | 12 ++--- .../components/_sass-syntax-switcher.scss | 26 +++++----- source/assets/sass/config/_scale.scss | 34 +++++++++++++ source/assets/sass/layout/_holy-grail.scss | 6 +-- source/assets/sass/layout/_sections.scss | 8 +-- source/assets/sass/visual-design/_theme.scss | 6 +-- .../sass/visual-design/_typography.scss | 50 ++++++------------- 15 files changed, 98 insertions(+), 90 deletions(-) diff --git a/source/assets/sass/_breakpoints.scss b/source/assets/sass/_breakpoints.scss index 772119d96..493d89e14 100644 --- a/source/assets/sass/_breakpoints.scss +++ b/source/assets/sass/_breakpoints.scss @@ -14,13 +14,13 @@ $sl-breakpoints: ( ); @mixin sl-breakpoint($breakpoint) { - @media only screen and (min-width: #{functions.sl-px-to-em($breakpoint)}) { + @media only screen and (min-width: $breakpoint) { @content; } } @mixin sl-breakpoint-max($breakpoint) { - @media only screen and (max-width: #{functions.sl-px-to-em($breakpoint)}) { + @media only screen and (max-width: $breakpoint) { @content; } } diff --git a/source/assets/sass/components/_alerts.scss b/source/assets/sass/components/_alerts.scss index c37fa1958..3e358c976 100644 --- a/source/assets/sass/components/_alerts.scss +++ b/source/assets/sass/components/_alerts.scss @@ -9,7 +9,7 @@ color.adjust(theme.$sl-color--hopbush, $lightness: -10%) ); color: theme.$sl-color--white; - font-size: typography.$sl-font-size--small; + font-size: var(--sl-font-size--small); padding: { top: var(--alert-padding-block, var(--gutter-minus)); diff --git a/source/assets/sass/components/_attribution.scss b/source/assets/sass/components/_attribution.scss index 51fff24b9..e0fed919c 100644 --- a/source/assets/sass/components/_attribution.scss +++ b/source/assets/sass/components/_attribution.scss @@ -2,11 +2,11 @@ .sl-c-attribution { font-weight: typography.$sl-font-weight--light; - font-size: typography.$sl-font-size--small; + font-size: var(--sl-font-size--small); &:first-child { text-align: center; - margin-top: -3em; - margin-bottom: 2em; + margin-top: var(--gutter-triple-negative); + margin-bottom: var(--gutter-double); } } diff --git a/source/assets/sass/components/_buttons.scss b/source/assets/sass/components/_buttons.scss index 6885c7a05..89b890180 100644 --- a/source/assets/sass/components/_buttons.scss +++ b/source/assets/sass/components/_buttons.scss @@ -7,10 +7,7 @@ align-items: center; justify-content: center; margin: 0; - border: 0 { - /* stylelint-disable-next-line property-no-unknown */ - radius: functions.sl-px-to-rem(4px); - } + border-radius: var(--border-radius-large); padding: var(--gutter-minus) var(--gutter); background: theme.$sl-color--iron; box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125); diff --git a/source/assets/sass/components/_callouts.scss b/source/assets/sass/components/_callouts.scss index e6792f67c..c518980ae 100644 --- a/source/assets/sass/components/_callouts.scss +++ b/source/assets/sass/components/_callouts.scss @@ -6,16 +6,16 @@ margin: var(--gutter-sesqui) 0; padding: var(--gutter-sesqui) var(--gutter); background: color.adjust(theme.$sl-color--pale-sky, $lightness: 60%); - border-radius: 2px; + border-radius: var(--border-radius-small); &--warning { background: color.adjust(theme.$sl-color--hopbush, $lightness: 38%); - border: 1px solid color.adjust(theme.$sl-color--hopbush, $lightness: 27%); + border: var(--border-small) solid color.adjust(theme.$sl-color--hopbush, $lightness: 27%); } &--fun-fact { background: color.adjust(theme.$sl-color--patina, $lightness: 47%); - border: 1px solid color.adjust(theme.$sl-color--patina, $lightness: 32%); + border: var(--border-small) solid color.adjust(theme.$sl-color--patina, $lightness: 32%); } &--function { @@ -31,9 +31,9 @@ } &--impl-status { - font-size: 0.8em; + font-size: var(--status-text-size); margin-top: var(--gutter-negative); - padding: 0.8rem; + padding: var(--gutter-minus); .sl-c-callout & { background: color.adjust(theme.$sl-color--pale-sky, $lightness: 53%); @@ -51,10 +51,10 @@ @include breakpoints.sl-breakpoint--medium { .sl-l-container--overview { - font-size: 1.25rem; + font-size: var(--sl-font-size--large); .sl-c-callout { - font-size: 1rem; + font-size: var(--sl-font-size--small); } } } diff --git a/source/assets/sass/components/_inputs.scss b/source/assets/sass/components/_inputs.scss index c3e7254b2..2339ea9e7 100644 --- a/source/assets/sass/components/_inputs.scss +++ b/source/assets/sass/components/_inputs.scss @@ -4,7 +4,7 @@ input { display: block; margin: 0 var(--gutter); - border: 1px solid theme.$sl-color--iron; + border: var(--border-small) solid theme.$sl-color--iron; padding: var(--gutter-quarter) var(--gutter); width: 100%; diff --git a/source/assets/sass/components/_introduction.scss b/source/assets/sass/components/_introduction.scss index 8b1a15bfa..4595e5469 100644 --- a/source/assets/sass/components/_introduction.scss +++ b/source/assets/sass/components/_introduction.scss @@ -7,7 +7,7 @@ font-weight: typography.$sl-font-weight--light; @include breakpoints.sl-breakpoint--medium { - font-size: typography.$sl-font-size--xx-large; + font-size: var(--sl-font-size--xx-large); } &--center { diff --git a/source/assets/sass/components/_link-header.scss b/source/assets/sass/components/_link-header.scss index fb5e958e7..969d25ce6 100644 --- a/source/assets/sass/components/_link-header.scss +++ b/source/assets/sass/components/_link-header.scss @@ -17,13 +17,10 @@ h6, border: 0; &::after { - visibility: hidden; - font: { - size: 1rem; - weight: normal; - } - content: '\1F517'; + font-size: var(--sl-font-size--small); + font-weight: normal; + visibility: hidden; } } @@ -60,7 +57,7 @@ h6 { .signature { a.anchor { - margin-left: -2.5rem; + margin-left: var(--gutter-double-sesqui-negative); } .sl-c-callout--function:target & { diff --git a/source/assets/sass/components/_lists.scss b/source/assets/sass/components/_lists.scss index 650687d37..986106ee8 100644 --- a/source/assets/sass/components/_lists.scss +++ b/source/assets/sass/components/_lists.scss @@ -74,7 +74,7 @@ } li.overview a { - font-size: typography.$sl-font-size--small; + font-size: var(--sl-font-size--small); &:not(.selected) { color: color.adjust(theme.$sl-color--midnight-blue, $alpha: -0.3); @@ -90,7 +90,7 @@ text-align: center; margin-top: 5px; transition: transform 0.1s; - width: 19px; + width: var(--gutter-plus); } &.open::after { @@ -130,7 +130,7 @@ } > div { - border-left: 1px solid theme.$sl-color--iron; + border-left: var(--border-small) solid theme.$sl-color--iron; padding: 0 var(--gutter); &:first-child { @@ -158,7 +158,7 @@ } &.impl-status { - font-size: 0.8em; + font-size: var(--status-text-size); margin-top: var(--gutter-negative); dt { @@ -170,9 +170,9 @@ border-bottom: none; background: none; cursor: pointer; - width: 19px; + width: var(--gutter-plus); text-align: center; - transform-origin: 8px 11px; + transform-origin: var(--gutter-half) calc(var(--gutter-minus) - 1px); &.expanded { transform: rotate(90deg); diff --git a/source/assets/sass/components/_sass-syntax-switcher.scss b/source/assets/sass/components/_sass-syntax-switcher.scss index 8e98aee9e..7c37f9e85 100644 --- a/source/assets/sass/components/_sass-syntax-switcher.scss +++ b/source/assets/sass/components/_sass-syntax-switcher.scss @@ -16,6 +16,8 @@ &::after, &::before { + --tab-point: 10px; + bottom: -3px; left: 50%; border: solid transparent; @@ -29,15 +31,15 @@ &::after { border-color: transparent; border-bottom-color: #f8f8f8; - border-width: 10px; - margin-left: -10px; + border-width: var(--tab-point); + margin-left: calc(var(--tab-point) * -1); } &::before { border-color: transparent; border-bottom-color: #ebebeb; - border-width: 11px; - margin-left: -11px; + border-width: calc(var(--tab-point) + 1px); + margin-left: calc((var(--tab-point) + 1px) * -1); } } @@ -54,9 +56,9 @@ } .ui-tabs-nav { - font-size: typography.$sl-font-size--small; - margin-top: -1rem; - margin-left: -1em; + font-size: var(--sl-font-size--small); + margin-top: var(--gutter-negative); + margin-left: var(--gutter-negative); a { border: 0; @@ -80,23 +82,23 @@ &.css-tab { &, &.ui-tabs-active { - margin-left: 2em; + margin-left: var(--gutter-double); } a::before { color: theme.$sl-color--regent-grey; content: '\21d2'; - font-size: typography.$sl-font-size--large; + font-size: var(--sl-font-size--large); font-weight: typography.$sl-font-weight--bold; left: -1.2em; position: absolute; - top: 0.75rem; + top: var(--gutter-minus); } } } .ui-tabs-anchor { - padding: 0.75rem 1rem; + padding: var(--gutter-minus) var(--gutter); } } @@ -177,7 +179,7 @@ html .ui-button.ui-state-disabled:active { &, * { - font-size: 1rem; + font-size: var(--sl-font-size--small); } } diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss index 4404ab653..b9a2c75b4 100644 --- a/source/assets/sass/config/_scale.scss +++ b/source/assets/sass/config/_scale.scss @@ -9,10 +9,12 @@ $gutter-minus: calc(var(--gutter) * 0.75); // 12 $gutter-plus: calc(var(--gutter) * 1.25); $gutter-sesqui: calc(var(--gutter) * 1.5); $gutter-double: calc(var(--gutter) * 2); +$gutter-double-sesqui: calc(var(--gutter) * 2.5); $gutter-triple: calc(var(--gutter) * 3); // Negative Spacing Sizes // ---------------------- +/// @group scale $gutter-negative: calc(var(--gutter) * -1); $gutter-quarter-negative: calc(var(--gutter-quarter) * -1); $gutter-half-negative: calc(var(--gutter-half) * -1); @@ -20,9 +22,41 @@ $gutter-minus-negative: calc(var(--gutter-minus) * -1); $gutter-plus-negative: calc(var(--gutter-plus) * -1); $gutter-sesqui-negative: calc(var(--gutter-sesqui) * -1); $gutter-double-negative: calc(var(--gutter-double) * -1); +$gutter-double-sesqui-negative: calc(var(--gutter-double-sesqui) * -1); $gutter-triple-negative: calc(var(--gutter-triple) * -1); // UI Sizes // -------- /// @group scale $table-cell-padding: var(--gutter-sesqui); +$border-small: 1px; +$border-radius-small: 0.125rem; +$border-radius-large: 0.25rem; +$column-small: 15rem; +$column-medium: 30rem; + + +// Layout Sizes +// -------- +/// @group scale +$sl-breakpoint--small: 30em; // 480px +$sl-breakpoint--medium: 40em; // 640px +$sl-breakpoint--large: 60em; // 960px +$sl-breakpoint--x-large: 80em; // 1280px +// 1920px + +// Font Sizes Generic +// ------------------ +$sl-font-size--x-small: 0.875rem; // 14px +$sl-font-size--small: 1rem; // 16px +$sl-font-size--medium: 1.125rem; // 18px +$sl-font-size--large: 1.25rem; //20 +$sl-font-size--x-large: 1.5rem; // 22px +$sl-font-size--xx-large: 1.75rem; // 28px +$sl-font-size--xxx-large: 2rem; // 32px +$sl-font-size--xxxx-large: 5rem; // 80px + + +// Font Sizes Custom +// ----------------- +$status-text-size: 0.8em; diff --git a/source/assets/sass/layout/_holy-grail.scss b/source/assets/sass/layout/_holy-grail.scss index 8ea206d61..4cfdb5651 100644 --- a/source/assets/sass/layout/_holy-grail.scss +++ b/source/assets/sass/layout/_holy-grail.scss @@ -42,16 +42,16 @@ } &__navigation { - flex: 0 0 functions.sl-px-to-rem(240px); + flex: 0 0 var(--column-small); order: -1; } &__complementary { order: 1; - flex: 0 0 functions.sl-px-to-rem(480px); + flex: 0 0 var(--column-medium); &--contents { - flex: 0 0 functions.sl-px-to-rem(240px); + flex: 0 0 var(--column-small); order: -1; } } diff --git a/source/assets/sass/layout/_sections.scss b/source/assets/sass/layout/_sections.scss index 172e62f4a..99c85ffba 100644 --- a/source/assets/sass/layout/_sections.scss +++ b/source/assets/sass/layout/_sections.scss @@ -1,11 +1,11 @@ .sl-l-section { margin: { - top: 3rem; - bottom: 3rem; + top: var(--gutter-triple); + bottom: var(--gutter-triple); } padding: { - top: 3rem; - bottom: 3rem; + top: var(--gutter-triple); + bottom: var(--gutter-triple); } &:first-child { diff --git a/source/assets/sass/visual-design/_theme.scss b/source/assets/sass/visual-design/_theme.scss index 6b39308fa..72071a9f6 100644 --- a/source/assets/sass/visual-design/_theme.scss +++ b/source/assets/sass/visual-design/_theme.scss @@ -346,7 +346,7 @@ body { } a { - border-bottom: 1px solid rgba($sl-color--iron, 0.5); + border-bottom: var(--border-small) solid rgba($sl-color--iron, 0.5); color: $sl-color--midnight-blue; .c1 & { @@ -366,7 +366,7 @@ a { code, pre { - border-radius: functions.sl-px-to-em(2px); + border-radius: var(--border-radius-small); color: color.adjust($sl-color--pale-sky, $lightness: -25%); a & { @@ -375,6 +375,6 @@ pre { } pre { - border: 1px solid #ebebeb; + border: var(--border-small) solid #ebebeb; background: rgba($sl-color--midnight-blue, 0.0625); } diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index 46286db21..1dd0e79ff 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -18,29 +18,6 @@ $sl-font-weights: ( } } -$sl-font-size--x-small: functions.sl-px-to-rem(14px) !default; -$sl-font-size--small: functions.sl-px-to-rem(16px) !default; -$sl-font-size--medium: functions.sl-px-to-rem(18px) !default; -$sl-font-size--large: functions.sl-px-to-rem(20px) !default; -$sl-font-size--x-large: functions.sl-px-to-rem(24px) !default; -$sl-font-size--xx-large: functions.sl-px-to-rem(28px) !default; -$sl-font-size--xxx-large: functions.sl-px-to-rem(32px) !default; -$sl-font-size--xxxx-large: functions.sl-px-to-rem(80px) !default; -$sl-font-sizes: ( - small: $sl-font-size--small, - medium: $sl-font-size--medium, - large: $sl-font-size--large, - x-large: $sl-font-size--x-large, - xx-large: $sl-font-size--xx-large, - xxx-large: $sl-font-size--xxx-large, - xxxx-large: $sl-font-size--xxxx-large, -); - -@each $name, $value in $sl-font-sizes { - .sl-font-size--#{$name} { - font-size: $value; - } -} $sl-font-family--text: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', roboto, ubuntu, cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', @@ -65,7 +42,7 @@ $sl-font-families: ( body, h5, h6 { - font-size: $sl-font-size--medium; + font-size: var(--sl-font-size--medium); } body { @@ -114,7 +91,7 @@ h3, h4, h5, h6 { - margin-top: 2.5rem; + margin-top: var(--gutter-double-sesqui); aside &, nav & { @@ -152,16 +129,16 @@ h2 { h1 { margin-top: 0; - font-size: $sl-font-size--xx-large; + font-size: var(h1-size, var(--sl-font-size--xx-large)); line-height: 1; text-align: center; @include breakpoints.sl-breakpoint--medium { - font-size: $sl-font-size--xxx-large; + --h1-size: var(--sl-font-size--xxx-large); } @include breakpoints.sl-breakpoint--large { - font-size: $sl-font-size--xxxx-large; + --h1-size: var(--sl-font-size--xxxx-large); } } @@ -175,29 +152,29 @@ thead th { h2, caption { - font-size: $sl-font-size--x-large; + font-size: var(--h2-size, var(--sl-font-size--x-large)); @include breakpoints.sl-breakpoint--medium { - font-size: $sl-font-size--xx-large; + --h2-size: var(--sl-font-size--xx-large); } @include breakpoints.sl-breakpoint--large { - font-size: $sl-font-size--xxx-large; + --h2-size: var(--sl-font-size--xxx-large); } } h3, h4 { - font-size: $sl-font-size--large; + font-size: var(--sl-font-size--large); } nav, footer { - font-size: $sl-font-size--small; + font-size: var(--sl-font-size--small); } .caps { - font-size: functions.sl-px-to-em(14px); + font-size: 0.875em; text-transform: uppercase; letter-spacing: functions.sl-px-to-em(1px); line-height: 0; @@ -210,7 +187,8 @@ pre { code { // Scale the code font size down, because the font itself is much larger. - font-size: math.div($sl-font-size--small, $sl-font-size--medium) * 1em; + font-size: 0.88889em; + font-size: var(--sl-font-size--small); line-height: 1; nav & { @@ -225,7 +203,7 @@ code { } pre { - font-size: $sl-font-size--x-small; + font-size: var(--sl-font-size--x-small); padding: var(--gutter-minus) var(--gutter); overflow: auto; white-space: pre-wrap; From dff68235c0ad46b17fa6e8e1ed81dd0424550cf6 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 20 Feb 2023 14:54:31 -0600 Subject: [PATCH 02/12] clean up type sizing --- source/assets/sass/visual-design/_typography.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index 1dd0e79ff..a2d5ffc3e 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -119,7 +119,7 @@ h6 { h1, h2, caption { - letter-spacing: -#{functions.sl-px-to-em(0.5px)}; + letter-spacing: -0.03125em; } h1, @@ -129,7 +129,7 @@ h2 { h1 { margin-top: 0; - font-size: var(h1-size, var(--sl-font-size--xx-large)); + font-size: var(--h1-size, var(--sl-font-size--xx-large)); line-height: 1; text-align: center; @@ -176,7 +176,7 @@ footer { .caps { font-size: 0.875em; text-transform: uppercase; - letter-spacing: functions.sl-px-to-em(1px); + letter-spacing: 0.0625em; line-height: 0; } @@ -188,7 +188,6 @@ pre { code { // Scale the code font size down, because the font itself is much larger. font-size: 0.88889em; - font-size: var(--sl-font-size--small); line-height: 1; nav & { @@ -209,7 +208,7 @@ pre { white-space: pre-wrap; code { - font-size: 1em; + font-size: var(--sl-font-size--x-small); line-height: inherit; } } From 406f576002257670c16e022475f57a09356ffc52 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 20 Feb 2023 15:16:51 -0600 Subject: [PATCH 03/12] remove unneeded transform-origin for default instead --- source/assets/sass/components/_lists.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/source/assets/sass/components/_lists.scss b/source/assets/sass/components/_lists.scss index 986106ee8..bfb93bc7d 100644 --- a/source/assets/sass/components/_lists.scss +++ b/source/assets/sass/components/_lists.scss @@ -172,7 +172,6 @@ cursor: pointer; width: var(--gutter-plus); text-align: center; - transform-origin: var(--gutter-half) calc(var(--gutter-minus) - 1px); &.expanded { transform: rotate(90deg); From 4d7a3496032b810a226c36abe81e3062e8d2ce48 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 20 Feb 2023 15:24:24 -0600 Subject: [PATCH 04/12] add px comparison notes --- source/assets/sass/config/_scale.scss | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss index b9a2c75b4..13ced15d3 100644 --- a/source/assets/sass/config/_scale.scss +++ b/source/assets/sass/config/_scale.scss @@ -2,15 +2,15 @@ // ------------- /// @group scale -$gutter: 1rem; // 16 -$gutter-quarter: calc(var(--gutter) * 0.25); // 4 -$gutter-half: calc(var(--gutter) * 0.5); // 8 -$gutter-minus: calc(var(--gutter) * 0.75); // 12 -$gutter-plus: calc(var(--gutter) * 1.25); -$gutter-sesqui: calc(var(--gutter) * 1.5); -$gutter-double: calc(var(--gutter) * 2); -$gutter-double-sesqui: calc(var(--gutter) * 2.5); -$gutter-triple: calc(var(--gutter) * 3); +$gutter: 1rem; // ~16px +$gutter-quarter: calc(var(--gutter) * 0.25); // ~4px +$gutter-half: calc(var(--gutter) * 0.5); // ~8px +$gutter-minus: calc(var(--gutter) * 0.75); // ~12px +$gutter-plus: calc(var(--gutter) * 1.25); // ~20px +$gutter-sesqui: calc(var(--gutter) * 1.5); // ~24px +$gutter-double: calc(var(--gutter) * 2); // ~32px +$gutter-double-sesqui: calc(var(--gutter) * 2.5); // ~40px +$gutter-triple: calc(var(--gutter) * 3); // ~48px // Negative Spacing Sizes // ---------------------- @@ -35,7 +35,6 @@ $border-radius-large: 0.25rem; $column-small: 15rem; $column-medium: 30rem; - // Layout Sizes // -------- /// @group scale @@ -43,20 +42,18 @@ $sl-breakpoint--small: 30em; // 480px $sl-breakpoint--medium: 40em; // 640px $sl-breakpoint--large: 60em; // 960px $sl-breakpoint--x-large: 80em; // 1280px -// 1920px // Font Sizes Generic // ------------------ $sl-font-size--x-small: 0.875rem; // 14px $sl-font-size--small: 1rem; // 16px $sl-font-size--medium: 1.125rem; // 18px -$sl-font-size--large: 1.25rem; //20 +$sl-font-size--large: 1.25rem; // 20px $sl-font-size--x-large: 1.5rem; // 22px $sl-font-size--xx-large: 1.75rem; // 28px $sl-font-size--xxx-large: 2rem; // 32px $sl-font-size--xxxx-large: 5rem; // 80px - // Font Sizes Custom // ----------------- $status-text-size: 0.8em; From d9fe6d7ac17124affcb45321a6324e3adc5edf09 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Mon, 20 Feb 2023 15:24:50 -0600 Subject: [PATCH 05/12] lint --- source/assets/sass/components/_callouts.scss | 6 ++++-- source/assets/sass/config/_scale.scss | 4 ++-- source/assets/sass/visual-design/_typography.scss | 1 - 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/source/assets/sass/components/_callouts.scss b/source/assets/sass/components/_callouts.scss index c518980ae..b8547f2f7 100644 --- a/source/assets/sass/components/_callouts.scss +++ b/source/assets/sass/components/_callouts.scss @@ -10,12 +10,14 @@ &--warning { background: color.adjust(theme.$sl-color--hopbush, $lightness: 38%); - border: var(--border-small) solid color.adjust(theme.$sl-color--hopbush, $lightness: 27%); + border: var(--border-small) solid + color.adjust(theme.$sl-color--hopbush, $lightness: 27%); } &--fun-fact { background: color.adjust(theme.$sl-color--patina, $lightness: 47%); - border: var(--border-small) solid color.adjust(theme.$sl-color--patina, $lightness: 32%); + border: var(--border-small) solid + color.adjust(theme.$sl-color--patina, $lightness: 32%); } &--function { diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss index 13ced15d3..1dc2c47d2 100644 --- a/source/assets/sass/config/_scale.scss +++ b/source/assets/sass/config/_scale.scss @@ -38,7 +38,7 @@ $column-medium: 30rem; // Layout Sizes // -------- /// @group scale -$sl-breakpoint--small: 30em; // 480px +$sl-breakpoint--small: 30em; // 480px $sl-breakpoint--medium: 40em; // 640px $sl-breakpoint--large: 60em; // 960px $sl-breakpoint--x-large: 80em; // 1280px @@ -47,7 +47,7 @@ $sl-breakpoint--x-large: 80em; // 1280px // ------------------ $sl-font-size--x-small: 0.875rem; // 14px $sl-font-size--small: 1rem; // 16px -$sl-font-size--medium: 1.125rem; // 18px +$sl-font-size--medium: 1.125rem; // 18px $sl-font-size--large: 1.25rem; // 20px $sl-font-size--x-large: 1.5rem; // 22px $sl-font-size--xx-large: 1.75rem; // 28px diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index a2d5ffc3e..da7a1182c 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -18,7 +18,6 @@ $sl-font-weights: ( } } - $sl-font-family--text: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', roboto, ubuntu, cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default; From bfc672336f08b042cca9c1bab47bf2b92667ef60 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 21 Feb 2023 11:26:26 -0600 Subject: [PATCH 06/12] inherit font-size --- source/assets/sass/visual-design/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index da7a1182c..38f18225e 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -207,7 +207,7 @@ pre { white-space: pre-wrap; code { - font-size: var(--sl-font-size--x-small); + font-size: inherit; line-height: inherit; } } From d09bdeea87f88a56c5fbd9b00c75cb5a63c085d4 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 21 Feb 2023 11:40:34 -0600 Subject: [PATCH 07/12] generic way to scale smaller text --- source/assets/sass/config/_scale.scss | 1 + source/assets/sass/visual-design/_typography.scss | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss index 1dc2c47d2..e16da68a6 100644 --- a/source/assets/sass/config/_scale.scss +++ b/source/assets/sass/config/_scale.scss @@ -57,3 +57,4 @@ $sl-font-size--xxxx-large: 5rem; // 80px // Font Sizes Custom // ----------------- $status-text-size: 0.8em; +$sl-font-size--smaller: 90%; diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index 38f18225e..6f353dca2 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -174,9 +174,10 @@ footer { .caps { font-size: 0.875em; - text-transform: uppercase; + font-size: var(--sl-font-size--smaller); letter-spacing: 0.0625em; line-height: 0; + text-transform: uppercase; } code, @@ -186,7 +187,7 @@ pre { code { // Scale the code font size down, because the font itself is much larger. - font-size: 0.88889em; + font-size: var(--sl-font-size--smaller); line-height: 1; nav & { From eebc8f276e6d11b96a564a7c2adadefe9f8f615f Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 21 Feb 2023 13:15:25 -0600 Subject: [PATCH 08/12] remove sassdoc groups, reorder sizes --- source/assets/sass/config/_scale.scss | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss index e16da68a6..793956510 100644 --- a/source/assets/sass/config/_scale.scss +++ b/source/assets/sass/config/_scale.scss @@ -1,7 +1,5 @@ // Spacing Sizes // ------------- -/// @group scale - $gutter: 1rem; // ~16px $gutter-quarter: calc(var(--gutter) * 0.25); // ~4px $gutter-half: calc(var(--gutter) * 0.5); // ~8px @@ -14,7 +12,6 @@ $gutter-triple: calc(var(--gutter) * 3); // ~48px // Negative Spacing Sizes // ---------------------- -/// @group scale $gutter-negative: calc(var(--gutter) * -1); $gutter-quarter-negative: calc(var(--gutter-quarter) * -1); $gutter-half-negative: calc(var(--gutter-half) * -1); @@ -27,17 +24,15 @@ $gutter-triple-negative: calc(var(--gutter-triple) * -1); // UI Sizes // -------- -/// @group scale -$table-cell-padding: var(--gutter-sesqui); -$border-small: 1px; -$border-radius-small: 0.125rem; $border-radius-large: 0.25rem; -$column-small: 15rem; +$border-radius-small: 0.125rem; +$border-small: 1px; $column-medium: 30rem; +$column-small: 15rem; +$table-cell-padding: var(--gutter-sesqui); // Layout Sizes -// -------- -/// @group scale +// ------------ $sl-breakpoint--small: 30em; // 480px $sl-breakpoint--medium: 40em; // 640px $sl-breakpoint--large: 60em; // 960px @@ -45,6 +40,7 @@ $sl-breakpoint--x-large: 80em; // 1280px // Font Sizes Generic // ------------------ +$sl-font-size--smaller: 90%; $sl-font-size--x-small: 0.875rem; // 14px $sl-font-size--small: 1rem; // 16px $sl-font-size--medium: 1.125rem; // 18px @@ -57,4 +53,3 @@ $sl-font-size--xxxx-large: 5rem; // 80px // Font Sizes Custom // ----------------- $status-text-size: 0.8em; -$sl-font-size--smaller: 90%; From 049024b9ee7d5c1b9747582c483d29c4d4087f07 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 21 Feb 2023 13:19:09 -0600 Subject: [PATCH 09/12] add border width back --- source/assets/sass/components/_buttons.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/source/assets/sass/components/_buttons.scss b/source/assets/sass/components/_buttons.scss index 89b890180..4cf2695a6 100644 --- a/source/assets/sass/components/_buttons.scss +++ b/source/assets/sass/components/_buttons.scss @@ -7,6 +7,7 @@ align-items: center; justify-content: center; margin: 0; + border: 0; border-radius: var(--border-radius-large); padding: var(--gutter-minus) var(--gutter); background: theme.$sl-color--iron; From 94edd2bdbcd0b980bae3d012ff46172cc6f68060 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 21 Feb 2023 13:22:28 -0600 Subject: [PATCH 10/12] remove duplicate --- source/assets/sass/visual-design/_typography.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index 6f353dca2..470eba27e 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -173,7 +173,6 @@ footer { } .caps { - font-size: 0.875em; font-size: var(--sl-font-size--smaller); letter-spacing: 0.0625em; line-height: 0; From 5f481372733355f1b565aaecaaed936b653ef254 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 21 Feb 2023 13:51:32 -0600 Subject: [PATCH 11/12] use namespacing, automatic sl- prefix added --- source/assets/sass/components/_alerts.scss | 6 +- .../assets/sass/components/_attribution.scss | 4 +- source/assets/sass/components/_buttons.scss | 4 +- source/assets/sass/components/_callouts.scss | 22 +++--- source/assets/sass/components/_inputs.scss | 8 +-- .../assets/sass/components/_link-header.scss | 6 +- source/assets/sass/components/_lists.scss | 38 +++++----- .../sass/components/_mac-stadium-icon.scss | 2 +- .../components/_sass-syntax-switcher.scss | 10 +-- source/assets/sass/components/_tables.scss | 6 +- source/assets/sass/config/_scale.scss | 72 +++++++++---------- source/assets/sass/layout/_containers.scss | 8 +-- source/assets/sass/layout/_grid-system.scss | 24 +++---- source/assets/sass/layout/_holy-grail.scss | 14 ++-- source/assets/sass/layout/_sections.scss | 8 +-- source/assets/sass/regions/_banner.scss | 8 +-- source/assets/sass/visual-design/_theme.scss | 8 +-- .../sass/visual-design/_typography.scss | 12 ++-- 18 files changed, 130 insertions(+), 130 deletions(-) diff --git a/source/assets/sass/components/_alerts.scss b/source/assets/sass/components/_alerts.scss index 3e358c976..46336d918 100644 --- a/source/assets/sass/components/_alerts.scss +++ b/source/assets/sass/components/_alerts.scss @@ -12,8 +12,8 @@ font-size: var(--sl-font-size--small); padding: { - top: var(--alert-padding-block, var(--gutter-minus)); - bottom: var(--alert-padding-block, var(--gutter-minus)); + top: var(--alert-padding-block, var(--sl-gutter--minus)); + bottom: var(--alert-padding-block, var(--sl-gutter--minus)); } text-align: var(--alert-align, center); @@ -60,7 +60,7 @@ .sl-c-alert--special { --alert-align: left; --alert-bg: black; - --alert-padding-block: var(--gutter-triple); + --alert-padding-block: var(--sl-gutter--triple); } .sl-c-alert-title { diff --git a/source/assets/sass/components/_attribution.scss b/source/assets/sass/components/_attribution.scss index e0fed919c..e097b42d4 100644 --- a/source/assets/sass/components/_attribution.scss +++ b/source/assets/sass/components/_attribution.scss @@ -6,7 +6,7 @@ &:first-child { text-align: center; - margin-top: var(--gutter-triple-negative); - margin-bottom: var(--gutter-double); + margin-top: var(--sl-gutter--triple-negative); + margin-bottom: var(--sl-gutter--double); } } diff --git a/source/assets/sass/components/_buttons.scss b/source/assets/sass/components/_buttons.scss index 4cf2695a6..4d992f27c 100644 --- a/source/assets/sass/components/_buttons.scss +++ b/source/assets/sass/components/_buttons.scss @@ -8,8 +8,8 @@ justify-content: center; margin: 0; border: 0; - border-radius: var(--border-radius-large); - padding: var(--gutter-minus) var(--gutter); + border-radius: var(--sl-border-radius--large); + padding: var(--sl-gutter--minus) var(--sl-gutter); background: theme.$sl-color--iron; box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125); color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%); diff --git a/source/assets/sass/components/_callouts.scss b/source/assets/sass/components/_callouts.scss index b8547f2f7..8948caac0 100644 --- a/source/assets/sass/components/_callouts.scss +++ b/source/assets/sass/components/_callouts.scss @@ -3,39 +3,39 @@ @use '../visual-design/theme'; .sl-c-callout { - margin: var(--gutter-sesqui) 0; - padding: var(--gutter-sesqui) var(--gutter); + margin: var(--sl-gutter--sesqui) 0; + padding: var(--sl-gutter--sesqui) var(--sl-gutter); background: color.adjust(theme.$sl-color--pale-sky, $lightness: 60%); - border-radius: var(--border-radius-small); + border-radius: var(--sl-border-radius--small); &--warning { background: color.adjust(theme.$sl-color--hopbush, $lightness: 38%); - border: var(--border-small) solid + border: var(--sl-border--small) solid color.adjust(theme.$sl-color--hopbush, $lightness: 27%); } &--fun-fact { background: color.adjust(theme.$sl-color--patina, $lightness: 47%); - border: var(--border-small) solid + border: var(--sl-border--small) solid color.adjust(theme.$sl-color--patina, $lightness: 32%); } &--function { - padding-bottom: var(--gutter-quarter); + padding-bottom: var(--sl-gutter--quarter); padding-top: 0; .signature { // Make sure permalinks are visible. overflow: visible; - margin-left: var(--gutter-negative); - margin-right: var(--gutter-negative); + margin-left: var(--sl-gutter--negative); + margin-right: var(--sl-gutter--negative); } } &--impl-status { - font-size: var(--status-text-size); - margin-top: var(--gutter-negative); - padding: var(--gutter-minus); + font-size: var(--sl-status-text-size); + margin-top: var(--sl-gutter--negative); + padding: var(--sl-gutter--minus); .sl-c-callout & { background: color.adjust(theme.$sl-color--pale-sky, $lightness: 53%); diff --git a/source/assets/sass/components/_inputs.scss b/source/assets/sass/components/_inputs.scss index 2339ea9e7..32186bc60 100644 --- a/source/assets/sass/components/_inputs.scss +++ b/source/assets/sass/components/_inputs.scss @@ -3,13 +3,13 @@ input { display: block; - margin: 0 var(--gutter); - border: var(--border-small) solid theme.$sl-color--iron; - padding: var(--gutter-quarter) var(--gutter); + margin: 0 var(--sl-gutter); + border: var(--sl-border--small) solid theme.$sl-color--iron; + padding: var(--sl-gutter--quarter) var(--sl-gutter); width: 100%; @include breakpoints.sl-breakpoint--large { - top: var(--gutter-half); + top: var(--sl-gutter--half); margin: 0; } } diff --git a/source/assets/sass/components/_link-header.scss b/source/assets/sass/components/_link-header.scss index 969d25ce6..eb0408725 100644 --- a/source/assets/sass/components/_link-header.scss +++ b/source/assets/sass/components/_link-header.scss @@ -12,7 +12,7 @@ h6, float: left; vertical-align: middle; margin-top: -3px; - width: var(--gutter-sesqui); + width: var(--sl-gutter--sesqui); background: none; border: 0; @@ -36,7 +36,7 @@ h4, h5, h6 { a.anchor { - margin-left: var(--gutter-sesqui-negative); + margin-left: var(--sl-gutter--sesqui-negative); } &:target { @@ -57,7 +57,7 @@ h6 { .signature { a.anchor { - margin-left: var(--gutter-double-sesqui-negative); + margin-left: var(--sl-gutter--double-sesqui-negative); } .sl-c-callout--function:target & { diff --git a/source/assets/sass/components/_lists.scss b/source/assets/sass/components/_lists.scss index bfb93bc7d..560bd83b7 100644 --- a/source/assets/sass/components/_lists.scss +++ b/source/assets/sass/components/_lists.scss @@ -16,22 +16,22 @@ @include breakpoints.sl-breakpoint--medium { // add margin-bottom space // to the twitter follow button - margin-bottom: var(--gutter); + margin-bottom: var(--sl-gutter); } @include breakpoints.sl-breakpoint--large { ul { display: flex; margin: { - right: var(--gutter-half-negative); - left: var(--gutter-half-negative); + right: var(--sl-gutter--half-negative); + left: var(--sl-gutter--half-negative); } } li { padding: { - right: var(--gutter-half); - left: var(--gutter-half); + right: var(--sl-gutter--half); + left: var(--sl-gutter--half); } } } @@ -41,7 +41,7 @@ position: relative; li { - margin: var(--gutter-half) 0; + margin: var(--sl-gutter--half) 0; line-height: 1.25; } @@ -49,22 +49,22 @@ user-select: none; ul ul a { - padding-left: var(--gutter); + padding-left: var(--sl-gutter); } ul ul ul a { - padding-left: var(--gutter-double); + padding-left: var(--sl-gutter--double); } ul ul ul ul a { - padding-left: var(--gutter-triple); + padding-left: var(--sl-gutter--triple); } a { border: none; cursor: pointer; display: block; - margin: var(--gutter-half-negative) 0; + margin: var(--sl-gutter--half-negative) 0; padding: 0.3rem; width: 100%; @@ -90,7 +90,7 @@ text-align: center; margin-top: 5px; transition: transform 0.1s; - width: var(--gutter-plus); + width: var(--sl-gutter--plus); } &.open::after { @@ -120,8 +120,8 @@ .sl-c-description-list--horizontal { margin: { - right: var(--gutter-negative); - left: var(--gutter-negative); + right: var(--sl-gutter--negative); + left: var(--sl-gutter--negative); } &, @@ -130,8 +130,8 @@ } > div { - border-left: var(--border-small) solid theme.$sl-color--iron; - padding: 0 var(--gutter); + border-left: var(--sl-border--small) solid theme.$sl-color--iron; + padding: 0 var(--sl-gutter); &:first-child { border: 0; @@ -150,7 +150,7 @@ dt, dd { - padding-left: var(--gutter); + padding-left: var(--sl-gutter); &:first-child { padding-left: 0; @@ -158,8 +158,8 @@ } &.impl-status { - font-size: var(--status-text-size); - margin-top: var(--gutter-negative); + font-size: var(--sl-status-text-size); + margin-top: var(--sl-gutter--negative); dt { word-break: normal; @@ -170,7 +170,7 @@ border-bottom: none; background: none; cursor: pointer; - width: var(--gutter-plus); + width: var(--sl-gutter--plus); text-align: center; &.expanded { diff --git a/source/assets/sass/components/_mac-stadium-icon.scss b/source/assets/sass/components/_mac-stadium-icon.scss index 5339afe92..c585609e9 100644 --- a/source/assets/sass/components/_mac-stadium-icon.scss +++ b/source/assets/sass/components/_mac-stadium-icon.scss @@ -1,4 +1,4 @@ .mac-stadium-icon { width: 7rem; - margin-top: var(--gutter); + margin-top: var(--sl-gutter); } diff --git a/source/assets/sass/components/_sass-syntax-switcher.scss b/source/assets/sass/components/_sass-syntax-switcher.scss index 7c37f9e85..97daa6726 100644 --- a/source/assets/sass/components/_sass-syntax-switcher.scss +++ b/source/assets/sass/components/_sass-syntax-switcher.scss @@ -57,8 +57,8 @@ .ui-tabs-nav { font-size: var(--sl-font-size--small); - margin-top: var(--gutter-negative); - margin-left: var(--gutter-negative); + margin-top: var(--sl-gutter--negative); + margin-left: var(--sl-gutter--negative); a { border: 0; @@ -82,7 +82,7 @@ &.css-tab { &, &.ui-tabs-active { - margin-left: var(--gutter-double); + margin-left: var(--sl-gutter--double); } a::before { @@ -92,13 +92,13 @@ font-weight: typography.$sl-font-weight--bold; left: -1.2em; position: absolute; - top: var(--gutter-minus); + top: var(--sl-gutter--minus); } } } .ui-tabs-anchor { - padding: var(--gutter-minus) var(--gutter); + padding: var(--sl-gutter--minus) var(--sl-gutter); } } diff --git a/source/assets/sass/components/_tables.scss b/source/assets/sass/components/_tables.scss index 364fd918b..fe2646757 100644 --- a/source/assets/sass/components/_tables.scss +++ b/source/assets/sass/components/_tables.scss @@ -1,7 +1,7 @@ @use '../breakpoints'; .sl-c-table { - margin: var(--gutter-sesqui) 0; + margin: var(--sl-gutter--sesqui) 0; border: 0; width: 100%; max-width: 100%; @@ -9,7 +9,7 @@ td, th { border: 0; - padding: var(--gutter-minus) var(--table-cell-padding); + padding: var(--sl-gutter--minus) var(--sl-table-cell-padding); vertical-align: top; } @@ -20,7 +20,7 @@ @include breakpoints.sl-breakpoint--medium-max { &-responsive { - margin-bottom: var(--gutter-sesqui); + margin-bottom: var(--sl-gutter--sesqui); width: 100%; overflow: { x: auto; diff --git a/source/assets/sass/config/_scale.scss b/source/assets/sass/config/_scale.scss index 793956510..2def23158 100644 --- a/source/assets/sass/config/_scale.scss +++ b/source/assets/sass/config/_scale.scss @@ -1,54 +1,54 @@ // Spacing Sizes // ------------- $gutter: 1rem; // ~16px -$gutter-quarter: calc(var(--gutter) * 0.25); // ~4px -$gutter-half: calc(var(--gutter) * 0.5); // ~8px -$gutter-minus: calc(var(--gutter) * 0.75); // ~12px -$gutter-plus: calc(var(--gutter) * 1.25); // ~20px -$gutter-sesqui: calc(var(--gutter) * 1.5); // ~24px -$gutter-double: calc(var(--gutter) * 2); // ~32px -$gutter-double-sesqui: calc(var(--gutter) * 2.5); // ~40px -$gutter-triple: calc(var(--gutter) * 3); // ~48px +$gutter--quarter: calc(var(--sl-gutter) * 0.25); // ~4px +$gutter--half: calc(var(--sl-gutter) * 0.5); // ~8px +$gutter--minus: calc(var(--sl-gutter) * 0.75); // ~12px +$gutter--plus: calc(var(--sl-gutter) * 1.25); // ~20px +$gutter--sesqui: calc(var(--sl-gutter) * 1.5); // ~24px +$gutter--double: calc(var(--sl-gutter) * 2); // ~32px +$gutter--double-sesqui: calc(var(--sl-gutter) * 2.5); // ~40px +$gutter--triple: calc(var(--sl-gutter) * 3); // ~48px // Negative Spacing Sizes // ---------------------- -$gutter-negative: calc(var(--gutter) * -1); -$gutter-quarter-negative: calc(var(--gutter-quarter) * -1); -$gutter-half-negative: calc(var(--gutter-half) * -1); -$gutter-minus-negative: calc(var(--gutter-minus) * -1); -$gutter-plus-negative: calc(var(--gutter-plus) * -1); -$gutter-sesqui-negative: calc(var(--gutter-sesqui) * -1); -$gutter-double-negative: calc(var(--gutter-double) * -1); -$gutter-double-sesqui-negative: calc(var(--gutter-double-sesqui) * -1); -$gutter-triple-negative: calc(var(--gutter-triple) * -1); +$gutter--negative: calc(var(--sl-gutter) * -1); +$gutter--quarter-negative: calc(var(--sl-gutter--quarter) * -1); +$gutter--half-negative: calc(var(--sl-gutter--half) * -1); +$gutter--minus-negative: calc(var(--sl-gutter--minus) * -1); +$gutter--plus-negative: calc(var(--sl-gutter--plus) * -1); +$gutter--sesqui-negative: calc(var(--sl-gutter--sesqui) * -1); +$gutter--double-negative: calc(var(--sl-gutter--double) * -1); +$gutter--double-sesqui-negative: calc(var(--sl-gutter--double-sesqui) * -1); +$gutter--triple-negative: calc(var(--sl-gutter--triple) * -1); // UI Sizes // -------- -$border-radius-large: 0.25rem; -$border-radius-small: 0.125rem; -$border-small: 1px; -$column-medium: 30rem; -$column-small: 15rem; -$table-cell-padding: var(--gutter-sesqui); +$border-radius--large: 0.25rem; +$border-radius--small: 0.125rem; +$border--small: 1px; +$column--medium: 30rem; +$column--small: 15rem; +$table-cell-padding: var(--sl-gutter--sesqui); // Layout Sizes // ------------ -$sl-breakpoint--small: 30em; // 480px -$sl-breakpoint--medium: 40em; // 640px -$sl-breakpoint--large: 60em; // 960px -$sl-breakpoint--x-large: 80em; // 1280px +$breakpoint--small: 30em; // 480px +$breakpoint--medium: 40em; // 640px +$breakpoint--large: 60em; // 960px +$breakpoint--x-large: 80em; // 1280px // Font Sizes Generic // ------------------ -$sl-font-size--smaller: 90%; -$sl-font-size--x-small: 0.875rem; // 14px -$sl-font-size--small: 1rem; // 16px -$sl-font-size--medium: 1.125rem; // 18px -$sl-font-size--large: 1.25rem; // 20px -$sl-font-size--x-large: 1.5rem; // 22px -$sl-font-size--xx-large: 1.75rem; // 28px -$sl-font-size--xxx-large: 2rem; // 32px -$sl-font-size--xxxx-large: 5rem; // 80px +$font-size--smaller: 90%; +$font-size--x-small: 0.875rem; // 14px +$font-size--small: 1rem; // 16px +$font-size--medium: 1.125rem; // 18px +$font-size--large: 1.25rem; // 20px +$font-size--x-large: 1.5rem; // 22px +$font-size--xx-large: 1.75rem; // 28px +$font-size--xxx-large: 2rem; // 32px +$font-size--xxxx-large: 5rem; // 80px // Font Sizes Custom // ----------------- diff --git a/source/assets/sass/layout/_containers.scss b/source/assets/sass/layout/_containers.scss index 27f17e304..d68d8378a 100644 --- a/source/assets/sass/layout/_containers.scss +++ b/source/assets/sass/layout/_containers.scss @@ -7,16 +7,16 @@ left: auto; } padding: { - right: var(--gutter); - left: var(--gutter); + right: var(--sl-gutter); + left: var(--sl-gutter); } max-width: functions.sl-px-to-rem(1920px); @include breakpoints.sl-breakpoint--small { padding: { - right: var(--gutter-double); - left: var(--gutter-double); + right: var(--sl-gutter--double); + left: var(--sl-gutter--double); } } diff --git a/source/assets/sass/layout/_grid-system.scss b/source/assets/sass/layout/_grid-system.scss index 5394bf0a3..8c6411f4b 100644 --- a/source/assets/sass/layout/_grid-system.scss +++ b/source/assets/sass/layout/_grid-system.scss @@ -124,41 +124,41 @@ &--gutters { margin: { - right: var(--gutter-negative); - left: var(--gutter-negative); + right: var(--sl-gutter--negative); + left: var(--sl-gutter--negative); } > .sl-l-grid__column { padding: { - right: var(--gutter); - left: var(--gutter); + right: var(--sl-gutter); + left: var(--sl-gutter); } } &-large { margin: { - right: var(--gutter-double-negative); - left: var(--gutter-double-negative); + right: var(--sl-gutter--double-negative); + left: var(--sl-gutter--double-negative); } > .sl-l-grid__column { padding: { - right: var(--gutter-double); - left: var(--gutter-double); + right: var(--sl-gutter--double); + left: var(--sl-gutter--double); } } } &-small { margin: { - right: var(--gutter-half-negative); - left: var(--gutter-half-negative); + right: var(--sl-gutter--half-negative); + left: var(--sl-gutter--half-negative); } > .sl-l-grid__column { padding: { - right: var(--gutter-half); - left: var(--gutter-half); + right: var(--sl-gutter--half); + left: var(--sl-gutter--half); } } } diff --git a/source/assets/sass/layout/_holy-grail.scss b/source/assets/sass/layout/_holy-grail.scss index 4cfdb5651..9f1a957c3 100644 --- a/source/assets/sass/layout/_holy-grail.scss +++ b/source/assets/sass/layout/_holy-grail.scss @@ -23,8 +23,8 @@ flex: 1 0 auto; flex-direction: row; margin: { - right: var(--gutter-double-negative); - left: var(--gutter-double-negative); + right: var(--sl-gutter--double-negative); + left: var(--sl-gutter--double-negative); } } @@ -32,8 +32,8 @@ &__navigation, &__complementary { padding: { - right: var(--gutter-double); - left: var(--gutter-double); + right: var(--sl-gutter--double); + left: var(--sl-gutter--double); } } @@ -42,16 +42,16 @@ } &__navigation { - flex: 0 0 var(--column-small); + flex: 0 0 var(--sl-column--small); order: -1; } &__complementary { order: 1; - flex: 0 0 var(--column-medium); + flex: 0 0 var(--sl-column--medium); &--contents { - flex: 0 0 var(--column-small); + flex: 0 0 var(--sl-column--small); order: -1; } } diff --git a/source/assets/sass/layout/_sections.scss b/source/assets/sass/layout/_sections.scss index 99c85ffba..1d33bcdc9 100644 --- a/source/assets/sass/layout/_sections.scss +++ b/source/assets/sass/layout/_sections.scss @@ -1,11 +1,11 @@ .sl-l-section { margin: { - top: var(--gutter-triple); - bottom: var(--gutter-triple); + top: var(--sl-gutter--triple); + bottom: var(--sl-gutter--triple); } padding: { - top: var(--gutter-triple); - bottom: var(--gutter-triple); + top: var(--sl-gutter--triple); + bottom: var(--sl-gutter--triple); } &:first-child { diff --git a/source/assets/sass/regions/_banner.scss b/source/assets/sass/regions/_banner.scss index eeecbca8c..cd31ce00d 100644 --- a/source/assets/sass/regions/_banner.scss +++ b/source/assets/sass/regions/_banner.scss @@ -7,7 +7,7 @@ // add bottom padding to increase space // above page titles (visible on mobile site) - padding-bottom: var(--gutter-triple); + padding-bottom: var(--sl-gutter--triple); a { display: inline-block; @@ -32,17 +32,17 @@ ul { position: relative; - margin: 0 var(--gutter-negative) !important; + margin: 0 var(--sl-gutter--negative) !important; @include breakpoints.sl-breakpoint--medium { - right: var(--gutter-negative); + right: var(--sl-gutter--negative); margin: 0 !important; } } a { display: block; - padding: var(--gutter-minus) var(--gutter); + padding: var(--sl-gutter--minus) var(--sl-gutter); border: 0; } } diff --git a/source/assets/sass/visual-design/_theme.scss b/source/assets/sass/visual-design/_theme.scss index 72071a9f6..4aaf09a11 100644 --- a/source/assets/sass/visual-design/_theme.scss +++ b/source/assets/sass/visual-design/_theme.scss @@ -330,7 +330,7 @@ $linear-channel-values: } html { - @include config.tokens(config.$scale); + @include config.tokens(config.$scale, 'sl-'); background: #f8f9fa url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f1f3f5' fill-opacity='0.47' fill-rule='evenodd'/%3E%3C/svg%3E"); @@ -346,7 +346,7 @@ body { } a { - border-bottom: var(--border-small) solid rgba($sl-color--iron, 0.5); + border-bottom: var(--sl-border--small) solid rgba($sl-color--iron, 0.5); color: $sl-color--midnight-blue; .c1 & { @@ -366,7 +366,7 @@ a { code, pre { - border-radius: var(--border-radius-small); + border-radius: var(--sl-border-radius--small); color: color.adjust($sl-color--pale-sky, $lightness: -25%); a & { @@ -375,6 +375,6 @@ pre { } pre { - border: var(--border-small) solid #ebebeb; + border: var(--sl-border--small) solid #ebebeb; background: rgba($sl-color--midnight-blue, 0.0625); } diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index 470eba27e..c46b435f3 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -81,7 +81,7 @@ ol, dl, figure, details { - margin: var(--gutter) 0; + margin: var(--sl-gutter) 0; padding: 0; } @@ -90,11 +90,11 @@ h3, h4, h5, h6 { - margin-top: var(--gutter-double-sesqui); + margin-top: var(--sl-gutter--double-sesqui); aside &, nav & { - margin-top: var(--gutter); + margin-top: var(--sl-gutter); } } @@ -202,7 +202,7 @@ code { pre { font-size: var(--sl-font-size--x-small); - padding: var(--gutter-minus) var(--gutter); + padding: var(--sl-gutter--minus) var(--sl-gutter); overflow: auto; white-space: pre-wrap; @@ -225,8 +225,8 @@ img { hr { margin: { - top: var(--gutter-triple); - bottom: var(--gutter-triple); + top: var(--sl-gutter--triple); + bottom: var(--sl-gutter--triple); } } From ee6a03429ac56b423f232cadbafd5c5b2fbe1d66 Mon Sep 17 00:00:00 2001 From: Stacy Kvernmo Date: Tue, 21 Feb 2023 14:44:48 -0600 Subject: [PATCH 12/12] fix breakpoint mixin --- source/assets/sass/_breakpoints.scss | 30 ++++++++----------- .../sass/visual-design/_typography.scss | 2 +- 2 files changed, 14 insertions(+), 18 deletions(-) diff --git a/source/assets/sass/_breakpoints.scss b/source/assets/sass/_breakpoints.scss index 493d89e14..30787bc7e 100644 --- a/source/assets/sass/_breakpoints.scss +++ b/source/assets/sass/_breakpoints.scss @@ -1,16 +1,12 @@ -@use 'functions'; +@use 'config'; -$sl-breakpoint--small: 480px !default; -$sl-breakpoint--medium: 640px !default; -$sl-breakpoint--large: 960px !default; -$sl-breakpoint--x-large: 1280px !default; $sl-breakpoints: ( // for mixins to span across breakpoints and without one none: 0, - small: $sl-breakpoint--small, - medium: $sl-breakpoint--medium, - large: $sl-breakpoint--large, - x-large: $sl-breakpoint--x-large + small: config.$breakpoint--small, + medium: config.$breakpoint--medium, + large: config.$breakpoint--large, + x-large: config.$breakpoint--x-large ); @mixin sl-breakpoint($breakpoint) { @@ -26,49 +22,49 @@ $sl-breakpoints: ( } @mixin sl-breakpoint--small { - @include sl-breakpoint($sl-breakpoint--small) { + @include sl-breakpoint(config.$breakpoint--small) { @content; } } @mixin sl-breakpoint--small-max { - @include sl-breakpoint-max($sl-breakpoint--small) { + @include sl-breakpoint-max(config.$breakpoint--small) { @content; } } @mixin sl-breakpoint--medium { - @include sl-breakpoint($sl-breakpoint--medium) { + @include sl-breakpoint(config.$breakpoint--medium) { @content; } } @mixin sl-breakpoint--medium-max { - @include sl-breakpoint-max($sl-breakpoint--medium) { + @include sl-breakpoint-max(config.$breakpoint--medium) { @content; } } @mixin sl-breakpoint--large { - @include sl-breakpoint($sl-breakpoint--large) { + @include sl-breakpoint(config.$breakpoint--large) { @content; } } @mixin sl-breakpoint--large-max { - @include sl-breakpoint-max($sl-breakpoint--large) { + @include sl-breakpoint-max(config.$breakpoint--large) { @content; } } @mixin sl-breakpoint--x-large { - @include sl-breakpoint($sl-breakpoint--x-large) { + @include sl-breakpoint(config.$breakpoint--x-large) { @content; } } @mixin sl-breakpoint--x-large-max { - @include sl-breakpoint-max($sl-breakpoint--x-large) { + @include sl-breakpoint-max(config.$breakpoint--x-large) { @content; } } diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss index c46b435f3..90e95c5ca 100644 --- a/source/assets/sass/visual-design/_typography.scss +++ b/source/assets/sass/visual-design/_typography.scss @@ -1,7 +1,7 @@ +@use '../config'; @use 'sass:math'; @use '../breakpoints'; -@use '../functions'; $sl-font-weight--light: 300 !default; $sl-font-weight--regular: 400 !default;