Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Major] Remove legacy color support #2793

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

[Major] Remove legacy color support #2793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
214c038
remove old colors
langermank Apr 9, 2024
b333032
Create wise-ducks-promise.md
langermank Apr 9, 2024
840bc65
remove themes + color fallbacks
langermank May 10, 2024
4436df1
remove plugin
langermank May 10, 2024
95372c4
oops
langermank May 10, 2024
0aa6eca
bump
langermank May 10, 2024
ce0ab59
Merge branch 'main' into remove-old-colors
jonrohan Jun 11, 2024
be73387
Disable color linter on this line
jonrohan Jun 11, 2024
77ef79f
Merge branch 'main' into remove-old-colors
jonrohan Jun 20, 2024
d777f6c
Co-authored-by: Marie Lucca <francinelucca@users.noreply.github.com>
langermank Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wise-ducks-promise.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": major
---

- Remove legacy color variables
25 changes: 11 additions & 14 deletions src/autocomplete/suggester.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,22 @@
margin-top: var(--base-size-24);
list-style: none;
cursor: pointer;
background: var(--overlay-bgColor, var(--color-canvas-overlay));
// stylelint-disable-next-line primer/borders, primer/colors
border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
// stylelint-disable-next-line primer/borders
background: var(--overlay-bgColor);
border: $border-width $border-style var(--borderColor-default);
border-radius: $border-radius;
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
box-shadow: var(--shadow-resting-medium);

li {
display: block;
padding: var(--base-size-4) var(--base-size-8);
// stylelint-disable-next-line primer/typography
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/borders, primer/colors
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
border-bottom: $border-width $border-style var(--borderColor-muted);

small {
// stylelint-disable-next-line primer/typography
font-weight: $font-weight-normal;
color: var(--fgColor-muted, var(--color-fg-muted));
color: var(--fgColor-muted);
}

&:last-child {
Expand All @@ -48,12 +45,12 @@
}

&:hover {
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
color: var(--fgColor-onEmphasis);
text-decoration: none;
background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
background: var(--bgColor-accent-emphasis);

small {
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
color: var(--fgColor-onEmphasis);
}

.octicon {
Expand All @@ -63,12 +60,12 @@

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

small {
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
color: var(--fgColor-onEmphasis);
}

.octicon {
Expand Down
4 changes: 2 additions & 2 deletions src/avatars/avatar-parent-child.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
position: absolute;
right: -15%;
bottom: -9%;
background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
background-color: var(--bgColor-default); // For transparent backgrounds
// stylelint-disable-next-line primer/borders
border-radius: $border-radius-1;
box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
box-shadow: var(--avatar-shadow);
}
6 changes: 3 additions & 3 deletions src/avatars/circle-badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bgColor-default, var(--color-canvas-default));
background-color: var(--bgColor-default);
border-radius: 50%;
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
box-shadow: var(--shadow-resting-medium);
}

.CircleBadge-icon {
Expand Down Expand Up @@ -46,7 +46,7 @@
width: 100%;
content: '';
// stylelint-disable-next-line primer/borders
border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
border-bottom: 2px dashed var(--borderColor-default);
}

.CircleBadge {
Expand Down
11 changes: 5 additions & 6 deletions src/base/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ body {
font-family: $body-font;
font-size: var(--body-font-size, $body-font-size);
line-height: $body-line-height;
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-default, var(--color-canvas-default));
color: var(--fgColor-default);
background-color: var(--bgColor-default);
}

a {
color: var(--fgColor-accent, var(--color-accent-fg));
color: var(--fgColor-accent);
text-decoration: none;

&:hover {
Expand All @@ -46,7 +46,7 @@ label {

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

Expand All @@ -61,8 +61,7 @@ hr,
overflow: hidden;
background: transparent;
border: 0;
// stylelint-disable-next-line primer/borders, primer/colors
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
border-bottom: $border-width $border-style var(--borderColor-muted);

@include clearfix();
}
Expand Down
11 changes: 5 additions & 6 deletions src/base/kbd.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@ kbd {
font: 11px $mono-font;
// stylelint-disable-next-line primer/typography
line-height: 10px;
color: var(--fgColor-default, var(--color-fg-default));
color: var(--fgColor-default);
vertical-align: middle;
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
// stylelint-disable-next-line primer/borders, primer/colors
border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
background-color: var(--bgColor-muted);
// stylelint-disable-next-line primer/borders
border: $border-style $border-width var(--borderColor-neutral-muted);
border-bottom-color: var(--borderColor-neutral-muted);
border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
}
6 changes: 2 additions & 4 deletions src/base/native-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
@include color-mode(dark) { color-scheme: dark; }

[data-color-mode] {
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-default, var(--color-canvas-default));
color: var(--fgColor-default);
background-color: var(--bgColor-default);
}

// Windows High Contrast mode
Expand All @@ -16,8 +16,6 @@
// stylelint-disable selector-max-type
@media (forced-colors: active) {
body {
--color-accent-emphasis: Highlight;
--color-fg-on-emphasis: LinkText;
--fgColor-onEmphasis: LinkText;
--fgColor-accent: Highlight;
}
Expand Down
4 changes: 2 additions & 2 deletions src/base/normalize.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,8 @@ h1 {
*/

mark {
background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
color: var(--fgColor-default, var(--color-fg-default));
background-color: var(--bgColor-attention-muted);
color: var(--fgColor-default);
}

/**
Expand Down
6 changes: 3 additions & 3 deletions src/box/box-overlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
width: 448px;
margin-right: auto;
margin-left: auto;
background-color: var(--bgColor-default, var(--color-canvas-default));
background-color: var(--bgColor-default);
background-clip: padding-box;
border-color: var(--borderColor-default, var(--color-border-default));
border-color: var(--borderColor-default);
// stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);

Expand Down Expand Up @@ -39,7 +39,7 @@
.help {
padding-top: var(--base-size-8);
margin: 0;
color: var(--fgColor-muted, var(--color-fg-muted));
color: var(--fgColor-muted);
text-align: center;
}
}
13 changes: 6 additions & 7 deletions src/branch-name/branch-name.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,25 @@
padding: 2px 6px;
// stylelint-disable-next-line primer/typography, declaration-property-value-no-unknown
font: 12px $mono-font;
color: var(--fgColor-muted, var(--color-fg-muted));
color: var(--fgColor-muted);
word-break: break-all;
background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
// stylelint-disable-next-line primer/borders
background-color: var(--bgColor-accent-muted);
border-radius: $border-radius;

.octicon {
// stylelint-disable-next-line primer/spacing
margin: 1px -2px 0 0;
color: var(--fgColor-muted, var(--color-fg-muted));
color: var(--fgColor-muted);
}
}

// When a branch name is a link

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

.octicon {
color: var(--fgColor-accent, var(--color-accent-fg));
color: var(--fgColor-accent);
}
}
Loading
Loading