@primer/css 0.0.0-1f49d76 → 0.0.0-20211010195643

package/utilities/colors.scss

@@ -1,115 +1,79 @@
-// Color utilities
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
-
-// background colors
-/* Set the background to $bg-white */
-.bg-white      { background-color: $bg-white !important; }
-/* Set the background to $bg-blue */
-.bg-blue       { background-color: $bg-blue !important; }
-/* Set the background to $bg-blue-light */
-.bg-blue-light { background-color: $bg-blue-light !important; }
-/* Set the background to $bg-gray-dark */
-.bg-gray-dark  { background-color: $bg-gray-dark !important; }
-/* Set the background to $bg-gray */
-.bg-gray       { background-color: $bg-gray !important; }
-/* Set the background to $bg-gray-light */
-.bg-gray-light { background-color: $bg-gray-light !important; }
-/* Set the background to $bg-green */
-.bg-green      { background-color: $bg-green !important; }
-/* Set the background to $bg-green-light */
-.bg-green-light     { background-color: $bg-green-light !important; }
-/* Set the background to $bg-red */
-.bg-red        { background-color: $bg-red !important; }
-/* Set the background to $bg-red-light */
-.bg-red-light  { background-color: $bg-red-light !important; }
-/* Set the background to $bg-yellow */
-.bg-yellow     { background-color: $bg-yellow !important; }
-/* Set the background to $bg-yellow-light */
-.bg-yellow-light     { background-color: $bg-yellow-light !important; }
-/* Set the background to $bg-yellow-dark */
-.bg-yellow-dark      { background-color: $bg-yellow-dark !important; }
-/* Set the background to $bg-purple */
-.bg-purple     { background-color: $bg-purple !important; }
-/* Set the background to $bg-pink */
-.bg-pink { background-color: $bg-pink !important; }
-/* Set the background to $bg-purple-light */
-.bg-purple-light     { background-color: $bg-purple-light !important; }
-
-// Generate a foreground and background utility for every shade of every hue
-@each $hue, $shades in $hue-maps {
-  @each $index, $color in $shades {
-    .color-#{$hue}-#{$index} { color: $color !important; }
-    .bg-#{$hue}-#{$index} { background-color: $color !important; }
-  }
-}
+// stylelint-disable block-opening-brace-space-before
 
-.bg-shade-gradient {
-  background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
-  background-repeat: no-repeat !important;
-  background-size: 100% 200px !important;
-}
+// Foreground
 
-// text colors
-/* Set the text color to $text-blue */
-.text-blue          { color: $text-blue !important; }
-/* Set the text color to $text-red */
-.text-red           { color: $text-red !important; }
-/* Set the text color to $text-gray-light */
-.text-gray-light    { color: $text-gray-light !important; }
-/* Set the text color to $text-gray */
-.text-gray          { color: $text-gray !important; }
-/* Set the text color to $text-gray-dark */
-.text-gray-dark     { color: $text-gray-dark !important; }
-/* Set the text color to $text-green */
-.text-green         { color: $text-green !important; }
-/* Set the text color to $text-yellow */
-.text-yellow        { color: $text-yellow !important; }
-/* Set the text color to $text-orange */
-.text-orange        { color: $text-orange !important; }
-/* Set the text color to $text-orange-light */
-.text-orange-light        { color: $text-orange-light !important; }
-/* Set the text color to $text-purple */
-.text-purple        { color: $text-purple !important; }
-/* Set the text color to $text-pink */
-.text-pink { color: $text-pink !important; }
-/* Set the text color to $text-white */
-.text-white         { color: $text-white !important; }
-/* Set the text color to inherit */
-.text-inherit       { color: inherit !important; }
-
-// Link colors
-// Sets the links color to $text-gray and $text-blue on hover
-.link-gray {
-  color: $text-gray !important;
-
-  &:hover {
-    color: $text-blue !important;
-  }
-}
+.color-fg-default     { color: var(--color-fg-default) !important; }
+.color-fg-muted       { color: var(--color-fg-muted) !important; }
+.color-fg-subtle      { color: var(--color-fg-subtle) !important; }
 
