primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +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; position: relative;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 20px $spacer-3; padding: 20px $spacer-3;
color: var(--text-primary); color: var(--color-text-primary);
border-style: $border-style; border-style: $border-style;
border-width: $border-width; border-width: $border-width;
border-radius: $border-radius; border-radius: $border-radius;
@ -66,48 +66,48 @@
.flash { .flash {
// stylelint-disable-next-line primer/colors // stylelint-disable-next-line primer/colors
background-color: var(--alert-bg); background-color: var(--color-alert-bg);
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border-color: var(--alert-border); border-color: var(--color-alert-border);
.octicon { .octicon {
// stylelint-disable-next-line primer/colors // stylelint-disable-next-line primer/colors
color: var(--alert-icon); color: var(--color-alert-icon);
} }
} }
.flash-warn { .flash-warn {
// stylelint-disable-next-line primer/colors // 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 // stylelint-disable-next-line primer/borders
border-color: var(--alert-warn-border); border-color: var(--color-alert-warn-border);
.octicon { .octicon {
// stylelint-disable-next-line primer/colors // stylelint-disable-next-line primer/colors
color: var(--alert-warn-icon); color: var(--color-alert-warn-icon);
} }
} }
.flash-error { .flash-error {
// stylelint-disable-next-line primer/colors // 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 // stylelint-disable-next-line primer/borders
border-color: var(--alert-error-border); border-color: var(--color-alert-error-border);
.octicon { .octicon {
// stylelint-disable-next-line primer/colors // stylelint-disable-next-line primer/colors
color: var(--alert-error-icon); color: var(--color-alert-error-icon);
} }
} }
.flash-success { .flash-success {
background-color: var(--alert-success-bg); background-color: var(--color-alert-success-bg);
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border-color: var(--alert-success-border); border-color: var(--color-alert-success-border);
.octicon { .octicon {
// stylelint-disable-next-line primer/colors // 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; margin-bottom: 0.8em;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/colors // 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 // stylelint-disable-next-line primer/typography
font-size: 13px; font-size: 13px;
list-style: none; list-style: none;
background: var(--bg-canvas); background: var(--color-bg-canvas);
border-radius: $border-radius; border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium; box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium;
@ -23,22 +23,22 @@
padding: $spacer-1 $spacer-2; padding: $spacer-1 $spacer-2;
overflow: hidden; overflow: hidden;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
color: var(--text-primary); color: var(--color-text-primary);
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background-color: var(--bg-canvas); background-color: var(--color-bg-canvas);
border: 0; border: 0;
&:hover, &:hover,
&.selected, &.selected,
&[aria-selected=true], &[aria-selected=true],
&.navigation-focus { &.navigation-focus {
color: var(--text-inverse); color: var(--color-text-inverse);
text-decoration: none; text-decoration: none;
background-color: var(--bg-selected); background-color: var(--color-bg-selected);
// Inherit color on all child elements to ensure enough contrast // 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; margin-top: $spacer-4;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
background: var(--bg-canvas); background: var(--color-bg-canvas);
border: $border; border: $border;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow-medium; box-shadow: $box-shadow-medium;
@ -20,11 +20,11 @@
display: block; display: block;
padding: $spacer-1 $spacer-2; padding: $spacer-1 $spacer-2;
font-weight: $font-weight-semibold; 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 { small {
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: var(--text-secondary); color: var(--color-text-secondary);
} }
&:last-child { &:last-child {
@ -41,12 +41,12 @@
&:hover, &:hover,
&[aria-selected="true"], &[aria-selected="true"],
&.navigation-focus { &.navigation-focus {
color: var(--text-inverse); color: var(--color-text-inverse);
text-decoration: none; text-decoration: none;
background: var(--bg-selected); background: var(--color-bg-selected);
small { 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; position: absolute;
right: -15%; right: -15%;
bottom: -9%; 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 // stylelint-disable-next-line primer/borders
border-radius: $border-radius-1; border-radius: $border-radius-1;
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow

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

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

6
src/blankslate/blankslate.scss
View File

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

28
src/box/box.scss
View File

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