primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-23 14:13:14 +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",
"@csstools/postcss-sass": "5.0.1",
"@github/prettier-config": "0.0.6",
"@primer/stylelint-config": "^12.4.0",
"@primer/stylelint-config": "^12.7.1",
"autoprefixer": "10.4.13",
"chokidar-cli": "3.0.0",
"cssstats": "4.0.5",

22
src/autocomplete/suggester.scss
View File

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

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

@ -10,8 +10,8 @@
position: absolute;
right: -15%;
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
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;
align-items: center;
justify-content: center;
background-color: var(--color-canvas-default);
background-color: var(--bgColor-default, var(--color-canvas-default));
border-radius: 50%;
box-shadow: var(--color-shadow-medium);
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
}
.CircleBadge-icon {
@ -46,7 +46,7 @@
width: 100%;
content: '';
// 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 {

12
src/base/base.scss
View File

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

10
src/base/kbd.scss
View File

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

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

@ -3,9 +3,9 @@
width: 448px;
margin-right: auto;
margin-left: auto;
background-color: var(--color-canvas-default);
background-color: var(--bgColor-default, var(--color-canvas-default));
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
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
@ -36,7 +36,7 @@
.help {
padding-top: $spacer-2;
margin: 0;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center;
}
}

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

@ -7,25 +7,25 @@
// stylelint-disable-next-line primer/spacing
padding: 2px 6px;
font: 12px $mono-font;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
word-break: break-all;
background-color: var(--color-accent-subtle);
background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
border-radius: $border-radius;
.octicon {
// stylelint-disable-next-line primer/spacing
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
a.branch-name {
color: var(--color-accent-fg);
background-color: var(--color-accent-subtle);
color: var(--fgColor-accent, var(--color-accent-fg));
background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
.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 {
margin-right: $spacer-1;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
vertical-align: text-bottom;
&:only-child {
@ -50,7 +50,7 @@
color: inherit;
text-shadow: none;
vertical-align: top;
background-color: var(--color-btn-counter-bg);
background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));
}
.dropdown-caret {
@ -62,42 +62,42 @@
// Default button
.btn {
color: var(--color-btn-text);
background-color: var(--color-btn-bg);
border-color: var(--color-btn-border);
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
color: var(--button-default-fgColor-rest, var(--color-btn-text));
background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
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-property: color, background-color, box-shadow, border-color;
&:hover,
&.hover,
[open] > & {
background-color: var(--color-btn-hover-bg);
border-color: var(--color-btn-hover-border);
background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
transition-duration: 0.1s;
}
&:active {
background-color: var(--color-btn-active-bg);
border-color: var(--color-btn-active-border);
background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
transition: none;
}
&.selected,
&[aria-selected='true'] {
background-color: var(--color-btn-selected-bg);
box-shadow: var(--color-primer-shadow-inset);
background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
}
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-primer-fg-disabled);
background-color: var(--color-btn-bg);
border-color: var(--color-btn-border);
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
.octicon {
color: var(--color-primer-fg-disabled);
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
}
}
}
@ -105,16 +105,16 @@
// Primary button
.btn-primary {
color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-bg);
border-color: var(--color-btn-primary-border);
box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text));
background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));
border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border));
box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
&:hover,
&.hover,
[open] > & {
background-color: var(--color-btn-primary-hover-bg);
border-color: var(--color-btn-primary-hover-border);
background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));
border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border));
}
// fallback :focus state
@ -136,29 +136,29 @@
&:active,
&.selected,
&[aria-selected='true'] {
background-color: var(--color-btn-primary-selected-bg);
box-shadow: var(--color-btn-primary-selected-shadow);
background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));
box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow));
}
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-btn-primary-disabled-text);
background-color: var(--color-btn-primary-disabled-bg);
border-color: var(--color-btn-primary-disabled-border);
color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));
border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border));
.octicon {
color: var(--color-btn-primary-disabled-text);
color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
}
}
.Counter {
color: inherit;
background-color: var(--color-btn-primary-counter-bg);
background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));
}
.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
.btn-outline {
color: var(--color-btn-outline-text);
color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));
&:hover,
[open] > & {
color: var(--color-btn-outline-hover-text);
background-color: var(--color-btn-outline-hover-bg);
border-color: var(--color-btn-outline-hover-border);
box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));
background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));
border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));
box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow));
.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 {
@ -206,10 +206,10 @@ a.btn-primary {
&:active,
&.selected,
&[aria-selected='true'] {
color: var(--color-btn-outline-selected-text);
background-color: var(--color-btn-outline-selected-bg);
border-color: var(--color-btn-outline-selected-border);
box-shadow: var(--color-btn-outline-selected-shadow);
color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));
background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));
border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));
box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow));
// fallback :focus state
&:focus {
@ -231,76 +231,76 @@ a.btn-primary {
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-btn-outline-disabled-text);
background-color: var(--color-btn-outline-disabled-bg);
border-color: var(--color-btn-border);
color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));
background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));
border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
box-shadow: none;
.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 {
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
.btn-danger {
color: var(--color-btn-danger-text);
color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text));
.octicon {
color: var(--color-btn-danger-icon);
color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));
}
&:hover,
[open] > & {
color: var(--color-btn-danger-hover-text);
background-color: var(--color-btn-danger-hover-bg);
border-color: var(--color-btn-danger-hover-border);
box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
color: var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text));
background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg));
border-color: var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border));
box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow));
.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 {
color: var(--color-btn-danger-hover-icon);
color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon));
}
}
&:active,
&.selected,
&[aria-selected='true'] {
color: var(--color-btn-danger-selected-text);
background-color: var(--color-btn-danger-selected-bg);
border-color: var(--color-btn-danger-selected-border);
box-shadow: var(--color-btn-danger-selected-shadow);
color: var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text));
background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg));
border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border));
box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow));
}
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-btn-danger-disabled-text);
background-color: var(--color-btn-danger-disabled-bg);
border-color: var(--color-btn-border);
color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg));
border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
box-shadow: none;
.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 {
color: var(--color-btn-danger-disabled-text);
color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
}
}
.Counter {
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;
padding: 0;
font-size: inherit;
color: var(--color-accent-fg);
color: var(--fgColor-accent, var(--color-accent-fg));
text-decoration: none;
white-space: nowrap;
cursor: pointer;
@ -24,7 +24,7 @@
&[aria-disabled='true'] {
&,
&:hover {
color: var(--color-primer-fg-disabled);
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
cursor: default;
}
}
@ -42,7 +42,7 @@
//
// Typically used as a "cancel" button next to a .btn
.btn-invisible {
color: var(--color-accent-fg);
color: var(--fgColor-accent, var(--color-accent-fg));
background-color: transparent; // Reset default gradient backgrounds and colors
border: 0;
border-radius: $border-radius;
@ -50,8 +50,8 @@
&:hover,
&.zeroclipboard-is-hover {
color: var(--color-accent-fg);
background-color: var(--color-btn-hover-bg);
color: var(--fgColor-accent, var(--color-accent-fg));
background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
outline: none;
box-shadow: none;
}
@ -60,21 +60,21 @@
&.selected,
&[aria-selected='true'],
&.zeroclipboard-is-active {
color: var(--color-accent-fg);
color: var(--fgColor-accent, var(--color-accent-fg));
background: none;
border-color: var(--color-btn-active-border);
border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
@include focusOutline;
}
&: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,
&[aria-disabled='true'] {
color: var(--color-primer-fg-disabled);
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
background-color: transparent;
}
}
@ -89,7 +89,7 @@
// stylelint-disable-next-line primer/spacing
margin-left: 5px;
line-height: $lh-condensed-ultra;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
vertical-align: middle;
// For `<button>` elements
@ -98,7 +98,7 @@
box-shadow: none;
&:hover {
color: var(--color-accent-fg);
color: var(--fgColor-accent, var(--color-accent-fg));
}
&:focus,
@ -108,17 +108,17 @@
&.disabled,
&[aria-disabled='true'] {
color: var(--color-primer-fg-disabled);
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
cursor: default;
&:hover {
color: var(--color-primer-fg-disabled);
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
}
}
}
.btn-octicon-danger:hover {
color: var(--color-danger-fg);
color: var(--fgColor-danger, var(--color-danger-fg));
}
// Close button
@ -126,12 +126,12 @@
// Typically used with an octicon-x
.close-button {
padding: 0;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
background: transparent;
border: 0;
&:hover {
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
}
&:active {
@ -165,22 +165,22 @@
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 6px;
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
text-decoration: none;
vertical-align: middle;
background: var(--color-neutral-muted);
background: var(--bgColor-neutral-muted, var(--color-neutral-muted));
border: 0;
// stylelint-disable-next-line primer/borders
border-radius: 1px;
&:hover {
text-decoration: none;
background-color: var(--color-accent-muted);
background-color: var(--bgColor-accent-muted, var(--color-accent-muted));
}
&:active {
color: var(--color-fg-on-emphasis);
background-color: var(--color-accent-emphasis);
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
}
}
@ -210,14 +210,14 @@
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
vertical-align: middle;
background-color: var(--color-canvas-default);
border: $border-width $border-style var(--color-btn-border);
background-color: var(--bgColor-default, var(--color-canvas-default));
border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
border-left: 0;
border-top-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,
&:active {
@ -225,7 +225,7 @@
}
&:hover {
color: var(--color-accent-fg);
color: var(--fgColor-accent, var(--color-accent-fg));
cursor: pointer;
}
}

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

