primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 13:12:16 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michelle Tilley 2020-12-14 11:03:41 -08:00
commit 0826721923
No known key found for this signature in database
GPG Key ID: 810E3A96D4CF00F4
17 changed files with 3408 additions and 2001 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
MIGRATING.md
View File

@ -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:

1733
docs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
docs/package.json
View File

@ -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",

3336
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -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",

1
src/avatars/avatar.scss
View File

@ -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);

10
src/base/modes.scss
View File

@ -12,9 +12,9 @@
@include primer-colors-light;
}
// @include color-mode(dark) {
// @include primer-colors-dark;
// }
@include color-mode(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; }
[data-color-mode="dark"] { color-scheme: dark; }
@include color-mode(light) { color-scheme: light; }
@include color-mode(dark) { color-scheme: dark; }

1
src/box/box.scss
View File

@ -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

6
src/buttons/misc.scss
View File

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

14
src/forms/form-select.scss
View File

@ -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-size: 8px 10px;
background-position: right 4px center;
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

1
src/forms/form-validation.scss
View File

@ -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

10
src/labels/labels.scss
View File

@ -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
border-color: var(--color-auto-orange-5); // stylelint-disable-line primer/borders
color: var(--color-label-orange-text);
border-color: var(--color-label-orange-border);
}
.Label--red {
color: var(--color-auto-red-5); // stylelint-disable-line primer/colors
border-color: var(--color-auto-red-6); // stylelint-disable-line primer/borders
color: var(--color-label-danger-text);
border-color: var(--color-label-danger-border);
}
.Label--outline-green, // TODO: Deprecate

4
src/navigation/filter-list.scss
View File

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

7
src/navigation/subnav.scss
View File

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

2
src/navigation/tabnav.scss
View File

@ -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;

4
src/navigation/underline-nav.scss
View File

@ -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 {

14
src/tooltips/tooltips.scss
View File

@ -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);
}
}