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

Add functional color variables from Primer Primitives to the theme #1074

Merged
merged 11 commits into from
Feb 25, 2021
Merged

Add functional color variables from Primer Primitives to the theme #1074

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
df8cf87
import primitives and deep merge it into colors
VanAnderson Feb 23, 2021
2266471
update snapshots
VanAnderson Feb 23, 2021
5cd37f7
tweak regEx logic for color splitting
VanAnderson Feb 23, 2021
2f2e984
tweak regEx logic further for color splitting
VanAnderson Feb 23, 2021
6ec5218
revisions to theme to clarify variable names and use correct color na…
VanAnderson Feb 23, 2021
b78b8f0
recursively split shadows and colors into separate objects
VanAnderson Feb 24, 2021
92acea5
refactor shadow filter methods in theme-preval and add tests
VanAnderson Feb 24, 2021
8f27ba4
move chroma-js to devdependencies
VanAnderson Feb 24, 2021
7167ac1
Refactor theme-preval
colebemis Feb 24, 2021
c868bc9
Add a changeset
colebemis Feb 25, 2021
8261da0
Merge branch 'main' into VanAnderson/function-color-vars
colebemis Feb 25, 2021
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
"license": "MIT",
"dependencies": {
"@primer/octicons-react": "^11.3.0",
"@primer/primitives": "3.0.0",
"@primer/primitives": "0.0.0-20211167520",
"@styled-system/css": "5.1.5",
"@styled-system/prop-types": "5.1.2",
"@styled-system/props": "5.1.4",
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ exports[`Pagination renders consistently 1`] = `

.c2[aria-current],
.c2[aria-current]:hover {
color: #fff;
color: #ffffff;
background-color: #0366d6;
border-color: transparent;
}
Expand Down
8 changes: 4 additions & 4 deletions src/__tests__/__snapshots__/AvatarStack.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ exports[`Avatar renders consistently 1`] = `
flex-shrink: 0;
height: 20px;
width: 20px;
box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px #ffffff;
margin-left: -11px;
position: relative;
overflow: hidden;
Expand Down Expand Up @@ -133,7 +133,7 @@ exports[`Avatar renders consistently 1`] = `
margin-left: 4px;
opacity: 100%;
visibility: visible;
box-shadow: 0 0 0 4px #fff;
box-shadow: 0 0 0 4px #ffffff;
}

.c0 .pc-AvatarStackBody:hover .pc-AvatarItem:first-child {
Expand Down Expand Up @@ -222,7 +222,7 @@ exports[`Avatar respects alignRight props 1`] = `
flex-shrink: 0;
height: 20px;
width: 20px;
box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 0 1px #ffffff;
margin-left: -11px;
position: relative;
overflow: hidden;
Expand Down Expand Up @@ -325,7 +325,7 @@ exports[`Avatar respects alignRight props 1`] = `
margin-left: 4px;
opacity: 100%;
visibility: visible;
box-shadow: 0 0 0 4px #fff;
box-shadow: 0 0 0 4px #ffffff;
}

.c0 .pc-AvatarStackBody:hover .pc-AvatarItem:first-child {
Expand Down
24 changes: 12 additions & 12 deletions src/__tests__/__snapshots__/Button.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ exports[`ButtonDanger renders consistently 1`] = `
}

.c0:hover {
color: #fff;
color: #ffffff;
background-color: #cb2431;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand All @@ -206,7 +206,7 @@ exports[`ButtonDanger renders consistently 1`] = `
}

.c0:active {
color: #fff;
color: #ffffff;
background-color: #be222e;
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
border-color: rgba(27,31,35,0.15);
Expand Down Expand Up @@ -270,7 +270,7 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
}

.c0:hover {
color: #fff;
color: #ffffff;
background-color: #cb2431;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand All @@ -282,7 +282,7 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
}

.c0:active {
color: #fff;
color: #ffffff;
background-color: #be222e;
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
border-color: rgba(27,31,35,0.15);
Expand Down Expand Up @@ -400,7 +400,7 @@ exports[`ButtonInvisible renders consistently 1`] = `
}

.c0:hover {
color: #fff;
color: #ffffff;
background-color: #0366d6;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand All @@ -412,7 +412,7 @@ exports[`ButtonInvisible renders consistently 1`] = `
}

.c0:active {
color: #fff;
color: #ffffff;
background-color: #035fc7;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand Down Expand Up @@ -537,7 +537,7 @@ exports[`ButtonOutline renders consistently 1`] = `
}

.c0:hover {
color: #fff;
color: #ffffff;
background-color: #0366d6;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand All @@ -549,7 +549,7 @@ exports[`ButtonOutline renders consistently 1`] = `
}

.c0:active {
color: #fff;
color: #ffffff;
background-color: #035fc7;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand Down Expand Up @@ -613,7 +613,7 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
}

.c0:hover {
color: #fff;
color: #ffffff;
background-color: #0366d6;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand All @@ -625,7 +625,7 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
}