-// Sets the links color to $text-gray-dark and $text-blue on hover
-.link-gray-dark {
-  color: $text-gray-dark !important;
+.color-fg-accent    { color: var(--color-accent-fg) !important; }
+.color-fg-success   { color: var(--color-success-fg) !important; }
+.color-fg-attention { color: var(--color-attention-fg) !important; }
+.color-fg-severe    { color: var(--color-severe-fg) !important; }
+.color-fg-danger    { color: var(--color-danger-fg) !important; }
+.color-fg-done      { color: var(--color-done-fg) !important; }
+.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
 
-  &:hover {
-    color: $text-blue !important;
-  }
-}
+.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; }
 
-/* Set the link color to $text-blue on hover
-  Useful when you want only part of a link to turn blue on hover */
-.link-hover-blue {
-  &:hover {
-    color: $text-blue !important;
-  }
-}
+// Background
+
+.color-bg-default  { background-color: var(--color-canvas-default) !important; }
+.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
+.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
+.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
+.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
+
+.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
+.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
+
+.color-bg-success          { background-color: var(--color-success-subtle) !important; }
+.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
+
+.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
+.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
+
+.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
+.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
+
+.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
+.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
+
+.color-bg-done          { background-color: var(--color-done-subtle) !important; }
+.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
+
+.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
+.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
+
+// Border
+
+.color-border-default { border-color: var(--color-border-default) !important; }
+.color-border-muted   { border-color: var(--color-border-muted) !important; }
+.color-border-subtle  { border-color: var(--color-border-subtle) !important; }
+
+.color-border-accent          { border-color: var(--color-accent-muted) !important; }
+.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+
+.color-border-success          { border-color: var(--color-success-muted) !important; }
+.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+
+.color-border-attention          { border-color: var(--color-attention-muted) !important; }
+.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+
+.color-border-severe          { border-color: var(--color-severe-muted) !important; }
+.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+
+.color-border-danger          { border-color: var(--color-danger-muted) !important; }
+.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+
+.color-border-done          { border-color: var(--color-done-muted) !important; }
+.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+
+.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
+.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
 
-/* Make a link $text-gray, then $text-blue on hover and removes the underline */
-.muted-link {
-  color: $text-gray !important;
+// Misc
 
-  &:hover {
-    color: $text-blue !important;
-    text-decoration: none;
-  }
+.color-fg-inherit {
+  color: inherit !important;
 }

package/utilities/details.scss

@@ -9,20 +9,32 @@
   z-index: 80;
   display: block;
   cursor: default;
-  content: " ";
+  content: ' ';
   background: transparent;
 }
 
 .details-overlay-dark[open] > summary::before {
-  z-index: 99;
-  background: $bg-black-fade;
+  z-index: 111;
+  background: var(--color-primer-canvas-backdrop);
 }
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
+  > summary {
+    list-style: none;
+  }
   // Remove marker added by details polyfill
-  > summary::before { display: none; }
+  > summary::before {
+    display: none;
+  }
   // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.details-overlay > summary {
+  &:focus {
+    @include focusOutline;
+  }
 }

package/utilities/flexbox.scss

@@ -1,5 +1,5 @@
 // Flex utility classes
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before
+// stylelint-disable block-opening-brace-space-before
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Flexbox classes
@@ -9,8 +9,9 @@
     .flex#{$variant}-column         { flex-direction: column !important; }
     .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
 
-    .flex#{$variant}-wrap     { flex-wrap: wrap !important; }
-    .flex#{$variant}-nowrap   { flex-wrap: nowrap !important; }
+    .flex#{$variant}-wrap             { flex-wrap: wrap !important; }
+    .flex#{$variant}-nowrap           { flex-wrap: nowrap !important; }
+    .flex#{$variant}-wrap-reverse     { flex-wrap: wrap-reverse !important; }
 
     .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
     .flex#{$variant}-justify-end      { justify-content: flex-end !important; }

package/utilities/index.scss

@@ -1,14 +1,14 @@
-@import "../support/index.scss";
+@import '../support/index.scss';
 // utilities
