From 3b397d985c23592d0e18d14fe75d71ea7572aa18 Mon Sep 17 00:00:00 2001 From: Katie Langerman Date: Mon, 21 Nov 2022 09:34:17 -0800 Subject: [PATCH] Convert margin utilities to rem units with fallbacks (#2311) * add rem units * Stylelint auto-fixes * Create beige-dragons-appear.md * fix negative utils Co-authored-by: Actions Auto Build --- .changeset/beige-dragons-appear.md | 5 ++ src/support/variables/layout.scss | 128 +++++++++++++++++------------ src/utilities/margin.scss | 18 ++-- 3 files changed, 89 insertions(+), 62 deletions(-) create mode 100644 .changeset/beige-dragons-appear.md diff --git a/.changeset/beige-dragons-appear.md b/.changeset/beige-dragons-appear.md new file mode 100644 index 0000000000..bd1656c3f1 --- /dev/null +++ b/.changeset/beige-dragons-appear.md @@ -0,0 +1,5 @@ +--- +"@primer/css": minor +--- + +[WIP] Convert margin utilities to rem units with fallbacks diff --git a/src/support/variables/layout.scss b/src/support/variables/layout.scss index 15abe59e82..cda10d4e16 100644 --- a/src/support/variables/layout.scss +++ b/src/support/variables/layout.scss @@ -9,16 +9,14 @@ $display-values: ( inline-flex, none, table, - table-cell -) !default; + table-cell) !default; // maps edges to respective corners for border-radius $edges: ( top: (top-left, top-right), right: (top-right, bottom-right), bottom: (bottom-right, bottom-left), - left: (bottom-left, top-left) -) !default; + left: (bottom-left, top-left)) !default; // These are our margin and padding utility spacers. The default step size we // use is 8px. This gives us a key of: @@ -32,13 +30,13 @@ $edges: ( $spacer: 8px !default; // Our spacing scale -$spacer-0: 0 !default; // 0 -$spacer-1: $spacer * 0.5 !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 +$spacer-0: 0 !default; // 0 +$spacer-1: $spacer * 0.5 !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: ( @@ -66,9 +64,9 @@ $spacer-map: ( // Increases the core spacing scale first by 8px for $spacer-7, then by 16px // increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64, // 80, 96, etc. -$spacer-7: $spacer * 6 !default; // 48px -$spacer-8: $spacer * 8 !default; // 64px -$spacer-9: $spacer * 10 !default; // 80px +$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 @@ -83,43 +81,42 @@ $spacers-large: ( ) !default; $spacer-map-extended: map-merge( - ( - 0: 0, - 1: $spacer-1, - 2: $spacer-2, - 3: $spacer-3, - 4: $spacer-4, - 5: $spacer-5, - 6: $spacer-6, - ), - $spacers-large, + (0: 0, + 1: $spacer-1, + 2: $spacer-2, + 3: $spacer-3, + 4: $spacer-4, + 5: $spacer-5, + 6: $spacer-6, +), +$spacers-large, ) !default; // Em spacer variables $em-spacer-1: 0.0625em !default; // 1/16 -$em-spacer-2: 0.125em !default; // 1/8 -$em-spacer-3: 0.25em !default; // 1/4 -$em-spacer-4: 0.375em !default; // 3/8 -$em-spacer-5: 0.5em !default; // 1/2 -$em-spacer-6: 0.75em !default; // 3/4 +$em-spacer-2: 0.125em !default; // 1/8 +$em-spacer-3: 0.25em !default; // 1/4 +$em-spacer-4: 0.375em !default; // 3/8 +$em-spacer-5: 0.5em !default; // 1/2 +$em-spacer-6: 0.75em !default; // 3/4 // Size scale // Used for buttons, inputs, labels, avatars etc. $size: 16px !default; $size-0: 0 !default; -$size-1: $size !default; // 16px -$size-2: $size-1 + 4px !default; // 20px -$size-3: $size-2 + 4px !default; // 24px -$size-4: $size-3 + 4px !default; // 28px -$size-5: $size-4 + 4px !default; // 32px -$size-6: $size-5 + 8px !default; // 40px -$size-7: $size-6 + 8px !default; // 48px -$size-8: $size-7 + 16px !default; // 64px +$size-1: $size !default; // 16px +$size-2: $size-1 + 4px !default; // 20px +$size-3: $size-2 + 4px !default; // 24px +$size-4: $size-3 + 4px !default; // 28px +$size-5: $size-4 + 4px !default; // 32px +$size-6: $size-5 + 8px !default; // 40px +$size-7: $size-6 + 8px !default; // 48px +$size-8: $size-7 + 16px !default; // 64px // Fixed-width container variables $container-width: 980px !default; -$grid-gutter: 10px !default; +$grid-gutter: 10px !default; // Breakpoint widths $width-xs: 0 !default; @@ -143,8 +140,7 @@ $breakpoints: ( sm: $width-sm, md: $width-md, lg: $width-lg, - xl: $width-xl -) !default; + xl: $width-xl) !default; // Viewport ranges // Soon to be provided by Primer Primitives directly @@ -170,39 +166,65 @@ $responsive-positions: ( relative, absolute, fixed, - sticky -) !default; + sticky) !default; $sidebar-width: ( sm: 220px, md: 256px, - lg: 296px -) !default; + lg: 296px) !default; $sidebar-narrow-width: ( md: 240px, - lg: 256px -) !default; + lg: 256px) !default; $sidebar-wide-width: ( lg: 320px, - xl: 336px -) !default; + xl: 336px) !default; $gutter: ( md: $spacer-3, lg: $spacer-4, - xl: $spacer-5 -) !default; + xl: $spacer-5) !default; $gutter-condensed: ( md: $spacer-3, lg: $spacer-3, - xl: $spacer-4 -) !default; + xl: $spacer-4) !default; $gutter-spacious: ( md: $spacer-4, lg: $spacer-5, - xl: $spacer-6 + xl: $spacer-6) !default; + +// rem unit support + +$spacer-map-rem: ( + 0: 0, + 1: var(--base-size-4, 4px), + 2: var(--base-size-8, 8px), + 3: var(--base-size-16, 16px), + 4: var(--base-size-24, 24px), + 5: var(--base-size-32, 32px), + 6: var(--base-size-40, 40px), +) !default; + +$spacers-large-rem: ( + 7: var(--base-size-48, 48px), + 8: var(--base-size-64, 64px), + 9: var(--base-size-80, 80px), + 10: var(--base-size-96, 96px), + 11: var(--base-size-112, 112px), + 12: var(--base-size-128, 128px), +) !default; + +$spacer-map-rem-extended: map-merge( + (0: 0, + 1: var(--base-size-4, 4px), + 2: var(--base-size-8, 8px), + 3: var(--base-size-16, 16px), + 4: var(--base-size-24, 24px), + 5: var(--base-size-32, 32px), + 6: var(--base-size-40, 40px), +), +$spacers-large-rem, ) !default; diff --git a/src/utilities/margin.scss b/src/utilities/margin.scss index 798c3781f9..4024fd4e23 100644 --- a/src/utilities/margin.scss +++ b/src/utilities/margin.scss @@ -8,8 +8,8 @@ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { // Loop through the spacer values - @each $scale, $size in $spacer-map-extended { - @if ($scale < length($spacer-map)) { + @each $scale, $size in $spacer-map-rem-extended { + @if ($scale < length($spacer-map-rem)) { /* Set a $size margin to all sides at $breakpoint */ .m#{$variant}-#{$scale} { margin: $size !important; } } @@ -19,7 +19,7 @@ /* Set a $size margin on the bottom at $breakpoint */ .mb#{$variant}-#{$scale} { margin-bottom: $size !important; } - @if ($scale < length($spacer-map)) { + @if ($scale < length($spacer-map-rem)) { /* Set a $size margin on the right at $breakpoint */ .mr#{$variant}-#{$scale} { margin-right: $size !important; } /* Set a $size margin on the left at $breakpoint */ @@ -28,19 +28,19 @@ @if ($size != 0) { /* Set a negative $size margin on top at $breakpoint */ - .mt#{$variant}-n#{$scale} { margin-top: -$size !important; } + .mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size) !important; } /* Set a negative $size margin on the bottom at $breakpoint */ - .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; } + .mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size) !important; } - @if ($scale < length($spacer-map)) { + @if ($scale < length($spacer-map-rem)) { /* Set a negative $size margin on the right at $breakpoint */ - .mr#{$variant}-n#{$scale} { margin-right : -$size !important; } + .mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size) !important; } /* Set a negative $size margin on the left at $breakpoint */ - .ml#{$variant}-n#{$scale} { margin-left : -$size !important; } + .ml#{$variant}-n#{$scale} { margin-left : calc(-1 * $size) !important; } } } - @if ($scale < length($spacer-map)) { + @if ($scale < length($spacer-map-rem)) { /* Set a $size margin on the left & right at $breakpoint */ .mx#{$variant}-#{$scale} { margin-right: $size !important;