.c0:active {
color: #fff;
color: #ffffff;
background-color: #035fc7;
border-color: rgba(27,31,35,0.15);
box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand Down Expand Up @@ -666,7 +666,7 @@ exports[`ButtonPrimary renders consistently 1`] = `
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
color: #ffffff;
background-color: #2EA44F;
border: 1px solid #22863a;
box-shadow: 0px 1px 0px rgba(20,70,32,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand Down Expand Up @@ -740,7 +740,7 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
text-decoration: none;
text-align: center;
font-size: 14px;
color: #fff;
color: #ffffff;
background-color: #2EA44F;
border: 1px solid #22863a;
box-shadow: 0px 1px 0px rgba(20,70,32,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
Expand Down
24 changes: 12 additions & 12 deletions src/__tests__/__snapshots__/Caret.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`Caret renders cardinal directions 1`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -50,7 +50,7 @@ exports[`Caret renders cardinal directions 2`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -81,7 +81,7 @@ exports[`Caret renders cardinal directions 3`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -112,7 +112,7 @@ exports[`Caret renders cardinal directions 4`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -143,7 +143,7 @@ exports[`Caret renders cardinal directions 5`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -174,7 +174,7 @@ exports[`Caret renders cardinal directions 6`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -205,7 +205,7 @@ exports[`Caret renders cardinal directions 7`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -236,7 +236,7 @@ exports[`Caret renders cardinal directions 8`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -267,7 +267,7 @@ exports[`Caret renders cardinal directions 9`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -298,7 +298,7 @@ exports[`Caret renders cardinal directions 10`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -329,7 +329,7 @@ exports[`Caret renders cardinal directions 11`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down Expand Up @@ -360,7 +360,7 @@ exports[`Caret renders cardinal directions 12`] = `
>
<path
d="M-8,0L0,8L8,0L-8,0Z"
fill="#fff"
fill="#ffffff"
/>
<path
d="M-8,0L0,8L8,0"
Expand Down
8 changes: 4 additions & 4 deletions src/__tests__/__snapshots__/CircleBadge.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`CircleBadge renders consistently 1`] = `
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(149,157,165,0.15);
width: 96px;
Expand Down Expand Up @@ -75,7 +75,7 @@ exports[`CircleBadge respects the inline prop 1`] = `
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(149,157,165,0.15);
width: 96px;
Expand All @@ -101,7 +101,7 @@ exports[`CircleBadge respects the variant prop 1`] = `
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(149,157,165,0.15);
width: 128px;
Expand All @@ -127,7 +127,7 @@ exports[`CircleBadge uses the size prop to override the variant prop 1`] = `
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #fff;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(149,157,165,0.15);
width: 20px;
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/__snapshots__/CounterLabel.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`CounterLabel renders consistently 1`] = `
line-height: 1;
border-radius: 20px;
color: #586069;
background-color: rgba(27,31,35,0.08);
background-color: rgba(209,213,218,0.5);
}

.c0:empty {
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/__snapshots__/Dialog.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ Array [
max-height: 80vh;
z-index: 999;
margin: 10vh auto;
background-color: #fff;
background-color: #ffffff;
width: 440px;
outline: none;
}
Expand Down
8 changes: 4 additions & 4 deletions src/__tests__/__snapshots__/Dropdown.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,15 +154,15 @@ exports[`Dropdown.Item renders consistently 1`] = `

.c0:focus,
.c0 a:focus {
color: #fff;
color: #ffffff;
-webkit-text-decoration: none;
text-decoration: none;
background-color: #0366d6;
}

.c0:hover,
.c0:hover a {
color: #fff;
color: #ffffff;
-webkit-text-decoration: none;
text-decoration: none;
background-color: #0366d6;
Expand All @@ -179,7 +179,7 @@ exports[`Dropdown.Item renders consistently 1`] = `
exports[`Dropdown.Menu renders consistently 1`] = `
.c0 {
background-clip: padding-box;
background-color: #fff;
background-color: #ffffff;
border: 1px solid rgba(27,31,35,0.15);
border-radius: 6px;
box-shadow: 0 3px 12px rgba(27,31,35,0.15);
Expand Down Expand Up @@ -214,7 +214,7 @@ exports[`Dropdown.Menu renders consistently 1`] = `

.c0::after {
border: 7px solid transparent;
border-bottom-color: #fff;
border-bottom-color: #ffffff;
}

.c0 > ul {
Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/__snapshots__/FilterListItem.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`FilterList.Item renders consistently 1`] = `
}

.c0:active {
color: #fff;
color: #ffffff;
background-color: #0366d6;
}

Expand All @@ -47,7 +47,7 @@ exports[`FilterList.Item respects the "selected" prop 1`] = `
margin: 0 0 5px 0;
overflow: hidden;
font-size: 14px;
color: #fff;
color: #ffffff;
background-color: #0366d6!important;
-webkit-text-decoration: none;
text-decoration: none;
Expand All @@ -64,7 +64,7 @@ exports[`FilterList.Item respects the "selected" prop 1`] = `
}

.c0:active {
color: #fff;
color: #ffffff;
background-color: #0366d6;
}

Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/__snapshots__/Header.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`Header Header.Item renders consistently 1`] = `
exports[`Header Header.Link renders consistently 1`] = `
.c0 {
font-weight: 600;
color: #fff;
color: #ffffff;
white-space: nowrap;
cursor: pointer;
-webkit-text-decoration: none;
Expand Down
Loading