Skip to content

Commit 9204701

Browse files
langermanklangermank
authored
Use @primer/primitives v8 colors with fallbacks (#2466)
* bump * run stylelint * lint * bump release * Create tidy-brooms-search.md
1 parent 24c66b5 commit 9204701

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+428
-417
lines changed

‎.changeset/tidy-brooms-search.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Use `@primer/primitives` v8 colors with fallbacks

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"@changesets/cli": "2.26.1",
5151
"@csstools/postcss-sass": "5.0.1",
5252
"@github/prettier-config": "0.0.6",
53-
"@primer/stylelint-config": "^12.4.0",
53+
"@primer/stylelint-config": "^12.7.1",
5454
"autoprefixer": "10.4.13",
5555
"chokidar-cli": "3.0.0",
5656
"cssstats": "4.0.5",

‎src/autocomplete/suggester.scss

+11-11
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111
margin-top: $spacer-4;
1212
list-style: none;
1313
cursor: pointer;
14-
background: var(--color-canvas-overlay);
15-
border: $border-width $border-style var(--color-border-default);
14+
background: var(--overlay-bgColor, var(--color-canvas-overlay));
15+
border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
1616
border-radius: $border-radius;
17-
box-shadow: var(--color-shadow-medium);
17+
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
1818

1919
li {
2020
display: block;
2121
padding: $spacer-1 $spacer-2;
2222
font-weight: $font-weight-semibold;
23-
border-bottom: $border-width $border-style var(--color-border-muted);
23+
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
2424

2525
small {
2626
font-weight: $font-weight-normal;
27-
color: var(--color-fg-muted);
27+
color: var(--fgColor-muted, var(--color-fg-muted));
2828
}
2929

3030
&:last-child {
@@ -39,12 +39,12 @@
3939
}
4040

4141
&:hover {
42-
color: var(--color-fg-on-emphasis);
42+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
4343
text-decoration: none;
44-
background: var(--color-accent-emphasis);
44+
background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
4545

4646
small {
47-
color: var(--color-fg-on-emphasis);
47+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
4848
}
4949

5050
.octicon {
@@ -54,12 +54,12 @@
5454

5555
&[aria-selected='true'],
5656
&.navigation-focus {
57-
color: var(--color-fg-on-emphasis);
57+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
5858
text-decoration: none;
59-
background: var(--color-accent-emphasis);
59+
background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
6060

6161
small {
62-
color: var(--color-fg-on-emphasis);
62+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
6363
}
6464

6565
.octicon {

‎src/avatars/avatar-parent-child.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
position: absolute;
1111
right: -15%;
1212
bottom: -9%;
13-
background-color: var(--color-canvas-default); // For transparent backgrounds
13+
background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
1414
// stylelint-disable-next-line primer/borders
1515
border-radius: $border-radius-1;
16-
box-shadow: var(--color-avatar-child-shadow);
16+
box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
1717
}

‎src/avatars/circle-badge.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
display: flex;
55
align-items: center;
66
justify-content: center;
7-
background-color: var(--color-canvas-default);
7+
background-color: var(--bgColor-default, var(--color-canvas-default));
88
border-radius: 50%;
9-
box-shadow: var(--color-shadow-medium);
9+
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
1010
}
1111

1212
.CircleBadge-icon {
@@ -46,7 +46,7 @@
4646
width: 100%;
4747
content: '';
4848
// stylelint-disable-next-line primer/borders
49-
border-bottom: 2px dashed var(--color-border-default);
49+
border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
5050
}
5151

5252
.CircleBadge {

‎src/base/base.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
*::selection {
7-
background-color: var(--color-accent-subtle);
7+
background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
88
}
99

1010
input,
@@ -20,12 +20,12 @@ body {
2020
font-family: $body-font;
2121
font-size: var(--body-font-size, $body-font-size);
2222
line-height: $body-line-height;
23-
color: var(--color-fg-default);
24-
background-color: var(--color-canvas-default);
23+
color: var(--fgColor-default, var(--color-fg-default));
24+
background-color: var(--bgColor-default, var(--color-canvas-default));
2525
}
2626

2727
a {
28-
color: var(--color-accent-fg);
28+
color: var(--fgColor-accent, var(--color-accent-fg));
2929
text-decoration: none;
3030

3131
&:hover {
@@ -50,7 +50,7 @@ label {
5050

5151
// Custom styling for HTML5 validation bubbles (WebKit only)
5252
::placeholder {
53-
color: var(--color-fg-subtle);
53+
color: var(--fgColor-muted, var(--color-fg-subtle));
5454
opacity: 1; // override opacity in normalize.css
5555
}
5656

@@ -65,7 +65,7 @@ hr,
6565
overflow: hidden;
6666
background: transparent;
6767
border: 0;
68-
border-bottom: $border-width $border-style var(--color-border-muted);
68+
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
6969

7070
@include clearfix();
7171
}

‎src/base/kbd.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ kbd {
77
font: 11px $mono-font;
88
// stylelint-disable-next-line primer/typography
99
line-height: 10px;
10-
color: var(--color-fg-default);
10+
color: var(--fgColor-default, var(--color-fg-default));
1111
vertical-align: middle;
12-
background-color: var(--color-canvas-subtle);
12+
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
1313
// stylelint-disable-next-line primer/borders
14-
border: $border-style $border-width var(--color-neutral-muted);
15-
border-bottom-color: var(--color-neutral-muted);
14+
border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
15+
border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
1616
border-radius: $border-radius;
1717
// stylelint-disable-next-line primer/box-shadow
18-
box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
18+
box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
1919
}

‎src/base/normalize.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ h1 {
153153
*/
154154

155155
mark {
156-
background-color: var(--color-attention-subtle);
157-
color: var(--color-fg-default);
156+
background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
157+
color: var(--fgColor-default, var(--color-fg-default));
158158
}
159159

160160
/**

‎src/box/box-overlay.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
width: 448px;
44
margin-right: auto;
55
margin-left: auto;
6-
background-color: var(--color-canvas-default);
6+
background-color: var(--bgColor-default, var(--color-canvas-default));
77
background-clip: padding-box;
8-
border-color: var(--color-border-default);
8+
border-color: var(--borderColor-default, var(--color-border-default));
99
// stylelint-disable-next-line primer/box-shadow
1010
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
1111

@@ -36,7 +36,7 @@
3636
.help {
3737
padding-top: $spacer-2;
3838
margin: 0;
39-
color: var(--color-fg-muted);
39+
color: var(--fgColor-muted, var(--color-fg-muted));
4040
text-align: center;
4141
}
4242
}

‎src/branch-name/branch-name.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,25 @@
77
// stylelint-disable-next-line primer/spacing
88
padding: 2px 6px;
99
font: 12px $mono-font;
10-
color: var(--color-fg-muted);
10+
color: var(--fgColor-muted, var(--color-fg-muted));
1111
word-break: break-all;
12-
background-color: var(--color-accent-subtle);
12+
background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
1313
border-radius: $border-radius;
1414

1515
.octicon {
1616
// stylelint-disable-next-line primer/spacing
1717
margin: 1px -2px 0 0;
18-
color: var(--color-fg-muted);
18+
color: var(--fgColor-muted, var(--color-fg-muted));
1919
}
2020
}
2121

2222
// When a branch name is a link
2323

2424
a.branch-name {
25-
color: var(--color-accent-fg);
26-
background-color: var(--color-accent-subtle);
25+
color: var(--fgColor-accent, var(--color-accent-fg));
26+
background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
2727

2828
.octicon {
29-
color: var(--color-accent-fg);
29+
color: var(--fgColor-accent, var(--color-accent-fg));
3030
}
3131
}

0 commit comments

Comments
 (0)