-@import "./animations.scss";
-@import "./borders.scss";
-@import "./box-shadow.scss";
-@import "./colors.scss";
-@import "./details.scss";
-@import "./flexbox.scss";
-@import "./layout.scss";
-@import "./margin.scss";
-@import "./padding.scss";
-@import "./typography.scss";
+@import './animations.scss';
+@import './borders.scss';
+@import './box-shadow.scss';
+@import './colors.scss';
+@import './details.scss';
+@import './flexbox.scss';
+@import './layout.scss';
+@import './margin.scss';
+@import './padding.scss';
+@import './typography.scss';
 // Visibility and display should always come last in the imports so that they override other utilities with !important
-@import "./visibility-display.scss";
+@import './visibility-display.scss';

package/utilities/layout.scss

@@ -1,7 +1,7 @@
 // Layout
-// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
-// Loop through the breakpoint values
+/* Position */
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @each $position in $responsive-positions {
@@ -12,14 +12,19 @@
   }
 }
 
-/* Set top 0 */
-.top-0    { top: 0 !important; }
-/* Set right 0 */
-.right-0  { right: 0 !important; }
-/* Set bottom 0 */
-.bottom-0 { bottom: 0 !important; }
-/* Set left 0 */
-.left-0   { left: 0 !important; }
+/* Final position */
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    .top#{$variant}-0 { top: 0 !important; }
+    .right#{$variant}-0 { right: 0 !important; }
+    .bottom#{$variant}-0 { bottom: 0 !important; }
+    .left#{$variant}-0 { left: 0 !important; }
+    .top#{$variant}-auto { top: auto !important; }
+    .right#{$variant}-auto { right: auto !important; }
+    .bottom#{$variant}-auto { bottom: auto !important; }
+    .left#{$variant}-auto { left: auto !important; }
+  }
+}
 
 /* Vertical align middle */
 .v-align-middle      { vertical-align: middle !important; }
@@ -35,10 +40,14 @@
 .v-align-baseline    { vertical-align: baseline !important; }
 
 // Overflow utilities
-@each $overflow in (visible, hidden, auto, scroll) {
-  .overflow-#{$overflow} { overflow: $overflow !important; }
-  .overflow-x-#{$overflow} { overflow-x: $overflow !important; }
-  .overflow-y-#{$overflow} { overflow-y: $overflow !important; }
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    @each $overflow in (visible, hidden, auto, scroll) {
+      .overflow#{$variant}-#{$overflow}   { overflow: $overflow !important; }
+      .overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow !important; }
+      .overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow !important; }
+    }
+  }
 }
 
 // Clear floats

package/utilities/margin.scss

@@ -5,33 +5,44 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
-      /* Set a $size margin to all sides at $breakpoint */
-      .m#{$variant}-#{$scale}  { margin: $size !important; }
+    @each $scale, $size in $spacer-map-extended {
+      @if ($scale < length($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 */
       .mt#{$variant}-#{$scale} { margin-top: $size !important; }
-      /* Set a $size margin on the right at $breakpoint */
-      .mr#{$variant}-#{$scale} { margin-right: $size !important; }
       /* Set a $size margin on the bottom at $breakpoint */
       .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
-      /* Set a $size margin on the left at $breakpoint */
-      .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+
+      @if ($scale < length($spacer-map)) {
+        /* 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 */
+        .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+      }
 
       @if ($size != 0) {
         /* Set a negative $size margin on top at $breakpoint */
-        .mt#{$variant}-n#{$scale} { margin-top   : -$size !important; }
-        /* Set a negative $size margin on the right at $breakpoint */
-        .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
+        .mt#{$variant}-n#{$scale} { margin-top: -$size !important; }
         /* Set a negative $size margin on the bottom at $breakpoint */
         .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
-        /* Set a negative $size margin on the left at $breakpoint */
-        .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
+
+        @if ($scale < length($spacer-map)) {
+          /* Set a negative $size margin on the right at $breakpoint */
+          .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
+          /* Set a negative $size margin on the left at $breakpoint */
+          .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
+        }
       }
 
-      /* Set a $size margin on the left & right at $breakpoint */
-      .mx#{$variant}-#{$scale} {
-        margin-right: $size !important;
-        margin-left: $size !important;
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size margin on the left & right at $breakpoint */
+        .mx#{$variant}-#{$scale} {
+          margin-right: $size !important;
+          margin-left: $size !important;
+        }
       }
 
       /* Set a $size margin on the top & bottom at $breakpoint */
@@ -48,3 +59,10 @@
     }
   }
 }
