primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-02 07:53:06 +03:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/mkt/color-modes-whee' into mkt/color-modes-docs

Browse Source
This commit is contained in:
Michelle Tilley 2020-10-29 10:32:57 -07:00
commit 269807984a
No known key found for this signature in database
GPG Key ID: 810E3A96D4CF00F4
8 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
MIGRATING.md
View File

@ -54,7 +54,8 @@ n/a | `.State--draft`
`.text-green` | `.color-text-success`
`.text-yellow` | `.color-text-warning`
`.text-red` | `.color-text-danger`
`.text-white` | `.color-text-inverse`
`.text-white` | `.color-text-white`
n/a | `.color-text-inverse`
`.text-black` | n/a
`.text-orange` | n/a
`.text-orange-light` | n/a
@ -150,11 +151,12 @@ n/a | `.Link`
`$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-white` (`$white`) | `var(--color-text-inverse)`
`$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

15
docs/content/utilities/colors.mdx
View File

@ -90,18 +90,23 @@ Background colors are most commonly used for filling large blocks of content or
<div class="color-bg-danger mb-2">.color-bg-danger</div>
```
## Inversed colors
## Inversed and permanent colors
⚠️ WIP: Don't use in produciton. They might still change.
You can inverse some of the background colors to add more emphasis. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast. An exception is the `.color-bg-warning-inverse` where the default text color should be used.
You can inverse the canvas background color. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast.
```html live
<div class="color-bg-canvas-inverse color-text-inverse mb-2">.color-bg-canvas-inverse .color-text-inverse</div>
<div class="color-bg-info-inverse color-text-inverse mb-2">.color-bg-info-inverse .color-text-inverse</div>
<div class="color-bg-success-inverse color-text-inverse mb-2">.color-bg-success-inverse .color-text-inverse</div>
```
When using the functional inversed background colors the `.color-text-white` is the better choice as it keeps the text white in all color modes. An exception is the `.color-bg-warning-inverse`.
```html live
<div class="color-bg-info-inverse color-text-white mb-2">.color-bg-info-inverse .color-text-white</div>
<div class="color-bg-success-inverse color-text-white mb-2">.color-bg-success-inverse .color-text-white</div>
<div class="color-bg-warning-inverse mb-2">.color-bg-warning-inverse</div>
<div class="color-bg-danger-inverse color-text-inverse mb-2">.color-bg-danger-inverse .color-text-inverse</div>
<div class="color-bg-danger-inverse color-text-white mb-2">.color-bg-danger-inverse .color-text-white</div>
```
## Border colors

6
package-lock.json generated
View File

@ -2680,9 +2680,9 @@
}
},
"@primer/primitives": {
"version": "0.0.0-60615e1",
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-60615e1.tgz",
"integrity": "sha512-7sb7lZiT9UkYo1hTloU1XwDVA3nzab0r3Bn071H/sPRtH+4ucYtE8yynbs/m2tusloY2c0yrw0/mpDGlhoOVTA=="
"version": "0.0.0-724076c",
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-724076c.tgz",
"integrity": "sha512-PQCgmcNuwFQv0tOBu2BZuRcxR6+vM5vCN5ccC2vTupA9RsjAzB5JO23FKhsRfAQ+z+fCuOHF41cp3HvooS78fQ=="
},
"@reach/router": {
"version": "1.3.3",

2
package.json
View File

@ -41,7 +41,7 @@
},
"dependencies": {
"@primer/octicons": "^9.1.1",
"@primer/primitives": "0.0.0-60615e1"
"@primer/primitives": "0.0.0-724076c"
},
"devDependencies": {
"@octokit/rest": "^16.34.0",

2
src/navigation/subnav.scss
View File

@ -89,8 +89,6 @@
.subnav-search-context {
.btn {
// stylelint-disable-next-line primer/colors
color: var(--color-auto-gray-7);
border-top-right-radius: 0;
border-bottom-right-radius: 0;

2
src/support/variables/colors.scss
View File

@ -47,7 +47,7 @@ $bg-yellow-dark: $yellow-700 !default;
// Text colors
$text-black: $black !default;
$text-white: var(--color-text-inverse) !default; // $white
$text-white: var(--color-text-white) !default; // $white
$text-blue: var(--color-text-link) !default; // $blue-500
$text-gray-dark: var(--color-text-primary) !default; // $gray-900
$text-gray-light: var(--color-text-tertiary) !default; // $gray-500

6
src/timeline/timeline-item.scss
View File

@ -40,6 +40,12 @@
border-radius: 50%;
justify-content: center;
flex-shrink: 0;
&--success {
color: var(--color-text-white);
background-color: var(--color-btn-primary-bg);
border: $border-width $border-style var(--color-merge-box-success-indicator-border);
}
}
.TimelineItem-body {

1
src/utilities/colors.scss
View File

@ -9,6 +9,7 @@
.color-text-warning { color: var(--color-text-warning) !important; }
.color-text-danger { color: var(--color-text-danger) !important; }
.color-text-inverse { color: var(--color-text-inverse) !important; }
.color-text-white { color: var(--color-text-white) !important; }
// Icon colors
.color-icon-primary { color: var(--color-icon-primary) !important; } // stylelint-disable-line primer/colors