primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-24 14:42:26 +03:00
Code Issues Projects Releases Wiki Activity

Use @primer/primitives v8 colors with fallbacks (#2466)

Browse Source 
* bump

* run stylelint

* lint

* bump release

* Create tidy-brooms-search.md
This commit is contained in:
Katie Langerman 2023-06-21 13:56:27 -07:00 committed by GitHub
parent 24c66b570c
commit 9204701416
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 426 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tidy-brooms-search.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Use `@primer/primitives` v8 colors with fallbacks

2
package.json
View File

@ -50,7 +50,7 @@
"@changesets/cli": "2.26.1", "@changesets/cli": "2.26.1",
"@csstools/postcss-sass": "5.0.1", "@csstools/postcss-sass": "5.0.1",
"@github/prettier-config": "0.0.6", "@github/prettier-config": "0.0.6",
"@primer/stylelint-config": "^12.4.0", "@primer/stylelint-config": "^12.7.1",
"autoprefixer": "10.4.13", "autoprefixer": "10.4.13",
"chokidar-cli": "3.0.0", "chokidar-cli": "3.0.0",
"cssstats": "4.0.5", "cssstats": "4.0.5",

22
src/autocomplete/suggester.scss
View File

@ -11,20 +11,20 @@
margin-top: $spacer-4; margin-top: $spacer-4;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
background: var(--color-canvas-overlay); background: var(--overlay-bgColor, var(--color-canvas-overlay));
border: $border-width $border-style var(--color-border-default); border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: var(--color-shadow-medium); box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
li { li {
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(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
small { small {
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
&:last-child { &:last-child {
@ -39,12 +39,12 @@
} }
&:hover { &:hover {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
text-decoration: none; text-decoration: none;
background: var(--color-accent-emphasis); background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
small { small {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
} }
.octicon { .octicon {
@ -54,12 +54,12 @@
&[aria-selected='true'], &[aria-selected='true'],
&.navigation-focus { &.navigation-focus {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
text-decoration: none; text-decoration: none;
background: var(--color-accent-emphasis); background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
small { small {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
} }
.octicon { .octicon {

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

@ -10,8 +10,8 @@
position: absolute; position: absolute;
right: -15%; right: -15%;
bottom: -9%; bottom: -9%;
background-color: var(--color-canvas-default); // For transparent backgrounds background-color: var(--bgColor-default, var(--color-canvas-default)); // 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;
box-shadow: var(--color-avatar-child-shadow); box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
} }

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

@ -4,9 +4,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
border-radius: 50%; border-radius: 50%;
box-shadow: var(--color-shadow-medium); box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
} }
.CircleBadge-icon { .CircleBadge-icon {
@ -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(--color-border-default); border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
} }
.CircleBadge { .CircleBadge {

12
src/base/base.scss
View File

@ -4,7 +4,7 @@
} }
*::selection { *::selection {
background-color: var(--color-accent-subtle); background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
} }
input, input,
@ -20,12 +20,12 @@ body {
font-family: $body-font; font-family: $body-font;
font-size: var(--body-font-size, $body-font-size); font-size: var(--body-font-size, $body-font-size);
line-height: $body-line-height; line-height: $body-line-height;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
} }
a { a {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -50,7 +50,7 @@ label {
// Custom styling for HTML5 validation bubbles (WebKit only) // Custom styling for HTML5 validation bubbles (WebKit only)
::placeholder { ::placeholder {
color: var(--color-fg-subtle); color: var(--fgColor-muted, var(--color-fg-subtle));
opacity: 1; // override opacity in normalize.css opacity: 1; // override opacity in normalize.css
} }
@ -65,7 +65,7 @@ hr,
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
border: 0; border: 0;
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@include clearfix(); @include clearfix();
} }

10
src/base/kbd.scss
View File

@ -7,13 +7,13 @@ kbd {
font: 11px $mono-font; font: 11px $mono-font;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 10px; line-height: 10px;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
vertical-align: middle; vertical-align: middle;
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border: $border-style $border-width var(--color-neutral-muted); border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
border-bottom-color: var(--color-neutral-muted); border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
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 -1px 0 var(--color-neutral-muted); box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
} }

4
src/base/normalize.scss vendored
View File

@ -153,8 +153,8 @@ h1 {
*/ */
mark { mark {
background-color: var(--color-attention-subtle); background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
} }
/** /**

6
src/box/box-overlay.scss
View File

@ -3,9 +3,9 @@
width: 448px; width: 448px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
background-clip: padding-box; background-clip: padding-box;
border-color: var(--color-border-default); border-color: var(--borderColor-default, var(--color-border-default));
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
@ -36,7 +36,7 @@
.help { .help {
padding-top: $spacer-2; padding-top: $spacer-2;
margin: 0; margin: 0;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center; text-align: center;
} }
} }

12
src/branch-name/branch-name.scss
View File

@ -7,25 +7,25 @@
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 2px 6px; padding: 2px 6px;
font: 12px $mono-font; font: 12px $mono-font;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
word-break: break-all; word-break: break-all;
background-color: var(--color-accent-subtle); background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
border-radius: $border-radius; border-radius: $border-radius;
.octicon { .octicon {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin: 1px -2px 0 0; margin: 1px -2px 0 0;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
} }
// When a branch name is a link // When a branch name is a link
a.branch-name { a.branch-name {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
background-color: var(--color-accent-subtle); background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
.octicon { .octicon {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
} }
} }

126
src/buttons/button.scss
View File

@ -36,7 +36,7 @@
.octicon { .octicon {
margin-right: $spacer-1; margin-right: $spacer-1;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
vertical-align: text-bottom; vertical-align: text-bottom;
&:only-child { &:only-child {
@ -50,7 +50,7 @@
color: inherit; color: inherit;
text-shadow: none; text-shadow: none;
vertical-align: top; vertical-align: top;
background-color: var(--color-btn-counter-bg); background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));
} }
.dropdown-caret { .dropdown-caret {
@ -62,42 +62,42 @@
// Default button // Default button
.btn { .btn {
color: var(--color-btn-text); color: var(--button-default-fgColor-rest, var(--color-btn-text));
background-color: var(--color-btn-bg); background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
border-color: var(--color-btn-border); border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow); box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)), var(--button-default-shadow-inset, var(--color-btn-inset-shadow));
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
transition-property: color, background-color, box-shadow, border-color; transition-property: color, background-color, box-shadow, border-color;
&:hover, &:hover,
&.hover, &.hover,
[open] > & { [open] > & {
background-color: var(--color-btn-hover-bg); background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
border-color: var(--color-btn-hover-border); border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
transition-duration: 0.1s; transition-duration: 0.1s;
} }
&:active { &:active {
background-color: var(--color-btn-active-bg); background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
border-color: var(--color-btn-active-border); border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
transition: none; transition: none;
} }
&.selected, &.selected,
&[aria-selected='true'] { &[aria-selected='true'] {
background-color: var(--color-btn-selected-bg); background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
box-shadow: var(--color-primer-shadow-inset); box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
} }
&:disabled, &:disabled,
&.disabled, &.disabled,
&[aria-disabled='true'] { &[aria-disabled='true'] {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
background-color: var(--color-btn-bg); background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
border-color: var(--color-btn-border); border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
.octicon { .octicon {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
} }
} }
} }
@ -105,16 +105,16 @@
// Primary button // Primary button
.btn-primary { .btn-primary {
color: var(--color-btn-primary-text); color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text));
background-color: var(--color-btn-primary-bg); background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));
border-color: var(--color-btn-primary-border); border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border));
box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow); box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
&:hover, &:hover,
&.hover, &.hover,
[open] > & { [open] > & {
background-color: var(--color-btn-primary-hover-bg); background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));
border-color: var(--color-btn-primary-hover-border); border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border));
} }
// fallback :focus state // fallback :focus state
@ -136,29 +136,29 @@
&:active, &:active,
&.selected, &.selected,
&[aria-selected='true'] { &[aria-selected='true'] {
background-color: var(--color-btn-primary-selected-bg); background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));
box-shadow: var(--color-btn-primary-selected-shadow); box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow));
} }
&:disabled, &:disabled,
&.disabled, &.disabled,
&[aria-disabled='true'] { &[aria-disabled='true'] {
color: var(--color-btn-primary-disabled-text); color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
background-color: var(--color-btn-primary-disabled-bg); background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));
border-color: var(--color-btn-primary-disabled-border); border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border));
.octicon { .octicon {
color: var(--color-btn-primary-disabled-text); color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
} }
} }
.Counter { .Counter {
color: inherit; color: inherit;
background-color: var(--color-btn-primary-counter-bg); background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));
} }
.octicon { .octicon {
color: var(--color-btn-primary-icon); color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon));
} }
} }
@ -185,17 +185,17 @@ a.btn-primary {
// Outline button // Outline button
.btn-outline { .btn-outline {
color: var(--color-btn-outline-text); color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));
&:hover, &:hover,
[open] > & { [open] > & {
color: var(--color-btn-outline-hover-text); color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));
background-color: var(--color-btn-outline-hover-bg); background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));
border-color: var(--color-btn-outline-hover-border); border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));
box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow); box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow));
.Counter { .Counter {
background-color: var(--color-btn-outline-hover-counter-bg); background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg));
} }
.octicon { .octicon {
@ -206,10 +206,10 @@ a.btn-primary {
&:active, &:active,
&.selected, &.selected,
&[aria-selected='true'] { &[aria-selected='true'] {
color: var(--color-btn-outline-selected-text); color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));
background-color: var(--color-btn-outline-selected-bg); background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));
border-color: var(--color-btn-outline-selected-border); border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));
box-shadow: var(--color-btn-outline-selected-shadow); box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow));
// fallback :focus state // fallback :focus state
&:focus { &:focus {
@ -231,76 +231,76 @@ a.btn-primary {
&:disabled, &:disabled,
&.disabled, &.disabled,
&[aria-disabled='true'] { &[aria-disabled='true'] {
color: var(--color-btn-outline-disabled-text); color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));
background-color: var(--color-btn-outline-disabled-bg); background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));
border-color: var(--color-btn-border); border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
box-shadow: none; box-shadow: none;
.Counter { .Counter {
background-color: var(--color-btn-outline-disabled-counter-bg); background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg));
} }
} }
.Counter { .Counter {
color: inherit; color: inherit;
background-color: var(--color-btn-outline-counter-bg); background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg));
} }
} }
// Danger button // Danger button
.btn-danger { .btn-danger {
color: var(--color-btn-danger-text); color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text));
.octicon { .octicon {
color: var(--color-btn-danger-icon); color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));
} }
&:hover, &:hover,
[open] > & { [open] > & {
color: var(--color-btn-danger-hover-text); color: var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text));
background-color: var(--color-btn-danger-hover-bg); background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg));
border-color: var(--color-btn-danger-hover-border); border-color: var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border));
box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow); box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow));
.Counter { .Counter {
background-color: var(--color-btn-danger-hover-counter-bg); background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg));
} }
.octicon { .octicon {
color: var(--color-btn-danger-hover-icon); color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon));
} }
} }
&:active, &:active,
&.selected, &.selected,
&[aria-selected='true'] { &[aria-selected='true'] {
color: var(--color-btn-danger-selected-text); color: var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text));
background-color: var(--color-btn-danger-selected-bg); background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg));
border-color: var(--color-btn-danger-selected-border); border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border));
box-shadow: var(--color-btn-danger-selected-shadow); box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow));
} }
&:disabled, &:disabled,
&.disabled, &.disabled,
&[aria-disabled='true'] { &[aria-disabled='true'] {
color: var(--color-btn-danger-disabled-text); color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
background-color: var(--color-btn-danger-disabled-bg); background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg));
border-color: var(--color-btn-border); border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
box-shadow: none; box-shadow: none;
.Counter { .Counter {
background-color: var(--color-btn-danger-disabled-counter-bg); background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg));
} }
.octicon { .octicon {
color: var(--color-btn-danger-disabled-text); color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
} }
} }
.Counter { .Counter {
color: inherit; color: inherit;
background-color: var(--color-btn-danger-counter-bg); background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg));
} }
} }

52
src/buttons/misc.scss
View File

@ -7,7 +7,7 @@
display: inline-block; display: inline-block;
padding: 0; padding: 0;
font-size: inherit; font-size: inherit;
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -24,7 +24,7 @@
&[aria-disabled='true'] { &[aria-disabled='true'] {
&, &,
&:hover { &:hover {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
cursor: default; cursor: default;
} }
} }
@ -42,7 +42,7 @@
// //
// Typically used as a "cancel" button next to a .btn // Typically used as a "cancel" button next to a .btn
.btn-invisible { .btn-invisible {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
background-color: transparent; // Reset default gradient backgrounds and colors background-color: transparent; // Reset default gradient backgrounds and colors
border: 0; border: 0;
border-radius: $border-radius; border-radius: $border-radius;
@ -50,8 +50,8 @@
&:hover, &:hover,
&.zeroclipboard-is-hover { &.zeroclipboard-is-hover {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
background-color: var(--color-btn-hover-bg); background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
outline: none; outline: none;
box-shadow: none; box-shadow: none;
} }
@ -60,21 +60,21 @@
&.selected, &.selected,
&[aria-selected='true'], &[aria-selected='true'],
&.zeroclipboard-is-active { &.zeroclipboard-is-active {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
background: none; background: none;
border-color: var(--color-btn-active-border); border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
@include focusOutline; @include focusOutline;
} }
&:active &.zeroclipboard-is-active { &:active &.zeroclipboard-is-active {
background-color: var(--color-btn-selected-bg); background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
} }
&:disabled, &:disabled,
&.disabled, &.disabled,
&[aria-disabled='true'] { &[aria-disabled='true'] {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
background-color: transparent; background-color: transparent;
} }
} }
@ -89,7 +89,7 @@
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin-left: 5px; margin-left: 5px;
line-height: $lh-condensed-ultra; line-height: $lh-condensed-ultra;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
vertical-align: middle; vertical-align: middle;
// For `<button>` elements // For `<button>` elements
@ -98,7 +98,7 @@
box-shadow: none; box-shadow: none;
&:hover { &:hover {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
} }
&:focus, &:focus,
@ -108,17 +108,17 @@
&.disabled, &.disabled,
&[aria-disabled='true'] { &[aria-disabled='true'] {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
cursor: default; cursor: default;
&:hover { &:hover {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
} }
} }
} }
.btn-octicon-danger:hover { .btn-octicon-danger:hover {
color: var(--color-danger-fg); color: var(--fgColor-danger, var(--color-danger-fg));
} }
// Close button // Close button
@ -126,12 +126,12 @@
// Typically used with an octicon-x // Typically used with an octicon-x
.close-button { .close-button {
padding: 0; padding: 0;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
background: transparent; background: transparent;
border: 0; border: 0;
&:hover { &:hover {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
} }
&:active { &:active {
@ -165,22 +165,22 @@
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 6px; line-height: 6px;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
text-decoration: none; text-decoration: none;
vertical-align: middle; vertical-align: middle;
background: var(--color-neutral-muted); background: var(--bgColor-neutral-muted, var(--color-neutral-muted));
border: 0; border: 0;
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border-radius: 1px; border-radius: 1px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: var(--color-accent-muted); background-color: var(--bgColor-accent-muted, var(--color-accent-muted));
} }
&:active { &:active {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--color-accent-emphasis); background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
} }
} }
@ -210,14 +210,14 @@
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 20px; line-height: 20px;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
vertical-align: middle; vertical-align: middle;
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
border: $border-width $border-style var(--color-btn-border); border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
border-left: 0; border-left: 0;
border-top-right-radius: $border-radius; border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius; border-bottom-right-radius: $border-radius;
box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight); box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight));
&:hover, &:hover,
&:active { &:active {
@ -225,7 +225,7 @@
} }
&:hover { &:hover {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
cursor: pointer; cursor: pointer;
} }
} }

6
src/color-modes/native.scss
View File

@ -6,8 +6,8 @@
@include color-mode(dark) { color-scheme: dark; } @include color-mode(dark) { color-scheme: dark; }
[data-color-mode] { [data-color-mode] {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
} }
// Windows High Contrast mode // Windows High Contrast mode
@ -18,5 +18,7 @@
body { body {
--color-accent-emphasis: Highlight; --color-accent-emphasis: Highlight;
--color-fg-on-emphasis: LinkText; --color-fg-on-emphasis: LinkText;
--fgColor-onEmphasis: LinkText;
--fgColor-accent: Highlight;
} }
} }

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

@ -12,14 +12,14 @@
font-size: $body-font-size; font-size: $body-font-size;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 20px; line-height: 20px;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
vertical-align: middle; vertical-align: middle;
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc) background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically. background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
border: $border-width $border-style var(--color-border-default); border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: var(--color-primer-shadow-inset); box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
transition-property: color, background-color, box-shadow, border-color; transition-property: color, background-color, box-shadow, border-color;
@ -43,20 +43,20 @@
&.border-0 { &.border-0 {
&:focus, &:focus,
&:focus-visible { &:focus-visible {
border: $border-width $border-style var(--color-accent-fg) !important; border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important;
} }
} }
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
background-color: var(--color-input-disabled-bg); background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
border-color: var(--color-border-default); border-color: var(--borderColor-default, var(--color-border-default));
-webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari -webkit-text-fill-color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
opacity: 1; // Fix for Safari iOS opacity: 1; // Fix for Safari iOS
&::placeholder { &::placeholder {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
} }
} }
@ -79,10 +79,10 @@ textarea.form-control {
// Inputs with contrast for easy light gray backgrounds against white. // Inputs with contrast for easy light gray backgrounds against white.
.input-contrast { .input-contrast {
background-color: var(--color-canvas-inset); background-color: var(--bgColor-muted, var(--color-canvas-inset));
&:focus { &:focus {
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
} }
} }
@ -142,7 +142,7 @@ textarea.form-control {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 2px $spacer-1; padding: 2px $spacer-1;
font-style: normal; font-style: normal;
background: var(--color-attention-subtle); background: var(--bgColor-attention-muted, var(--color-attention-subtle));
border-radius: $border-radius; border-radius: $border-radius;
} }
} }
@ -160,7 +160,7 @@ textarea.form-control {
margin: 0; margin: 0;
font-size: $font-size-small; font-size: $font-size-small;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
} }
@ -199,7 +199,7 @@ textarea.form-control {
display: inline-block; display: inline-block;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin: 5px 0 0; margin: 5px 0 0;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
img { img {
@ -251,9 +251,9 @@ input::-webkit-inner-spin-button {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin: 10px 0; margin: 10px 0;
font-size: $h5-size; font-size: $h5-size;
color: var(--color-attention-fg); color: var(--fgColor-attention, var(--color-attention-fg));
background: var(--color-attention-subtle); background: var(--bgColor-attention-muted, var(--color-attention-subtle));
border: $border-width $border-style var(--color-attention-emphasis); border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
border-radius: $border-radius; border-radius: $border-radius;
p { p {

58
src/forms/form-group.scss
View File

@ -17,7 +17,7 @@
// Autocomplete with embedded icon // Autocomplete with embedded icon
.form-control.autocomplete-embedded-icon-wrap { .form-control.autocomplete-embedded-icon-wrap {
&:focus-within { &:focus-within {
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
} }
} }
@ -28,10 +28,10 @@
max-width: 100%; max-width: 100%;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin-right: 5px; margin-right: 5px;
background-color: var(--color-canvas-inset); background-color: var(--bgColor-muted, var(--color-canvas-inset));
&:focus { &:focus {
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
} }
&.shorter { &.shorter {
@ -98,11 +98,11 @@
margin: $spacer-1 0 0; margin: $spacer-1 0 0;
&.is-error { &.is-error {
color: var(--color-danger-fg); color: var(--fgColor-danger, var(--color-danger-fg));
} }
&.is-success { &.is-success {
color: var(--color-success-fg); color: var(--fgColor-success, var(--color-success-fg));
} }
+ .note { + .note {
@ -121,7 +121,7 @@
.form-group-header label::after { .form-group-header label::after {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding-left: 5px; padding-left: 5px;
color: var(--color-danger-fg); color: var(--fgColor-danger, var(--color-danger-fg));
content: '*'; content: '*';
} }
} }
@ -154,7 +154,7 @@
&.successful { &.successful {
.success { .success {
display: inline; display: inline;
color: var(--color-success-fg); color: var(--fgColor-success, var(--color-success-fg));
} }
} }
@ -210,63 +210,63 @@
&.successed { &.successed {
.success { .success {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle)); background-image: linear-gradient(var(--bgColor-success-muted, var(--bgColor-success-muted, var(--color-success-subtle))), var(--color-success-subtle));
border-color: var(--color-success-muted); border-color: var(--borderColor-success-muted, var(--color-success-muted));
&::after { &::after {
border-bottom-color: var(--color-success-subtle); border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
} }
&::before { &::before {
border-bottom-color: var(--color-success-muted); border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
} }
} }
} }
&.warn { &.warn {
.form-control:not(:focus, :focus-visible) { .form-control:not(:focus, :focus-visible) {
border-color: var(--color-attention-emphasis); border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
} }
.warning { .warning {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle)); background-image: linear-gradient(var(--bgColor-attention-muted, var(--bgColor-attention-muted, var(--color-attention-subtle))), var(--color-attention-subtle));
border-color: var(--color-attention-muted); border-color: var(--borderColor-attention-muted, var(--color-attention-muted));
&::after { &::after {
border-bottom-color: var(--color-attention-subtle); border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
} }
&::before { &::before {
border-bottom-color: var(--color-attention-muted); border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
} }
} }
} }
&.errored { &.errored {
.form-control:not(:focus, :focus-visible) { .form-control:not(:focus, :focus-visible) {
border-color: var(--color-danger-emphasis); border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
} }
label { label {
color: var(--color-danger-fg); color: var(--fgColor-danger, var(--color-danger-fg));
} }
.error { .error {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle)); background-image: linear-gradient(var(--bgColor-danger-muted, var(--bgColor-danger-muted, var(--color-danger-subtle))), var(--color-danger-subtle));
border-color: var(--color-danger-muted); border-color: var(--borderColor-danger-muted, var(--color-danger-muted));
&::after { &::after {
border-bottom-color: var(--color-danger-subtle); border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
} }
&::before { &::before {
border-bottom-color: var(--color-danger-muted); border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
} }
} }
} }
@ -278,7 +278,7 @@
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin: $spacer-1 0 2px; margin: $spacer-1 0 2px;
font-size: $font-size-small; font-size: $font-size-small;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
.spinner { .spinner {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing

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

@ -6,7 +6,7 @@
max-width: 100%; max-width: 100%;
height: $size-5; height: $size-5;
padding-right: $spacer-4; padding-right: $spacer-4;
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
// SVG with fill: #586069 (--color-icon-secondary) // SVG with fill: #586069 (--color-icon-secondary)
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4='); background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
background-repeat: no-repeat; background-repeat: no-repeat;

12
src/forms/radio-group.scss
View File

@ -13,14 +13,14 @@
font-size: $body-font-size; font-size: $body-font-size;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 20px; // Specifically not inherit our `<body>` default line-height: 20px; // Specifically not inherit our `<body>` default
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
cursor: pointer; cursor: pointer;
border: $border-width $border-style var(--color-border-default); border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
:checked + & { :checked + & {
position: relative; position: relative;
z-index: 1; z-index: 1;
border-color: var(--color-accent-emphasis); border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
} }
&:first-of-type { &:first-of-type {
@ -36,7 +36,7 @@
.octicon { .octicon {
margin-left: $spacer-1; margin-left: $spacer-1;
color: var(--color-fg-subtle); color: var(--fgColor-muted, var(--color-fg-subtle));
} }
} }
@ -50,9 +50,9 @@
position: relative; // enables z-index position: relative; // enables z-index
+ .radio-label { + .radio-label {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
cursor: default; cursor: default;
background-color: var(--color-neutral-subtle); background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
.octicon { .octicon {
color: inherit; color: inherit;

14
src/header/header.scss
View File

@ -4,8 +4,8 @@
padding: $spacer-3; padding: $spacer-3;
font-size: $h5-size; font-size: $h5-size;
line-height: $lh-default; line-height: $lh-default;
color: var(--color-header-text); color: var(--header-fgColor-default, var(--color-header-text));
background-color: var(--color-header-bg); background-color: var(--header-bgColor, var(--color-header-bg));
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@ -24,20 +24,20 @@
.Header-link { .Header-link {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
color: var(--color-header-logo); color: var(--header-fgColor-logo, var(--color-header-logo));
white-space: nowrap; white-space: nowrap;
&:hover, &:hover,
&:focus { &:focus {
color: var(--color-header-text); color: var(--header-fgColor-default, var(--color-header-text));
text-decoration: none; text-decoration: none;
} }
} }
.Header-input { .Header-input {
color: var(--color-header-text); color: var(--header-fgColor-default, var(--color-header-text));
background-color: var(--color-header-search-bg); background-color: var(--headerSearch-bgColor, var(--color-header-search-bg));
border: $border-width $border-style var(--color-header-search-border); border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border));
box-shadow: none; box-shadow: none;
&::placeholder { &::placeholder {

14
src/layout/app-frame.scss
View File

@ -29,7 +29,7 @@
display: flex; display: flex;
width: 100%; width: 100%;
padding: var(--base-size-16, 16px); padding: var(--base-size-16, 16px);
background: var(--color-canvas-inset); background: var(--bgColor-muted, var(--color-canvas-inset));
padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px)); padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
isolation: isolate; isolation: isolate;
align-items: center; align-items: center;
@ -66,7 +66,7 @@
overflow: hidden; overflow: hidden;
text-indent: var(--base-size-128, 128px); text-indent: var(--base-size-128, 128px);
pointer-events: none; pointer-events: none;
background: var(--color-border-default); background: var(--borderColor-default, var(--color-border-default));
border-radius: var(--borderRadius-full, 100vh); border-radius: var(--borderRadius-full, 100vh);
} }
@ -78,8 +78,8 @@
min-height: var(--control-medium-size, 32px); min-height: var(--control-medium-size, 32px);
padding: 0 var(--control-medium-paddingInline-spacious, 16px); padding: 0 var(--control-medium-paddingInline-spacious, 16px);
overflow: auto; overflow: auto;
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background: var(--color-accent-emphasis); background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
border-radius: var(--borderRadius-full, 100vh); border-radius: var(--borderRadius-full, 100vh);
align-items: center; align-items: center;
@ -95,17 +95,17 @@
@keyframes AppFrame-a11yLink-focus { @keyframes AppFrame-a11yLink-focus {
0% { 0% {
color: var(--color-accent-emphasis); color: var(--fgColor-accent, var(--color-accent-emphasis));
transform: scale(0.3, 0.25); transform: scale(0.3, 0.25);
} }
50% { 50% {
color: var(--color-accent-emphasis); color: var(--fgColor-accent, var(--color-accent-emphasis));
transform: scale(1, 1); transform: scale(1, 1);
} }
55% { 55% {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
} }
100% { 100% {

4
src/layout/page-layout.scss
View File

@ -2,7 +2,7 @@
// stylelint-disable selector-max-specificity // stylelint-disable selector-max-specificity
// stylelint-disable no-duplicate-selectors // stylelint-disable no-duplicate-selectors
$Layout-divider-color: var(--color-border-default) !default; $Layout-divider-color: var(--borderColor-default, var(--color-border-default)) !default;
$Layout-responsive-variant-max-breakpoint: 'md' !default; $Layout-responsive-variant-max-breakpoint: 'md' !default;
:root { :root {
@ -44,7 +44,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
width: calc(100% + (var(--Layout-outer-spacing-x) * 2)); width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
height: #{$spacer-2}; // 8px height: #{$spacer-2}; // 8px
content: ''; content: '';
background-color: var(--color-canvas-inset); background-color: var(--bgColor-muted, var(--color-canvas-inset));
box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color; box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
} }

2
src/layout/stack.scss
View File

@ -30,7 +30,7 @@
--Stack-gap-whenRegular: #{$Stack-gap-default}; --Stack-gap-whenRegular: #{$Stack-gap-default};
--Stack-gap-whenNarrow: #{$Stack-gap-default}; --Stack-gap-whenNarrow: #{$Stack-gap-default};
--Stack-gap-whenWide: var(--Stack-gap-whenRegular); --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
--Stack-divider-color: var(--color-border-default); --Stack-divider-color: var(--borderColor-default, var(--color-border-default));
display: flex; display: flex;
flex-flow: column; flex-flow: column;

4
src/markdown/blob-csv.scss
View File

@ -15,7 +15,7 @@
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 10px $spacer-2 9px; padding: 10px $spacer-2 9px;
text-align: right; text-align: right;
background: var(--color-canvas-default); background: var(--bgColor-default, var(--color-canvas-default));
border: 0; border: 0;
} }
@ -23,7 +23,7 @@
th { th {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
background: var(--color-canvas-subtle); background: var(--bgColor-muted, var(--color-canvas-subtle));
border-top: 0; border-top: 0;
} }
} }

6
src/markdown/code.scss
View File

@ -9,7 +9,7 @@
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
font-size: 85%; font-size: 85%;
white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines
background-color: var(--color-neutral-muted); background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
border-radius: $border-radius; border-radius: $border-radius;
br { display: none; } br { display: none; }
@ -58,8 +58,8 @@
font-size: 85%; font-size: 85%;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 1.45; line-height: 1.45;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
border-radius: $border-radius; border-radius: $border-radius;
} }

6
src/markdown/footnotes.scss
View File

@ -14,7 +14,7 @@
.footnotes { .footnotes {
font-size: $h6-size; font-size: $h6-size;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
border-top: $border; border-top: $border;
ol { ol {
@ -40,12 +40,12 @@
pointer-events: none; pointer-events: none;
content: ''; content: '';
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border: 2px $border-style var(--color-accent-emphasis); border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
border-radius: $border-radius; border-radius: $border-radius;
} }
li:target { li:target {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
} }
.data-footnote-backref g-emoji { .data-footnote-backref g-emoji {

8
src/markdown/headings.scss
View File

@ -15,7 +15,7 @@
line-height: $lh-condensed; line-height: $lh-condensed;
.octicon-link { .octicon-link {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
vertical-align: middle; vertical-align: middle;
visibility: hidden; visibility: hidden;
} }
@ -41,7 +41,7 @@
padding-bottom: 0.3em; padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
font-size: 2em; font-size: 2em;
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
} }
h2 { h2 {
@ -49,7 +49,7 @@
padding-bottom: 0.3em; padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
font-size: 1.5em; font-size: 1.5em;
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
} }
h3 { h3 {
@ -69,7 +69,7 @@
h6 { h6 {
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
font-size: 0.85em; font-size: 0.85em;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
summary { summary {

6
src/markdown/images.scss
View File

@ -8,7 +8,7 @@
// because we put padding on the images to hide header lines, and some people // because we put padding on the images to hide header lines, and some people
// specify the width of their images in their markdown. // specify the width of their images in their markdown.
box-sizing: content-box; box-sizing: content-box;
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
&[align='right'] { &[align='right'] {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
@ -44,7 +44,7 @@
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin: 13px 0 0; margin: 13px 0 0;
overflow: hidden; overflow: hidden;
border: $border-width $border-style var(--color-border-default); border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
} }
span img { span img {
@ -57,7 +57,7 @@
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 5px 0 0; padding: 5px 0 0;
clear: both; clear: both;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
} }
} }

8
src/markdown/markdown-body.scss
View File

@ -43,7 +43,7 @@
// Link Colors // Link Colors
.absent { .absent {
color: var(--color-danger-fg); color: var(--fgColor-danger, var(--color-danger-fg));
} }
.anchor { .anchor {
@ -74,16 +74,16 @@
height: $em-spacer-3; height: $em-spacer-3;
padding: 0; padding: 0;
margin: $spacer-4 0; margin: $spacer-4 0;
background-color: var(--color-border-default); background-color: var(--borderColor-default, var(--color-border-default));
border: 0; border: 0;
} }
blockquote { blockquote {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 0 1em; padding: 0 1em;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border-left: 0.25em $border-style var(--color-border-default); border-left: 0.25em $border-style var(--borderColor-default, var(--color-border-default));
> :first-child { > :first-child {
margin-top: 0; margin-top: 0;

8
src/markdown/tables.scss
View File

@ -17,7 +17,7 @@
td { td {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 6px 13px; padding: 6px 13px;
border: $border-width $border-style var(--color-border-default); border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
} }
td { td {
@ -27,11 +27,11 @@
} }
tr { tr {
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
border-top: $border-width $border-style var(--color-border-muted); border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
&:nth-child(2n) { &:nth-child(2n) {
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
} }

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

@ -1,4 +1,3 @@
/* stylelint-disable primer/no-deprecated-colors */
.btn-mktg { .btn-mktg {
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -9,7 +8,7 @@
font-size: 1rem; font-size: 1rem;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
line-height: 1; line-height: 1;
color: var(--color-canvas-default); color: var(--bgColor-default, var(--color-canvas-default));
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@ -56,7 +55,7 @@
// fallback :focus state // fallback :focus state
&:focus { &:focus {
@include focusOutline(2px, var(--color-accent-fg)); @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
// remove fallback :focus if :focus-visible is supported // remove fallback :focus if :focus-visible is supported
&:not(:focus-visible) { &:not(:focus-visible) {
@ -67,7 +66,7 @@
// default focus state // default focus state
&:focus-visible { &:focus-visible {
@include focusOutline(2px, var(--color-accent-fg)); @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
} }
&:active { &:active {
@ -85,7 +84,7 @@
} }
.btn-muted-mktg { .btn-muted-mktg {
color: var(--color-fg-default) !important; color: var(--fgColor-default, var(--color-fg-default)) !important;
background: none !important; background: none !important;
box-shadow: var(--color-mktg-btn-shadow-outline); box-shadow: var(--color-mktg-btn-shadow-outline);
@ -99,17 +98,17 @@
&:active { &:active {
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: var(--color-fg-default) 0 0 0 3px inset !important; box-shadow: var(--fgColor-default, var(--color-fg-default)) 0 0 0 3px inset !important;
} }
&:disabled { &:disabled {
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important; box-shadow: var(--fgColor-muted, var(--color-fg-subtle)) 0 0 0 1px inset !important;
} }
} }
.btn-subtle-mktg { .btn-subtle-mktg {
color: var(--color-fg-default) !important; color: var(--fgColor-default, var(--color-fg-default)) !important;
background: none !important; background: none !important;
box-shadow: none !important; box-shadow: none !important;
@ -135,7 +134,7 @@
// fallback :focus state // fallback :focus state
&:focus { &:focus {
@include focusOutline(2px, var(--color-accent-fg)); @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
// remove fallback :focus if :focus-visible is supported // remove fallback :focus if :focus-visible is supported
&:not(:focus-visible) { &:not(:focus-visible) {
@ -146,7 +145,7 @@
// default focus state // default focus state
&:focus-visible { &:focus-visible {
@include focusOutline(2px, var(--color-accent-fg)); @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
} }
} }

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

@ -13,12 +13,12 @@
} }
&.pjax-active .filter-item { &.pjax-active .filter-item {
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
background-color: transparent; background-color: transparent;
&.pjax-active { &.pjax-active {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--color-accent-emphasis); background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
} }
} }
} }
@ -30,7 +30,7 @@
margin-bottom: $spacer-1; margin-bottom: $spacer-1;
overflow: hidden; overflow: hidden;
font-size: $h5-size; font-size: $h5-size;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -39,14 +39,14 @@
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
&.selected, &.selected,
&[aria-selected='true'], &[aria-selected='true'],
&[aria-current]:not([aria-current='false']) { &[aria-current]:not([aria-current='false']) {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--color-accent-emphasis); background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
// fallback :focus state // fallback :focus state
&:focus { &:focus {
@ -77,6 +77,6 @@
bottom: 2px; bottom: 2px;
z-index: -1; z-index: -1;
display: inline-block; display: inline-block;
background-color: var(--color-neutral-subtle); background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
} }
} }

24
src/navigation/sidenav.scss
View File

@ -3,7 +3,7 @@
// A vertical list of navigational links, typically used on the left side of a page. // A vertical list of navigational links, typically used on the left side of a page.
.SideNav { .SideNav {
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
.SideNav-item { .SideNav-item {
@ -12,11 +12,11 @@
width: 100%; width: 100%;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 12px $spacer-3; padding: 12px $spacer-3;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
text-align: left; text-align: left;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-top: $border-width $border-style var(--color-border-muted); border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
&:first-child { &:first-child {
border-top: 0; border-top: 0;
@ -25,7 +25,7 @@
&:last-child { &:last-child {
// makes sure there is a "bottom border" in case the list is not long enough // makes sure there is a "bottom border" in case the list is not long enough
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: 0 $border-width 0 var(--color-border-default); box-shadow: 0 $border-width 0 var(--borderColor-default, var(--color-border-default));
} }
// Bar on the left // Bar on the left
@ -45,20 +45,20 @@
.SideNav-item:hover { .SideNav-item:hover {
text-decoration: none; text-decoration: none;
background-color: var(--color-neutral-subtle); background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
} }
.SideNav-item:active { .SideNav-item:active {
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
.SideNav-item[aria-current]:not([aria-current='false']), .SideNav-item[aria-current]:not([aria-current='false']),
.SideNav-item[aria-selected='true'] { .SideNav-item[aria-selected='true'] {
background-color: var(--color-sidenav-selected-bg); background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg));
// Bar on the left // Bar on the left
&::before { &::before {
background-color: var(--color-primer-border-active); background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active));
} }
} }
@ -69,7 +69,7 @@
.SideNav-icon { .SideNav-icon {
width: 16px; width: 16px;
margin-right: $spacer-2; margin-right: $spacer-2;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
// Sub Nav // Sub Nav
@ -81,19 +81,19 @@
display: block; display: block;
width: 100%; width: 100%;
padding: $spacer-1 0; padding: $spacer-1 0;
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
text-align: left; text-align: left;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
.SideNav-subItem:hover { .SideNav-subItem:hover {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
text-decoration: none; text-decoration: none;
} }
.SideNav-subItem[aria-current]:not([aria-current='false']), .SideNav-subItem[aria-current]:not([aria-current='false']),
.SideNav-subItem[aria-selected='true'] { .SideNav-subItem[aria-selected='true'] {
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
} }

18
src/navigation/subnav.scss
View File

@ -12,7 +12,7 @@
.subnav-bordered { .subnav-bordered {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
} }
.subnav-flush { .subnav-flush {
@ -27,8 +27,8 @@
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 20px; line-height: 20px;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
border: $border-width $border-style var(--color-border-default); border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+ .subnav-item { + .subnav-item {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
@ -38,16 +38,16 @@
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
&.selected, &.selected,
&[aria-selected='true'], &[aria-selected='true'],
&[aria-current]:not([aria-current='false']) { &[aria-current]:not([aria-current='false']) {
z-index: 2; z-index: 2;
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--color-accent-emphasis); background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
border-color: var(--color-accent-emphasis); border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
// fallback :focus state // fallback :focus state
&:focus { &:focus {
@ -86,7 +86,7 @@
.subnav-search-input { .subnav-search-input {
width: 320px; width: 320px;
padding-left: $spacer-5; padding-left: $spacer-5;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
.subnav-search-input-wide { .subnav-search-input-wide {
@ -99,7 +99,7 @@
top: 9px; top: 9px;
left: 8px; left: 8px;
display: block; display: block;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
} }

14
src/pagination/pagination.scss
View File

@ -10,7 +10,7 @@
font-style: normal; font-style: normal;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 20px; line-height: 20px;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@ -23,26 +23,26 @@
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
border-color: var(--color-border-default); border-color: var(--borderColor-default, var(--color-border-default));
transition-duration: 0.1s; transition-duration: 0.1s;
} }
&:active { &:active {
border-color: var(--color-border-muted); border-color: var(--borderColor-muted, var(--color-border-muted));
transition: none; transition: none;
} }
} }
.previous_page, .previous_page,
.next_page { .next_page {
color: var(--color-accent-fg); color: var(--fgColor-accent, var(--color-accent-fg));
} }
.current, .current,
.current:hover, .current:hover,
[aria-current]:not([aria-current='false']) { [aria-current]:not([aria-current='false']) {
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--color-accent-emphasis); background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
border-color: transparent; border-color: transparent;
} }
@ -52,7 +52,7 @@
.gap:hover, .gap:hover,
.disabled:hover, .disabled:hover,
[aria-disabled='true']:hover { [aria-disabled='true']:hover {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
cursor: default; cursor: default;
border-color: transparent; border-color: transparent;
} }

82
src/select-menu/select-menu.scss
View File

@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
content: ''; content: '';
background-color: var(--color-primer-canvas-backdrop); background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
@include breakpoint(sm) { @include breakpoint(sm) {
display: none; display: none;
@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
overflow: hidden; // Enables border radius on scrollable child elements overflow: hidden; // Enables border radius on scrollable child elements
pointer-events: auto; pointer-events: auto;
flex-direction: column; flex-direction: column;
background-color: var(--color-canvas-overlay); background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
border: $border-width $border-style var(--color-select-menu-backdrop-border); border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border-radius: $border-radius * 2; border-radius: $border-radius * 2;
box-shadow: var(--color-shadow-large); box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
@keyframes SelectMenu-modal-animation { @keyframes SelectMenu-modal-animation {
@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
max-height: $SelectMenu-max-height; max-height: $SelectMenu-max-height;
margin: $spacer-2 0 $spacer-3 0; margin: $spacer-2 0 $spacer-3 0;
font-size: $font-size-small; font-size: $font-size-small;
border-color: var(--color-border-default); border-color: var(--borderColor-default, var(--color-border-default));
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: var(--color-shadow-large); box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
animation-name: SelectMenu-modal-animation--sm; animation-name: SelectMenu-modal-animation--sm;
} }
} }
@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
padding: $spacer-3; padding: $spacer-3;
flex: none; // fixes header from getting squeezed in Safari iOS flex: none; // fixes header from getting squeezed in Safari iOS
align-items: center; align-items: center;
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) { @include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
padding: $spacer-3; padding: $spacer-3;
margin: -$spacer-3; margin: -$spacer-3;
line-height: 1; line-height: 1;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-filter { .SelectMenu-filter {
padding: $spacer-3; padding: $spacer-3;
margin: 0; margin: 0;
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) { @include breakpoint(sm) {
padding: $spacer-2; padding: $spacer-2;
@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
flex: auto; flex: auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
background-color: var(--color-canvas-overlay); background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
-webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
} }
@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
width: 100%; width: 100%;
padding: $spacer-3; padding: $spacer-3;
overflow: hidden; overflow: hidden;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
background-color: var(--color-canvas-overlay); background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
border: 0; border: 0;
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) { @include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 var(--color-border-muted); box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
// Hide scrollbar so it doesn't cover the text // Hide scrollbar so it doesn't cover the text
@ -252,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
padding: $spacer-2 $spacer-3; padding: $spacer-2 $spacer-3;
font-size: $font-size-small; font-size: $font-size-small;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center; text-align: center;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 var(--color-border-muted); box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) { @include breakpoint(sm) {
flex: none; flex: none;
@ -270,14 +270,14 @@ $SelectMenu-max-height: 480px !default;
&[aria-selected='true'] { &[aria-selected='true'] {
z-index: 1; // Keeps box-shadow visible when hovering z-index: 1; // Keeps box-shadow visible when hovering
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
cursor: default; cursor: default;
background-color: var(--color-canvas-overlay); background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 0 1px var(--color-border-muted); box-shadow: 0 0 0 1px var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) { @include breakpoint(sm) {
border-color: var(--color-border-muted); border-color: var(--borderColor-muted, var(--color-border-muted));
box-shadow: none; box-shadow: none;
} }
} }
@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 7px $spacer-3; padding: 7px $spacer-3;
text-align: center; text-align: center;
background-color: var(--color-canvas-overlay); background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
} }
// Blankslate and Loading // Blankslate and Loading
@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-loading { .SelectMenu-loading {
padding: $spacer-4 $spacer-3; padding: $spacer-4 $spacer-3;
text-align: center; text-align: center;
background-color: var(--color-canvas-overlay); background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
} }
// Divider // Divider
@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
margin: 0; margin: 0;
font-size: $font-size-small; font-size: $font-size-small;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
border-bottom: $border-width $border-style var(--color-border-muted); border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
// Borderless // Borderless
.SelectMenu-list--borderless & { .SelectMenu-list--borderless & {
border-top: $border-width $border-style var(--color-border-muted); border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
&:empty { &:empty {
padding: 0; padding: 0;
@ -338,9 +338,9 @@ $SelectMenu-max-height: 480px !default;
z-index: 0; // Avoid top border from getting covered by the negative margin of the list z-index: 0; // Avoid top border from getting covered by the negative margin of the list
padding: $spacer-2 $spacer-3; padding: $spacer-2 $spacer-3;
font-size: $font-size-small; font-size: $font-size-small;
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center; text-align: center;
border-top: $border-width $border-style var(--color-border-muted); border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
@include breakpoint(sm) { @include breakpoint(sm) {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
@ -387,7 +387,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-item[aria-checked='true'] { .SelectMenu-item[aria-checked='true'] {
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
.SelectMenu-icon--check { .SelectMenu-icon--check {
visibility: visible; visibility: visible;
@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-item:disabled, .SelectMenu-item:disabled,
.SelectMenu-item[aria-disabled='true'] { .SelectMenu-item[aria-disabled='true'] {
color: var(--color-primer-fg-disabled); color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
pointer-events: none; pointer-events: none;
} }
@ -413,33 +413,33 @@ $SelectMenu-max-height: 480px !default;
@media (hover: hover) { @media (hover: hover) {
body:not(.intent-mouse) .SelectMenu-closeButton:focus, body:not(.intent-mouse) .SelectMenu-closeButton:focus,
.SelectMenu-closeButton:hover { .SelectMenu-closeButton:hover {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
} }
.SelectMenu-closeButton:active { .SelectMenu-closeButton:active {
color: var(--color-fg-muted); color: var(--fgColor-muted, var(--color-fg-muted));
} }
body:not(.intent-mouse) .SelectMenu-item:focus, body:not(.intent-mouse) .SelectMenu-item:focus,
.SelectMenu-item:hover { .SelectMenu-item:hover {
background-color: var(--color-neutral-subtle); background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
} }
.SelectMenu-item:active { .SelectMenu-item:active {
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
body:not(.intent-mouse) .SelectMenu-tab:focus { body:not(.intent-mouse) .SelectMenu-tab:focus {
background-color: var(--color-select-menu-tap-focus-bg); background-color: var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg));
} }
.SelectMenu-tab:hover { .SelectMenu-tab:hover {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
} }
.SelectMenu-tab:not([aria-selected='true']):active { .SelectMenu-tab:not([aria-selected='true']):active {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
} }
@ -451,13 +451,13 @@ $SelectMenu-max-height: 480px !default;
// Android // Android
.SelectMenu-item:focus, .SelectMenu-item:focus,
.SelectMenu-item:active { .SelectMenu-item:active {
background-color: var(--color-canvas-subtle); background-color: var(--bgColor-muted, var(--color-canvas-subtle));
} }
// iOS Safari // iOS Safari
// :active would work if ontouchstart is added to the button // :active would work if ontouchstart is added to the button
// Instead this tweaks the "native" highlight color // Instead this tweaks the "native" highlight color
.SelectMenu-item { .SelectMenu-item {
-webkit-tap-highlight-color: var(--color-select-menu-tap-highlight); -webkit-tap-highlight-color: var(--control-bgColor-active, var(--color-select-menu-tap-highlight));
} }
} }

16
src/support/mixins/misc.scss
View File

@ -1,5 +1,5 @@
// Generate a two-color caret for any element. // Generate a two-color caret for any element.
@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) { @mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
&::after, &::after,
&::before { &::before {
position: absolute; position: absolute;
@ -17,7 +17,7 @@
&::after { &::after {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin-left: 2px; margin-left: 2px;
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
background-image: linear-gradient($background, $background); background-image: linear-gradient($background, $background);
} }
@ -29,31 +29,31 @@
// global focus styles // global focus styles
// inset box-shadow for form controls // inset box-shadow for form controls
@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) { @mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
border-color: var(--color-accent-fg); border-color: var(--focus-outlineColor, var(--color-accent-fg));
outline: none; outline: none;
box-shadow: inset 0 0 0 $outlineWidth $outlineColor; box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
} }
// box-shadow for :target styles (no inset) // box-shadow for :target styles (no inset)
// !important to override PCSS utilities // !important to override PCSS utilities
@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) { @mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
outline: none !important; outline: none !important;
box-shadow: 0 0 0 $outlineWidth $outlineColor !important; box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
} }
// outline // outline
@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) { @mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
outline: 2px solid $outlineColor; outline: 2px solid $outlineColor;
outline-offset: $outlineOffset; outline-offset: $outlineOffset;
box-shadow: none; box-shadow: none;
} }
// outline with fg box-shadow for buttons // outline with fg box-shadow for buttons
@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) { @mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
outline: 2px solid $outlineColor; outline: 2px solid $outlineColor;
outline-offset: $outlineOffset; outline-offset: $outlineOffset;
box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis); box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
} }
// if min-width is undefined, return only min-height // if min-width is undefined, return only min-height

4
src/support/variables/misc.scss
View File

@ -3,8 +3,8 @@
// Border // Border
$border-width: 1px !default; $border-width: 1px !default;
$border-style: solid !default; $border-style: solid !default;
$border: $border-width $border-style var(--color-border-default) !default; $border: $border-width $border-style var(--borderColor-default, var(--color-border-default)) !default;
$border-rem: var(--borderWidth-thin, 1px) solid var(--color-border-default) !default; $border-rem: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !default;
// Border Radius // Border Radius
$border-radius-1: 4px !default; $border-radius-1: 4px !default;

34
src/toasts/toasts.scss
View File

@ -3,10 +3,10 @@
.Toast { .Toast {
display: flex; display: flex;
margin: $spacer-2; margin: $spacer-2;
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--color-canvas-default); background-color: var(--bgColor-default, var(--color-canvas-default));
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large); box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
@include breakpoint(sm) { @include breakpoint(sm) {
width: max-content; width: max-content;
@ -21,8 +21,8 @@
justify-content: center; justify-content: center;
width: $spacer-3 * 3; width: $spacer-3 * 3;
flex-shrink: 0; flex-shrink: 0;
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--color-accent-emphasis); background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
border: $border-width $border-style transparent; border: $border-width $border-style transparent;
border-right: 0; border-right: 0;
border-top-left-radius: inherit; border-top-left-radius: inherit;
@ -52,38 +52,38 @@
// Modifier // Modifier
.Toast--loading { .Toast--loading {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large); box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.Toast-icon { .Toast-icon {
background-color: var(--color-neutral-emphasis); background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
} }
} }
.Toast--error { .Toast--error {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large); box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.Toast-icon { .Toast-icon {
background-color: var(--color-danger-emphasis); background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
} }
} }
.Toast--warning { .Toast--warning {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large); box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.Toast-icon { .Toast-icon {
background-color: var(--color-attention-emphasis); background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
} }
} }
.Toast--success { .Toast--success {
color: var(--color-fg-default); color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large); box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.Toast-icon { .Toast-icon {
background-color: var(--color-success-emphasis); background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
} }
} }

14
src/tooltips/tooltips.scss
View File

@ -10,7 +10,7 @@
padding: $em-spacer-5 $em-spacer-6; padding: $em-spacer-5 $em-spacer-6;
font: normal normal 11px/1.5 $body-font; font: normal normal 11px/1.5 $body-font;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
color: var(--color-fg-on-emphasis); color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
@ -20,7 +20,7 @@
white-space: pre; white-space: pre;
pointer-events: none; pointer-events: none;
content: attr(aria-label); content: attr(aria-label);
background: var(--color-neutral-emphasis-plus); background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
border-radius: $border-radius; border-radius: $border-radius;
opacity: 0; opacity: 0;
} }
@ -32,7 +32,7 @@
display: none; display: none;
width: 0; width: 0;
height: 0; height: 0;
color: var(--color-neutral-emphasis-plus); color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
pointer-events: none; pointer-events: none;
content: ''; content: '';
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
@ -101,7 +101,7 @@
bottom: -7px; bottom: -7px;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin-right: -6px; margin-right: -6px;
border-bottom-color: var(--color-neutral-emphasis-plus); border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
} }
} }
@ -134,7 +134,7 @@
bottom: auto; bottom: auto;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin-right: -6px; margin-right: -6px;
border-top-color: var(--color-neutral-emphasis-plus); border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
} }
} }
@ -172,7 +172,7 @@
left: -7px; left: -7px;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin-top: -6px; margin-top: -6px;
border-left-color: var(--color-neutral-emphasis-plus); border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
} }
} }
@ -192,7 +192,7 @@
bottom: 50%; bottom: 50%;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
margin-top: -6px; margin-top: -6px;
border-right-color: var(--color-neutral-emphasis-plus); border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
} }
} }

8
src/utilities/box-shadow.scss
View File

@ -3,19 +3,19 @@
// Box shadows // Box shadows
.color-shadow-small { .color-shadow-small {
box-shadow: var(--color-shadow-small) !important; box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
} }
.color-shadow-medium { .color-shadow-medium {
box-shadow: var(--color-shadow-medium) !important; box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
} }
.color-shadow-large { .color-shadow-large {
box-shadow: var(--color-shadow-large) !important; box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
} }
.color-shadow-extra-large { .color-shadow-extra-large {
box-shadow: var(--color-shadow-extra-large) !important; box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
} }
// Turn off box shadow // Turn off box shadow

114
src/utilities/colors.scss
View File

@ -2,91 +2,91 @@
// Foreground // Foreground
.color-fg-default { color: var(--color-fg-default) !important; } .color-fg-default { color: var(--fgColor-default, var(--color-fg-default)) !important; }
.color-fg-muted { color: var(--color-fg-muted) !important; } .color-fg-muted { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
.color-fg-subtle { color: var(--color-fg-subtle) !important; } .color-fg-subtle { color: var(--fgColor-muted, var(--color-fg-subtle)) !important; }
.color-fg-accent { color: var(--color-accent-fg) !important; } .color-fg-accent { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
.color-fg-success { color: var(--color-success-fg) !important; } .color-fg-success { color: var(--fgColor-success, var(--color-success-fg)) !important; }
.color-fg-attention { color: var(--color-attention-fg) !important; } .color-fg-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
.color-fg-severe { color: var(--color-severe-fg) !important; } .color-fg-severe { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
.color-fg-danger { color: var(--color-danger-fg) !important; } .color-fg-danger { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
.color-fg-open { color: var(--color-open-fg) !important; } .color-fg-open { color: var(--fgColor-open, var(--color-open-fg)) !important; }
.color-fg-closed { color: var(--color-closed-fg) !important; } .color-fg-closed { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
.color-fg-done { color: var(--color-done-fg) !important; } .color-fg-done { color: var(--fgColor-done, var(--color-done-fg)) !important; }
.color-fg-sponsors { color: var(--color-sponsors-fg) !important; } .color-fg-sponsors { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; } .color-fg-on-emphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
// Background // Background
.color-bg-default { background-color: var(--color-canvas-default) !important; } .color-bg-default { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
.color-bg-overlay { background-color: var(--color-canvas-overlay) !important; } .color-bg-overlay { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
.color-bg-inset { background-color: var(--color-canvas-inset) !important; } .color-bg-inset { background-color: var(--bgColor-muted, var(--color-canvas-inset)) !important; }
.color-bg-subtle { background-color: var(--color-canvas-subtle) !important; } .color-bg-subtle { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; } .color-bg-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
.color-bg-accent { background-color: var(--color-accent-subtle) !important; } .color-bg-accent { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; } .color-bg-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
.color-bg-success { background-color: var(--color-success-subtle) !important; } .color-bg-success { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; } .color-bg-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
.color-bg-attention { background-color: var(--color-attention-subtle) !important; } .color-bg-attention { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; } .color-bg-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
.color-bg-severe { background-color: var(--color-severe-subtle) !important; } .color-bg-severe { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; } .color-bg-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
.color-bg-danger { background-color: var(--color-danger-subtle) !important; } .color-bg-danger { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; } .color-bg-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
.color-bg-open { background-color: var(--color-open-subtle) !important; } .color-bg-open { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; } .color-bg-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
.color-bg-closed { background-color: var(--color-closed-subtle) !important; } .color-bg-closed { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; } .color-bg-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
.color-bg-done { background-color: var(--color-done-subtle) !important; } .color-bg-done { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; } .color-bg-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
.color-bg-sponsors { background-color: var(--color-sponsors-subtle) !important; } .color-bg-sponsors { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; } .color-bg-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
.color-bg-transparent { background-color: transparent !important; } .color-bg-transparent { background-color: transparent !important; }
// Border // Border
.color-border-default { border-color: var(--color-border-default) !important; } .color-border-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
.color-border-muted { border-color: var(--color-border-muted) !important; } .color-border-muted { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
.color-border-subtle { border-color: var(--color-border-subtle) !important; } .color-border-subtle { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
.color-border-accent { border-color: var(--color-accent-muted) !important; } .color-border-accent { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; } .color-border-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
.color-border-success { border-color: var(--color-success-muted) !important; } .color-border-success { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; } .color-border-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
.color-border-attention { border-color: var(--color-attention-muted) !important; } .color-border-attention { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; } .color-border-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
.color-border-severe { border-color: var(--color-severe-muted) !important; } .color-border-severe { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; } .color-border-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
.color-border-danger { border-color: var(--color-danger-muted) !important; } .color-border-danger { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; } .color-border-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
.color-border-open { border-color: var(--color-open-muted) !important; } .color-border-open { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; } .color-border-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
.color-border-closed { border-color: var(--color-closed-muted) !important; } .color-border-closed { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; } .color-border-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
.color-border-done { border-color: var(--color-done-muted) !important; } .color-border-done { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; } .color-border-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
.color-border-sponsors { border-color: var(--color-sponsors-muted) !important; } .color-border-sponsors { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; } .color-border-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
// Misc // Misc

2
src/utilities/details.scss
View File

@ -15,7 +15,7 @@
.details-overlay-dark[open] > summary::before { .details-overlay-dark[open] > summary::before {
z-index: 111; z-index: 111;
background: var(--color-primer-canvas-backdrop); background: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
} }
.details-reset { .details-reset {

10
stylelint.config.cjs
View File

@ -2,6 +2,12 @@ module.exports = {
extends: ['@primer/stylelint-config'], extends: ['@primer/stylelint-config'],
ignoreFiles: ['**/*.js', '**/*.cjs'], ignoreFiles: ['**/*.js', '**/*.cjs'],
rules: { rules: {
'primer/no-override': false 'primer/no-override': false,
} 'primer/no-deprecated-colors': [
true,
{
inlineFallback: true,
},
],
},
} }

11
yarn.lock
View File

@ -980,14 +980,13 @@
resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.12.tgz#1a36354e789f8cc3c178b66b2d100b64d4fb209d" resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.12.tgz#1a36354e789f8cc3c178b66b2d100b64d4fb209d"
integrity sha512-AvTiuLHvvby2KPZbwwJ7GrtRJYgWyepF6XAOMw7G7Kc2iP3E32OHmaFukwh3gY+OqwcxY7st2tHWll2brk1vfQ== integrity sha512-AvTiuLHvvby2KPZbwwJ7GrtRJYgWyepF6XAOMw7G7Kc2iP3E32OHmaFukwh3gY+OqwcxY7st2tHWll2brk1vfQ==
"@primer/stylelint-config@^12.4.0": "@primer/stylelint-config@^12.7.1":
version "12.7.0" version "12.7.1"
resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.7.0.tgz#4fb7b77d543ebde78074a50f983b402379bb812b" resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.7.1.tgz#b98f428957bd53867d248b463f2221c174afd606"
integrity sha512-aFIosv6VXKHRH/0JQLDHDV9UmUPgvPlHOE26IJz/UDZVT5KHtqj5sWf01XgKpwgp+Bbryxr7WgwKyCo6SvgC4A== integrity sha512-jHuxjRpyZ0K02kwz+SUpw/cBMnU67AzPhC2FSj9dEq8hZTZHnyN2tN/CQk3C4I/5Mlgc8y1cl+x0FKXjO15dQQ==
dependencies: dependencies:
anymatch "^3.1.1" anymatch "^3.1.1"
globby "^11.0.1" globby "^11.0.1"
lodash.kebabcase "^4.1.1"
postcss-scss "^4.0.2" postcss-scss "^4.0.2"
postcss-value-parser "^4.0.2" postcss-value-parser "^4.0.2"
string.prototype.matchall "^4.0.2" string.prototype.matchall "^4.0.2"
@ -3975,7 +3974,7 @@ lodash.debounce@^4.0.8:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
lodash.kebabcase@4.1.1, lodash.kebabcase@^4.1.1: lodash.kebabcase@4.1.1:
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
integrity sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g== integrity sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==