Skip to content

Commit

Permalink
Merge pull request #1074 from primer/VanAnderson/function-color-vars
Browse files Browse the repository at this point in the history 
Functional Color variables from primer/primitives in theme
  • Loading branch information
@VanAnderson
VanAnderson authored Feb 25, 2021
2 parents 75f9ca1 + 8261da0 commit 14874ec
Show file tree
Hide file tree
Showing 27 changed files with 327 additions and 157 deletions.
5 changes: 5 additions & 0 deletions .changeset/twelve-sheep-care.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Add functional color variables from Primer Primitives to theme object
9 changes: 8 additions & 1 deletion package.json
View file
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 Expand Up @@ -80,9 +80,12 @@
"@testing-library/react": "11.2.2",
"@testing-library/react-hooks": "5.0.3",
"@testing-library/user-event": "12.6.0",
"@types/chroma-js": "2.1.3",
"@types/enzyme": "3.10.8",
"@types/jest": "26.0.20",
"@types/jest-axe": "3.5.1",
"@types/lodash.isempty": "4.4.6",
"@types/lodash.isobject": "3.0.6",
"@typescript-eslint/eslint-plugin": "4.14.1",
"@typescript-eslint/parser": "4.14.1",
"@wojtekmaj/enzyme-adapter-react-17": "0.3.2",
Expand All @@ -94,8 +97,10 @@
"babel-plugin-styled-components": "1.10.7",
"babel-plugin-transform-replace-expressions": "0.2.0",
"babel-polyfill": "6.26.0",
"chroma-js": "2.1.0",
"concurrently": "5.3.0",
"cross-env": "7.0.2",
"deepmerge": "4.2.2",
"enzyme": "3.10.0",
"eslint": "6.5.1",
"eslint-plugin-github": "4.1.1",
Expand All @@ -108,6 +113,8 @@
"jest-axe": "4.1.0",
"jest-styled-components": "6.3.3",
"jscodeshift": "0.6.4",
"lodash.isempty": "4.4.0",
"lodash.isobject": "3.0.2",
"playroom": "0.15.1",
"react": "^17.0.0",
"react-dom": "^17.0.0",
Expand Down
2 changes: 1 addition & 1 deletion src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
View file
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
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
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
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
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
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
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
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
Loading

1 comment on commit 14874ec

@vercel
Copy link

@vercel vercel bot commented on 14874ec Feb 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.