From eaeb6a7d328edb2382ff3753d42cfe23d147114f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 24 Jan 2019 14:37:48 -0800 Subject: [PATCH 1/5] feat(primer-support): refactor spacer variables This refactors our spacer variables so that $spacer-n variables are the "source of truth", $spacers is a list of the $spacer-n values, and the new $spacer-map variable makes it easier to loop over the spacing scale with: @each $scale, $size in $spacer-map { ... } --- .../primer-support/lib/variables/layout.scss | 44 ++++++++++++------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/modules/primer-support/lib/variables/layout.scss b/modules/primer-support/lib/variables/layout.scss index 4aed8d7bba..c58629475e 100644 --- a/modules/primer-support/lib/variables/layout.scss +++ b/modules/primer-support/lib/variables/layout.scss @@ -11,24 +11,38 @@ // 5 => 32px // 6 => 40px $spacer: 8px !default; + +// Our spacing scale +$spacer-0: 0 !default; // 0 +$spacer-1: round($spacer / 2) !default; // 4px +$spacer-2: $spacer !default; // 8px +$spacer-3: $spacer * 2 !default; // 16px +$spacer-4: $spacer * 3 !default; // 24px +$spacer-5: $spacer * 4 !default; // 32px +$spacer-6: $spacer * 5 !default; // 40px + +// The list of spacer values $spacers: ( - 0, - round($spacer / 2), - $spacer, - $spacer * 2, - $spacer * 3, - $spacer * 4, - $spacer * 5 + $spacer-0, + $spacer-1, + $spacer-2, + $spacer-3, + $spacer-4, + $spacer-5, + $spacer-6, ) !default; -// Aliases for easy use -$spacer-0: nth($spacers, 1) !default; // 0 -$spacer-1: nth($spacers, 2) !default; // 4px -$spacer-2: nth($spacers, 3) !default; // 8px -$spacer-3: nth($spacers, 4) !default; // 16px -$spacer-4: nth($spacers, 5) !default; // 24px -$spacer-5: nth($spacers, 6) !default; // 32px -$spacer-6: nth($spacers, 7) !default; // 40px +// And the map of spacers, for easier looping: +// @each $scale, $length in $spacer-map { ... } +$spacer-map: ( + 0: $spacer-0, + 1: $spacer-1, + 2: $spacer-2, + 3: $spacer-3, + 4: $spacer-4, + 5: $spacer-5, + 6: $spacer-6, +) !default; // Em spacer variables $em-spacer-1: 0.0625em !default; // 1/16 From f51fa883e76237f0b9f7114f56587eb8e0183204 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 24 Jan 2019 14:39:42 -0800 Subject: [PATCH 2/5] refactor(primer-utilities): use new $spacer-map var for loops --- modules/primer-utilities/lib/margin.scss | 5 +---- modules/primer-utilities/lib/padding.scss | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/modules/primer-utilities/lib/margin.scss b/modules/primer-utilities/lib/margin.scss index c47fc14fbd..6e14ac1040 100644 --- a/modules/primer-utilities/lib/margin.scss +++ b/modules/primer-utilities/lib/margin.scss @@ -5,10 +5,7 @@ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { // Loop through the spacer values - @for $i from 1 through length($spacers) { - $size: nth($spacers, $i); // sm, md, lg, xl - $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6 - + @each $scale, $size in $spacer-map { /* Set a $size margin to all sides at $breakpoint */ .m#{$variant}-#{$scale} { margin: $size !important; } /* Set a $size margin on the top at $breakpoint */ diff --git a/modules/primer-utilities/lib/padding.scss b/modules/primer-utilities/lib/padding.scss index bc3ba09c6d..256b3b2e20 100644 --- a/modules/primer-utilities/lib/padding.scss +++ b/modules/primer-utilities/lib/padding.scss @@ -6,10 +6,7 @@ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { // Loop through the spacer values - @for $i from 1 through length($spacers) { - $size: nth($spacers, $i); // xs, sm, md, lg, xl - $scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6 - + @each $scale, $size in $spacer-map { /* Set a $size padding to all sides at $breakpoint */ .p#{$variant}-#{$scale} { padding: $size !important; } /* Set a $size padding to the top at $breakpoint */ From 9fe577c02a483fe74c7cfe90a525d96d7c25ba50 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 24 Jan 2019 14:41:31 -0800 Subject: [PATCH 3/5] refactor(primer-support): make $width-?? vars the source of truth --- .../primer-support/lib/variables/layout.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/modules/primer-support/lib/variables/layout.scss b/modules/primer-support/lib/variables/layout.scss index c58629475e..0203adb8a6 100644 --- a/modules/primer-support/lib/variables/layout.scss +++ b/modules/primer-support/lib/variables/layout.scss @@ -57,26 +57,26 @@ $container-width: 980px !default; $grid-gutter: 10px !default; // Breakpoint widths -$width-xs: 0; -$width-sm: 544px; -$width-md: 768px; -$width-lg: 1012px; -$width-xl: 1280px; +$width-xs: 0 !default; +// Small screen / phone +$width-sm: 544px !default; +// Medium screen / tablet +$width-md: 768px !default; +// Large screen / desktop (980 + (16 * 2)) <= container + gutters +$width-lg: 1012px !default; +// Extra large screen / wide desktop +$width-xl: 1280px !default; // Responsive container widths $container-md: $width-md !default; $container-lg: $width-lg !default; $container-xl: $width-xl !default; -// Breakpoints +// Breakpoints in the form (name: length) $breakpoints: ( - // Small screen / phone sm: $width-sm, - // Medium screen / tablet md: $width-md, - // Large screen / desktop (980 + (16 * 2)) <= container + gutters lg: $width-lg, - // Extra large screen / wide desktop xl: $width-xl ) !default; From 289604605f38652434725b643bdee4df98b0b2c0 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 24 Jan 2019 14:42:10 -0800 Subject: [PATCH 4/5] refactor(primer-support): make $responsive-variants easier to grok --- .../primer-support/lib/variables/layout.scss | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/modules/primer-support/lib/variables/layout.scss b/modules/primer-support/lib/variables/layout.scss index 0203adb8a6..0e50459fc9 100644 --- a/modules/primer-support/lib/variables/layout.scss +++ b/modules/primer-support/lib/variables/layout.scss @@ -80,10 +80,24 @@ $breakpoints: ( xl: $width-xl ) !default; -$responsive-variants: ("": ""); -@each $key in map-keys($breakpoints) { - $responsive-variants: map-merge($responsive-variants, ($key: "-#{$key}")); -} +// This map in the form (breakpoint: variant) is used to iterate over +// breakpoints and create both responsive and non-responsive classes in one +// loop: +// +// ```scss +// @each $breakpoint, $variant of $responsive-variants { +// @include breakpoint($breakpoint) { +// .foo#{$variant}-bar { foo: bar !important; } +// } +// } +// ``` +$responsive-variants: ( + "": "", + sm: "-sm", + md: "-md", + lg: "-lg", + xl: "-xl", +) !default; // responive utility position values $responsive-positions: ( From e6d3dacbe88cba57e264eba88444ef739413a603 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 24 Jan 2019 14:47:01 -0800 Subject: [PATCH 5/5] feat(marketing-support): add !default to $spacer-{7..12} --- modules/primer-marketing-support/lib/variables.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index 373feaf874..277b096418 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -21,12 +21,12 @@ $h000-size-mobile: 48px !default; // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12 // i.e. After 40px, we have 48, 64, 80, 96, etc. -$spacer-7: $spacer * 6; // 48px -$spacer-8: $spacer * 8; // 64px -$spacer-9: $spacer * 10; // 80px -$spacer-10: $spacer * 12; // 96px -$spacer-11: $spacer * 14; // 112px -$spacer-12: $spacer * 16; // 128px +$spacer-7: $spacer * 6 !default; // 48px +$spacer-8: $spacer * 8 !default; // 64px +$spacer-9: $spacer * 10 !default; // 80px +$spacer-10: $spacer * 12 !default; // 96px +$spacer-11: $spacer * 14 !default; // 112px +$spacer-12: $spacer * 16 !default; // 128px $marketingSpacers: $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12; $allSpacers: $spacer-1, $spacer-2, $spacer-3, $spacer-4, $spacer-5, $spacer-6, $spacer-7, $spacer-8, $spacer-9, $spacer-10, $spacer-11, $spacer-12;