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

Use color- type

Browse Source
This commit is contained in:
simurai 2020-09-11 16:06:47 +09:00
parent d5b6bc9ded
commit 2dc73e91b1
8 changed files with 55 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/alerts/flash.scss
View File

@ -5,7 +5,7 @@
position: relative;
// stylelint-disable-next-line primer/spacing
padding: 20px $spacer-3;
color: var(--text-primary);
color: var(--color-text-primary);
border-style: $border-style;
border-width: $border-width;
border-radius: $border-radius;
@ -66,48 +66,48 @@
.flash {
// stylelint-disable-next-line primer/colors
background-color: var(--alert-bg);
background-color: var(--color-alert-bg);
// stylelint-disable-next-line primer/borders
border-color: var(--alert-border);
border-color: var(--color-alert-border);
.octicon {
// stylelint-disable-next-line primer/colors
color: var(--alert-icon);
color: var(--color-alert-icon);
}
}
.flash-warn {
// stylelint-disable-next-line primer/colors
background-color: var(--alert-warn-bg);
background-color: var(--color-alert-warn-bg);
// stylelint-disable-next-line primer/borders
border-color: var(--alert-warn-border);
border-color: var(--color-alert-warn-border);
.octicon {
// stylelint-disable-next-line primer/colors
color: var(--alert-warn-icon);
color: var(--color-alert-warn-icon);
}
}
.flash-error {
// stylelint-disable-next-line primer/colors
background-color: var(--alert-error-bg);
background-color: var(--color-alert-error-bg);
// stylelint-disable-next-line primer/borders
border-color: var(--alert-error-border);
border-color: var(--color-alert-error-border);
.octicon {
// stylelint-disable-next-line primer/colors
color: var(--alert-error-icon);
color: var(--color-alert-error-icon);
}
}
.flash-success {
background-color: var(--alert-success-bg);
background-color: var(--color-alert-success-bg);
// stylelint-disable-next-line primer/borders
border-color: var(--alert-success-border);
border-color: var(--color-alert-success-border);
.octicon {
// stylelint-disable-next-line primer/colors
color: var(--alert-success-icon);
color: var(--color-alert-success-icon);
}
}
@ -141,5 +141,5 @@
margin-bottom: 0.8em;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/colors
background-color: var(--alert-warn-bg);
background-color: var(--color-alert-warn-bg);
}

10
src/autocomplete/autocomplete.scss
View File

