Skip to content

Commit c7ea644

Browse files
jonrohanjonrohan
authored
Replacing deprecated variables with color v2 variables (#1575)
* Correcting stylelint deprecated color vars * Fixing deprecations with no replacement
1 parent 9ad951d commit c7ea644

Some content is hidden

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

52 files changed

+483
-485
lines changed

‎.changeset/cuddly-apricots-protect.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": minor
3+
---
4+
5+
Replacing deprecated variables with color v2 variables

‎src/alerts/flash.scss

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -64,42 +64,42 @@
6464
//
6565

6666
.flash {
67-
color: var(--color-alert-info-text);
68-
background-image: linear-gradient(var(--color-alert-info-bg), var(--color-alert-info-bg));
69-
border-color: var(--color-alert-info-border);
67+
color: var(--color-fg-default);
68+
background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
69+
border-color: var(--color-accent-muted);
7070

7171
.octicon {
72-
color: var(--color-alert-info-icon);
72+
color: var(--color-accent-fg);
7373
}
7474
}
7575

7676
.flash-warn {
77-
color: var(--color-alert-warn-text);
78-
background-image: linear-gradient(var(--color-alert-warn-bg), var(--color-alert-warn-bg));
79-
border-color: var(--color-alert-warn-border);
77+
color: var(--color-fg-default);
78+
background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
79+
border-color: var(--color-attention-muted);
8080

8181
.octicon {
82-
color: var(--color-alert-warn-icon);
82+
color: var(--color-attention-fg);
8383
}
8484
}
8585

8686
.flash-error {
87-
color: var(--color-alert-error-text);
88-
background-image: linear-gradient(var(--color-alert-error-bg), var(--color-alert-error-bg));
89-
border-color: var(--color-alert-error-border);
87+
color: var(--color-fg-default);
88+
background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
89+
border-color: var(--color-danger-muted);
9090

9191
.octicon {
92-
color: var(--color-alert-error-icon);
92+
color: var(--color-danger-fg);
9393
}
9494
}
9595

9696
.flash-success {
97-
color: var(--color-alert-success-text);
98-
background-image: linear-gradient(var(--color-alert-success-bg), var(--color-alert-success-bg));
99-
border-color: var(--color-alert-success-border);
97+
color: var(--color-fg-default);
98+
background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
99+
border-color: var(--color-success-muted);
100100

101101
.octicon {
102-
color: var(--color-alert-success-icon);
102+
color: var(--color-success-fg);
103103
}
104104
}
105105

@@ -129,7 +129,7 @@
129129
// Makes sure the background is opaque to cover any content underneath
130130
.flash-full,
131131
.flash-banner {
132-
background-color: var(--color-bg-canvas);
132+
background-color: var(--color-canvas-default);
133133
}
134134

135135
// FIXME deprecate this
@@ -138,5 +138,5 @@
138138
// stylelint-disable-next-line primer/spacing
139139
margin-bottom: 0.8em;
140140
font-weight: $font-weight-bold;
141-
background-color: var(--color-alert-warn-bg);
141+
background-color: var(--color-attention-subtle);
142142
}

‎src/autocomplete/autocomplete.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
// stylelint-disable-next-line primer/typography
99
font-size: 13px;
1010
list-style: none;
11-
background: var(--color-bg-overlay);
12-
border: $border-width $border-style var(--color-border-primary);
11+
background: var(--color-canvas-overlay);
12+
border: $border-width $border-style var(--color-border-default);
1313
border-radius: $border-radius;
14-
box-shadow: var(--color-autocomplete-shadow);
14+
box-shadow: var(--color-shadow-medium);
1515
}
1616

1717
// One of the items that appears within an autocomplete group
@@ -23,19 +23,19 @@
2323
padding: $spacer-1 $spacer-2;
2424
overflow: hidden;
2525
font-weight: $font-weight-bold;
26-
color: var(--color-text-primary);
26+
color: var(--color-fg-default);
2727
text-align: left;
2828
text-decoration: none;
2929
text-overflow: ellipsis;
3030
white-space: nowrap;
3131
cursor: pointer;
32-
background-color: var(--color-bg-overlay);
32+
background-color: var(--color-canvas-overlay);
3333
border: 0;
3434

