Merge branch 'mkt/color-modes-whee' into mkt/color-modes-docs

MIGRATING.md

@@ -1,265 +1,3 @@
-# 16.0.0
-In `v16` three major changes happened:
-
-1. All colors got moved to [primer/primitives](https://github.com/primer/primitives). This lets us use the same Primer colors across different libraries.
-2. The naming of the variables changed from presentational to functional names, like `text-gray-dark` became `text-primary` so that they still make sense in different color modes.
-3. Primer CSS switched from using SASS variables to CSS variables (for now only colors). By using CSS variables, components and utility classes can now switch between different color modes at runtime.
-
-Below a migration guide when updating Primer CSS to `16.0.0`:
-
-## Components
-
-Most components don't need to be updated and should work without making changes. But some of the componets that use presentational class names now use functional class names.
-
-### Labels
-
-[`v15`](https://primer.style/css/components/labels) | `v16`
---- | ---
-`.Label--gray-darker`  | `.Label--primary`
-`.Label--gray`         | `.Label--secondary`
-`.Label--blue`         | `.Label--info`
-`.Label--green`        | `.Label--success`
-`.Label--yellow`       | `.Label--warning`
-`.Label--red`          | `.Label--danger`
-`.Label--orange`       | n/a
-`.Label--purple`       | n/a
-`.Label--pink`         | n/a
-
-### Counters
-
-[`v15`](https://primer.style/css/components/labels#counters) | `v16`
---- | ---
-`.Counter--gray`        | `.Counter--primary`
-`.Counter--gray-light`  | `.Counter--secondary`
-
-### States
-
-[`v15`](https://primer.style/css/components/labels#states) | `v16`
---- | ---
-n/a              | `.State--draft`
-`.State--green`  | `.State--open`
-`.State--purple` | `.State--merged`
-`.State--red`    | `.State--closed`
-
-## Utility classes
-
-### Text
-
-[`v15`](https://primer.style/css/utilities/colors#text-color-utilities) | `v16`
---- | ---
-`.text-gray-dark`         | `.color-text-primary`
-`.text-gray`              | `.color-text-secondary`
-`.text-gray-light`        | `.color-text-tertiary`
-`.text-blue`              | `.color-text-link`
-`.text-green`             | `.color-text-success`
-`.text-yellow`            | `.color-text-warning`
-`.text-red`               | `.color-text-danger`
-`.text-white`             | `.color-text-white`
-n/a                       | `.color-text-inverse`
-`.text-black`             | n/a
-`.text-orange`            | n/a
-`.text-orange-light`      | n/a
-`.text-purple`            | n/a
-`.text-pink`              | n/a
-
-### Icon
-
-`v15` | `v16`
---- | ---
-n/a | `.color-icon-primary`
-n/a | `.color-icon-secondary`
-n/a | `.color-icon-tertiary`
-n/a | `.color-icon-info`
-n/a | `.color-icon-success`
-n/a | `.color-icon-warning`
-n/a | `.color-icon-danger`
-
-### Border
-
-[`v15`](https://primer.style/css/utilities/borders#border-color-utilities) | `v16`
---- | ---
-`.border-gray`          | `.color-border-primary`
-`.border-gray-light`    | `.color-border-secondary`
-`.border-gray-dark`     | `.color-border-tertiary`
-`.border-blue`          | `.color-border-info`
-`.border-green`         | `.color-border-success`
-`.border-yellow`        | `.color-border-warning`
-`.border-red`           | `.color-border-danger`
-`.border-white`         | `.color-border-inverse`
-n/a                     | `.color-border-overlay`
-`.border-gray-darker`   | n/a
-`.border-blue-light`    | n/a
-`.border-red-light`     | n/a
-`.border-purple`        | n/a
-`.border-black-fade`    | n/a
-`.border-white-fade`    | n/a
-`.border-white-fade-15` | n/a
-`.border-white-fade-30` | n/a
-`.border-white-fade-50` | n/a
-`.border-white-fade-70` | n/a
-`.border-white-fade-85` | n/a
-
-### Background
-
-[`v15`](https://primer.style/css/utilities/colors#background-utilities) | `v16`
---- | ---
-`.bg-white`        | `.color-bg-primary`
-`.bg-gray-light`   | `.color-bg-secondary`
-`.bg-gray`         | `.color-bg-tertiary`
-`.bg-gray-dark`    | `.color-bg-canvas-inverse`
-`.bg-blue-light`   | `.color-bg-info`
-`.bg-blue`         | `.color-bg-info-inverse`
-`.bg-green-light`  | `.color-bg-success`
-`.bg-green`        | `.color-bg-success-inverse`
-`.bg-yellow-light` | `.color-bg-warning`
-`.bg-yellow`       | `.color-bg-warning-inverse`
-`.bg-red-light`    | `.color-bg-danger`
-`.bg-red`          | `.color-bg-danger-inverse`
-n/a                | `.color-bg-canvas`
-n/a                | `.color-bg-canvas-inset`
-n/a                | `.color-bg-overlay`
-`.bg-purple-light` | n/a
-`.bg-purple`       | n/a
-`.bg-yellow-dark`  | n/a
-`.bg-orange`       | n/a
-`.bg-pink`         | n/a
-
-### Shadow
-
-`v15` | `v16`
---- | ---
-`.box-shadow`               | `.color-shadow-small`
-`.box-shadow-medium`        | `.color-shadow-medium`
-`.box-shadow-large`         | `.color-shadow-large`
-`.box-shadow-extra-large`   | `.color-shadow-extra-large`
-
-### Link
-
-The `link` utilities are part of the `Link` component.
-
-[`v15`](https://primer.style/css/utilities/colors##link-colors) | `v16`
---- | ---
-`.link-gray-dark`         | `.Link--primary`
-`.link-gray`              | `.Link--secondary`
-`.muted-link`             | `.Link--muted`
-`.link-hover-blue`        | `.Link--onHover`
-n/a                       | `.Link`
-
-## Variables
-
-### Text
-
-`v15` | `v16`
---- | ---
-`$text-gray-dark` (`$gray-900`)         | `var(--color-text-primary)`
-`$text-gray` (`$gray-600`)              | `var(--color-text-secondary)`
-`$text-gray-light` (`$gray-500`)        | `var(--color-text-tertiary)`
-`$text-blue` (`$blue-500`)              | `var(--color-text-link)`
-`$text-green` (`$green-600`)            | `var(--color-text-success)`
-`$text-red` (`$red-600`)                | `var(--color-text-danger)`
-`$text-yellow` (`$yellow-800`)          | `var(--color-text-warning)`
-`$text-white` (`$white`)                | `var(--color-text-white)`
-n/a                                     | `var(--color-text-inverse)`
-n/a                                     | `var(--color-text-placeholder)`
-n/a                                     | `var(--color-text-disabled)`
-`$text-black` (`$black`)                | n/a
-`$text-orange` (`$orange-900`)          | n/a
-`$text-orange-light` (`$orange-600`)    | n/a
-`$text-purple` (`$purple-500`)          | n/a
-`$text-pink` (`$pink-500`)              | n/a
-
-### Icon
-
-`v15` | `v16`
---- | ---
-n/a                                     | `var(--color-icon-primary)`
-n/a                                     | `var(--color-icon-secondary)`
-n/a                                     | `var(--color-icon-tertiary)`
-n/a                                     | `var(--color-icon-info)`
-n/a                                     | `var(--color-icon-danger)`
-n/a                                     | `var(--color-icon-success)`
-n/a                                     | `var(--color-icon-warning)`
-
-### Border
-
-`v15` | `v16`
---- | ---
-`$border-color` (`$gray-200`)                   | `var(--color-border-primary)`
-`$border-gray` (`$gray-200`)                    | `var(--color-border-primary)`
-`$border-gray-light` (`lighten($gray-200, 3%)`) | `var(--color-border-secondary)`
-`$border-gray-dark` (`$gray-300`)               | `var(--color-border-tertiary)`
-`$border-white` (`$white`)                      | `var(--color-border-inverse)`
-`$border-blue` (`$blue-500`)                    | `var(--color-border-info)`
-`$border-green` (`$green-400`)                  | `var(--color-border-success)`
-`$border-red` (`$red-500`)                      | `var(--color-border-danger)`
-`$border-yellow` (`$yellow-600`)                | `var(--color-border-warning)`
-n/a                                             | `var(--color-border-overlay)`
-`$border-gray-darker` (`$gray-700`)     | n/a
-`$border-blue-light` (`$blue-200`)      | n/a
-`$border-red-light` (`$red-300`)        | n/a
-`$border-purple` (`$purple-500`)        | n/a
-`$border-black-fade` (`$black-fade-15`) | n/a
-`$border-white-fade` (`$white-fade-15`) | n/a
-`$border-green-light` (`desaturate($green-300, 40%)`) | n/a
-
-### Background
-
-`v15` | `v16`
---- | ---
-`$bg-white`        (`$white`)       | `var(--color-bg-primary)`
-`$bg-gray-light`   (`$gray-000`)    | `var(--color-bg-secondary)`
-`$bg-gray`         (`$gray-100`)    | `var(--color-bg-tertiary)`
-`$bg-gray-dark`    (`$gray-900`)    | `var(--color-bg-canvas-inverse)`
-`$bg-red`          (`$red-500`)     | `var(--color-bg-danger-inverse)`
-`$bg-red-light`    (`$red-000`)     | `var(--color-bg-danger)`
-`$bg-green`        (`$green-500`)   | `var(--color-bg-success-inverse)`
-`$bg-green-light`  (`$green-100`)   | `var(--color-bg-success)`
-`$bg-blue`         (`$blue-500`)    | `var(--color-bg-info-inverse)`
-`$bg-blue-light`   (`$blue-000`)    | `var(--color-bg-info)`
-`$bg-yellow`       (`$yellow-500`)  | `var(--color-bg-warning-inverse)`
-`$bg-yellow-light` (`$yellow-200`)  | `var(--color-bg-warning)`
-n/a                                 | `var(--color-bg-canvas)`
-n/a                                 | `var(--color-bg-canvas-inset)`
-n/a                                 | `var(--color-bg-overlay)`
-`$bg-black` (`$black`)              | n/a
-`$bg-black-fade` (`$black-fade-50`) | n/a
-`$bg-orange` (`$orange-700`)        | n/a
-`$bg-purple` (`$purple-500`)        | n/a
-`$bg-purple-light` (`$purple-000`)  | n/a
-`$bg-pink` (`$pink-500`)            | n/a
-`$bg-yellow-dark` (`$yellow-700`)   | n/a
-
-### Shadow
-
-`v15` | `v16`
---- | ---
-`$box-shadow`               | `var(--color-shadow-small)`
-`$box-shadow-medium`        | `var(--color-shadow-medium)`
-`$box-shadow-large`         | `var(--color-shadow-large)`
-`$box-shadow-extra-large`   | `var(--color-shadow-extra-large)`
-`$box-shadow-highlight`     | `var(--color-shadow-highlight)`
-`$box-shadow-inset`         | `var(--color-shadow-inset)`
-`$box-shadow-focus`         | `var(--color-state-focus-shadow)`
-
-## Color System
-
-`v15` | `v16`
---- | ---
-`$black` | `var(--color-scale-black)`
-`$white` | `var(--color-scale-white)`
-`$gray-000` | `var(--color-scale-gray-0)`
-`$gray-100` | `var(--color-scale-gray-1)`
-`$gray-200` | `var(--color-scale-gray-2)`
-... | ...
-`$pink-700` | `var(--color-scale-pink-7)`
-`$pink-800` | `var(--color-scale-pink-8)`
-`$pink-900` | `var(--color-scale-pink-9)`
-
----
-
-Happy migrating!
-
-
 # 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:
 

docs/package.json

@@ -12,7 +12,7 @@
     "@babel/preset-react": "^7.10.4",
     "@loadable/component": "^5.10.2",
     "@primer/components": "^17.1.0",
-    "@primer/gatsby-theme-doctocat": "^1.1.0",
+    "@primer/gatsby-theme-doctocat": "^1.2.0",
     "@primer/octicons": "^11.0.0",
     "@primer/octicons-react": "^11.0.0",
     "@svgr/webpack": "^4.3.2",

package.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@primer/octicons": "^9.1.1",
-    "@primer/primitives": "0.0.0-2020101182750"
+    "@primer/primitives": "0.0.0-2020114231048"
   },
   "devDependencies": {
     "@octokit/rest": "^16.34.0",

src/avatars/avatar.scss

@@ -3,6 +3,7 @@
   overflow: hidden; // Ensure page layout in Firefox should images fail to load
   line-height: $lh-condensed-ultra;
   vertical-align: middle;
+  background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 0 1px var(--color-avatar-border);

src/base/modes.scss

@@ -12,9 +12,9 @@
   @include primer-colors-light;
 }
 
-// @include color-mode(dark) {
+@include color-mode(dark) {
-//   @include primer-colors-dark;
+  @include primer-colors-dark;
-// }
+}
 
 // Color mode boundaries
 // Enables nesting of different color modes
@@ -27,5 +27,5 @@
 // color-scheme
 // Enables color modes for native elements
 
-[data-color-mode="light"] { color-scheme: light; }
+@include color-mode(light) { color-scheme: light; }
-[data-color-mode="dark"] { color-scheme: dark; }
+@include color-mode(dark) { color-scheme: dark; }

src/box/box.scss

@@ -211,6 +211,7 @@
   border-top-color: var(--color-border-primary);
   border-top-style: $border-style;
   border-top-width: $border-width;
+  border-radius: 0 0 $border-radius $border-radius;
 }
 
 // Option for a box with scrolling content

src/buttons/misc.scss

@@ -52,6 +52,12 @@
     outline: none;
     box-shadow: none;
   }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled=true] {
+    background-color: transparent;
+  }
 }
 
 // Octicon button

src/forms/form-select.scss

@@ -7,10 +7,11 @@
   height: $size-5;
   padding-right: $spacer-4;
   background-color: var(--color-bg-primary);
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC");
+  // SVG with fill: #586069 (--color-icon-secondary)
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");
   background-repeat: no-repeat;
-  background-position: right 8px center;
+  background-position: right 4px center;
-  background-size: 8px 10px;
+  background-size: 16px;
   appearance: none;
 
   // Hides the default caret in IE11
@@ -23,6 +24,13 @@
   }
 }
 
+@include color-mode(dark) {
+  .form-select {
+    // SVG with fill: #6e7681 (--color-icon-secondary)
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzZlNzY4MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");
+  }
+}
+
 .select-sm {
   height: $size-4;
   // stylelint-disable-next-line primer/spacing

src/forms/form-validation.scss

@@ -257,7 +257,6 @@ dl.form-group > dd, // TODO: Deprecate
 
 .write-content {
   position: relative;
-  background: var(--color-previewable-comment-form-bg);
 }
 
 // Form style with a write and a preview tab

src/labels/labels.scss

@@ -76,7 +76,7 @@
 }
 
 .Label--gray-darker {
-  color: var(--color-auto-gray-9); // stylelint-disable-line primer/colors
+  color: var(--color-text-primary);
   border-color: var(--color-auto-gray-5); // stylelint-disable-line primer/borders
 }
 
@@ -88,13 +88,13 @@
 }
 
 .Label--orange {
-  color: var(--color-auto-orange-8); // stylelint-disable-line primer/colors
+  color: var(--color-label-orange-text);
-  border-color: var(--color-auto-orange-5); // stylelint-disable-line primer/borders
+  border-color: var(--color-label-orange-border);
 }
 
 .Label--red {
-  color: var(--color-auto-red-5); // stylelint-disable-line primer/colors
+  color: var(--color-label-danger-text);
-  border-color: var(--color-auto-red-6); // stylelint-disable-line primer/borders
+  border-color: var(--color-label-danger-border);
 }
 
 .Label--outline-green, // TODO: Deprecate

