Skip to content

Commit

Permalink
Merge pull request #1089 from primer/cb/functional-vars-1
Browse files Browse the repository at this point in the history 
Update color variable usage (part 1)
  • Loading branch information
@colebemis
colebemis committed Feb 26, 2021
2 parents f8d0763 + bb4bffe commit 0b81666
Show file tree
Hide file tree
Showing 14 changed files with 102 additions and 75 deletions.
5 changes: 5 additions & 0 deletions .changeset/itchy-squids-kick.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in Timeline
5 changes: 5 additions & 0 deletions .changeset/itchy-toes-punch.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in TextInput
5 changes: 5 additions & 0 deletions .changeset/new-badgers-suffer.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in Link
5 changes: 5 additions & 0 deletions .changeset/rotten-countries-collect.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in Tooltip
5 changes: 5 additions & 0 deletions .changeset/sixty-adults-work.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in UnderlineNav
4 changes: 2 additions & 2 deletions src/Link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ const hoverColor = system({
})

const Link = styled.a<StyledLinkProps>`
color: ${props => (props.muted ? get('colors.gray.6')(props) : get('colors.blue.5')(props))};
color: ${props => (props.muted ? get('colors.text.secondary')(props) : get('colors.text.link')(props))};
text-decoration: ${props => (props.underline ? 'underline' : 'none')};
&:hover {
text-decoration: ${props => (props.muted ? 'none' : 'underline')};
${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.blue.5')(props)}` : '')};
${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.text.link')(props)}` : '')};
}
&:is(button) {
display: inline-block;
Expand Down
23 changes: 12 additions & 11 deletions src/TextInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@ const Wrapper = styled.span<StyledWrapperProps>`
min-height: 34px;
font-size: ${get('fontSizes.1')};
line-height: 20px;
color: ${get('colors.gray.9')};
color: ${get('colors.text.primary')};
vertical-align: middle;
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
border: 1px solid ${get('colors.border.gray')};
border: 1px solid ${get('colors.input.border')};
border-radius: ${get('radii.2')};
outline: none;
box-shadow: ${get('shadows.formControl')};
box-shadow: ${get('shadows.shadow.inset')};
${props => {
if (props.hasIcon) {
Expand All @@ -81,29 +81,30 @@ const Wrapper = styled.span<StyledWrapperProps>`
.TextInput-icon {
align-self: center;
color: ${get('colors.gray.4')};
color: ${get('colors.icon.tertiary')};
margin: 0 ${get('space.2')};
flex-shrink: 0;
}
&:focus-within {
border-color: ${get('colors.blue.4')};
box-shadow: ${get('shadows.formControl')}, ${get('shadows.formControlFocus')};
border-color: ${get('colors.state.focus.border')};
box-shadow: ${get('shadows.state.focus.shadow')};
}
${props =>
props.contrast &&
css`
background-color: ${get('colors.gray.0')};
`}
background-color: ${get('colors.input.contrastBg')};
`}
${props =>
props.disabled &&
css`
background-color: ${get('colors.bg.disabled')};
box-shadow: ${get('shadows.formControlDisabled')};
`}
color: ${get('colors.text.secondary')};
background-color: ${get('colors.input.disabledBg')};
border-color: ${get('colors.input.disabledBorder')};
`}
${props =>
props.block &&
Expand Down
19 changes: 10 additions & 9 deletions src/Timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const TimelineItem = styled(Flex).attrs<StyledTimelineItemProps>(props => ({
position: relative;
padding: ${get('space.3')} 0;
margin-left: ${get('space.3')};
&::before {
position: absolute;
top: 0;
Expand All @@ -43,7 +44,7 @@ const TimelineItem = styled(Flex).attrs<StyledTimelineItemProps>(props => ({
display: block;
width: 2px;
content: '';
background-color: ${get('colors.gray.2')};
background-color: ${get('colors.border.secondary')};
}
${props =>
Expand All @@ -59,8 +60,8 @@ const TimelineItem = styled(Flex).attrs<StyledTimelineItemProps>(props => ({
height: 16px;
margin-top: ${get('space.2')};
margin-bottom: ${get('space.2')};
color: ${get('colors.gray.4')};
background-color: ${get('colors.white')};
color: ${get('colors.icon.tertiary')};
background-color: ${get('colors.bg.canvas')};
border: 0;
}
`}
Expand All @@ -79,11 +80,11 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
flexShrink={0}
css={`
border-radius: 50%;
border: 2px solid ${get('colors.white')};
border: 2px solid ${get('colors.bg.canvas')};
`}
overflow="hidden"
color="gray.7"
bg="gray.2"
color="icon.secondary"
bg="timeline.badgeBg"
width="32px"
height="32px"
mr={2}
Expand All @@ -102,7 +103,7 @@ const TimelineBody = styled(Box)`
min-width: 0;
max-width: 100%;
margin-top: ${get('space.1')};
color: ${get('colors.gray.7')};
color: ${get('colors.timeline.text')};
flex: auto;
font-size: ${get('fontSizes.1')};
${sx};
Expand All @@ -114,9 +115,9 @@ const TimelineBreak = styled(Relative)`
margin: 0;
margin-bottom: -${get('space.3')};
margin-left: 0;
background-color: ${get('colors.white')};
background-color: ${get('colors.bg.canvas')};
border: 0;
border-top: ${get('space.1')} solid ${get('colors.gray.2')};
border-top: ${get('space.1')} solid ${get('colors.border.primary')};
${sx};
`

Expand Down
12 changes: 6 additions & 6 deletions src/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
padding: 0.5em 0.75em;
font: normal normal 11px/1.5 ${get('fonts.normal')};
-webkit-font-smoothing: subpixel-antialiased;
color: ${get('colors.white')};
color: ${get('colors.tooltip.text')};
text-align: center;
text-decoration: none;
text-shadow: none;
Expand All @@ -40,7 +40,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: ${get('colors.black')};
background: ${get('colors.tooltip.bg')};
border-radius: ${get('radii.1')};
opacity: 0;
}
Expand Down Expand Up @@ -103,7 +103,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
right: 50%;
bottom: -7px;
margin-right: -6px;
border-bottom-color: ${get('colors.black')};
border-bottom-color: ${get('colors.tooltip.bg')};
}
}
Expand Down Expand Up @@ -134,7 +134,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
right: 50%;
bottom: auto;
margin-right: -6px;
border-top-color: ${get('colors.black')};
border-top-color: ${get('colors.tooltip.bg')};
}
}
Expand Down Expand Up @@ -170,7 +170,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
bottom: 50%;
left: -7px;
margin-top: -6px;
border-left-color: ${get('colors.black')};
border-left-color: ${get('colors.tooltip.bg')};
}
}
Expand All @@ -188,7 +188,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
right: -7px;
bottom: 50%;
margin-top: -6px;
border-right-color: ${get('colors.black')};
border-right-color: ${get('colors.tooltip.bg')};
}
}
Expand Down
16 changes: 8 additions & 8 deletions src/UnderlineNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const SELECTED_CLASS = 'selected'
const UnderlineNavBase = styled.nav`
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eaecef;
border-bottom: 1px solid ${get('colors.border.secondary')};
&.UnderlineNav--right {
justify-content: flex-end;
Expand Down Expand Up @@ -75,29 +75,29 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
margin-right: ${get('space.3')};
font-size: ${get('fontSizes.1')};
line-height: ${get('lineHeights.default')};
color: ${get('colors.gray.6')};
color: ${get('colors.underlinenav.text')};
text-align: center;
border-bottom: 2px solid transparent;
text-decoration: none;
&:hover,
&:focus {
color: ${get('colors.gray.9')};
color: ${get('colors.underlinenav.textHover')};
text-decoration: none;
border-bottom-color: ${get('colors.gray.2')};
border-bottom-color: ${get('colors.border.tertiary')};
transition: 0.2s ease;
.UnderlineNav-octicon {
color: ${get('colors.gray.5')};
color: ${get('colors.text.tertiary')};
}
}
&.selected {
color: ${get('colors.gray.9')};
border-bottom-color: ${get('colors.accent')};
color: ${get('colors.underlinenav.textActive')};
border-bottom-color: ${get('colors.underlinenav.borderActive')};
.UnderlineNav-octicon {
color: ${get('colors.gray.5')};
color: ${get('colors.underlinenav.iconActive')};
}
}
Expand Down
36 changes: 18 additions & 18 deletions src/__tests__/__snapshots__/TextInput.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports[`TextInput renders 1`] = `
border: 1px solid #e1e4e8;
border-radius: 6px;
outline: none;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
padding: 6px 12px;
}
Expand All @@ -50,8 +50,8 @@ exports[`TextInput renders 1`] = `
}
.c0:focus-within {
border-color: #2188ff;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
border-color: #0366d6;
box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
}
@media (min-width:768px) {
Expand Down Expand Up @@ -105,7 +105,7 @@ exports[`TextInput renders block 1`] = `
border: 1px solid #e1e4e8;
border-radius: 6px;
outline: none;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
padding: 6px 12px;
display: block;
width: 100%;
Expand All @@ -123,8 +123,8 @@ exports[`TextInput renders block 1`] = `
}
.c0:focus-within {
border-color: #2188ff;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
border-color: #0366d6;
box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
}
@media (min-width:768px) {
Expand Down Expand Up @@ -178,7 +178,7 @@ exports[`TextInput renders consistently 1`] = `
border: 1px solid #e1e4e8;
border-radius: 6px;
outline: none;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
padding: 6px 12px;
}
Expand All @@ -194,8 +194,8 @@ exports[`TextInput renders consistently 1`] = `
}
.c0:focus-within {
border-color: #2188ff;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
border-color: #0366d6;
box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
}
@media (min-width:768px) {
Expand Down Expand Up @@ -248,7 +248,7 @@ exports[`TextInput renders large 1`] = `
border: 1px solid #e1e4e8;
border-radius: 6px;
outline: none;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
padding: 6px 12px;
padding-left: 8px;
padding-right: 8px;
Expand All @@ -269,8 +269,8 @@ exports[`TextInput renders large 1`] = `
}
.c0:focus-within {
border-color: #2188ff;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
border-color: #0366d6;
box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
}
@media (min-width:768px) {
Expand Down Expand Up @@ -324,7 +324,7 @@ exports[`TextInput renders small 1`] = `
border: 1px solid #e1e4e8;
border-radius: 6px;
outline: none;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
padding: 6px 12px;
min-height: 28px;
padding-left: 8px;
Expand All @@ -347,8 +347,8 @@ exports[`TextInput renders small 1`] = `
}
.c0:focus-within {
border-color: #2188ff;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
border-color: #0366d6;
box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
}
@media (min-width:768px) {
Expand Down Expand Up @@ -402,7 +402,7 @@ exports[`TextInput should render a password input 1`] = `
border: 1px solid #e1e4e8;
border-radius: 6px;
outline: none;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2);
box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
padding: 6px 12px;
}
Expand All @@ -418,8 +418,8 @@ exports[`TextInput should render a password input 1`] = `
}
.c0:focus-within {
border-color: #2188ff;
box-shadow: inset 0px 2px 0px rgba(225,228,232,0.2),rgba(3,102,214,0.3) 0px 0px 0px 0.2em;
border-color: #0366d6;
box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
}
@media (min-width:768px) {
Expand Down
Loading

1 comment on commit 0b81666

@vercel
Copy link

@vercel vercel bot commented on 0b81666 Feb 26, 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.