+
+.m-auto { margin: auto !important; }
+
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }

package/utilities/padding.scss

@@ -1,13 +1,16 @@
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
 // Responsive padding spacer utilities
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
-    @each $scale, $size in $spacer-map {
-      /* Set a $size padding to all sides at $breakpoint */
-      .p#{$variant}-#{$scale}  { padding: $size !important; }
+    @each $scale, $size in $spacer-map-extended {
+      @if ($scale < length($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 */
       .pt#{$variant}-#{$scale} { padding-top: $size !important; }
       /* Set a $size padding to the right at $breakpoint */
@@ -17,10 +20,12 @@
       /* Set a $size padding to the left at $breakpoint */
       .pl#{$variant}-#{$scale} { padding-left: $size !important; }
 
-      /* Set a $size padding to the left & right at $breakpoint */
-      .px#{$variant}-#{$scale} {
-        padding-right: $size !important;
-        padding-left: $size !important;
+      @if ($scale < length($spacer-map)) {
+        /* Set a $size padding to the left & right at $breakpoint */
+        .px#{$variant}-#{$scale} {
+          padding-right: $size !important;
+          padding-left: $size !important;
+        }
       }
 
       /* Set a $size padding to the top & bottom at $breakpoint */

package/utilities/typography.scss

@@ -1,4 +1,4 @@
-// stylelint-disable block-closing-brace-space-before, comment-empty-line-before
+// stylelint-disable comment-empty-line-before
 
 // Type scale variables found in ../support/lib/variables.scss
 // $h00-size-mobile: 40px;
@@ -154,7 +154,6 @@
   margin-bottom: 30px;
   font-size: $h3-size;
   font-weight: $font-weight-light;
-  color: $text-gray;
 }
 
 // Line-height variations
@@ -192,7 +191,9 @@
 /* Set the font weight to normal */
 .text-normal { font-weight: $font-weight-normal !important; }
 /* Set the font weight to bold */
-.text-bold { font-weight: $font-weight-bold !important;}
+.text-bold { font-weight: $font-weight-bold !important; }
+.text-semibold { font-weight: $font-weight-semibold !important; }
+.text-light { font-weight: $font-weight-light !important; }
 /* Set the font to italic */
 .text-italic { font-style: italic !important; }
 /* Make text uppercase */
@@ -207,7 +208,7 @@
 .ws-normal { white-space: normal !important; }
 
 /* Force long "words" to wrap if they exceed the width of the container */
-.break-word {
+.wb-break-word {
   word-break: break-word !important;
   // this is for backwards compatibility with browsers that don't respect overflow-wrap
   word-wrap: break-word !important;
@@ -228,22 +229,11 @@
 
 .text-emphasized {
   font-weight: $font-weight-bold;
-  color: $text-gray-dark;
 }
 
 // List styles
 .list-style-none { list-style: none !important; }
 
-// Text Shadows
-/* Add a dark text shadow */
-.text-shadow-dark {
-  text-shadow: 0 1px 1px rgba($black, 0.25), 0 1px 25px rgba($black, 0.75);
-}
-/* Add a light text shadow */
-.text-shadow-light {
-  text-shadow: 0 1px 0 rgba($white, 0.5);
-}
-
 /* Set to monospace font */
 .text-mono {
   font-family: $mono-font !important;

package/.browserslistrc

@@ -1,6 +0,0 @@
-> 5%
-last 2 firefox versions
-last 2 chrome versions
-last 2 safari versions
-last 2 edge versions
-ie 11

package/.eslintrc.json

@@ -1,13 +0,0 @@
-{
-  "extends": [
-    "plugin:github/es6",
-    "plugin:github/recommended"
-  ],
-  "env": {
-    "es6": true,
-    "node": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2017
-  }
-}

package/.nowignore

@@ -1,5 +0,0 @@
-.*.sw?
-.changelog/
-dist/
-docs/dist
-docs/public/

package/MIGRATING.md

@@ -1,74 +0,0 @@
-# 12.0.0
-The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app:
-
-## npm
-First, install the new package.
-
-```sh
-npm install --save @primer/css
-```
-
-If you use the `primer` package, all you'll need to do is:
-
-```sh
-npm uninstall --save primer
-```
-
-If you use other packages, such as `primer-utilities`, you will need to uninstall each one by name or use a command line tool like [jq](https://stedolan.github.io/jq/) to list them:
-
-```sh
-jq -r '.dependencies | keys[] | select(.|startswith("primer"))' package.json
-```
-
-And, if you're feeling saucy, uninstall them all by piping that to `xargs npm uninstall`. :sparkles:
-
-## Sass
-There are a couple of things you'll need to change in your Sass setup when migrating to v12. This section is intentionally vague because environments vary wildly between text editors, Sass implementations, and application frameworks. When in doubt, consult the relevant documentation, and feel free to [file an issue][help] if you think that we can help.
-
-### Sass imports
-Generally speaking, all of your Sass `@import` statements can be migrated with the following search-and-replace operations, **in the following order**:
-
-* If you import `primer/index.scss` or `primer`, just replace `primer` with `@primer/css` and you're done!
-* Otherwise...
-    1. Replace `primer-marketing-` with `@primer/css/marketing/`, e.g.
-        * `primer-marketing-buttons/index.scss` becomes `@primer/css/marketing/buttons/index.scss`
-        * `primer-marketing-utilities/index.scss` becomes `@primer/css/marketing/utilities/index.scss`
-    1. Replace `primer-` with `@primer/css/`, e.g.
-        * `primer-markdown/index.scss` becomes `@primer/css/markdown/index.scss`
-        * `primer-utilities/index.scss` becomes `@primer/css/utilities/index.scss`
-    1. Delete `lib/` from every Primer CSS path, e.g.
-        * `primer-forms/lib/form-control.scss` becomes `@primer/css/forms/form-control.scss`
-        * `primer-navigation/lib/subnav.scss` becomes `@primer/css/navigation/subnav.scss`
-
-If your text editor supports search and replace regular expressions, the following patterns should work:
-
-| find | replace |
-| :--- | :--- |
-| `primer-marketing-(\w+)(\/lib)?` | `@primer/css/marketing/$1` |
-| `primer-(\w+)(\/lib)?` | `@primer/css/$1` |
-| `primer\b` | `@primer/css`
-
-#### `primer-migrate`
-You can also use the included [`primer-migrate` script](bin/primer-migrate):
-
-```sh
-npx -p @primer/css primer-migrate path/to/**/*.scss
-```
-
-### Sass include paths
-If you've installed Primer CSS with npm, you very likely already have `node_modules` listed in your Sass `includePaths` option, and you won't need to change anything. :tada:
-
-If you've installed Primer CSS with something _other than_ npm, or you don't know how it was installed, consult the documentation for your setup first, then [let us know][help] if you still can't figure it out.
-
-## Compiled CSS files
-
-The compiled CSS files can be found under `/dist` in case you want to directly link to them.
-
-## Fonts
-The marketing-specific font files published in the [`fonts` directory](https://unpkg.com/primer-marketing-support@2.0.0/fonts/) of `primer-marketing-support@2.0.0` are published in the `fonts` directory of `@primer/css`. If you use these fonts, you'll need to do the following:
-
-1. Update any scripts that copy the `.woff` font files from `node_modules/primer-marketing-support/fonts` into your application to look for them in `node_modules/@primer/css/fonts`.
-1. Update any webpack (or other bundler) resolution rules that look for fonts in `primer-marketing-support/fonts` to look for them in `@primer/css/fonts`.
-1. Customize the [`$marketing-font-path` variable](src/marketing/support/variables.scss#L1) to match the path from which they're served.
-
-[help]: https://github.com/primer/css/issues/new?title=Help!&labels=v12,migration