3535
&:hover {
36-
color: var(--color-state-hover-primary-text);
36+
color: var(--color-fg-on-emphasis);
3737
text-decoration: none;
38-
background-color: var(--color-state-hover-primary-bg);
38+
background-color: var(--color-accent-emphasis);
3939

4040
// Inherit color on all child elements to ensure enough contrast
4141
* {
@@ -46,9 +46,9 @@
4646
&.selected,
4747
&[aria-selected=true],
4848
&.navigation-focus {
49-
color: var(--color-state-selected-primary-text);
49+
color: var(--color-fg-on-emphasis);
5050
text-decoration: none;
51-
background-color: var(--color-state-selected-primary-bg);
51+
background-color: var(--color-accent-emphasis);
5252

5353
// Inherit color on all child elements to ensure enough contrast
5454
* {

‎src/autocomplete/suggester.scss

Lines changed: 11 additions & 11 deletions
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-bg-overlay);
15-
border: $border-width $border-style var(--color-border-primary);
14+
background: var(--color-canvas-overlay);
15+
border: $border-width $border-style var(--color-border-default);
1616
border-radius: $border-radius;
17-
box-shadow: var(--color-autocomplete-shadow);
17+
box-shadow: 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-autocomplete-row-border);
23+
border-bottom: $border-width $border-style var(--color-border-muted);
2424

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

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

4141
&:hover {
42-
color: var(--color-state-hover-primary-text);
42+
color: var(--color-fg-on-emphasis);
4343
text-decoration: none;
44-
background: var(--color-state-hover-primary-bg);
44+
background: var(--color-accent-emphasis);
4545

4646
small {
47-
color: var(--color-state-hover-primary-text);
47+
color: var(--color-fg-on-emphasis);
4848
}
4949
}
5050

5151
&[aria-selected="true"],
5252
&.navigation-focus {
53-
color: var(--color-state-selected-primary-text);
53+
color: var(--color-fg-on-emphasis);
5454
text-decoration: none;
55-
background: var(--color-state-selected-primary-bg);
55+
background: var(--color-accent-emphasis);
5656

5757
small {
58-
color: var(--color-state-selected-primary-text);
58+
color: var(--color-fg-on-emphasis);
5959
}
6060
}
6161
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
position: absolute;
1111
right: -15%;
1212
bottom: -9%;
13-
background-color: var(--color-bg-canvas); // For transparent backgrounds
13+
background-color: var(--color-canvas-default); // For transparent backgrounds
1414
// stylelint-disable-next-line primer/borders
1515
border-radius: $border-radius-1;
1616
box-shadow: var(--color-avatar-child-shadow);

‎src/avatars/avatar-stack.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
.AvatarStack-body {
2323
display: flex;
24-
background: var(--color-bg-canvas);
24+
background: var(--color-canvas-default);
2525

2626
.avatar {
2727
position: relative;
@@ -32,8 +32,8 @@
3232
box-sizing: content-box;
3333
// stylelint-disable-next-line primer/spacing
3434
margin-right: -11px;
35-
background-color: var(--color-bg-canvas);
36-
border-right: $border-width $border-style var(--color-bg-canvas);
35+
background-color: var(--color-canvas-default);
36+
border-right: $border-width $border-style var(--color-canvas-default);
3737
// stylelint-disable-next-line primer/borders
3838
border-radius: $border-radius-1;
3939
transition: margin 0.1s ease-in-out;
@@ -82,7 +82,7 @@
8282
.avatar.avatar-more {
8383
z-index: 1;
8484
margin-right: 0;
85-
background: var(--color-bg-tertiary);
85+
background: var(--color-canvas-subtle);
8686

8787
&::before,
8888
&::after {
@@ -92,7 +92,7 @@
9292
content: "";
9393
// stylelint-disable-next-line primer/borders
9494
border-radius: 2px;
95-
outline: $border-width $border-style var(--color-bg-canvas);
95+
outline: $border-width $border-style var(--color-canvas-default);
9696
}
9797

9898
&::before {
@@ -129,7 +129,7 @@
129129

130130
&::after {
131131
width: 2px;
132-
background: var(--color-bg-tertiary);
132+
background: var(--color-canvas-subtle);
133133
}
134134
}
135135

@@ -138,6 +138,6 @@
138138
// stylelint-disable-next-line primer/spacing
139139
margin-left: -11px;
140140
border-right: 0;
141-
border-left: $border-width $border-style var(--color-bg-canvas);
141+
border-left: $border-width $border-style var(--color-canvas-default);
142142
}
143143
}

‎src/avatars/circle-badge.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
display: flex;
55
align-items: center;
66
justify-content: center;
7-
background-color: var(--color-bg-canvas);
7+
background-color: var(--color-canvas-default);
88
border-radius: 50%;
99
box-shadow: var(--color-shadow-medium);
1010
}
@@ -46,7 +46,7 @@
4646
width: 100%;
4747
content: "";
4848
// stylelint-disable-next-line primer/borders
49-
border-bottom: 2px dashed var(--color-border-primary);
49+
border-bottom: 2px dashed var(--color-border-default);
5050
}
5151

5252
.CircleBadge {

‎src/base/base.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ body {
1616
font-family: $body-font;
1717
font-size: $body-font-size;
1818
line-height: $body-line-height;
19-
color: var(--color-text-primary);
20-
background-color: var(--color-bg-canvas);
19+
color: var(--color-fg-default);
20+
background-color: var(--color-canvas-default);
2121
}
2222

2323
a {
24-
color: var(--color-text-link);
24+
color: var(--color-accent-fg);
2525
text-decoration: none;
2626

2727
&:hover {
@@ -45,7 +45,7 @@ hr,
4545
overflow: hidden;
4646
background: transparent;
4747
border: 0;
48-
border-bottom: $border-width $border-style var(--color-border-secondary);
48+
border-bottom: $border-width $border-style var(--color-border-muted);
4949
@include clearfix();
5050
}
5151

‎src/base/kbd.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ kbd {
88
font: 11px $mono-font;
99
// stylelint-disable-next-line primer/typography
1010
line-height: 10px;
11-
color: var(--color-text-primary);
11+
color: var(--color-fg-default);
1212
vertical-align: middle;
13-
background-color: var(--color-bg-secondary);
13+
background-color: var(--color-canvas-subtle);
1414
// stylelint-disable-next-line primer/borders
15-
border: $border-style $border-width var(--color-border-tertiary);
16-
border-bottom-color: var(--color-border-tertiary);
15+
border: $border-style $border-width var(--color-neutral-muted);
16+
border-bottom-color: var(--color-neutral-muted);
1717
border-radius: $border-radius;
1818
// stylelint-disable-next-line primer/box-shadow
19-
box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
19+
box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
2020
}

‎src/base/modes.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
// Enables nesting of different color modes
3131

3232
[data-color-mode] {
33-
color: var(--color-text-primary);
34-
background-color: var(--color-bg-canvas);
33+
color: var(--color-fg-default);
34+
background-color: var(--color-canvas-default);
3535
}
3636

3737
// color-scheme

‎src/blankslate/blankslate.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
text-align: center;
66

77
p {
8-
color: var(--color-text-secondary);
8+
color: var(--color-fg-muted);
99
}
1010

1111
code {
1212
// stylelint-disable-next-line primer/spacing
1313
padding: 2px 5px 3px;
1414
font-size: $h5-size;
15-
background: var(--color-bg-canvas);
16-
border: $border-width $border-style var(--color-border-secondary);
15+
background: var(--color-canvas-default);
16+
border: $border-width $border-style var(--color-border-muted);
1717
border-radius: $border-radius;
1818
}
1919

@@ -27,7 +27,7 @@
2727
margin-right: $spacer-1;
2828
margin-bottom: $spacer-2;
2929
margin-left: $spacer-1;
30-
color: var(--color-icon-secondary);
30+
color: var(--color-fg-muted);
3131
}
3232

3333
.blankslate-capped {

0 commit comments

Comments
 (0)