primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity

Replace $text-white with --color-text-inverse

Browse Source
This commit is contained in:
simurai 2020-09-15 22:24:59 +09:00
parent 7e7ff73c63
commit e315113037
13 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
MIGRATING.md
View File

@ -24,6 +24,7 @@ In `v16` we're moving all colors to [primer/primitives](https://github.com/prime
`$text-blue` | `var(--color-text-link-primary)`
`$text-green` | `var(--color-text-success)`
`$text-red` | `var(--color-text-danger)`
`$text-white` | `var(--color-text-inverse)`
**Border** |
`$border-color` | `var(--color-border-primary)`
`$border` | `$border-width $border-style var(--color-border-primary)`

12
src/buttons/button.scss
View File

@ -122,7 +122,7 @@
$shadow-btn-primary-color: $green-900;
$shadow-btn-primary: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
color: $text-white;
color: var(--color-text-inverse);
background-color: $bg-default;
// stylelint-disable-next-line primer/borders
border-color: rgba($black, 0.15);
@ -146,7 +146,7 @@
&.disabled,
&[aria-disabled=true] {
// stylelint-disable-next-line primer/colors
color: rgba($text-white, 0.8);
color: rgba(var(--color-text-inverse), 0.8);
background-color: $bg-disabled;
// stylelint-disable-next-line primer/borders
border-color: rgba($black, 0.1);
@ -167,7 +167,7 @@
.octicon {
// stylelint-disable-next-line primer/colors
color: rgba($text-white, 0.8);
color: rgba(var(--color-text-inverse), 0.8);
}
}
@ -179,7 +179,7 @@
&:hover,
[open] > & {
color: $text-white;
color: var(--color-text-inverse);
background-color: $bg-hover;
border-color: rgba($black, 0.15);
box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
@ -196,7 +196,7 @@
&:active,
&.selected,
&[aria-selected=true] {
color: $text-white;
color: var(--color-text-inverse);
background-color: $bg-active;
border-color: rgba($black, 0.15);
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
@ -252,7 +252,7 @@
//
.btn-blue {
@include btn-solid(
$text-white,
var(--color-text-inverse),
lighten($blue-500, 8%),
darken($blue-500, 2%)
);

2
src/buttons/misc.scss
View File

@ -142,7 +142,7 @@
}
&:active {
color: $text-white;
color: var(--color-text-inverse);
// stylelint-disable-next-line primer/colors
background-color: $blue-400;
}

4
src/dropdown/dropdown.scss
View File

@ -81,7 +81,7 @@
&:focus,
&:hover {
color: $text-white;
color: var(--color-text-inverse);
text-decoration: none;
background-color: $bg-blue;
outline: none;
@ -261,7 +261,7 @@
// Dark dropdowns
.dropdown-menu-dark {
color: $text-white;
color: var(--color-text-inverse);
// stylelint-disable-next-line primer/colors
background: $gray-800;
border-color: $border-gray-darker;

2
src/forms/form-control.scss
View File

@ -68,7 +68,7 @@ textarea.form-control {
// Inputs to be used against dark backgrounds.
.input-dark {
color: $text-white;
color: var(--color-text-inverse);
// stylelint-disable-next-line primer/colors
background-color: $white-fade-15;
border-color: transparent;

2
src/header/header.scss
View File

@ -25,7 +25,7 @@
.Header-link {
font-weight: $font-weight-bold;
color: $text-white;
color: var(--color-text-inverse);
white-space: nowrap;
&:hover,

2
src/labels/counters.scss
View File

@ -31,7 +31,7 @@
}
.Counter--gray {
color: $text-white;
color: var(--color-text-inverse);
// stylelint-disable-next-line primer/colors
background-color: $gray-500;
}

2
src/labels/states.scss
View File

@ -18,7 +18,7 @@
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: $text-white;
color: var(--color-text-inverse);
text-align: center;
white-space: nowrap;
// stylelint-disable-next-line primer/colors

4
src/marketing/buttons/button.scss
View File

@ -3,7 +3,7 @@
padding: $spacer-3 $spacer-4;
font-size: $h5-size;
font-weight: $font-weight-semibold;
color: $text-white;
color: var(--color-text-inverse);
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
@ -87,7 +87,7 @@
}
.btn-transparent {
color: $text-white;
color: var(--color-text-inverse);
background-color: transparent;
background-image: none;
// stylelint-disable-next-line primer/borders

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

@ -15,7 +15,7 @@
background-color: transparent;
&.pjax-active {
color: $text-white;
color: var(--color-text-inverse);
background-color: $bg-blue;
}
}
@ -43,7 +43,7 @@
&.selected,
&[aria-selected=true],
&[aria-current]:not([aria-current=false]) {
color: $text-white;
color: var(--color-text-inverse);
background-color: $bg-blue;
}

2
src/navigation/subnav.scss
View File

@ -43,7 +43,7 @@
&[aria-selected=true],
&[aria-current]:not([aria-current=false]) {
z-index: 2;
color: $text-white;
color: var(--color-text-inverse);
background-color: $bg-blue;
// stylelint-disable-next-line primer/borders
border-color: $blue-600;

2
src/pagination/pagination.scss
View File

@ -43,7 +43,7 @@
.current,
.current:hover,
[aria-current]:not([aria-current=false]) {
color: $text-white;
color: var(--color-text-inverse);
background-color: $bg-blue;
border-color: transparent;
}

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

@ -41,7 +41,6 @@ $bg-yellow-dark: $yellow-700 !default;
// Text colors
$text-black: $black !default;
$text-white: $white !default;
$text-orange: $orange-900 !default;
$text-orange-light: $orange-600 !default;
$text-purple: $purple !default;
@ -60,3 +59,4 @@ $text-gray-light: $gray-500 !default;
$text-blue: $blue-500 !default;
$text-green: $green-600 !default;
$text-red: $red-600 !default;
$text-white: $white !default;