@primer/css 20.6.1 → 20.7.0-rc.434deca0

package/dist/variables.json

@@ -141,43 +141,43 @@
   },
   "$font-weight-bold": {
     "values": [
-      "600"
+      "var(--base-text-weight-medium, 600)"
     ],
     "source": {
       "path": "src/support/variables/typography.scss",
       "line": 24
     },
-    "computed": "600"
+    "computed": "calc(var(--base-text-weight-medium, 600))"
   },
   "$font-weight-semibold": {
     "values": [
-      "500"
+      "var(--base-text-weight-semibold, 500)"
     ],
     "source": {
       "path": "src/support/variables/typography.scss",
       "line": 25
     },
-    "computed": "500"
+    "computed": "calc(var(--base-text-weight-semibold, 500))"
   },
   "$font-weight-normal": {
     "values": [
-      "400"
+      "var(--base-text-weight-normal, 400)"
     ],
     "source": {
       "path": "src/support/variables/typography.scss",
       "line": 26
     },
-    "computed": "400"
+    "computed": "calc(var(--base-text-weight-normal, 400))"
   },
   "$font-weight-light": {
     "values": [
-      "300"
+      "var(--base-text-weight-light, 300)"
     ],
     "source": {
       "path": "src/support/variables/typography.scss",
       "line": 27
     },
-    "computed": "300"
+    "computed": "calc(var(--base-text-weight-light, 300))"
   },
   "$lh-condensed-ultra": {
     "values": [
@@ -256,7 +256,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 32
+      "line": 30
     },
     "computed": "8px"
   },
@@ -266,7 +266,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 35
+      "line": 33
     },
     "computed": "0"
   },
@@ -277,7 +277,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 36
+      "line": 34
     },
     "computed": "4px"
   },
@@ -288,7 +288,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 37
+      "line": 35
     },
     "computed": "8px"
   },
@@ -299,7 +299,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 38
+      "line": 36
     },
     "computed": "16px"
   },
@@ -310,7 +310,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 39
+      "line": 37
     },
     "computed": "24px"
   },
@@ -321,7 +321,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 40
+      "line": 38
     },
     "computed": "32px"
   },
@@ -332,7 +332,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 41
+      "line": 39
     },
     "computed": "40px"
   },
@@ -343,7 +343,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 69
+      "line": 67
     },
     "computed": "48px"
   },
@@ -354,7 +354,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 70
+      "line": 68
     },
     "computed": "64px"
   },
@@ -365,7 +365,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 71
+      "line": 69
     },
     "computed": "80px"
   },
@@ -376,7 +376,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 72
+      "line": 70
     },
     "computed": "96px"
   },
@@ -387,7 +387,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 73
+      "line": 71
     },
     "computed": "112px"
   },
@@ -398,7 +398,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 74
+      "line": 72
     },
     "computed": "128px"
   },
@@ -408,7 +408,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 99
+      "line": 96
     },
     "computed": "0.0625em"
   },
@@ -418,7 +418,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 100
+      "line": 97
     },
     "computed": "0.125em"
   },
@@ -428,7 +428,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 101
+      "line": 98
     },
     "computed": "0.25em"
   },
@@ -438,7 +438,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 102
+      "line": 99
     },
     "computed": "0.375em"
   },
@@ -448,7 +448,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 103
+      "line": 100
     },
     "computed": "0.5em"
   },
@@ -458,7 +458,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 104
+      "line": 101
     },
     "computed": "0.75em"
   },
@@ -468,7 +468,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 108
+      "line": 105
     },
     "computed": "16px"
   },
@@ -478,7 +478,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 110
+      "line": 107
     },
     "computed": "0"
   },
@@ -489,84 +489,84 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 111
+      "line": 108
     },
     "computed": "16px"
   },
   "$size-2": {
     "values": [
-      "$size-1 +  4px",
-      "16px +  4px"
+      "$size-1 + 4px",
+      "16px + 4px"
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 112
+      "line": 109
     },
     "computed": "20px"
   },
   "$size-3": {
     "values": [
-      "$size-2 +  4px",
-      "16px +  4px +  4px"
+      "$size-2 + 4px",
+      "16px + 4px + 4px"
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 113
+      "line": 110
     },
     "computed": "24px"
   },
   "$size-4": {
     "values": [
-      "$size-3 +  4px",
-      "16px +  4px +  4px +  4px"
+      "$size-3 + 4px",
+      "16px + 4px + 4px + 4px"
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 114
+      "line": 111
     },
     "computed": "28px"
   },
   "$size-5": {
     "values": [
-      "$size-4 +  4px",
-      "16px +  4px +  4px +  4px +  4px"
+      "$size-4 + 4px",
+      "16px + 4px + 4px + 4px + 4px"
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 115
+      "line": 112
     },
     "computed": "32px"
   },
   "$size-6": {
     "values": [
-      "$size-5 +  8px",
-      "16px +  4px +  4px +  4px +  4px +  8px"
+      "$size-5 + 8px",
+      "16px + 4px + 4px + 4px + 4px + 8px"
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 116
+      "line": 113
     },
     "computed": "40px"
   },
   "$size-7": {
     "values": [
-      "$size-6 +  8px",
-      "16px +  4px +  4px +  4px +  4px +  8px +  8px"
+      "$size-6 + 8px",
+      "16px + 4px + 4px + 4px + 4px + 8px + 8px"
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 117
+      "line": 114
     },
     "computed": "48px"
   },
   "$size-8": {
     "values": [
       "$size-7 + 16px",
-      "16px +  4px +  4px +  4px +  4px +  8px +  8px + 16px"
+      "16px + 4px + 4px + 4px + 4px + 8px + 8px + 16px"
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 118
+      "line": 115
     },
     "computed": "64px"
   },
