@primer/css 20.6.1 → 20.7.0-rc.66236907

package/primitives/temp-typography-tokens.scss

@@ -0,0 +1,22 @@
+// Temporary typography vars in rem units variables
+:root {
+  // Heading sizes - mobile
+  // h4-h6 remain the same size on both mobile & desktop
+  --h00-size-mobile: 2.5rem;
+  --h0-size-mobile: 2rem;
+  --h1-size-mobile: 1.625rem;
+  --h2-size-mobile: 1.375rem;
+  --h3-size-mobile: 1.125rem;
+
+  // Heading sizes - desktop
+  --h00-size: 3rem;
+  --h0-size: 2.5rem;
+  --h1-size: 2rem;
+  --h2-size: 1.5rem;
+  --h3-size: 1.25rem;
+  --h4-size: 1rem;
+  --h5-size: 0.875rem;
+  --h6-size: 0.75rem;
+  --body-font-size: 0.875rem;
+  --font-size-small: 0.75rem;
+}

package/support/mixins/typography.scss

@@ -10,32 +10,32 @@
 // Heading mixins for use within components
 // These match heading utilities in utilities/typography
 @mixin h1 {
-  font-size: $h1-size;
+  font-size: var(--h1-size, $h1-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h2 {
-  font-size: $h2-size;
+  font-size: var(--h2-size, $h2-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h3 {
-  font-size: $h3-size;
+  font-size: var(--h3-size, $h3-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h4 {
-  font-size: $h4-size;
+  font-size: var(--h4-size, $h4-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h5 {
-  font-size: $h5-size;
+  font-size: var(--h5-size, $h5-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h6 {
-  font-size: $h6-size;
+  font-size: var(--h6-size, $h6-size);
   font-weight: $font-weight-bold;
 }
 
@@ -43,24 +43,30 @@
 // There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
-  font-size: $h1-size-mobile;
+  font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   // 32px on desktop
-  @include breakpoint(md) { font-size: $h1-size; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size);
+  }
 }
 
 @mixin f2-responsive {
-  font-size: $h2-size-mobile;
+  font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   // 24px on desktop
-  @include breakpoint(md) { font-size: $h2-size; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size);
+  }
 }
 
 @mixin f3-responsive {
-  font-size: $h3-size-mobile;
+  font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   // 20px on desktop
-  @include breakpoint(md) { font-size: $h3-size; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size);
+  }
 }
 
 // These use the mixins from above for responsive heading sizes.

package/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;

package/support/variables/typography.scss

@@ -21,10 +21,10 @@ $h6-size: 12px !default;
 $font-size-small: 12px !default;
 
 // Font weights
-$font-weight-bold: 600 !default;
-$font-weight-semibold: 500 !default;
-$font-weight-normal: 400 !default;
-$font-weight-light: 300 !default;
+$font-weight-bold: var(--base-text-weight-medium, 600) !default;
+$font-weight-semibold: var(--base-text-weight-semibold, 500) !default;
+$font-weight-normal: var(--base-text-weight-normal, 400) !default;
+$font-weight-light: var(--base-text-weight-light, 300) !default;
 
 // Line heights
 $lh-condensed-ultra: 1 !default;

package/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;