Merge branch 'main' into VanAnderson/implement-functional-color-vars-5

primer · Mar 4, 2021 · 1f1d387 · 1f1d387
2 parents 67d27b3 + 7fd57c8
commit 1f1d387
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 59 deletions.
diff --git a/.changeset/sharp-elephants-grab.md b/.changeset/sharp-elephants-grab.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in ButtonTableList
diff --git a/.changeset/tame-chicken-warn.md b/.changeset/tame-chicken-warn.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Button
diff --git a/.changeset/wicked-ears-give.md b/.changeset/wicked-ears-give.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Breadcrumb
diff --git a/.changeset/wild-needles-hear.md b/.changeset/wild-needles-hear.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in ButtonInvisible
diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
@@ -16,7 +16,7 @@ const Wrapper = styled.li`
   &::after {
     padding-right: 0.5em;
     padding-left: 0.5em;
-    color: ${get('colors.gray.2')};
+    color: ${get('colors.text.disabled')};
     font-size: ${get('fontSizes.1')};
     content: '/';
   }
@@ -63,15 +63,15 @@ const BreadcrumbItem = styled.a.attrs<StyledBreadcrumbItemProps>(props => ({
   className: classnames(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null
 }))<StyledBreadcrumbItemProps>`
-  color: ${get('colors.blue.5')};
+  color: ${get('colors.text.link')};
   display: inline-block;
   font-size: ${get('fontSizes.1')};
   text-decoration: none;
   &:hover {
     text-decoration: underline;
   }
   &.selected {
-    color: ${get('colors.gray.7')};
+    color: ${get('colors.text.primary')};
     pointer-events: none;
   }
   ${COMMON}

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -5,33 +5,31 @@ import {ComponentProps} from '../utils/types'
 import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('buttons.default.color.default')};
-  background-color: ${get('buttons.default.bg.default')};
-  border: 1px solid ${get('buttons.default.border.default')};
-  box-shadow: ${get('buttons.default.shadow.default')};
+  color: ${get('colors.btn.text')};
+  background-color: ${get('colors.btn.bg')};
+  border: 1px solid ${get('colors.btn.border')};
+  box-shadow: ${get('shadows.btn.shadow')}, ${get('shadows.btn.insetShadow')}};
 
   &:hover {
-    background-color: ${get('buttons.default.bg.hover')};
-    border-color: ${get('buttons.default.border.hover')};
-    box-shadow: ${get('buttons.default.shadow.hover')};
+    background-color: ${get('colors.btn.hoverBg')};
+    border-color: ${get('colors.btn.hoverBorder')};
   }
 
   // focus must come before :active so that the active box shadow overrides
   &:focus {
-    border-color: rgba(27, 31, 35, 0.15);
-    box-shadow: ${get('buttons.default.shadow.focus')};
+    border-color: ${get('colors.btn.focusBorder')};
+    box-shadow: ${get('shadows.btn.focusShadow')};
   }
 
   &:active {
-    background-color: ${get('buttons.default.bg.active')};
-    box-shadow: ${get('buttons.default.shadow.active')};
-    border-color: ${get('buttons.default.border.active')};
+    background-color: ${get('colors.btn.selectedBg')};
+    box-shadow: ${get('shadows.btn.shadowActive')};
   }
 
   &:disabled {
-    color: ${get('buttons.default.color.disabled')};
-    background-color: ${get('buttons.default.bg.disabled')};
-    border-color: ${get('buttons.default.border.disabled')};
+    color: ${get('colors.text.disabled')};
+    background-color: ${get('colors.btn.bg')};
+    border-color: ${get('colors.btn.border')};
   }
 
   ${buttonSystemProps};

diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx
@@ -5,18 +5,18 @@ import {ComponentProps} from '../utils/types'
 import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.blue.5')};
+  color: ${get('colors.text.link')};
   background-color: transparent;
   border: 0;
   border-radius: ${get('radii.2')};
   box-shadow: none;
 
   &:disabled {
-    color: ${get('buttons.default.color.disabled')};
+    color: ${get('colors.text.disabled')};
   }
 
   &:focus {
-    box-shadow: ${get('buttons.default.shadow.focus')};
+    box-shadow: ${get('shadows.btn.focusShadow')};
   }
 
   ${buttonSystemProps};

diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
@@ -17,7 +17,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   display: inline-block;
   padding: 0;
   font-size: ${get('fontSizes.1')};
-  color: ${get('colors.gray.6')};
+  color: ${get('colors.text.secondary')};
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -33,7 +33,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   &:disabled {
     &,
     &:hover {
-      color: rgba(${get('colors.gray.6')}, 0.5);
+      color: rgba(${get('colors.text.secondary')}, 0.5);
       cursor: default;
     }
   }