@@ -576,7 +576,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 121
+      "line": 118
     },
     "computed": "980px"
   },
@@ -586,7 +586,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 122
+      "line": 119
     },
     "computed": "10px"
   },
@@ -596,7 +596,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 125
+      "line": 122
     },
     "computed": "0"
   },
@@ -606,7 +606,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 127
+      "line": 124
     },
     "computed": "544px"
   },
@@ -616,7 +616,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 129
+      "line": 126
     },
     "computed": "768px"
   },
@@ -626,7 +626,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 131
+      "line": 128
     },
     "computed": "1012px"
   },
@@ -636,7 +636,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 133
+      "line": 130
     },
     "computed": "1280px"
   },
@@ -647,7 +647,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 136
+      "line": 133
     },
     "computed": "544px"
   },
@@ -658,7 +658,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 137
+      "line": 134
     },
     "computed": "768px"
   },
@@ -669,7 +669,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 138
+      "line": 135
     },
     "computed": "1012px"
   },
@@ -680,7 +680,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 139
+      "line": 136
     },
     "computed": "1280px"
   },
@@ -691,7 +691,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 152
+      "line": 148
     },
     "computed": "calc('max-width: #{768px - 0.02px}')"
   },
@@ -702,7 +702,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 153
+      "line": 149
     },
     "computed": "calc('min-width: #{768px}')"
   },
@@ -712,7 +712,7 @@
     ],
     "source": {
       "path": "src/support/variables/layout.scss",
-      "line": 154
+      "line": 150
     },
     "computed": "calc('min-width: 1400px')"
   },
@@ -747,13 +747,23 @@
     },
     "computed": "calc(1px solid var(--color-border-default))"
   },
+  "$border-rem": {
+    "values": [
+      "var(--primer-borderWidth-thin, 1px) solid var(--color-border-default)"
+    ],
+    "source": {
+      "path": "src/support/variables/misc.scss",
+      "line": 7
+    },
+    "computed": "calc(var(--primer-borderWidth-thin, 1px) solid var(--color-border-default))"
+  },
   "$border-radius-1": {
     "values": [
       "4px"
     ],
     "source": {
       "path": "src/support/variables/misc.scss",
-      "line": 9
+      "line": 10
     },
     "computed": "4px"
   },
@@ -763,7 +773,7 @@
     ],
     "source": {
       "path": "src/support/variables/misc.scss",
-      "line": 10
+      "line": 11
     },
     "computed": "6px"
   },
@@ -773,7 +783,7 @@
     ],
     "source": {
       "path": "src/support/variables/misc.scss",
-      "line": 11
+      "line": 12
     },
     "computed": "8px"
   },
@@ -784,7 +794,7 @@
     ],
     "source": {
       "path": "src/support/variables/misc.scss",
-      "line": 12
+      "line": 13
     },
     "computed": "6px"
   },
@@ -794,7 +804,7 @@
     ],
     "source": {
       "path": "src/support/variables/misc.scss",
-      "line": 15
+      "line": 16
     },
     "computed": "250px"
   },
@@ -804,7 +814,7 @@
     ],
     "source": {
       "path": "src/support/variables/misc.scss",
-      "line": 16
+      "line": 17
     },
     "computed": "0.4s"
   },
@@ -814,7 +824,7 @@
     ],
     "source": {
       "path": "src/support/variables/misc.scss",
-      "line": 17
+      "line": 18
     },
     "computed": "0.1s"
   },
@@ -913,13 +923,13 @@
   "$mktg-header-weight-default": {
     "values": [
       "$font-weight-bold",
-      "600"
+      "var(--base-text-weight-medium, 600)"
     ],
     "source": {
       "path": "src/marketing/support/variables.scss",
       "line": 13
     },
-    "computed": "600"
+    "computed": "calc(var(--base-text-weight-medium, 600))"
   },
   "$mktg-header-weight-threshold": {
     "values": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "20.6.1",
+  "version": "20.7.0-rc.434deca0",
   "description": "The CSS implementation of GitHub's Primer Design System",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",

package/primitives/index.scss

@@ -7,3 +7,4 @@
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
+@import './temp-typography-tokens.scss';

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.