From 06dd7ac0dcb8ef7776cc276661be4d472b5bee92 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 25 Feb 2021 17:42:09 -0800 Subject: [PATCH 1/6] Update color variables used in BranchName --- src/BranchName.tsx | 6 +++--- src/__tests__/__snapshots__/BranchName.tsx.snap | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/BranchName.tsx b/src/BranchName.tsx index 4b1bca27b18..de574659f67 100644 --- a/src/BranchName.tsx +++ b/src/BranchName.tsx @@ -10,9 +10,9 @@ const BranchName = styled.a` padding: 2px 6px; font-size: ${get('fontSizes.0')}; font-family: ${get('fonts.mono')}; - color: rgba(27, 31, 35, 0.6); - background-color: #eaf5ff; - border-radius: 3px; + color: ${get('colors.branchName.text')}; + background-color: ${get('colors.branchName.bg')}; + border-radius: ${get('radii.2')}; ${COMMON}; ${sx}; ` diff --git a/src/__tests__/__snapshots__/BranchName.tsx.snap b/src/__tests__/__snapshots__/BranchName.tsx.snap index 6f4391dfbdd..08c964defa1 100644 --- a/src/__tests__/__snapshots__/BranchName.tsx.snap +++ b/src/__tests__/__snapshots__/BranchName.tsx.snap @@ -6,9 +6,9 @@ exports[`BranchName renders consistently 1`] = ` padding: 2px 6px; font-size: 12px; font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace; - color: rgba(27,31,35,0.6); + color: #586069; background-color: #eaf5ff; - border-radius: 3px; + border-radius: 6px; } Date: Thu, 25 Feb 2021 17:42:20 -0800 Subject: [PATCH 2/6] Update color variables used in AvatarPair --- src/AvatarPair.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx index 6940eef5e28..1ae30a264c5 100644 --- a/src/AvatarPair.tsx +++ b/src/AvatarPair.tsx @@ -1,15 +1,16 @@ -import React from 'react' import PropTypes from 'prop-types' +import React from 'react' import styled from 'styled-components' -import {Relative, RelativeProps} from './Position' import Avatar from './Avatar' +import {get} from './constants' +import {Relative, RelativeProps} from './Position' import theme from './theme' const ChildAvatar = styled(Avatar)` position: absolute; right: -15%; bottom: -9%; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); + box-shadow: ${get('shadows.avatar.childShadow')}; ` export type AvatarPairProps = RelativeProps @@ -17,7 +18,7 @@ export type AvatarPairProps = RelativeProps const AvatarPair = ({children, ...rest}: AvatarPairProps) => { const avatars = React.Children.map(children, (child, i) => { if (!React.isValidElement(child)) return child - return i === 0 ? React.cloneElement(child, {size: 40}) : + return i === 0 ? React.cloneElement(child, {size: 40}) : }) return ( From 85f964331fdf4d3ee3c6102f72b14c477baa1371 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 25 Feb 2021 17:42:30 -0800 Subject: [PATCH 3/6] Update color variables used in AvatarStack --- src/AvatarStack.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx index 12e96e6a78d..1529632314e 100644 --- a/src/AvatarStack.tsx +++ b/src/AvatarStack.tsx @@ -23,7 +23,7 @@ const AvatarStackWrapper = styled.span` flex-shrink: 0; height: 20px; width: 20px; - box-shadow: 0 0 0 1px ${get('colors.white')}; + box-shadow: 0 0 0 1px ${get('colors.bg.canvas')}; margin-left: -11px; position: relative; overflow: hidden; @@ -120,7 +120,7 @@ const AvatarStackWrapper = styled.span` margin-left: ${get('space.1')}; opacity: 100%; visibility: visible; - box-shadow: 0 0 0 4px ${get('colors.white')}; + box-shadow: 0 0 0 4px ${get('colors.bg.canvas')}; &:first-child { margin-left: 0; } From 3da4c1d51c5ac1dbc8a197023430a63f73c931c9 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 25 Feb 2021 17:42:39 -0800 Subject: [PATCH 4/6] Update color variables used in BaseStyles --- src/BaseStyles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index c520b1d9654..600ae282d44 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -46,7 +46,7 @@ function BaseStyles(props: BaseStylesProps) { } BaseStyles.defaultProps = { - color: 'gray.9', + color: 'text.primary', fontFamily: 'normal', lineHeight: 'default', theme From 5459608713a9e594a854cf42dd1208e7d89ff19f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 25 Feb 2021 17:42:51 -0800 Subject: [PATCH 5/6] Update color variables used in BorderBox --- src/BorderBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BorderBox.tsx b/src/BorderBox.tsx index da7acd56968..9de672aed3d 100644 --- a/src/BorderBox.tsx +++ b/src/BorderBox.tsx @@ -15,7 +15,7 @@ BorderBox.defaultProps = { theme, borderWidth: '1px', borderStyle: 'solid', - borderColor: 'gray.2', + borderColor: 'border.primary', borderRadius: 2 } From fa106ea9a43a8451efb648d1e3ec9df87577379c Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 25 Feb 2021 17:46:44 -0800 Subject: [PATCH 6/6] Add changesets --- .changeset/clever-islands-breathe.md | 5 +++++ .changeset/cuddly-suns-flow.md | 5 +++++ .changeset/purple-snakes-wait.md | 5 +++++ .changeset/warm-dryers-attack.md | 5 +++++ .changeset/wet-dryers-repeat.md | 5 +++++ 5 files changed, 25 insertions(+) create mode 100644 .changeset/clever-islands-breathe.md create mode 100644 .changeset/cuddly-suns-flow.md create mode 100644 .changeset/purple-snakes-wait.md create mode 100644 .changeset/warm-dryers-attack.md create mode 100644 .changeset/wet-dryers-repeat.md diff --git a/.changeset/clever-islands-breathe.md b/.changeset/clever-islands-breathe.md new file mode 100644 index 00000000000..91a5bd18886 --- /dev/null +++ b/.changeset/clever-islands-breathe.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Use functional color variables in BaseStyles diff --git a/.changeset/cuddly-suns-flow.md b/.changeset/cuddly-suns-flow.md new file mode 100644 index 00000000000..bf5ea232677 --- /dev/null +++ b/.changeset/cuddly-suns-flow.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Use functional color variables in BranchName diff --git a/.changeset/purple-snakes-wait.md b/.changeset/purple-snakes-wait.md new file mode 100644 index 00000000000..ca8525cfa2f --- /dev/null +++ b/.changeset/purple-snakes-wait.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Use functional color variables in BorderBox diff --git a/.changeset/warm-dryers-attack.md b/.changeset/warm-dryers-attack.md new file mode 100644 index 00000000000..8c9e3f81363 --- /dev/null +++ b/.changeset/warm-dryers-attack.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Use functional color variables in AvatarPair diff --git a/.changeset/wet-dryers-repeat.md b/.changeset/wet-dryers-repeat.md new file mode 100644 index 00000000000..fa3b5d55ccc --- /dev/null +++ b/.changeset/wet-dryers-repeat.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Use functional color variables in AvatarStack