@ -6,8 +6,8 @@
@include color-mode(dark) { color-scheme: dark; }
[data-color-mode] {
color: var(--color-fg-default);
background-color: var(--color-canvas-default);
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-default, var(--color-canvas-default));
}
// Windows High Contrast mode
@ -18,5 +18,7 @@
body {
--color-accent-emphasis: Highlight;
--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;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
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-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;
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-property: color, background-color, box-shadow, border-color;
@ -43,20 +43,20 @@
&.border-0 {
&:focus,
&: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],
fieldset[disabled] & {
color: var(--color-primer-fg-disabled);
background-color: var(--color-input-disabled-bg);
border-color: var(--color-border-default);
-webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
border-color: var(--borderColor-default, var(--color-border-default));
-webkit-text-fill-color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
opacity: 1; // Fix for Safari iOS
&::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.
.input-contrast {
background-color: var(--color-canvas-inset);
background-color: var(--bgColor-muted, var(--color-canvas-inset));
&: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
padding: 2px $spacer-1;
font-style: normal;
background: var(--color-attention-subtle);
background: var(--bgColor-attention-muted, var(--color-attention-subtle));
border-radius: $border-radius;
}
}
@ -160,7 +160,7 @@ textarea.form-control {
margin: 0;
font-size: $font-size-small;
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;
// stylelint-disable-next-line primer/spacing
margin: 5px 0 0;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
}
img {
@ -251,9 +251,9 @@ input::-webkit-inner-spin-button {
// stylelint-disable-next-line primer/spacing
margin: 10px 0;
font-size: $h5-size;
color: var(--color-attention-fg);
background: var(--color-attention-subtle);
border: $border-width $border-style var(--color-attention-emphasis);
color: var(--fgColor-attention, var(--color-attention-fg));
background: var(--bgColor-attention-muted, var(--color-attention-subtle));
border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
border-radius: $border-radius;
p {

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

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

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

@ -6,7 +6,7 @@
max-width: 100%;
height: $size-5;
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)
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
background-repeat: no-repeat;

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

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

14
src/header/header.scss
View File

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

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

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

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

@ -2,7 +2,7 @@
// stylelint-disable selector-max-specificity
// 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;
:root {
@ -44,7 +44,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
height: #{$spacer-2}; // 8px
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;
}

2
src/layout/stack.scss
View File

@ -30,7 +30,7 @@
--Stack-gap-whenRegular: #{$Stack-gap-default};
--Stack-gap-whenNarrow: #{$Stack-gap-default};
--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;
flex-flow: column;

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

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

6
src/markdown/code.scss
View File

@ -9,7 +9,7 @@
// stylelint-disable-next-line primer/typography
font-size: 85%;
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;
br { display: none; }
@ -58,8 +58,8 @@
font-size: 85%;
// stylelint-disable-next-line primer/typography
line-height: 1.45;
color: var(--color-fg-default);
background-color: var(--color-canvas-subtle);
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
border-radius: $border-radius;
}

6
src/markdown/footnotes.scss
View File

@ -14,7 +14,7 @@
.footnotes {
font-size: $h6-size;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
border-top: $border;
ol {
@ -40,12 +40,12 @@
pointer-events: none;
content: '';
// 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;
}
li:target {
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
}
.data-footnote-backref g-emoji {

8
src/markdown/headings.scss
View File

@ -15,7 +15,7 @@
line-height: $lh-condensed;
.octicon-link {
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
vertical-align: middle;
visibility: hidden;
}
@ -41,7 +41,7 @@
padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography
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 {
@ -49,7 +49,7 @@
padding-bottom: 0.3em;
// stylelint-disable-next-line primer/typography
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 {
@ -69,7 +69,7 @@
h6 {
// stylelint-disable-next-line primer/typography
font-size: 0.85em;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
}
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
// specify the width of their images in their markdown.
box-sizing: content-box;
background-color: var(--color-canvas-default);
background-color: var(--bgColor-default, var(--color-canvas-default));
&[align='right'] {
// stylelint-disable-next-line primer/spacing
@ -44,7 +44,7 @@
// stylelint-disable-next-line primer/spacing
margin: 13px 0 0;
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 {
@ -57,7 +57,7 @@
// stylelint-disable-next-line primer/spacing
padding: 5px 0 0;
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
.absent {
color: var(--color-danger-fg);
color: var(--fgColor-danger, var(--color-danger-fg));
}
.anchor {
@ -74,16 +74,16 @@
height: $em-spacer-3;
padding: 0;
margin: $spacer-4 0;
background-color: var(--color-border-default);
background-color: var(--borderColor-default, var(--color-border-default));
border: 0;
}
blockquote {
// stylelint-disable-next-line primer/spacing
padding: 0 1em;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
// 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 {
margin-top: 0;

8
src/markdown/tables.scss
View File

@ -17,7 +17,7 @@
td {
// stylelint-disable-next-line primer/spacing
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 {
@ -27,11 +27,11 @@
}
tr {
background-color: var(--color-canvas-default);
border-top: $border-width $border-style var(--color-border-muted);
background-color: var(--bgColor-default, var(--color-canvas-default));
border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
&: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 {
position: relative;
z-index: 1;
@ -9,7 +8,7 @@
font-size: 1rem;
font-weight: $font-weight-bold;
line-height: 1;
color: var(--color-canvas-default);
color: var(--bgColor-default, var(--color-canvas-default));
text-align: center;
white-space: nowrap;
vertical-align: middle;
@ -56,7 +55,7 @@
// fallback :focus state
&: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
&:not(:focus-visible) {
@ -67,7 +66,7 @@
// default focus state
&:focus-visible {
@include focusOutline(2px, var(--color-accent-fg));
@include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
}
&:active {
@ -85,7 +84,7 @@
}
.btn-muted-mktg {
color: var(--color-fg-default) !important;
color: var(--fgColor-default, var(--color-fg-default)) !important;
background: none !important;
box-shadow: var(--color-mktg-btn-shadow-outline);
@ -99,17 +98,17 @@
&:active {
// 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 {
// 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 {
color: var(--color-fg-default) !important;
color: var(--fgColor-default, var(--color-fg-default)) !important;
background: none !important;
box-shadow: none !important;
@ -135,7 +134,7 @@
// fallback :focus state
&: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
&:not(:focus-visible) {
@ -146,7 +145,7 @@
// default focus state
&: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 {
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
background-color: transparent;
&.pjax-active {
color: var(--color-fg-on-emphasis);
background-color: var(--color-accent-emphasis);
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
}
}
}
@ -30,7 +30,7 @@
margin-bottom: $spacer-1;
overflow: hidden;
font-size: $h5-size;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
@ -39,14 +39,14 @@
&:hover {
text-decoration: none;
background-color: var(--color-canvas-subtle);
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
}
&.selected,
&[aria-selected='true'],
&[aria-current]:not([aria-current='false']) {
color: var(--color-fg-on-emphasis);
background-color: var(--color-accent-emphasis);
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
// fallback :focus state
&:focus {
@ -77,6 +77,6 @@
bottom: 2px;
z-index: -1;
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.
.SideNav {
background-color: var(--color-canvas-subtle);
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
}
.SideNav-item {
@ -12,11 +12,11 @@
width: 100%;
// stylelint-disable-next-line primer/spacing
padding: 12px $spacer-3;
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
text-align: left;
background-color: transparent;
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 {
border-top: 0;
@ -25,7 +25,7 @@
&:last-child {
// makes sure there is a "bottom border" in case the list is not long enough
// 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
@ -45,20 +45,20 @@
.SideNav-item:hover {
text-decoration: none;
background-color: var(--color-neutral-subtle);
background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
}
.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-selected='true'] {
background-color: var(--color-sidenav-selected-bg);
background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg));
// Bar on the left
&::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 {
width: 16px;
margin-right: $spacer-2;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
}
// Sub Nav
@ -81,19 +81,19 @@
display: block;
width: 100%;
padding: $spacer-1 0;
color: var(--color-accent-fg);
color: var(--fgColor-accent, var(--color-accent-fg));
text-align: left;
background-color: transparent;
border: 0;
}
.SideNav-subItem:hover {
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
text-decoration: none;
}
.SideNav-subItem[aria-current]:not([aria-current='false']),
.SideNav-subItem[aria-selected='true'] {
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 {
// stylelint-disable-next-line primer/spacing
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 {
@ -27,8 +27,8 @@
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
color: var(--color-fg-default);
border: $border-width $border-style var(--color-border-default);
color: var(--fgColor-default, var(--color-fg-default));
border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+ .subnav-item {
// stylelint-disable-next-line primer/spacing
@ -38,16 +38,16 @@
&:hover,
&:focus {
text-decoration: none;
background-color: var(--color-canvas-subtle);
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
}
&.selected,
&[aria-selected='true'],
&[aria-current]:not([aria-current='false']) {
z-index: 2;
color: var(--color-fg-on-emphasis);
background-color: var(--color-accent-emphasis);
border-color: var(--color-accent-emphasis);
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
// fallback :focus state
&:focus {
@ -86,7 +86,7 @@
.subnav-search-input {
width: 320px;
padding-left: $spacer-5;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
}
.subnav-search-input-wide {
@ -99,7 +99,7 @@
top: 9px;
left: 8px;
display: block;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center;
pointer-events: none;
}

14
src/pagination/pagination.scss
View File

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

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

@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
left: 0;
pointer-events: none;
content: '';
background-color: var(--color-primer-canvas-backdrop);
background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
@include breakpoint(sm) {
display: none;
@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
overflow: hidden; // Enables border radius on scrollable child elements
pointer-events: auto;
flex-direction: column;
background-color: var(--color-canvas-overlay);
border: $border-width $border-style var(--color-select-menu-backdrop-border);
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
// stylelint-disable-next-line primer/borders
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;
@keyframes SelectMenu-modal-animation {
@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
max-height: $SelectMenu-max-height;
margin: $spacer-2 0 $spacer-3 0;
font-size: $font-size-small;
border-color: var(--color-border-default);
border-color: var(--borderColor-default, var(--color-border-default));
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;
}
}
@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
padding: $spacer-3;
flex: none; // fixes header from getting squeezed in Safari iOS
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) {
// stylelint-disable-next-line primer/spacing
@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
padding: $spacer-3;
margin: -$spacer-3;
line-height: 1;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
background-color: transparent;
border: 0;
@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-filter {
padding: $spacer-3;
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) {
padding: $spacer-2;
@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
flex: auto;
overflow-x: hidden;
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
}
@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
width: 100%;
padding: $spacer-3;
overflow: hidden;
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
text-align: left;
cursor: pointer;
background-color: var(--color-canvas-overlay);
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
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) {
// stylelint-disable-next-line primer/spacing
@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
overflow-x: auto;
overflow-y: hidden;
// 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;
// Hide scrollbar so it doesn't cover the text
@ -252,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
padding: $spacer-2 $spacer-3;
font-size: $font-size-small;
font-weight: $font-weight-semibold;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
text-align: center;
background-color: transparent;
border: 0;
// 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) {
flex: none;
@ -270,14 +270,14 @@ $SelectMenu-max-height: 480px !default;
&[aria-selected='true'] {
z-index: 1; // Keeps box-shadow visible when hovering
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-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
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) {
border-color: var(--color-border-muted);
border-color: var(--borderColor-muted, var(--color-border-muted));
box-shadow: none;
}
}
@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
// stylelint-disable-next-line primer/spacing
padding: 7px $spacer-3;
text-align: center;
background-color: var(--color-canvas-overlay);
border-bottom: $border-width $border-style var(--color-border-muted);
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
}
// Blankslate and Loading
@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-loading {
padding: $spacer-4 $spacer-3;
text-align: center;
background-color: var(--color-canvas-overlay);
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
}
// Divider
@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
margin: 0;
font-size: $font-size-small;
font-weight: $font-weight-semibold;
color: var(--color-fg-muted);
background-color: var(--color-canvas-subtle);
border-bottom: $border-width $border-style var(--color-border-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
// 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 {
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
padding: $spacer-2 $spacer-3;
font-size: $font-size-small;
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
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) {
// stylelint-disable-next-line primer/spacing
@ -387,7 +387,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-item[aria-checked='true'] {
font-weight: $font-weight-semibold;
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
.SelectMenu-icon--check {
visibility: visible;
@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
.SelectMenu-item:disabled,
.SelectMenu-item[aria-disabled='true'] {
color: var(--color-primer-fg-disabled);
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
pointer-events: none;
}
@ -413,33 +413,33 @@ $SelectMenu-max-height: 480px !default;
@media (hover: hover) {
body:not(.intent-mouse) .SelectMenu-closeButton:focus,
.SelectMenu-closeButton:hover {
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
}
.SelectMenu-closeButton:active {
color: var(--color-fg-muted);
color: var(--fgColor-muted, var(--color-fg-muted));
}
body:not(.intent-mouse) .SelectMenu-item:focus,
.SelectMenu-item:hover {
background-color: var(--color-neutral-subtle);
background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
}
.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 {
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 {
color: var(--color-fg-default);
color: var(--fgColor-default, var(--color-fg-default));
}
.SelectMenu-tab:not([aria-selected='true']):active {
color: var(--color-fg-default);
background-color: var(--color-canvas-subtle);
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
}
}
@ -451,13 +451,13 @@ $SelectMenu-max-height: 480px !default;
// Android
.SelectMenu-item:focus,
.SelectMenu-item:active {
background-color: var(--color-canvas-subtle);
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
}
// iOS Safari
// :active would work if ontouchstart is added to the button
// Instead this tweaks the "native" highlight color
.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.
@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,
&::before {
position: absolute;
@ -17,7 +17,7 @@
&::after {
// stylelint-disable-next-line primer/spacing
margin-left: 2px;
background-color: var(--color-canvas-default);
background-color: var(--bgColor-default, var(--color-canvas-default));
background-image: linear-gradient($background, $background);
}
@ -29,31 +29,31 @@
// global focus styles
// inset box-shadow for form controls
@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
border-color: var(--color-accent-fg);
@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
border-color: var(--focus-outlineColor, var(--color-accent-fg));
outline: none;
box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
}
// box-shadow for :target styles (no inset)
// !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;
box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
}
// 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-offset: $outlineOffset;
box-shadow: none;
}
// 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-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

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

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

34
src/toasts/toasts.scss
View File

@ -3,10 +3,10 @@
.Toast {
display: flex;
margin: $spacer-2;
color: var(--color-fg-default);
background-color: var(--color-canvas-default);
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-default, var(--color-canvas-default));
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) {
width: max-content;
@ -21,8 +21,8 @@
justify-content: center;
width: $spacer-3 * 3;
flex-shrink: 0;
color: var(--color-fg-on-emphasis);
background-color: var(--color-accent-emphasis);
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
border: $border-width $border-style transparent;
border-right: 0;
border-top-left-radius: inherit;
@ -52,38 +52,38 @@
// Modifier
.Toast--loading {
color: var(--color-fg-default);
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.Toast-icon {
background-color: var(--color-neutral-emphasis);
background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
}
}
.Toast--error {
color: var(--color-fg-default);
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.Toast-icon {
background-color: var(--color-danger-emphasis);
background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
}
}
.Toast--warning {
color: var(--color-fg-default);
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.Toast-icon {
background-color: var(--color-attention-emphasis);
background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
}
}
.Toast--success {
color: var(--color-fg-default);
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
color: var(--fgColor-default, var(--color-fg-default));
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-large, var(--color-shadow-large));
.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;
font: normal normal 11px/1.5 $body-font;
-webkit-font-smoothing: subpixel-antialiased;
color: var(--color-fg-on-emphasis);
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
text-align: center;
text-decoration: none;
text-shadow: none;
@ -20,7 +20,7 @@
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: var(--color-neutral-emphasis-plus);
background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
border-radius: $border-radius;
opacity: 0;
}
@ -32,7 +32,7 @@
display: none;
width: 0;
height: 0;
color: var(--color-neutral-emphasis-plus);
color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
pointer-events: none;
content: '';
// stylelint-disable-next-line primer/borders
@ -101,7 +101,7 @@
bottom: -7px;
// stylelint-disable-next-line primer/spacing
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;
// stylelint-disable-next-line primer/spacing
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;
// stylelint-disable-next-line primer/spacing
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%;
// stylelint-disable-next-line primer/spacing
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
.color-shadow-small {
box-shadow: var(--color-shadow-small) !important;
box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
}
.color-shadow-medium {
box-shadow: var(--color-shadow-medium) !important;
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
}
.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 {
box-shadow: var(--color-shadow-extra-large) !important;
box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
}
// Turn off box shadow

114
src/utilities/colors.scss
View File

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

2
src/utilities/details.scss
View File

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

10
stylelint.config.cjs
View File

@ -2,6 +2,12 @@ module.exports = {
extends: ['@primer/stylelint-config'],
ignoreFiles: ['**/*.js', '**/*.cjs'],
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"
integrity sha512-AvTiuLHvvby2KPZbwwJ7GrtRJYgWyepF6XAOMw7G7Kc2iP3E32OHmaFukwh3gY+OqwcxY7st2tHWll2brk1vfQ==
"@primer/stylelint-config@^12.4.0":
version "12.7.0"
resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.7.0.tgz#4fb7b77d543ebde78074a50f983b402379bb812b"
integrity sha512-aFIosv6VXKHRH/0JQLDHDV9UmUPgvPlHOE26IJz/UDZVT5KHtqj5sWf01XgKpwgp+Bbryxr7WgwKyCo6SvgC4A==
"@primer/stylelint-config@^12.7.1":
version "12.7.1"
resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.7.1.tgz#b98f428957bd53867d248b463f2221c174afd606"
integrity sha512-jHuxjRpyZ0K02kwz+SUpw/cBMnU67AzPhC2FSj9dEq8hZTZHnyN2tN/CQk3C4I/5Mlgc8y1cl+x0FKXjO15dQQ==
dependencies:
anymatch "^3.1.1"
globby "^11.0.1"
lodash.kebabcase "^4.1.1"
postcss-scss "^4.0.2"
postcss-value-parser "^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"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
lodash.kebabcase@4.1.1, lodash.kebabcase@^4.1.1:
lodash.kebabcase@4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
integrity sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==