src/navigation/filter-list.scss

@@ -43,8 +43,8 @@
   &.selected,
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
-    color: var(--color-state-hover-primary-text);
+    color: var(--color-state-selected-primary-text);
-    background-color: var(--color-bg-info-inverse);
+    background-color: var(--color-state-selected-primary-bg);
   }
 
   .count {

src/navigation/subnav.scss

@@ -43,10 +43,9 @@
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     z-index: 2;
-    color: var(--color-state-hover-primary-text);
+    color: var(--color-state-selected-primary-text);
-    background-color: var(--color-bg-info-inverse);
+    background-color: var(--color-state-selected-primary-bg);
-    // stylelint-disable-next-line primer/borders
+    border-color: var(--color-state-selected-primary-border);
-    border-color: var(--color-auto-blue-6);
   }
 
   &:first-child {

src/navigation/tabnav.scss

@@ -31,7 +31,7 @@
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     color: var(--color-text-primary);
-    background-color: var(--color-tabnav-selected-bg);
+    background-color: var(--color-bg-canvas); // cover bottom border
     border-color: var(--color-border-primary);
     border-radius: $border-radius $border-radius 0 0;
 

src/navigation/underline-nav.scss

@@ -77,6 +77,10 @@
 .UnderlineNav .Counter {
   margin-left: $spacer-1;
   color: var(--color-underlinenav-counter-text);
+
+  &--primary {
+    color: var(--color-counter-primary-text);
+  }
 }
 
 .UnderlineNav-container {

src/tooltips/tooltips.scss

@@ -10,7 +10,7 @@
   padding: $em-spacer-5 $em-spacer-6;
   font: normal normal 11px/1.5 $body-font;
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--color-text-inverse);
+  color: var(--color-tooltip-text);
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -20,7 +20,7 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: var(--color-bg-canvas-inverse);
+  background: var(--color-tooltip-bg);
   border-radius: $border-radius;
   opacity: 0;
 }
@@ -32,7 +32,7 @@
   display: none;
   width: 0;
   height: 0;
-  color: var(--color-bg-canvas-inverse); // stylelint-disable-line primer/colors
+  color: var(--color-tooltip-bg); // stylelint-disable-line primer/colors
   pointer-events: none;
   content: "";
   // stylelint-disable-next-line primer/borders
@@ -102,7 +102,7 @@
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
     // stylelint-disable-next-line primer/borders
-    border-bottom-color: var(--color-bg-canvas-inverse);
+    border-bottom-color: var(--color-tooltip-bg);
   }
 }
 
@@ -136,7 +136,7 @@
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
     // stylelint-disable-next-line primer/borders
-    border-top-color: var(--color-bg-canvas-inverse);
+    border-top-color: var(--color-tooltip-bg);
   }
 }
 
@@ -175,7 +175,7 @@
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
     // stylelint-disable-next-line primer/borders
-    border-left-color: var(--color-bg-canvas-inverse);
+    border-left-color: var(--color-tooltip-bg);
   }
 }
 
@@ -196,7 +196,7 @@
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
     // stylelint-disable-next-line primer/borders
-    border-right-color: var(--color-bg-canvas-inverse);
+    border-right-color: var(--color-tooltip-bg);
   }
 }