diff --git a/src/Label.tsx b/src/Label.tsx
@@ -7,8 +7,8 @@ import {ComponentProps} from './utils/types'
 const outlineStyles = css`
   margin-top: -1px; // offsets the 1px border
   margin-bottom: -1px; // offsets the 1px border
-  color: ${get('colors.gray.6')};
-  border: ${get('borderWidths.1')} solid ${get('colors.blackfade15')};
+  color: ${get('colors.label.secondary.text')};
+  border: ${get('borderWidths.1')} solid ${get('colors.label.border')};
   box-shadow: none;
   ${borderColor};
   ${COMMON};
@@ -52,7 +52,7 @@ const Label = styled.span<
 >`
   display: inline-block;
   font-weight: ${get('fontWeights.semibold')};
-  color: ${get('colors.white')};
+  color: ${get('colors.text.inverse')};
   border-radius: ${get('radii.3')};
 
   &:hover {
@@ -67,7 +67,7 @@ const Label = styled.span<
 `
 
 Label.defaultProps = {
-  bg: 'gray.5',
+  bg: 'label.primary.border',
   variant: 'medium'
 }
 

diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap b/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap
@@ -15,7 +15,7 @@ exports[`Breadcrumb.Item adds activeClassName={SELECTED_CLASS} when it gets a "t
 }
 
 .c0.selected {
-  color: #444d56;
+  color: #24292e;
   pointer-events: none;
 }
 
@@ -42,7 +42,7 @@ exports[`Breadcrumb.Item renders consistently 1`] = `
 }
 
 .c0.selected {
-  color: #444d56;
+  color: #24292e;
   pointer-events: none;
 }
 
@@ -67,7 +67,7 @@ exports[`Breadcrumb.Item respects the "selected" prop 1`] = `
 }
 
 .c0.selected {
-  color: #444d56;
+  color: #24292e;
   pointer-events: none;
 }
 

diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/src/__tests__/__snapshots__/Button.tsx.snap
@@ -25,8 +25,8 @@ exports[`Button renders consistently 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.12);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -47,8 +47,8 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:hover {
-  background-color: #F3F4F6;
-  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:focus {
@@ -58,14 +58,13 @@ exports[`Button renders consistently 1`] = `
 
 .c0:active {
   background-color: #edeff2;
-  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
-  border-color: #d1d5da;
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: #959da5;
   background-color: #fafbfc;
-  border-color: #eaecef;
+  border-color: rgba(27,31,35,0.15);
 }
 
 <button
@@ -98,8 +97,8 @@ exports[`Button respects the "disabled" prop 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.12);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -120,8 +119,8 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c0:hover {
-  background-color: #F3F4F6;
-  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:focus {
@@ -131,14 +130,13 @@ exports[`Button respects the "disabled" prop 1`] = `
 
 .c0:active {
   background-color: #edeff2;
-  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
-  border-color: #d1d5da;
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: #959da5;
   background-color: #fafbfc;
-  border-color: #eaecef;
+  border-color: rgba(27,31,35,0.15);
 }
 
 <button

diff --git a/src/__tests__/__snapshots__/Dropdown.tsx.snap b/src/__tests__/__snapshots__/Dropdown.tsx.snap
@@ -47,8 +47,8 @@ exports[`Dropdown.Button renders consistently 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.12);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -69,8 +69,8 @@ exports[`Dropdown.Button renders consistently 1`] = `
 }
 
 .c0:hover {
-  background-color: #F3F4F6;
-  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:focus {
@@ -80,14 +80,13 @@ exports[`Dropdown.Button renders consistently 1`] = `
 
 .c0:active {
   background-color: #edeff2;
-  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
-  border-color: #d1d5da;
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: #959da5;
   background-color: #fafbfc;
-  border-color: #eaecef;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c1 {

diff --git a/src/__tests__/__snapshots__/Label.tsx.snap b/src/__tests__/__snapshots__/Label.tsx.snap
@@ -35,7 +35,7 @@ exports[`Label respects the "outline" prop 1`] = `
   margin-top: -1px;
   margin-bottom: -1px;
   color: #586069;
-  border: 1px solid rgba(27,31,35,0.15);
+  border: 1px solid #e1e4e8;
   box-shadow: none;
   background-color: #6a737d;
   background-color: transparent;

diff --git a/src/__tests__/__snapshots__/SelectMenu.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.tsx.snap
@@ -25,8 +25,8 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.12);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -47,8 +47,8 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 .c1:hover {
-  background-color: #F3F4F6;
-  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c1:focus {
@@ -58,14 +58,13 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
 .c1:active {
   background-color: #edeff2;
-  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
-  border-color: #d1d5da;
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
 }
 
 .c1:disabled {
   color: #959da5;
   background-color: #fafbfc;
-  border-color: #eaecef;
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c6 {