@ -8,7 +8,7 @@
// stylelint-disable-next-line primer/typography
font-size: 13px;
list-style: none;
background: var(--bg-canvas);
background: var(--color-bg-canvas);
border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium;
@ -23,22 +23,22 @@
padding: $spacer-1 $spacer-2;
overflow: hidden;
font-weight: $font-weight-bold;
color: var(--text-primary);
color: var(--color-text-primary);
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
background-color: var(--bg-canvas);
background-color: var(--color-bg-canvas);
border: 0;
&:hover,
&.selected,
&[aria-selected=true],
&.navigation-focus {
color: var(--text-inverse);
color: var(--color-text-inverse);
text-decoration: none;
background-color: var(--bg-selected);
background-color: var(--color-bg-selected);
// Inherit color on all child elements to ensure enough contrast
* {

12
src/autocomplete/suggester.scss
View File

@ -11,7 +11,7 @@
margin-top: $spacer-4;
list-style: none;
cursor: pointer;
background: var(--bg-canvas);
background: var(--color-bg-canvas);
border: $border;
border-radius: $border-radius;
box-shadow: $box-shadow-medium;
@ -20,11 +20,11 @@
display: block;
padding: $spacer-1 $spacer-2;
font-weight: $font-weight-semibold;
border-bottom: $border-width $border-style var(--border-primary-light);
border-bottom: $border-width $border-style var(--color-border-primary-light);
small {
font-weight: $font-weight-normal;
color: var(--text-secondary);
color: var(--color-text-secondary);
}
&:last-child {
@ -41,12 +41,12 @@
&:hover,
&[aria-selected="true"],
&.navigation-focus {
color: var(--text-inverse);
color: var(--color-text-inverse);
text-decoration: none;
background: var(--bg-selected);
background: var(--color-bg-selected);
small {
color: var(--text-inverse);
color: var(--color-text-inverse);
}
}
}

2
src/avatars/avatar-parent-child.scss
View File

@ -10,7 +10,7 @@
position: absolute;
right: -15%;
bottom: -9%;
background-color: var(--bg-canvas); // For transparent backgrounds
background-color: var(--color-bg-canvas); // For transparent backgrounds
// stylelint-disable-next-line primer/borders
border-radius: $border-radius-1;
// stylelint-disable-next-line primer/box-shadow

20
src/avatars/avatar-stack.scss
View File

@ -21,7 +21,7 @@
.AvatarStack-body {
display: flex;
background: var(--bg-canvas);
background: var(--color-bg-canvas);
.avatar {
position: relative;
@ -32,8 +32,8 @@
box-sizing: content-box;
// stylelint-disable-next-line primer/spacing
margin-right: -11px;
background-color: var(--bg-canvas);
border-right: $border-width $border-style var(--border-white);
background-color: var(--color-bg-canvas);
border-right: $border-width $border-style var(--color-border-white);
// stylelint-disable-next-line primer/borders
border-radius: $border-radius-1;
transition: margin 0.1s ease-in-out;
@ -81,7 +81,7 @@
.avatar.avatar-more {
z-index: 1;
margin-right: 0;
background: var(--bg-secondary);
background: var(--color-bg-secondary);
&::before,
&::after {
@ -91,19 +91,19 @@
content: "";
// stylelint-disable-next-line primer/borders
border-radius: 2px;
outline: $border-width $border-style var(--border-inverse);
outline: $border-width $border-style var(--color-border-inverse);
}
&::before {
width: 17px;
// stylelint-disable-next-line primer/colors
background: var(--avatar-stack-fade-more);
background: var(--color-avatar-stack-fade-more);
}
&::after {
width: 14px;
// stylelint-disable-next-line primer/colors
background: var(--avatar-stack-fade);
background: var(--color-avatar-stack-fade);
}
}
@ -123,7 +123,7 @@
.avatar.avatar-more {
// stylelint-disable-next-line primer/colors
background: var(--avatar-stack-fade);
background: var(--color-avatar-stack-fade);
&::before {
width: 5px;
@ -131,7 +131,7 @@
&::after {
width: 2px;
background: var(--bg-secondary);
background: var(--color-bg-secondary);
}
}
@ -140,6 +140,6 @@
// stylelint-disable-next-line primer/spacing
margin-left: -11px;
border-right: 0;
border-left: $border-width $border-style var(--border-inverse);
border-left: $border-width $border-style var(--color-border-inverse);
}
}

4
src/avatars/circle-badge.scss
View File

@ -4,7 +4,7 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-canvas);
background-color: var(--color-bg-canvas);
border-radius: 50%;
box-shadow: $box-shadow-medium;
}
@ -46,7 +46,7 @@
width: 100%;
content: "";
// stylelint-disable-next-line primer/borders
border-bottom: 2px dashed var(--border-primary);
border-bottom: 2px dashed var(--color-border-primary);
}
.CircleBadge {

6
src/blankslate/blankslate.scss
View File

@ -8,8 +8,8 @@
// stylelint-disable-next-line primer/spacing
padding: 2px 5px 3px;
font-size: $h5-size;
background: var(--bg-canvas);
border: $border-width $border-style var(--border-tertiary);
background: var(--color-bg-canvas);
border: $border-width $border-style var(--color-border-tertiary);
border-radius: $border-radius;
}
@ -24,7 +24,7 @@
margin-bottom: $spacer-2;
margin-left: $spacer-1;
// stylelint-disable-next-line primer/colors
color: var(--blankslate-icon);
color: var(--color-blankslate-icon);
}
.blankslate-capped {

28
src/box/box.scss
View File

@ -2,8 +2,8 @@
// Intended to replace simple-box, boxed-group, and table-list
.Box {
background-color: var(--bg-canvas);
border-color: var(--border-primary);
background-color: var(--color-bg-canvas);
border-color: var(--color-border-primary);
border-width: $border-width;
border-style: $border-style;
border-radius: $border-radius;
@ -76,8 +76,8 @@
padding: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin: (-$border-width) (-$border-width) 0;
background-color: var(--bg-secondary);
border-color: var(--border-primary);
background-color: var(--color-bg-secondary);
border-color: var(--color-border-primary);
border-style: $border-style;
border-width: $border-width;
border-top-left-radius: $border-radius;
@ -91,7 +91,7 @@
.Box-body {
padding: $spacer-3;
border-bottom: $border-width $border-style var(--border-primary);
border-bottom: $border-width $border-style var(--color-border-primary);
// Ensures bottom-border doesn't poke out when .Box-body used without box-footer
&:last-of-type {
@ -110,7 +110,7 @@
list-style-type: none; // To account for applying Box component to a list
border-top-width: $border-width;
border-top-style: $border-style;
border-top-color: var(--border-primary);
border-top-color: var(--color-border-primary);
&:first-of-type {
border-top-left-radius: $border-radius;
@ -146,12 +146,12 @@
// Row dragging styles
&.sortable-chosen {
background-color: var(--bg-primary-light);
background-color: var(--color-bg-primary-light);
}
// Makes dragging row background gray
&.sortable-ghost {
background-color: var(--bg-primary);
background-color: var(--color-bg-primary);
// Hides contents of row while dragging so row looks solid gray
.Box-row--drag-hide {
@ -164,7 +164,7 @@
.Box-row--focus-gray {
&.navigation-focus {
background-color: var(--bg-primary);
background-color: var(--color-bg-primary);
}
}
@ -176,7 +176,7 @@
.Box-row--hover-gray {
&:hover {
background-color: var(--bg-primary);
background-color: var(--color-bg-primary);
}
}
@ -192,11 +192,11 @@
.Box-row-link {
@include breakpoint(md) {
color: var(--text-primary);
color: var(--color-text-primary);
text-decoration: none;
&:hover {
color: var(--text-link-primary);
color: var(--color-text-link-primary);
text-decoration: none;
}
@ -215,7 +215,7 @@
margin-top: -1px; // prevents double border when used with .Box-body
border-top-style: $border-style;
border-top-width: $border-width;
border-top-color: var(--border-primary);
border-top-color: var(--color-border-primary);
}
// Option for a box with scrolling content
@ -282,7 +282,7 @@
}
.Box-row--gray {
background-color: var(--bg-secondary);
background-color: var(--color-bg-secondary);
}
//Box with btn-octicon