From 94d8777d5db3f731402b98d343088b344b342ca7 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 05:30:09 -0800 Subject: [PATCH 01/54] increase horizontal padding --- src/ButtonStyles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index 3d5927a43dd..7e3e89d049c 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -4,7 +4,7 @@ import {get} from './constants' export default css` position: relative; display: inline-block; - padding: 6px 12px; + padding: 6px 16px; color: ${get('colors.gray.9')}; background-color: ${get('colors.gray.1')}; background-image: linear-gradient(-180deg, ${get('colors.gray.0')} 0%, ${get('colors.button.bg2')} 90%); From 65f0de3c6e496477f25fbf7dd0111ed0cde6dbcb Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 05:35:12 -0800 Subject: [PATCH 02/54] update variant padding --- src/Button.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Button.js b/src/Button.js index c2fd0f2b606..77d3c2a74c3 100644 --- a/src/Button.js +++ b/src/Button.js @@ -9,14 +9,15 @@ import systemPropTypes from '@styled-system/prop-types' const variants = variant({ variants: { small: { - p: '3px 10px', + p: '4px 12px', fontSize: 0 }, medium: { fontSize: 1 }, large: { - fontSize: 2 + fontSize: 2, + p: '10px 20px' } } }) From 11344330a061569813faf0e16c2fa05cccbd64c9 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 05:37:21 -0800 Subject: [PATCH 03/54] update Button background color & radius --- src/ButtonStyles.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index 7e3e89d049c..bcf06cd6974 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -6,8 +6,7 @@ export default css` display: inline-block; padding: 6px 16px; color: ${get('colors.gray.9')}; - background-color: ${get('colors.gray.1')}; - background-image: linear-gradient(-180deg, ${get('colors.gray.0')} 0%, ${get('colors.button.bg2')} 90%); + background-color: ${get('colors.gray.0')}; font-size: ${get('fontSizes.1')}; font-weight: ${get('fontWeights.bold')}; line-height: 20px; @@ -15,11 +14,8 @@ export default css` vertical-align: middle; cursor: pointer; user-select: none; - background-repeat: repeat-x; - background-position: -1px -1px; - background-size: 110% 110%; border: 1px solid ${get('colors.button.border')}; - border-radius: ${get('radii.1')}; + border-radius: ${get('radii.2')}; appearance: none; text-decoration: none; From 3de55483042517d04bf8f9bf0d978048a83ea07d Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 07:06:46 -0800 Subject: [PATCH 04/54] primary button --- src/ButtonPrimary.js | 24 ++++++------------ src/ButtonStyles.js | 23 ++++++++---------- src/theme.js | 58 +++++++++++++++++++++++++++++--------------- 3 files changed, 56 insertions(+), 49 deletions(-) diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index dbe685dfcf3..af5d9579533 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -5,39 +5,29 @@ import {get} from './constants' const ButtonPrimary = styled(Button)` color: ${get('colors.button.white')}; background-color: ${get('colors.button.primaryBg')}; - background-image: linear-gradient( - -180deg, - ${get('colors.button.primaryBgImage')} 0%, - ${get('colors.button.primaryBg')} 90% - ); + box-shadow: ${get('shadows.primaryShadow')}; &:hover { background-color: ${get('colors.button.primaryHoverBg')}; - background-image: linear-gradient( - -180deg, - ${get('colors.button.primaryHoverBgImage')} 0%, - ${get('colors.button.primaryHoverBg')} 90% - ); - background-position: -0.5em center; - border-color: ${get('colors.button.primaryBorder')}; + border-color: ${get('colors.button.primaryHoverBorder')}; } &:active { background-color: ${get('colors.button.primaryActiveBg')}; - background-image: none; - box-shadow: ${get('colors.button.primaryActiveShadow')} 0px 0.15em 0.3em inset; + box-shadow: ${get('shadows.primaryActiveShadow')}; border-color: ${get('colors.button.primaryBorder')}; } &:focus { - box-shadow: rgba(52, 208, 88, 0.4) 0px 0px 0px 0.2em; + outline: none; + box-shadow: none; + background-color: ${get('colors.button.primaryFocusBg')}; + border: 3px solid ${get('colors.button.primaryFocusOutline')}; } &:disabled { color: ${get('colors.button.primaryDisabledColor')}; background-color: ${get('colors.button.primaryDisabledBg')}; - background-image: none; border-color: ${get('colors.button.primaryDisabledBorder')}; - box-shadow: none; } ` diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index bcf06cd6974..edbf8193888 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -5,8 +5,8 @@ export default css` position: relative; display: inline-block; padding: 6px 16px; - color: ${get('colors.gray.9')}; - background-color: ${get('colors.gray.0')}; + color: ${get('colors.text.grayDark')}; + background-color: ${get('colors.button.bg')}; font-size: ${get('fontSizes.1')}; font-weight: ${get('fontWeights.bold')}; line-height: 20px; @@ -14,30 +14,27 @@ export default css` vertical-align: middle; cursor: pointer; user-select: none; - border: 1px solid ${get('colors.button.border')}; + border: 1px solid ${get('colors.border.gray')}; border-radius: ${get('radii.2')}; appearance: none; text-decoration: none; &:hover { - background-color: ${get('colors.button.hoverBg')}; - background-image: linear-gradient(-180deg, ${get('colors.button.bg2')} 0%, ${get('colors.button.hoverBg')} 90%); - background-position: -0.5em center; - border-color: ${get('colors.blackfade35')}; + border-color: ${get('colors.button.hoverBorder')}; + box-shadow: ${get('colors.button.hoverShadow')}; text-decoration: none; - background-repeat: repeat-x; } &:active { background-color: ${get('colors.button.activeBg')}; - background-image: none; - box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset; - border-color: ${get('colors.button.border')}; //convert black to rbg here + box-shadow: ${get('colors.button.activeShadow')}; + border-color: ${get('colors.button.activeBorder')}; } &:focus { outline: none; - box-shadow: ${get('colors.button.focusShadow')} 0px 0px 0px 0.2em; + border: ${get('colors.button.focusBorder')}; + box-shadow: ${get('colors.button.focusShadow')}; } &.grouped { @@ -75,7 +72,7 @@ export default css` color: ${get('colors.button.disabledColor')}; background-color: ${get('colors.button.disabledBg')}; background-image: none; - border-color: ${get('colors.blackfade20')}; + border-color: ${get('colors.border.grayLight')}; box-shadow: none; cursor: default; } diff --git a/src/theme.js b/src/theme.js index e709e7db2d1..9991c2ffaf6 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,5 +1,6 @@ import {black, white, gray, blue, green, orange, purple, red, yellow} from 'primer-colors' import {lineHeights} from 'primer-typography' +import { textAlign } from 'styled-system' const colors = { bodytext: gray[9], @@ -26,14 +27,23 @@ const colors = { success: green[5], unknown: gray[4] }, + border: { + grayLight: '#eaecef', + gray: gray[2], + grayDark: '#d1d5da' + }, button: { - disabledColor: 'rgba(36, 41, 46, 0.4)', - bg2: 'rgb(239, 243, 246)', - disabledBg: '#eff3f6', - border: 'rgba(27, 31, 35, 0.2)', - focusShadow: 'rgba(3, 102, 214, 0.3)', + bg: gray[0], + selectedBg: '#F3F4F6', activeBg: 'rgb(233, 236, 239)', - hoverBg: 'rgb(230, 235, 241)', + shadow: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', + hoverShadow: '0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)', + focusShadow: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', + activeShadow: 'inset 0px 2px 0px rgba(149, 157, 165, 0.1)', + hoverBorder: '1px solid rgba(27, 31, 35, 0.1)', + activeBorder: '#D1D5DA', //border-gray-dark + focusBorder: '3px solid rgba(3, 102, 214, 0.3)', + disabledColor: gray[4], dangerActiveBg: 'rgb(181, 32, 44)', dangerFocusShadow: 'rgba(203, 36, 49, 0.4)', dangerHoverBgImage: 'rgb(222, 68, 80)', @@ -41,24 +51,32 @@ const colors = { white: 'rgb(255, 255, 255)', outlineBlue: 'rgb(3, 102, 214)', outlineShadow: 'rgba(3, 102, 214, 0.4)', - primaryBg: 'rgb(40, 167, 69)', - primaryBgImage: 'rgb(52, 208, 88)', - primaryHoverBg: 'rgb(38, 159, 66)', - primaryHoverBgImage: 'rgb(47, 203, 83)', - primaryBorder: 'rgba(27, 31, 35, 0.5)', - primaryActiveBg: 'rgb(39, 159, 67)', - primaryActiveShadow: 'rgba(27, 31, 35, 0.15)', - primaryFocusShadow: 'rgba(52, 208, 88, 0.4)', - primaryDisabledColor: 'rgba(255, 255, 255, .75)', - primaryDisabledBg: '#94d3a2', - primaryDisabledBorder: 'rgba(27,31,35,0.2)' + primaryBg: '#159739', + primaryFocusBg: '#138934', + primaryHoverBg: '#138934', + primaryActiveBg: '#138934', + primaryDisabledBg: '#94D3A2', + primaryBorder: '#22863A', + primaryHoverBorder: '#22863A', + primaryDisabledBorder: 'rgba(34, 134, 58, 0.1)', + primaryDisabledColor: 'rgba(255, 255, 255, .50)', + primaryFocusOutline: '#94D3A2', }, counter: { bg: 'rgba(27, 31, 35, 0.08)' }, filterList: { hoverBg: '#eaecef' - } + }, + text: { + gray: gray[6], + grayLight: gray[5], + grayDark: gray[9] + }, + bg: { + gray: gray[1], + grayLight: gray[0] + } } const theme = { @@ -99,7 +117,9 @@ const theme = { large: '0 1px 15px rgba(27, 31, 35, 0.15)', 'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)', formControl: 'rgba(27, 31, 35, 0.075) 0px 1px 2px inset', - formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em' + formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em', + primaryShadow: '0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', + primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)', }, space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'] } From 6d4e5de87f80ce03402f92b78f4762c7bd1831c3 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 07:29:55 -0800 Subject: [PATCH 05/54] fix primary border --- src/ButtonPrimary.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index af5d9579533..e2f285bb763 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -5,6 +5,7 @@ import {get} from './constants' const ButtonPrimary = styled(Button)` color: ${get('colors.button.white')}; background-color: ${get('colors.button.primaryBg')}; + border-color: ${get('colors.button.primaryBorder')}; box-shadow: ${get('shadows.primaryShadow')}; &:hover { @@ -15,7 +16,6 @@ const ButtonPrimary = styled(Button)` &:active { background-color: ${get('colors.button.primaryActiveBg')}; box-shadow: ${get('shadows.primaryActiveShadow')}; - border-color: ${get('colors.button.primaryBorder')}; } &:focus { From 46d93a04a6fde37673a790819e04e58ac4641d45 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 08:18:58 -0800 Subject: [PATCH 06/54] refactor theme --- src/ButtonPrimary.js | 26 ++++----- src/ButtonStyles.js | 37 ++++++------ src/theme.js | 131 +++++++++++++++++++++++++++++++++---------- 3 files changed, 131 insertions(+), 63 deletions(-) diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index e2f285bb763..bebfc61c2f5 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -3,31 +3,31 @@ import Button from './Button' import {get} from './constants' const ButtonPrimary = styled(Button)` - color: ${get('colors.button.white')}; - background-color: ${get('colors.button.primaryBg')}; - border-color: ${get('colors.button.primaryBorder')}; - box-shadow: ${get('shadows.primaryShadow')}; + color: ${get('buttons.primary.color.default')}; + background-color: ${get('buttons.primary.bg.default')}; + border-color: ${get('buttons.primary.border.default')}; + box-shadow: ${get('buttons.primary.shadow.default')}; &:hover { - background-color: ${get('colors.button.primaryHoverBg')}; - border-color: ${get('colors.button.primaryHoverBorder')}; + background-color: ${get('buttons.primary.bg.hover')}; + border-color: ${get('buttons.primary.border.hover')}; } &:active { - background-color: ${get('colors.button.primaryActiveBg')}; - box-shadow: ${get('shadows.primaryActiveShadow')}; + background-color: ${get('buttons.primary.bg.active')}; + box-shadow: ${get('buttons.primary.shadow.active')}; } &:focus { outline: none; box-shadow: none; - background-color: ${get('colors.button.primaryFocusBg')}; - border: 3px solid ${get('colors.button.primaryFocusOutline')}; + background-color: ${get('buttons.primary.bg.focus')}; + border: 3px solid ${get('buttons.primary.border.focus')}; } &:disabled { - color: ${get('colors.button.primaryDisabledColor')}; - background-color: ${get('colors.button.primaryDisabledBg')}; - border-color: ${get('colors.button.primaryDisabledBorder')}; + color: ${get('buttons.primary.color.disabled')}; + background-color: ${get('buttons.primary.bg.disabled')}; + border-color: ${get('buttons.primary.border.disabled')}; } ` diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index edbf8193888..9cc790ad1c9 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -5,8 +5,8 @@ export default css` position: relative; display: inline-block; padding: 6px 16px; - color: ${get('colors.text.grayDark')}; - background-color: ${get('colors.button.bg')}; + color: ${get('buttons.default.color.default')}; + background-color: ${get('buttons.default.bg.default')}; font-size: ${get('fontSizes.1')}; font-weight: ${get('fontWeights.bold')}; line-height: 20px; @@ -14,27 +14,28 @@ export default css` vertical-align: middle; cursor: pointer; user-select: none; - border: 1px solid ${get('colors.border.gray')}; + border: 1px solid ${get('buttons.default.border.default')}; border-radius: ${get('radii.2')}; appearance: none; text-decoration: none; + box-shadow: ${get('buttons.default.shadow.default')}; &:hover { - border-color: ${get('colors.button.hoverBorder')}; - box-shadow: ${get('colors.button.hoverShadow')}; + border-color: ${get('buttons.default.border.hover')}; + box-shadow: ${get('buttons.default.shadow.hover')}; + // needed to override link styles text-decoration: none; } &:active { - background-color: ${get('colors.button.activeBg')}; - box-shadow: ${get('colors.button.activeShadow')}; - border-color: ${get('colors.button.activeBorder')}; + background-color: ${get('buttons.default.bg.active')}; + box-shadow: ${get('buttons.default.shadow.active')}; + border-color: ${get('buttons.default.border.active')}; } &:focus { outline: none; - border: ${get('colors.button.focusBorder')}; - box-shadow: ${get('colors.button.focusShadow')}; + border: 3px solid ${get('buttons.default.border.focus')}; } &.grouped { @@ -43,14 +44,14 @@ export default css` border-radius: 0; &:first-child { - border-top-left-radius: ${get('radii.1')}; - border-bottom-left-radius: ${get('radii.1')}; + border-top-left-radius: ${get('radii.2')}; + border-bottom-left-radius: ${get('radii.2')}; } &:last-child { border-right-width: 1px; - border-top-right-radius: ${get('radii.1')}; - border-bottom-right-radius: ${get('radii.1')}; + border-top-right-radius: ${get('radii.2')}; + border-bottom-right-radius: ${get('radii.2')}; } &:focus, @@ -69,11 +70,9 @@ export default css` } &:disabled { - color: ${get('colors.button.disabledColor')}; - background-color: ${get('colors.button.disabledBg')}; - background-image: none; - border-color: ${get('colors.border.grayLight')}; - box-shadow: none; + color: ${get('buttons.default.color.disabled')}; + background-color: ${get('buttons.default.bg.disabled')}; + border-color: ${get('buttons.default.border.disabled')}; cursor: default; } ` diff --git a/src/theme.js b/src/theme.js index 9991c2ffaf6..bdf09e316df 100644 --- a/src/theme.js +++ b/src/theme.js @@ -19,6 +19,7 @@ const colors = { blackfade35: 'rgba(27, 31, 35, 0.35)', blackfade50: 'rgba(27, 31, 35, 0.5)', whitefade15: 'rgba(255, 255, 255, 0.15)', + whitefade50: 'rgba(255, 255, 255, 0.50)', state: { error: red[5], failure: red[5], @@ -32,36 +33,6 @@ const colors = { gray: gray[2], grayDark: '#d1d5da' }, - button: { - bg: gray[0], - selectedBg: '#F3F4F6', - activeBg: 'rgb(233, 236, 239)', - shadow: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', - hoverShadow: '0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)', - focusShadow: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', - activeShadow: 'inset 0px 2px 0px rgba(149, 157, 165, 0.1)', - hoverBorder: '1px solid rgba(27, 31, 35, 0.1)', - activeBorder: '#D1D5DA', //border-gray-dark - focusBorder: '3px solid rgba(3, 102, 214, 0.3)', - disabledColor: gray[4], - dangerActiveBg: 'rgb(181, 32, 44)', - dangerFocusShadow: 'rgba(203, 36, 49, 0.4)', - dangerHoverBgImage: 'rgb(222, 68, 80)', - dangerDisabledColor: 'rgba(203,36,49,0.4)', - white: 'rgb(255, 255, 255)', - outlineBlue: 'rgb(3, 102, 214)', - outlineShadow: 'rgba(3, 102, 214, 0.4)', - primaryBg: '#159739', - primaryFocusBg: '#138934', - primaryHoverBg: '#138934', - primaryActiveBg: '#138934', - primaryDisabledBg: '#94D3A2', - primaryBorder: '#22863A', - primaryHoverBorder: '#22863A', - primaryDisabledBorder: 'rgba(34, 134, 58, 0.1)', - primaryDisabledColor: 'rgba(255, 255, 255, .50)', - primaryFocusOutline: '#94D3A2', - }, counter: { bg: 'rgba(27, 31, 35, 0.08)' }, @@ -79,6 +50,103 @@ const colors = { } } +const buttons = { + default: { + color: { + default: gray[9], //text-gray-dark + disabled: gray[4] + }, + border: { + default: gray[2], //border-gray + focus: 'rgba(27,31,35,0.1)', // blackfade 10 + active: '#d1d5da', //border-gray-dark + disabled: '#eaecef'//border-gray-light + }, + bg: { + default: gray[0], + active: '#F3F4F6', //custom gray + }, + shadow: { + default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', + hover: '0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)', + active: 'inset 0px 2px 0px rgba(149, 157, 165, 0.1)', + } + }, + primary: { + color: { + default: white, + disabled: colors.whitefade50 + }, + border: { + default: '#22863A', + focus: '#94D3A2', + hover: '#176F2C', + disabled: 'rgba(34, 134, 58, 0.1)' + }, + bg: { + default: '#159739', + focus: '#138934', + hover: '#138934', + active: '#138934', + disabled: '#94D3A2' + }, + shadow: { + default: ' 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', + active: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)' + } + }, + danger: { + color: { + default: red[6], //text-red + hover: white, + active: white, + disabled: 'rgba(203,36,49, .5)' // custom? + }, + border: { + default: gray[2], //border-gray + focus: 'rgba(203, 36, 49, 0.4)', + hover: red[7], + active: red[7], + }, + bg: { + default: gray[0], + hover: red[6], + active: red[6], + disabled: '#F3F4F6' + }, + shadow: { + default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', + hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', + active: 'inset 0px 2px 0px rgba(179, 29, 40, 0.4)', + } + }, + outline: { + color: { + default: blue[6], + hover: white, + active: white, + disabled: gray[4] + }, + border: { + default: gray[2], //border-gray + focus: 'rgba(3, 102, 214, 0.3)', + hover: blue[6], + active: blue[6], + }, + bg: { + default: gray[0], + hover: blue[5], + active: blue[5], + disabled: '#F3F4F6' + }, + shadow: { + default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', + hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03', + active: 'inset 0px 1px 0px rgba(4, 66, 137, 0.2)', + } + } +} + const theme = { breakpoints: ['544px', '768px', '1012px', '1280px'], maxWidths: { @@ -121,7 +189,8 @@ const theme = { primaryShadow: '0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)', }, - space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'] + space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'], + buttons, } export default theme From ffffaf142509e160a135fa31bb3331a649aacea0 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 08:28:31 -0800 Subject: [PATCH 07/54] update danger button --- src/ButtonDanger.js | 45 ++++++++++++++++----------------------------- 1 file changed, 16 insertions(+), 29 deletions(-) diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js index 5577441f69a..77227d55d64 100644 --- a/src/ButtonDanger.js +++ b/src/ButtonDanger.js @@ -3,47 +3,34 @@ import Button from './Button' import {get} from './constants' const ButtonDanger = styled(Button)` - color: ${get('colors.red.6')}; - background-color: ${get('colors.gray.0')}; - background-image: linear-gradient(-180deg, ${get('colors.gray.0')} 0%, ${get('colors.button.bg2')} 90%); + color: ${get('buttons.danger.color.default')}; + border: 1px solid ${get('buttons.danger.border.default')}; + background-color: ${get('buttons.danger.bg.default')}; + box-shadow: ${get('buttons.danger.shadow.default')}; &:hover { - color: ${get('colors.white')}; - background-color: ${get('colors.red.6')}; - background-image: linear-gradient( - -180deg, - ${get('colors.button.dangerHoverBgImage')} 0%, - ${get('colors.red.6')} 90% - ); - border-color: ${get('colors.blackfade50')}; + color: ${get('buttons.danger.color.hover')}; + background-color: ${get('buttons.danger.bg.hover')}; + border-color: ${get('buttons.danger.border.hover')}; + box-shadow: ${get('buttons.danger.shadow.hover')}; } &:focus { - box-shadow: ${get('colors.button.dangerFocusShadow')} 0px 0px 0px 0.2em; + border-color: ${get('buttons.danger.border.focus')}; } &:active { - color: ${get('colors.white')}; - background-color: ${get('colors.button.dangerActiveBg')}; - background-image: none; - box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset; - border-color: ${get('colors.blackfade50')}; + color: ${get('buttons.danger.color.active')}; + background-color: ${get('buttons.danger.bg.active')}; + box-shadow: ${get('buttons.danger.shadow.active')}; + border-color: ${get('buttons.danger.border.active')}; } - &:selected { - color: ${get('colors.white')}; - background-color: ${get('colors.button.dangerActiveBg')}; - background-image: none; - box-shadow: ${get('colors.blackfade15')} 0px 0.15em 0.3em inset; - border-color: ${get('colors.blackfade50')}; - } &:disabled { - color: ${get('colors.button.dangerDisabledColor')}; - background-color: ${get('colors.button.disabledBg')}; - background-image: none; - border-color: ${get('colors.blackfade20')}; - box-shadow: none; + color: ${get('buttons.danger.color.disabled')}; + background-color: ${get('buttons.danger.bg.disabled')}; + border: 1px solid ${get('buttons.danger.border.default')}; } ` From 4b3d70bcdee98208d8c2113c39f923e2f8de87d6 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 08:31:13 -0800 Subject: [PATCH 08/54] revert to default outline styles --- src/ButtonDanger.js | 4 ---- src/ButtonPrimary.js | 2 -- src/ButtonStyles.js | 8 ++++---- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js index 77227d55d64..6588bffd45b 100644 --- a/src/ButtonDanger.js +++ b/src/ButtonDanger.js @@ -15,10 +15,6 @@ const ButtonDanger = styled(Button)` box-shadow: ${get('buttons.danger.shadow.hover')}; } - &:focus { - border-color: ${get('buttons.danger.border.focus')}; - } - &:active { color: ${get('buttons.danger.color.active')}; background-color: ${get('buttons.danger.bg.active')}; diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index bebfc61c2f5..1fca535789e 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -19,10 +19,8 @@ const ButtonPrimary = styled(Button)` } &:focus { - outline: none; box-shadow: none; background-color: ${get('buttons.primary.bg.focus')}; - border: 3px solid ${get('buttons.primary.border.focus')}; } &:disabled { color: ${get('buttons.primary.color.disabled')}; diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index 9cc790ad1c9..97dc32c1ff0 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -33,10 +33,10 @@ export default css` border-color: ${get('buttons.default.border.active')}; } - &:focus { - outline: none; - border: 3px solid ${get('buttons.default.border.focus')}; - } + // &:focus { + // outline: none; + // border: 3px solid ${get('buttons.default.border.focus')}; + // } &.grouped { position: relative; From e67d7647b0c5272ebc7aae5ebfaa192434fcc55d Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 08:32:40 -0800 Subject: [PATCH 09/54] fix duplicate fontsize --- src/ButtonStyles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index 97dc32c1ff0..a348c98f0e7 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -7,7 +7,6 @@ export default css` padding: 6px 16px; color: ${get('buttons.default.color.default')}; background-color: ${get('buttons.default.bg.default')}; - font-size: ${get('fontSizes.1')}; font-weight: ${get('fontWeights.bold')}; line-height: 20px; white-space: nowrap; From 7727fb3109a1811561a2fda712d0bbeabd580f80 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 08:37:45 -0800 Subject: [PATCH 10/54] clean up theme file --- src/theme.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/theme.js b/src/theme.js index bdf09e316df..05e2faa7202 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,6 +1,5 @@ import {black, white, gray, blue, green, orange, purple, red, yellow} from 'primer-colors' import {lineHeights} from 'primer-typography' -import { textAlign } from 'styled-system' const colors = { bodytext: gray[9], @@ -42,7 +41,8 @@ const colors = { text: { gray: gray[6], grayLight: gray[5], - grayDark: gray[9] + grayDark: gray[9], + red: red[6] }, bg: { gray: gray[1], @@ -53,17 +53,17 @@ const colors = { const buttons = { default: { color: { - default: gray[9], //text-gray-dark + default: coplors.text.grayDark, disabled: gray[4] }, border: { - default: gray[2], //border-gray - focus: 'rgba(27,31,35,0.1)', // blackfade 10 - active: '#d1d5da', //border-gray-dark - disabled: '#eaecef'//border-gray-light + default: colors.border.gray, + focus: colors.blackfade10, + active: colors.border.grayDark, + disabled: colors.border.grayLight, }, bg: { - default: gray[0], + default: colors.bg.grayLight, active: '#F3F4F6', //custom gray }, shadow: { @@ -78,17 +78,17 @@ const buttons = { disabled: colors.whitefade50 }, border: { - default: '#22863A', - focus: '#94D3A2', - hover: '#176F2C', + default: green[6], + focus: '#94D3A2', //custom green + hover: green[7], disabled: 'rgba(34, 134, 58, 0.1)' }, bg: { - default: '#159739', - focus: '#138934', - hover: '#138934', - active: '#138934', - disabled: '#94D3A2' + default: '#159739', //custom green + focus: '#138934', //custom green + hover: '#138934', //custom green + active: '#138934', //custom green + disabled: '#94D3A2' // custom }, shadow: { default: ' 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', @@ -97,13 +97,13 @@ const buttons = { }, danger: { color: { - default: red[6], //text-red + default: colors.text.red, hover: white, active: white, disabled: 'rgba(203,36,49, .5)' // custom? }, border: { - default: gray[2], //border-gray + default: colors.border.gray, focus: 'rgba(203, 36, 49, 0.4)', hover: red[7], active: red[7], From 4fb89c40f61833c44be635b7fe0550975e936197 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 08:50:44 -0800 Subject: [PATCH 11/54] refactor buttons to use internal buttonBase component --- src/Button.js | 54 +++++++++++++++++++------------------------- src/ButtonBase.js | 50 ++++++++++++++++++++++++++++++++++++++++ src/ButtonDanger.js | 4 ++-- src/ButtonOutline.js | 4 ++-- src/ButtonPrimary.js | 4 ++-- src/ButtonStyles.js | 15 ------------ src/theme.js | 2 +- 7 files changed, 80 insertions(+), 53 deletions(-) create mode 100644 src/ButtonBase.js diff --git a/src/Button.js b/src/Button.js index 77d3c2a74c3..8e9db4600e5 100644 --- a/src/Button.js +++ b/src/Button.js @@ -1,48 +1,40 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import {COMMON} from './constants' -import theme from './theme' -import buttonStyles from './ButtonStyles' -import {compose, variant, layout, fontSize} from 'styled-system' import systemPropTypes from '@styled-system/prop-types' +import {COMMON, get} from './constants' +import theme from './theme' +import ButtonBase from './ButtonBase' + +const Button = styled(ButtonBase)` + 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')}; -const variants = variant({ - variants: { - small: { - p: '4px 12px', - fontSize: 0 - }, - medium: { - fontSize: 1 - }, - large: { - fontSize: 2, - p: '10px 20px' - } + &:hover { + border-color: ${get('buttons.default.border.hover')}; + box-shadow: ${get('buttons.default.shadow.hover')}; } -}) -const Button = styled.button.attrs(({disabled, onClick}) => ({ - onClick: disabled ? undefined : onClick -}))` - ${buttonStyles} - ${variants} - ${compose(fontSize, COMMON, layout)} + &:active { + background-color: ${get('buttons.default.bg.active')}; + box-shadow: ${get('buttons.default.shadow.active')}; + border-color: ${get('buttons.default.border.active')}; + } + + &:disabled { + color: ${get('buttons.default.color.disabled')}; + background-color: ${get('buttons.default.bg.disabled')}; + border-color: ${get('buttons.default.border.disabled')}; + } ` Button.defaultProps = { theme, - variant: 'medium' } Button.propTypes = { - as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]), - children: PropTypes.node, - disabled: PropTypes.bool, - fontSize: systemPropTypes.typography.fontSize, - onClick: PropTypes.func, theme: PropTypes.object, - variant: PropTypes.oneOf(['small', 'medium', 'large']), ...COMMON.propTypes, ...systemPropTypes.layout } diff --git a/src/ButtonBase.js b/src/ButtonBase.js new file mode 100644 index 00000000000..3b90de1863e --- /dev/null +++ b/src/ButtonBase.js @@ -0,0 +1,50 @@ +import PropTypes from 'prop-types' +import styled from 'styled-components' +import {COMMON} from './constants' +import theme from './theme' +import buttonBaseStyles from './ButtonStyles' +import {compose, variant, layout, fontSize} from 'styled-system' +import systemPropTypes from '@styled-system/prop-types' + +const variants = variant({ + variants: { + small: { + p: '4px 12px', + fontSize: 0 + }, + medium: { + fontSize: 1 + }, + large: { + fontSize: 2, + p: '10px 20px' + } + } +}) + +const ButtonBase = styled.button.attrs(({disabled, onClick}) => ({ + onClick: disabled ? undefined : onClick +}))` + ${buttonBaseStyles} + ${variants} + ${compose(fontSize, COMMON, layout)} +` + +ButtonBase.defaultProps = { + theme, + variant: 'medium' +} + +ButtonBase.propTypes = { + as: PropTypes.oneOfType([PropTypes.oneOf(['button', 'a', 'summary', 'input']), PropTypes.func]), + children: PropTypes.node, + disabled: PropTypes.bool, + fontSize: systemPropTypes.typography.fontSize, + onClick: PropTypes.func, + theme: PropTypes.object, + variant: PropTypes.oneOf(['small', 'medium', 'large']), + ...COMMON.propTypes, + ...systemPropTypes.layout +} + +export default ButtonBase diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js index 6588bffd45b..33eb77a12cc 100644 --- a/src/ButtonDanger.js +++ b/src/ButtonDanger.js @@ -1,8 +1,8 @@ import styled from 'styled-components' -import Button from './Button' +import ButtonBase from './ButtonBase' import {get} from './constants' -const ButtonDanger = styled(Button)` +const ButtonDanger = styled(ButtonBase)` color: ${get('buttons.danger.color.default')}; border: 1px solid ${get('buttons.danger.border.default')}; background-color: ${get('buttons.danger.bg.default')}; diff --git a/src/ButtonOutline.js b/src/ButtonOutline.js index 9dc11596bdf..531c0f5c14e 100644 --- a/src/ButtonOutline.js +++ b/src/ButtonOutline.js @@ -1,8 +1,8 @@ import styled from 'styled-components' -import Button from './Button' +import ButtonBase from './ButtonBase' import {get} from './constants' -const ButtonOutline = styled(Button)` +const ButtonOutline = styled(ButtonBase)` color: ${get('colors.button.outlineBlue')}; background-color: ${get('colors.button.white')}; background-image: none; diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index 1fca535789e..aeaebb52f79 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -1,8 +1,8 @@ import styled from 'styled-components' -import Button from './Button' +import ButtonBase from './ButtonBase' import {get} from './constants' -const ButtonPrimary = styled(Button)` +const ButtonPrimary = styled(ButtonBase)` color: ${get('buttons.primary.color.default')}; background-color: ${get('buttons.primary.bg.default')}; border-color: ${get('buttons.primary.border.default')}; diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index a348c98f0e7..b423460d0de 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -5,33 +5,21 @@ export default css` position: relative; display: inline-block; padding: 6px 16px; - color: ${get('buttons.default.color.default')}; - background-color: ${get('buttons.default.bg.default')}; font-weight: ${get('fontWeights.bold')}; line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; - border: 1px solid ${get('buttons.default.border.default')}; border-radius: ${get('radii.2')}; appearance: none; text-decoration: none; - box-shadow: ${get('buttons.default.shadow.default')}; &:hover { - border-color: ${get('buttons.default.border.hover')}; - box-shadow: ${get('buttons.default.shadow.hover')}; // needed to override link styles text-decoration: none; } - &:active { - background-color: ${get('buttons.default.bg.active')}; - box-shadow: ${get('buttons.default.shadow.active')}; - border-color: ${get('buttons.default.border.active')}; - } - // &:focus { // outline: none; // border: 3px solid ${get('buttons.default.border.focus')}; @@ -69,9 +57,6 @@ export default css` } &:disabled { - color: ${get('buttons.default.color.disabled')}; - background-color: ${get('buttons.default.bg.disabled')}; - border-color: ${get('buttons.default.border.disabled')}; cursor: default; } ` diff --git a/src/theme.js b/src/theme.js index 05e2faa7202..f00be0df3c9 100644 --- a/src/theme.js +++ b/src/theme.js @@ -53,7 +53,7 @@ const colors = { const buttons = { default: { color: { - default: coplors.text.grayDark, + default: colors.text.grayDark, disabled: gray[4] }, border: { From 8c6e8c5f13cacd165e8649b93f3f89bc6d143e43 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 09:20:09 -0800 Subject: [PATCH 12/54] buttons are done! :tada: --- src/ButtonOutline.js | 35 +++++++++++++++-------------------- src/ButtonPrimary.js | 2 +- src/theme.js | 2 +- 3 files changed, 17 insertions(+), 22 deletions(-) diff --git a/src/ButtonOutline.js b/src/ButtonOutline.js index 531c0f5c14e..d03bf6fe475 100644 --- a/src/ButtonOutline.js +++ b/src/ButtonOutline.js @@ -3,34 +3,29 @@ import ButtonBase from './ButtonBase' import {get} from './constants' const ButtonOutline = styled(ButtonBase)` - color: ${get('colors.button.outlineBlue')}; - background-color: ${get('colors.button.white')}; - background-image: none; + color: ${get('buttons.outline.color.default')}; + border: 1px solid ${get('buttons.outline.border.default')}; + background-color: ${get('buttons.outline.bg.default')}; + box-shadow: ${get('buttons.outline.shadow.default')}; &:hover { - color: ${get('colors.button.white')}; - background-color: ${get('colors.button.outlineBlue')}; - background-image: none; - border-color: ${get('colors.button.outlineBlue')}; + color: ${get('buttons.outline.color.hover')}; + background-color: ${get('buttons.outline.bg.hover')}; + border-color: ${get('buttons.outline.border.hover')}; + box-shadow: ${get('buttons.outline.shadow.hover')}; } &:active { - color: ${get('colors.button.white')}; - background-color: ${get('colors.button.outlineBlue')}; - background-image: none; - border-color: ${get('colors.button.outlineBlue')}; - } - - &:focus { - box-shadow: ${get('colors.button.outlineShadow')} 0px 0px 0px 0.2em; - border-color: ${get('colors.button.outlineBlue')}; + color: ${get('buttons.outline.color.active')}; + background-color: ${get('buttons.outline.bg.active')}; + border-color: ${get('buttons.outline.border.active')}; + box-shadow: ${get('buttons.outline.shadow.active')}; } &:disabled { - color: ${get('colors.blackfade30')}; - background-color: ${get('colors.white')}; - border-color: ${get('colors.blackfade15')}; - box-shadow: none; + color: ${get('buttons.outline.color.disabled')}; + border-color: ${get('buttons.outline.border.default')}; + background-color: ${get('buttons.outline.bg.disabled')}; } ` diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index aeaebb52f79..404eae3d5ef 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -5,7 +5,7 @@ import {get} from './constants' const ButtonPrimary = styled(ButtonBase)` color: ${get('buttons.primary.color.default')}; background-color: ${get('buttons.primary.bg.default')}; - border-color: ${get('buttons.primary.border.default')}; + border: 1px solid ${get('buttons.primary.border.default')}; box-shadow: ${get('buttons.primary.shadow.default')}; &:hover { diff --git a/src/theme.js b/src/theme.js index f00be0df3c9..5d0fd361e1d 100644 --- a/src/theme.js +++ b/src/theme.js @@ -141,7 +141,7 @@ const buttons = { }, shadow: { default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', - hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03', + hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', active: 'inset 0px 1px 0px rgba(4, 66, 137, 0.2)', } } From a12c25420bf9cea8af4a4357f8febea6e9babde2 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 09:28:20 -0800 Subject: [PATCH 13/54] remove leftover button group styles --- src/ButtonStyles.js | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index b423460d0de..15116b36f4f 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -25,32 +25,6 @@ export default css` // border: 3px solid ${get('buttons.default.border.focus')}; // } - &.grouped { - position: relative; - border-right-width: 0; - border-radius: 0; - - &:first-child { - border-top-left-radius: ${get('radii.2')}; - border-bottom-left-radius: ${get('radii.2')}; - } - - &:last-child { - border-right-width: 1px; - border-top-right-radius: ${get('radii.2')}; - border-bottom-right-radius: ${get('radii.2')}; - } - - &:focus, - &:active, - &:hover { - border-right-width: 1px; - - + .grouped { - border-left-width: 0; - } - } - } &:focus, &:active { z-index: 1; From 88ae6ad3bc9ecf5982e4b71694b795a08b1fad27 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 09:28:28 -0800 Subject: [PATCH 14/54] update button group --- src/ButtonGroup.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js index 785d5434680..1ac188c8f32 100644 --- a/src/ButtonGroup.js +++ b/src/ButtonGroup.js @@ -1,4 +1,5 @@ import styled from 'styled-components' +import {get} from './constants' import Box from './Box' const ButtonGroup = styled(Box)` @@ -10,8 +11,8 @@ const ButtonGroup = styled(Box)` border-radius: 0; :first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + border-top-left-radius: ${get('radii.2')}; + border-bottom-left-radius: ${get('radii.2')}; margin-right: 0; } @@ -22,8 +23,8 @@ const ButtonGroup = styled(Box)` :last-child { border-right-width: 1px; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-top-right-radius: ${get('radii.2')}; + border-bottom-right-radius: ${get('radii.2')}; } :focus, From a4fb6f5933d8749a56795d73d949f710e159d07f Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 09:33:04 -0800 Subject: [PATCH 15/54] add stickersheet --- docs/content/Refresh.mdx | 54 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 docs/content/Refresh.mdx diff --git a/docs/content/Refresh.mdx b/docs/content/Refresh.mdx new file mode 100644 index 00000000000..a3472d74e6d --- /dev/null +++ b/docs/content/Refresh.mdx @@ -0,0 +1,54 @@ +Component Refresh Sticker Sheet + +Default + + + Button + Button + Button + + +Disabled + + + Button + Button + Button + +Small + + + Button + Button + Button + + +Large + + + Button + Button + Button + + +Button Group + + + + + + + + + One + Two + Three + + +Labels From 8e6b6748f0632353a212cc09dd17871dbd84038b Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 09:49:23 -0800 Subject: [PATCH 16/54] label updates --- src/Label.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/Label.js b/src/Label.js index a5b7ec5def7..12a1d173a78 100644 --- a/src/Label.js +++ b/src/Label.js @@ -1,35 +1,36 @@ import PropTypes from 'prop-types' import styled, {css} from 'styled-components' -import {variant} from 'styled-system' +import {variant, borderColor} from 'styled-system' import theme from './theme' import {COMMON, get} from './constants' const outlineStyles = css` margin-top: -1px; // offsets the 1px border margin-bottom: -1px; // offsets the 1px border - font-weight: 400; color: ${get('colors.gray.6')}; - background-color: transparent; border: ${get('borders.1')} ${get('colors.blackfade15')}; box-shadow: none; + ${borderColor}; + ${COMMON}; + background-color: transparent; ` const sizeVariant = variant({ variants: { small: { fontSize: 0, - px: '0.125em', - py: 1 + px: '8px', + py: '0px' }, medium: { fontSize: 0, - px: '3px', - py: 1 + px: '8px', + py: '1px' }, large: { fontSize: 1, - px: 1, - py: 2 + px: '12px', + py: '4px' }, xl: { fontSize: 2, @@ -44,7 +45,7 @@ const Label = styled('span')` font-weight: 600; line-height: ${get('lineHeights.condensedUltra')}; color: ${get('colors.white')}; - border-radius: 2px; + border-radius: 100px; &:hover { text-decoration: none; } From 4c90709f92fc3aa7669b55be2c1538c144ec409d Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 09:58:06 -0800 Subject: [PATCH 17/54] dropdown updates --- src/Dropdown.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Dropdown.js b/src/Dropdown.js index 780dc3eb730..fb4e4443e39 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -27,8 +27,8 @@ const Dropdown = styled(DropdownBase)` ` const DropdownCaret = styled.div` - border: ${get('space.1')} solid transparent; - margin-left: ${get('space.1')}; + border: 4px solid transparent; + margin-left: 12px; border-top-color: currentcolor; border-bottom-width: 0; content: ''; @@ -42,7 +42,7 @@ const DropdownMenu = styled.ul` background-clip: padding-box; background-color: ${get('colors.white')}; border: 1px solid rgba(27, 31, 35, 0.15); - border-radius: ${get('radii.1')}; + border-radius: ${get('radii.2')}; box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15); left: 0; list-style: none; @@ -66,7 +66,7 @@ const DropdownMenu = styled.ul` } &::before { - border: ${get('space.2')} solid transparent; + border: 8px solid transparent; border-bottom-color: ${get('colors.blackfade15')}; } From 59bda58ed2021abc7861f448be1cf2c26edea199 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 09:58:57 -0800 Subject: [PATCH 18/54] match button styles --- src/Dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dropdown.js b/src/Dropdown.js index fb4e4443e39..4d60a4d5854 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -11,7 +11,7 @@ const DropdownBase = ({title, children, className, ...rest}) => { return (
<> - From 24eeb04503e2025258c4506070f8b0847ec1b3b4 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 10:02:36 -0800 Subject: [PATCH 19/54] update TextInput --- src/TextInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextInput.js b/src/TextInput.js index 9cdc06e546d..fba6638e6fc 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -64,7 +64,7 @@ const Wrapper = styled.span` 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.gray.3')}; - border-radius: ${get('radii.1')}; + border-radius: ${get('radii.2')}; outline: none; box-shadow: ${get('shadows.formControl')}; From 59fbf45bd1e3acab4c215d29e6ead3166eb6f04b Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 10:19:10 -0800 Subject: [PATCH 20/54] underline nav update --- src/UnderlineNav.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js index 780934923ec..ebeef169047 100644 --- a/src/UnderlineNav.js +++ b/src/UnderlineNav.js @@ -21,7 +21,7 @@ function UnderlineNavBase({actions, className, align, children, full, label, ... const UnderlineNav = styled(UnderlineNavBase)` display: flex; justify-content: space-between; - border-bottom: 1px solid ${get('colors.gray.2')}; + border-bottom: 1px solid #EAECEF; &.UnderlineNav--right { justify-content: flex-end; @@ -67,7 +67,7 @@ UnderlineNav.Link = styled.a.attrs(props => ({ &:focus { color: ${get('colors.gray.9')}; text-decoration: none; - border-bottom-color: ${get('colors.gray.3')}; + border-bottom-color: ${get('colors.orange.5')}; transition: 0.2s ease; .UnderlineNav-octicon { From a0bbfa40e1b82a87cae3e7d55064a49c94459f36 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 10:19:21 -0800 Subject: [PATCH 21/54] FilteredSearch update --- src/FilteredSearch.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/FilteredSearch.js b/src/FilteredSearch.js index ae84b29b34e..47c59555e37 100644 --- a/src/FilteredSearch.js +++ b/src/FilteredSearch.js @@ -10,14 +10,14 @@ const FilteredSearch = styled.div` summary { border-radius: 0; - border-top-left-radius: ${get('radii.1')}; - border-bottom-left-radius: ${get('radii.1')}; + border-top-left-radius: ${get('radii.2')}; + border-bottom-left-radius: ${get('radii.2')}; border-right: 0; } .TextInput-wrapper { border-radius: 0; - border-top-right-radius: ${get('radii.1')}; - border-bottom-right-radius: ${get('radii.1')}; + border-top-right-radius: ${get('radii.2')}; + border-bottom-right-radius: ${get('radii.2')}; z-index: 1; // Allows the focus outline to show on top of the dropdown. } ` From 7597bb4128c3ac373d48d60d1575f75eb2070e78 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 10:33:49 -0800 Subject: [PATCH 22/54] StateLabel updates --- src/StateLabel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/StateLabel.js b/src/StateLabel.js index 592c0c99eb5..a13373e811b 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -43,7 +43,7 @@ const StateLabel = styled(StateLabelBase)` font-size: ${props => (props.small ? theme.fontSizes[0] : theme.fontSizes[1])}; text-align: center; background-color: ${props => (props.status ? statusMap[props.status] : statusMap.gray)}; - border-radius: ${theme.radii[1]}; + border-radius: 100px; ${COMMON}; ` From 15c3d433037e8de3d748c2aa781e57c81f5b5685 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 10:33:54 -0800 Subject: [PATCH 23/54] underline nav updates --- src/UnderlineNav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js index ebeef169047..c3ca4312ff7 100644 --- a/src/UnderlineNav.js +++ b/src/UnderlineNav.js @@ -78,7 +78,7 @@ UnderlineNav.Link = styled.a.attrs(props => ({ &.selected { font-weight: ${get('fontWeights.bold')}; color: ${get('colors.gray.9')}; - border-bottom-color: ${get('colors.orange.6')}; + border-bottom-color: ${get('colors.orange.5')}; .UnderlineNav-octicon { color: ${get('colors.gray.5')}; From 909dd7fb4306ae09ba83a5549af238f5fc410ae2 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Wed, 19 Feb 2020 13:50:39 -0800 Subject: [PATCH 24/54] update focus styles --- src/Button.js | 4 ++++ src/ButtonDanger.js | 4 ++++ src/ButtonOutline.js | 4 ++++ src/ButtonPrimary.js | 2 +- src/ButtonStyles.js | 7 +++---- 5 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/Button.js b/src/Button.js index 8e9db4600e5..17b5e4470b0 100644 --- a/src/Button.js +++ b/src/Button.js @@ -27,6 +27,10 @@ const Button = styled(ButtonBase)` background-color: ${get('buttons.default.bg.disabled')}; border-color: ${get('buttons.default.border.disabled')}; } + + &:focus { + box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); + } ` Button.defaultProps = { diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js index 33eb77a12cc..f806321b05b 100644 --- a/src/ButtonDanger.js +++ b/src/ButtonDanger.js @@ -28,6 +28,10 @@ const ButtonDanger = styled(ButtonBase)` background-color: ${get('buttons.danger.bg.disabled')}; border: 1px solid ${get('buttons.danger.border.default')}; } + + &:focus { + box-shadow: 0 0 0 3px rgba(203, 36, 49, 0.4); + } ` export default ButtonDanger diff --git a/src/ButtonOutline.js b/src/ButtonOutline.js index d03bf6fe475..ce1b152acdb 100644 --- a/src/ButtonOutline.js +++ b/src/ButtonOutline.js @@ -27,6 +27,10 @@ const ButtonOutline = styled(ButtonBase)` border-color: ${get('buttons.outline.border.default')}; background-color: ${get('buttons.outline.bg.disabled')}; } + + &:focus { + box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); + } ` export default ButtonOutline diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index 404eae3d5ef..17274717e5f 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -19,7 +19,7 @@ const ButtonPrimary = styled(ButtonBase)` } &:focus { - box-shadow: none; + box-shadow: 0 0 0 3px #94D3A2; background-color: ${get('buttons.primary.bg.focus')}; } &:disabled { diff --git a/src/ButtonStyles.js b/src/ButtonStyles.js index 15116b36f4f..98db3f21b70 100644 --- a/src/ButtonStyles.js +++ b/src/ButtonStyles.js @@ -20,10 +20,9 @@ export default css` text-decoration: none; } - // &:focus { - // outline: none; - // border: 3px solid ${get('buttons.default.border.focus')}; - // } + &:focus { + outline: none; + } &:focus, &:active { From 08ff8c3e450661c9767a8309e1bc6844f805ceff Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 11:17:49 -0800 Subject: [PATCH 25/54] label tweaks & state label update --- src/Label.js | 22 +++++++++++----------- src/StateLabel.js | 4 ++-- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/Label.js b/src/Label.js index 12a1d173a78..0cf3c7d4bc4 100644 --- a/src/Label.js +++ b/src/Label.js @@ -19,23 +19,24 @@ const sizeVariant = variant({ variants: { small: { fontSize: 0, - px: '8px', - py: '0px' + lineHeight: '16px', + padding: '0px 8px' }, medium: { fontSize: 0, - px: '8px', - py: '1px' + lineHeight: '20px', + padding: '0 8px' }, large: { - fontSize: 1, - px: '12px', - py: '4px' + fontSize: 0, + lineHeight: '24px', + padding: '0 12px' }, + // corresponds to StateLabel fontSize/lineHeight/padding xl: { - fontSize: 2, - px: 1, - py: 2 + fontSize: 1, + lineHeight: '16px', + padding: '8px 12px' } } }) @@ -43,7 +44,6 @@ const sizeVariant = variant({ const Label = styled('span')` display: inline-block; font-weight: 600; - line-height: ${get('lineHeights.condensedUltra')}; color: ${get('colors.white')}; border-radius: 100px; &:hover { diff --git a/src/StateLabel.js b/src/StateLabel.js index a13373e811b..f562fd3d6bb 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -36,9 +36,9 @@ function StateLabelBase({className, status, small = false, children}) { const StateLabel = styled(StateLabelBase)` display: inline-flex; align-items: center; - padding: ${props => (props.small ? `0.125em ${theme.space[1]}` : `${theme.space[1]} ${theme.space[2]}`)}; + padding: ${props => (props.small ? `4px 8px` : `8px 12px`)}; font-weight: 600; - line-height: 20px; + line-height: 16px; color: ${colors.white}; font-size: ${props => (props.small ? theme.fontSizes[0] : theme.fontSizes[1])}; text-align: center; From 08a420fcd1426e0c50c2fd3a8aa02c58acbbb7e5 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 11:25:19 -0800 Subject: [PATCH 26/54] update stickersheet --- docs/content/Refresh.mdx | 185 ++++++++++++++++++++++++++++----------- 1 file changed, 132 insertions(+), 53 deletions(-) diff --git a/docs/content/Refresh.mdx b/docs/content/Refresh.mdx index a3472d74e6d..db629a38861 100644 --- a/docs/content/Refresh.mdx +++ b/docs/content/Refresh.mdx @@ -1,54 +1,133 @@ -Component Refresh Sticker Sheet - -Default - - - Button - Button - Button - - -Disabled - - - Button - Button - Button - -Small - - - Button - Button - Button - + + Component Refresh Sticker Sheet + + Buttons + + Default + + + + Button + Button + Button + + + + Disabled + + + + Button + Button + Button + + + Small + + + + Button + Button + Button + + + + Large + + + + Button + Button + Button + + + + Button Group + + + + + + + + + + One + Two + Three + + + + Labels + + + + + -Large - - - Button - Button - Button - - -Button Group - - - - - - - - - One - Two - Three - - -Labels + Stacked: + + + + + + + + + State Labels + + OPEN + OPEN + CLOSED + CLOSED + Merged + + + Dropdowns + + + + Item 1 + Item 2 + Item 3 + + + + + Text Input + + + + + UnderlineNav + + + + Home + + Documentation + Support + + + + Filtered Search + + + + + + Item 1 + Item 2 + Item 3 + + + + + \ No newline at end of file From 1fdec4c4e4a725d081ad20cbeee4c96f5f7f9d78 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 11:36:40 -0800 Subject: [PATCH 27/54] fix focus rings --- src/Button.js | 10 ++++++---- src/ButtonDanger.js | 9 ++++----- src/ButtonOutline.js | 8 ++++---- src/ButtonPrimary.js | 9 +++++---- src/theme.js | 2 ++ 5 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/Button.js b/src/Button.js index 17b5e4470b0..8fd4d8a8808 100644 --- a/src/Button.js +++ b/src/Button.js @@ -12,9 +12,15 @@ const Button = styled(ButtonBase)` box-shadow: ${get('buttons.default.shadow.default')}; &:hover { + background-color: ${get('buttons.default.bg.hover')}; border-color: ${get('buttons.default.border.hover')}; box-shadow: ${get('buttons.default.shadow.hover')}; } + + // focus must come before :active so that the active box shadow overrides + &:focus { + box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); + } &:active { background-color: ${get('buttons.default.bg.active')}; @@ -27,10 +33,6 @@ const Button = styled(ButtonBase)` background-color: ${get('buttons.default.bg.disabled')}; border-color: ${get('buttons.default.border.disabled')}; } - - &:focus { - box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); - } ` Button.defaultProps = { diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js index f806321b05b..9d3a4c0ffb1 100644 --- a/src/ButtonDanger.js +++ b/src/ButtonDanger.js @@ -14,6 +14,10 @@ const ButtonDanger = styled(ButtonBase)` border-color: ${get('buttons.danger.border.hover')}; box-shadow: ${get('buttons.danger.shadow.hover')}; } + // focus must come before :active so that the active box shadow overrides + &:focus { + box-shadow: 0 0 0 3px rgba(203, 36, 49, 0.4); + } &:active { color: ${get('buttons.danger.color.active')}; @@ -22,16 +26,11 @@ const ButtonDanger = styled(ButtonBase)` border-color: ${get('buttons.danger.border.active')}; } - &:disabled { color: ${get('buttons.danger.color.disabled')}; background-color: ${get('buttons.danger.bg.disabled')}; border: 1px solid ${get('buttons.danger.border.default')}; } - - &:focus { - box-shadow: 0 0 0 3px rgba(203, 36, 49, 0.4); - } ` export default ButtonDanger diff --git a/src/ButtonOutline.js b/src/ButtonOutline.js index ce1b152acdb..9e2c38efffb 100644 --- a/src/ButtonOutline.js +++ b/src/ButtonOutline.js @@ -14,6 +14,10 @@ const ButtonOutline = styled(ButtonBase)` border-color: ${get('buttons.outline.border.hover')}; box-shadow: ${get('buttons.outline.shadow.hover')}; } + // focus must come before :active so that the active box shadow overrides + &:focus { + box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); + } &:active { color: ${get('buttons.outline.color.active')}; @@ -27,10 +31,6 @@ const ButtonOutline = styled(ButtonBase)` border-color: ${get('buttons.outline.border.default')}; background-color: ${get('buttons.outline.bg.disabled')}; } - - &:focus { - box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); - } ` export default ButtonOutline diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index 17274717e5f..a4450408d5c 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -12,16 +12,17 @@ const ButtonPrimary = styled(ButtonBase)` background-color: ${get('buttons.primary.bg.hover')}; border-color: ${get('buttons.primary.border.hover')}; } + // focus must come before :active so that the active box shadow overrides + &:focus { + box-shadow: 0 0 0 3px #94D3A2; + background-color: ${get('buttons.primary.bg.focus')}; + } &:active { background-color: ${get('buttons.primary.bg.active')}; box-shadow: ${get('buttons.primary.shadow.active')}; } - &:focus { - box-shadow: 0 0 0 3px #94D3A2; - background-color: ${get('buttons.primary.bg.focus')}; - } &:disabled { color: ${get('buttons.primary.color.disabled')}; background-color: ${get('buttons.primary.bg.disabled')}; diff --git a/src/theme.js b/src/theme.js index 5d0fd361e1d..a71d7c2f6d6 100644 --- a/src/theme.js +++ b/src/theme.js @@ -64,7 +64,9 @@ const buttons = { }, bg: { default: colors.bg.grayLight, + hover: '#F3F4F6', // custom gray active: '#F3F4F6', //custom gray + disabled: colors.bg.grayLight }, shadow: { default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', From 79cea1a6e5047252fb21f2290250c8bc8888c216 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 11:40:01 -0800 Subject: [PATCH 28/54] update TextInput padding --- src/TextInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextInput.js b/src/TextInput.js index fba6638e6fc..23a98ab9efd 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -75,7 +75,7 @@ const Wrapper = styled.span` ` } else { return css` - padding: 6px ${get('space.2')}; + padding: 6px 12px; ` } }} From 95b6244c463451e659758ccf81cdff35b94cb35f Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 12:03:15 -0800 Subject: [PATCH 29/54] update focus on buttons --- src/Button.js | 3 ++- src/ButtonDanger.js | 3 ++- src/ButtonOutline.js | 3 ++- src/ButtonPrimary.js | 3 ++- src/theme.js | 18 ++++++++++-------- 5 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/Button.js b/src/Button.js index 8fd4d8a8808..382a04d3549 100644 --- a/src/Button.js +++ b/src/Button.js @@ -19,7 +19,8 @@ const Button = styled(ButtonBase)` // focus must come before :active so that the active box shadow overrides &:focus { - box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); + border-color: transparent; + box-shadow: ${get('buttons.default.shadow.focus')}; } &:active { diff --git a/src/ButtonDanger.js b/src/ButtonDanger.js index 9d3a4c0ffb1..b8f74bb58ce 100644 --- a/src/ButtonDanger.js +++ b/src/ButtonDanger.js @@ -16,7 +16,8 @@ const ButtonDanger = styled(ButtonBase)` } // focus must come before :active so that the active box shadow overrides &:focus { - box-shadow: 0 0 0 3px rgba(203, 36, 49, 0.4); + border-color: transparent; + box-shadow: ${get('buttons.danger.shadow.focus')}; } &:active { diff --git a/src/ButtonOutline.js b/src/ButtonOutline.js index 9e2c38efffb..abc6b9a812d 100644 --- a/src/ButtonOutline.js +++ b/src/ButtonOutline.js @@ -16,7 +16,8 @@ const ButtonOutline = styled(ButtonBase)` } // focus must come before :active so that the active box shadow overrides &:focus { - box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3); + border-color: transparent; + box-shadow: ${get('buttons.outline.shadow.focus')}; } &:active { diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index a4450408d5c..662fc7df6df 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -14,7 +14,8 @@ const ButtonPrimary = styled(ButtonBase)` } // focus must come before :active so that the active box shadow overrides &:focus { - box-shadow: 0 0 0 3px #94D3A2; + border-color: transparent; + box-shadow: ${get('buttons.primary.shadow.focus')}; background-color: ${get('buttons.primary.bg.focus')}; } diff --git a/src/theme.js b/src/theme.js index a71d7c2f6d6..e5412c3c536 100644 --- a/src/theme.js +++ b/src/theme.js @@ -46,8 +46,9 @@ const colors = { }, bg: { gray: gray[1], - grayLight: gray[0] - } + grayLight: gray[0], + disabled: '#F3F4F6' + } } const buttons = { @@ -58,7 +59,6 @@ const buttons = { }, border: { default: colors.border.gray, - focus: colors.blackfade10, active: colors.border.grayDark, disabled: colors.border.grayLight, }, @@ -72,6 +72,7 @@ const buttons = { default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', hover: '0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)', active: 'inset 0px 2px 0px rgba(149, 157, 165, 0.1)', + focus: '0 0 0 3px rgba(3, 102, 214, 0.3)' } }, primary: { @@ -81,7 +82,6 @@ const buttons = { }, border: { default: green[6], - focus: '#94D3A2', //custom green hover: green[7], disabled: 'rgba(34, 134, 58, 0.1)' }, @@ -94,7 +94,8 @@ const buttons = { }, shadow: { default: ' 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - active: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)' + active: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)', + focus: '0 0 0 3px #94D3A2' } }, danger: { @@ -106,7 +107,6 @@ const buttons = { }, border: { default: colors.border.gray, - focus: 'rgba(203, 36, 49, 0.4)', hover: red[7], active: red[7], }, @@ -120,6 +120,7 @@ const buttons = { default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', active: 'inset 0px 2px 0px rgba(179, 29, 40, 0.4)', + focus: '0 0 0 3px rgba(203, 36, 49, 0.4)' } }, outline: { @@ -131,7 +132,6 @@ const buttons = { }, border: { default: gray[2], //border-gray - focus: 'rgba(3, 102, 214, 0.3)', hover: blue[6], active: blue[6], }, @@ -145,6 +145,7 @@ const buttons = { default: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)', hover: '0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', active: 'inset 0px 1px 0px rgba(4, 66, 137, 0.2)', + focus: '0 0 0 3px rgba(3, 102, 214, 0.3)' } } } @@ -186,7 +187,8 @@ const theme = { medium: '0 1px 5px rgba(27, 31, 35, 0.15)', large: '0 1px 15px rgba(27, 31, 35, 0.15)', 'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)', - formControl: 'rgba(27, 31, 35, 0.075) 0px 1px 2px inset', + formControl: 'inset 0px 2px 0px rgba(225, 228, 232, 0.2)', + formControlDisabled: 'inset 0px 2px 0px rgba(220, 227, 237, 0.3)', formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em', primaryShadow: '0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)', From 51564a77a2829e5dc78fc4815b8a1efa5af9adc6 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 12:11:07 -0800 Subject: [PATCH 30/54] update text input --- src/TextInput.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/TextInput.js b/src/TextInput.js index 23a98ab9efd..4c149a9fa24 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -26,15 +26,15 @@ const sizeVariants = variant({ } }) -const TextInput = ({icon, className, block, ...rest}) => { +const TextInput = ({icon, className, block, disabled, ...rest}) => { // this class is necessary to style FilterSearch, plz no touchy! const wrapperClasses = classnames(className, 'TextInput-wrapper') const wrapperProps = pick(rest) const inputProps = omit(rest) return ( - + {icon && } - + ) } @@ -57,13 +57,13 @@ const Wrapper = styled.span` display: inline-flex; align-items: stretch; min-height: 34px; - font-size: ${get('fontSizes.2')}; + font-size: ${get('fontSizes.1')}; line-height: 20px; color: ${get('colors.gray.9')}; 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.gray.3')}; + border: 1px solid ${get('colors.border.gray')}; border-radius: ${get('radii.2')}; outline: none; box-shadow: ${get('shadows.formControl')}; @@ -92,6 +92,13 @@ const Wrapper = styled.span` box-shadow: ${get('shadows.formControl')}, ${get('shadows.formControlFocus')}; } + ${props => props.disabled && + css` + background-color: ${get('colors.bg.disabled')}; + box-shadow: ${get('shadows.formControlDisabled')} + } + `} + ${props => props.block && css` From 94a0c1eafc7c5ba1b33582451d2579d63c55ee5c Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 13:53:06 -0800 Subject: [PATCH 31/54] update active borders --- src/ButtonPrimary.js | 1 + src/theme.js | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/ButtonPrimary.js b/src/ButtonPrimary.js index 662fc7df6df..02388e237fe 100644 --- a/src/ButtonPrimary.js +++ b/src/ButtonPrimary.js @@ -22,6 +22,7 @@ const ButtonPrimary = styled(ButtonBase)` &:active { background-color: ${get('buttons.primary.bg.active')}; box-shadow: ${get('buttons.primary.shadow.active')}; + border-color: ${get('buttons.primary.border.active')}; } &:disabled { diff --git a/src/theme.js b/src/theme.js index e5412c3c536..a7be5fd374c 100644 --- a/src/theme.js +++ b/src/theme.js @@ -83,6 +83,7 @@ const buttons = { border: { default: green[6], hover: green[7], + active: green[7], disabled: 'rgba(34, 134, 58, 0.1)' }, bg: { @@ -108,7 +109,7 @@ const buttons = { border: { default: colors.border.gray, hover: red[7], - active: red[7], + active: red[8], }, bg: { default: gray[0], @@ -133,7 +134,7 @@ const buttons = { border: { default: gray[2], //border-gray hover: blue[6], - active: blue[6], + active: 'rgba(4, 66, 137, .5)', }, bg: { default: gray[0], From 5b78b37a1dfdcba525d71c694015f53dbb84bc02 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 20 Feb 2020 13:54:55 -0800 Subject: [PATCH 32/54] add 100px radius to theme --- src/Label.js | 2 +- src/StateLabel.js | 2 +- src/theme.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Label.js b/src/Label.js index 0cf3c7d4bc4..3e23ad361fd 100644 --- a/src/Label.js +++ b/src/Label.js @@ -45,7 +45,7 @@ const Label = styled('span')` display: inline-block; font-weight: 600; color: ${get('colors.white')}; - border-radius: 100px; + border-radius: ${get('radii.3')}; &:hover { text-decoration: none; } diff --git a/src/StateLabel.js b/src/StateLabel.js index f562fd3d6bb..632ac92c9be 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -43,7 +43,7 @@ const StateLabel = styled(StateLabelBase)` font-size: ${props => (props.small ? theme.fontSizes[0] : theme.fontSizes[1])}; text-align: center; background-color: ${props => (props.status ? statusMap[props.status] : statusMap.gray)}; - border-radius: 100px; + border-radius: ${get('radii.3')}; ${COMMON}; ` diff --git a/src/theme.js b/src/theme.js index a7be5fd374c..080ee2ea527 100644 --- a/src/theme.js +++ b/src/theme.js @@ -182,7 +182,7 @@ const theme = { borders: [0, '1px solid'], fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'], lineHeights, - radii: ['0', '3px', '6px'], + radii: ['0', '3px', '6px', '100px'], shadows: { small: '0 1px 1px rgba(27, 31, 35, 0.1)', medium: '0 1px 5px rgba(27, 31, 35, 0.15)', From d3bf5b1bfd669fb4a76b04e8ec38f604a5515122 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 14:18:10 -0800 Subject: [PATCH 33/54] remove bold from selected UnderlineNav link --- src/UnderlineNav.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js index c3ca4312ff7..1f2a5562766 100644 --- a/src/UnderlineNav.js +++ b/src/UnderlineNav.js @@ -76,7 +76,6 @@ UnderlineNav.Link = styled.a.attrs(props => ({ } &.selected { - font-weight: ${get('fontWeights.bold')}; color: ${get('colors.gray.9')}; border-bottom-color: ${get('colors.orange.5')}; From 3231f950099b3fde85f0fd4ab54e23474ceeb94e Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 14:33:33 -0800 Subject: [PATCH 34/54] get fix --- src/StateLabel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/StateLabel.js b/src/StateLabel.js index 632ac92c9be..e1fde6bfa2b 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@primer/octicons-react' import theme, {colors} from './theme' -import {COMMON} from './constants' +import {COMMON, get} from './constants' import StyledOcticon from './StyledOcticon' const statusMap = { @@ -40,7 +40,7 @@ const StateLabel = styled(StateLabelBase)` font-weight: 600; line-height: 16px; color: ${colors.white}; - font-size: ${props => (props.small ? theme.fontSizes[0] : theme.fontSizes[1])}; + font-size: ${props => (props.small ? theme.fontSizes[0] : theme.fontSizes[1])}; // TODO: these should use the get function instead of referencing the theme directly text-align: center; background-color: ${props => (props.status ? statusMap[props.status] : statusMap.gray)}; border-radius: ${get('radii.3')}; From 2acaca06d635c42d6e1b878debc2441c568e7a5b Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 14:43:10 -0800 Subject: [PATCH 35/54] update label docs --- docs/content/Label.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/content/Label.md b/docs/content/Label.md index 07159a9350a..c77d3cba59d 100644 --- a/docs/content/Label.md +++ b/docs/content/Label.md @@ -7,9 +7,17 @@ The Label component is used to add contextual metadata to a design. Visually it ## Default example ```jsx live - - - + + + + + + + + + + + ``` ## System props From d4e41431413cd34c4eed53660139b1cfa6c35f23 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 14:48:52 -0800 Subject: [PATCH 36/54] lint it up --- src/Button.js | 4 ++-- src/StateLabel.js | 5 ++++- src/TextInput.js | 3 ++- src/UnderlineNav.js | 2 +- src/theme.js | 12 ++++++------ 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/Button.js b/src/Button.js index 382a04d3549..36c30aa44c3 100644 --- a/src/Button.js +++ b/src/Button.js @@ -16,7 +16,7 @@ const Button = styled(ButtonBase)` border-color: ${get('buttons.default.border.hover')}; box-shadow: ${get('buttons.default.shadow.hover')}; } - + // focus must come before :active so that the active box shadow overrides &:focus { border-color: transparent; @@ -37,7 +37,7 @@ const Button = styled(ButtonBase)` ` Button.defaultProps = { - theme, + theme } Button.propTypes = { diff --git a/src/StateLabel.js b/src/StateLabel.js index e1fde6bfa2b..83e0543e56e 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -40,7 +40,10 @@ const StateLabel = styled(StateLabelBase)` font-weight: 600; line-height: 16px; color: ${colors.white}; - font-size: ${props => (props.small ? theme.fontSizes[0] : theme.fontSizes[1])}; // TODO: these should use the get function instead of referencing the theme directly + font-size: ${props => + props.small + ? theme.fontSizes[0] + : theme.fontSizes[1]}; // TODO: these should use the get function instead of referencing the theme directly text-align: center; background-color: ${props => (props.status ? statusMap[props.status] : statusMap.gray)}; border-radius: ${get('radii.3')}; diff --git a/src/TextInput.js b/src/TextInput.js index 4c149a9fa24..59fa64c4111 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -92,7 +92,8 @@ const Wrapper = styled.span` box-shadow: ${get('shadows.formControl')}, ${get('shadows.formControlFocus')}; } - ${props => props.disabled && + ${props => + props.disabled && css` background-color: ${get('colors.bg.disabled')}; box-shadow: ${get('shadows.formControlDisabled')} diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js index 1f2a5562766..cf98727a125 100644 --- a/src/UnderlineNav.js +++ b/src/UnderlineNav.js @@ -21,7 +21,7 @@ function UnderlineNavBase({actions, className, align, children, full, label, ... const UnderlineNav = styled(UnderlineNavBase)` display: flex; justify-content: space-between; - border-bottom: 1px solid #EAECEF; + border-bottom: 1px solid #eaecef; &.UnderlineNav--right { justify-content: flex-end; diff --git a/src/theme.js b/src/theme.js index 080ee2ea527..c9e9c6635ee 100644 --- a/src/theme.js +++ b/src/theme.js @@ -59,8 +59,8 @@ const buttons = { }, border: { default: colors.border.gray, - active: colors.border.grayDark, - disabled: colors.border.grayLight, + active: colors.border.grayDark, + disabled: colors.border.grayLight }, bg: { default: colors.bg.grayLight, @@ -109,7 +109,7 @@ const buttons = { border: { default: colors.border.gray, hover: red[7], - active: red[8], + active: red[8] }, bg: { default: gray[0], @@ -134,7 +134,7 @@ const buttons = { border: { default: gray[2], //border-gray hover: blue[6], - active: 'rgba(4, 66, 137, .5)', + active: 'rgba(4, 66, 137, .5)' }, bg: { default: gray[0], @@ -192,10 +192,10 @@ const theme = { formControlDisabled: 'inset 0px 2px 0px rgba(220, 227, 237, 0.3)', formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em', primaryShadow: '0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', - primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)', + primaryActiveShadow: 'inset 0px 1px 0px rgba(20, 70, 32, 0.2)' }, space: ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'], - buttons, + buttons } export default theme From ce60da53238a7cbffde284de560b77cac7e7821b Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 14:50:00 -0800 Subject: [PATCH 37/54] updated snapshots --- src/__tests__/__snapshots__/Button.js.snap | 359 ++++-------------- src/__tests__/__snapshots__/Dropdown.js.snap | 162 +++----- .../__snapshots__/FilterListItem.js.snap | 147 +++++-- src/__tests__/__snapshots__/Label.js.snap | 24 +- .../__snapshots__/LabelGroup.js.snap | 22 +- .../__snapshots__/StateLabel.js.snap | 36 +- .../__snapshots__/SubNavLink.js.snap | 147 +++++-- src/__tests__/__snapshots__/TextInput.js.snap | 60 +-- .../__snapshots__/UnderlineNavLink.js.snap | 157 ++++++-- 9 files changed, 556 insertions(+), 558 deletions(-) diff --git a/src/__tests__/__snapshots__/Button.js.snap b/src/__tests__/__snapshots__/Button.js.snap index 6d6e6890866..bb96b8c622f 100644 --- a/src/__tests__/__snapshots__/Button.js.snap +++ b/src/__tests__/__snapshots__/Button.js.snap @@ -4,11 +4,7 @@ exports[`Button respects the "disabled" prop 1`] = ` .c0 { position: relative; display: inline-block; - padding: 6px 12px; - color: #24292e; - background-color: #f6f8fa; - background-image: linear-gradient(-180deg,#fafbfc 0%,rgb(239,243,246) 90%); - font-size: 14px; + padding: 6px 16px; font-weight: 600; line-height: 20px; white-space: nowrap; @@ -18,82 +14,57 @@ exports[`Button respects the "disabled" prop 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; - background-repeat: repeat-x; - background-position: -1px -1px; - background-size: 110% 110%; - border: 1px solid rgba(27,31,35,0.2); - border-radius: 3px; + border-radius: 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-text-decoration: none; text-decoration: none; font-size: 14px; + color: #24292e; + background-color: #fafbfc; + border: 1px solid #e1e4e8; + box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25); } .c0:hover { - background-color: rgb(230,235,241); - background-image: linear-gradient(-180deg,rgb(239,243,246) 0%,rgb(230,235,241) 90%); - background-position: -0.5em center; - border-color: rgba(27,31,35,0.35); -webkit-text-decoration: none; text-decoration: none; - background-repeat: repeat-x; -} - -.c0:active { - background-color: rgb(233,236,239); - background-image: none; - box-shadow: rgba(27,31,35,0.15) 0px 0.15em 0.3em inset; - border-color: rgba(27,31,35,0.2); } .c0:focus { outline: none; - box-shadow: rgba(3,102,214,0.3) 0px 0px 0px 0.2em; } -.c0.grouped { - position: relative; - border-right-width: 0; - border-radius: 0; -} - -.c0.grouped:first-child { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; +.c0:focus, +.c0:active { + z-index: 1; } -.c0.grouped:last-child { - border-right-width: 1px; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; +.c0:disabled { + cursor: default; } -.c0.grouped:focus, -.c0.grouped:active, -.c0.grouped:hover { - border-right-width: 1px; +.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); } -.c0.grouped:focus + .grouped, -.c0.grouped:active + .grouped, -.c0.grouped:hover + .grouped { - border-left-width: 0; +.c0:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(3,102,214,0.3); } -.c0:focus, .c0:active { - z-index: 1; + background-color: #F3F4F6; + box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1); + border-color: #d1d5da; } .c0:disabled { - color: rgba(36,41,46,0.4); - background-color: #eff3f6; - background-image: none; - border-color: rgba(27,31,35,0.20); - box-shadow: none; - cursor: default; + color: #959da5; + background-color: #fafbfc; + border-color: #eaecef; } - Button - Button - Button - - - - Disabled - - - - Button - Button - Button - - - Small - - - - Button - Button - Button - - - - Large - - - - Button - Button - Button - - - - Button Group - - - - - - - - - - One - Two - Three - - - - Labels - - - - - - - Stacked: - - - - - - - - - State Labels - - OPEN - OPEN - CLOSED - CLOSED - Merged - - - Dropdowns - - - - Item 1 - Item 2 - Item 3 - - - - - Text Input - - - - - UnderlineNav - - - - Home - - Documentation - Support - - - - Filtered Search - - - - - - Item 1 - Item 2 - Item 3 - - - - - \ No newline at end of file From 7e9fc6e3e047bb34fe482043fde7e2debc6f018d Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 14:57:33 -0800 Subject: [PATCH 39/54] update default border radius --- src/BorderBox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BorderBox.js b/src/BorderBox.js index c3a14eb7f06..2cdde7b595d 100644 --- a/src/BorderBox.js +++ b/src/BorderBox.js @@ -10,7 +10,7 @@ BorderBox.defaultProps = { theme, border: '1px solid', borderColor: 'gray.2', - borderRadius: 1 + borderRadius: 2 } BorderBox.propTypes = { From 47bea7d2739ffe6174a44f2477f9d65ebf31d2f8 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 15:08:14 -0800 Subject: [PATCH 40/54] update SubNav border radius --- src/SubNav.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/SubNav.js b/src/SubNav.js index 4c2e988dd33..6b4ab9f16bd 100644 --- a/src/SubNav.js +++ b/src/SubNav.js @@ -67,14 +67,14 @@ SubNav.Link = styled.a.attrs(props => ({ align-items: center; &:first-of-type { - border-top-left-radius: ${get('radii.1')}; - border-bottom-left-radius: ${get('radii.1')}; + border-top-left-radius: ${get('radii.2')}; + border-bottom-left-radius: ${get('radii.2')}; border-left: 1px solid ${get('colors.gray.2')}; } &:last-of-type { - border-top-right-radius: ${get('radii.1')}; - border-bottom-right-radius: ${get('radii.1')}; + border-top-right-radius: ${get('radii.2')}; + border-bottom-right-radius: ${get('radii.2')}; } &:hover, From 1f20b380e5fb8290a0525f3a4fc0e8a0b809863b Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 15:08:24 -0800 Subject: [PATCH 41/54] update TabNav border radius and text color --- src/TabNav.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/TabNav.js b/src/TabNav.js index 11b857e3cd5..6f9af5875cd 100644 --- a/src/TabNav.js +++ b/src/TabNav.js @@ -19,7 +19,7 @@ function TabNavBase({actions, className, align, children, full, ...rest}) { const TabNav = styled(TabNavBase)` display: flex; - border-bottom: 1px solid ${get('colors.gray.3')}; + border-bottom: 1px solid ${get('colors.border.gray')}; .TabNav-body { display: flex; @@ -36,7 +36,7 @@ TabNav.Link = styled.a.attrs(props => ({ padding: 8px 12px; font-size: ${get('fontSizes.1')}; line-height: 20px; - color: ${get('colors.gray.6')}; + color: ${get('colors.black')}; text-decoration: none; background-color: transparent; border: 1px solid transparent; @@ -44,14 +44,15 @@ TabNav.Link = styled.a.attrs(props => ({ &:hover, &:focus { - color: ${get('colors.gray.9')}; + color: ${get('colors.text.grayDark')}; text-decoration: none; } &.selected { - color: ${get('colors.gray.9')}; - border-color: ${get('colors.gray.3')}; - border-radius: 3px 3px 0 0; + color: ${get('colors.text.grayDark')}; + border-color: ${get('colors.border.gray')}; + border-top-right-radius: ${get('radii.2')}; + border-top-left-radius: ${get('radii.2')}; background-color: ${get('colors.white')}; } ` From dcbf7942b77a22ceb653257969071431787519e0 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 15:15:34 -0800 Subject: [PATCH 42/54] update snapshots --- src/__tests__/__snapshots__/PointerBox.js.snap | 6 +++--- src/__tests__/__snapshots__/SubNavLink.js.snap | 16 ++++++++-------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/__tests__/__snapshots__/PointerBox.js.snap b/src/__tests__/__snapshots__/PointerBox.js.snap index 1c76e3bccaf..c21a3131476 100644 --- a/src/__tests__/__snapshots__/PointerBox.js.snap +++ b/src/__tests__/__snapshots__/PointerBox.js.snap @@ -5,7 +5,7 @@ exports[`PointerBox passes the "bg" prop to both and 1`] = ` background-color: #d73a49; border: 1px solid; border-color: #e1e4e8; - border-radius: 3px; + border-radius: 6px; } .c0 { @@ -55,7 +55,7 @@ exports[`PointerBox passes the "borderColor" prop to both and in with relative positioning 1 .c1 { border: 1px solid; border-color: #e1e4e8; - border-radius: 3px; + border-radius: 6px; } .c0 { diff --git a/src/__tests__/__snapshots__/SubNavLink.js.snap b/src/__tests__/__snapshots__/SubNavLink.js.snap index dc395642f0f..3303aab43b7 100644 --- a/src/__tests__/__snapshots__/SubNavLink.js.snap +++ b/src/__tests__/__snapshots__/SubNavLink.js.snap @@ -26,14 +26,14 @@ exports[`SubNav.Link renders the given "as" prop 1`] = ` } .c0:first-of-type { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; border-left: 1px solid #e1e4e8; } .c0:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } .c0:hover, @@ -393,14 +393,14 @@ exports[`SubNav.Link respects the "selected" prop 1`] = ` } .c0:first-of-type { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; border-left: 1px solid #e1e4e8; } .c0:last-of-type { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; } .c0:hover, From c5b8204720c5f3602e582789325dd5f683e9b276 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 15:16:49 -0800 Subject: [PATCH 43/54] give theme to wrapper --- src/TextInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/TextInput.js b/src/TextInput.js index 59fa64c4111..63a41be9d17 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -32,7 +32,7 @@ const TextInput = ({icon, className, block, disabled, ...rest}) => { const wrapperProps = pick(rest) const inputProps = omit(rest) return ( - + {icon && } From fa67dd3881de4475a929fc1a5c85eea5a726ab85 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 15:21:14 -0800 Subject: [PATCH 44/54] lint --- src/TextInput.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/TextInput.js b/src/TextInput.js index 63a41be9d17..f8fa325704c 100644 --- a/src/TextInput.js +++ b/src/TextInput.js @@ -32,7 +32,14 @@ const TextInput = ({icon, className, block, disabled, ...rest}) => { const wrapperProps = pick(rest) const inputProps = omit(rest) return ( - + {icon && } From 555d3d20a88c26b7ae1d39af74ae0d2480be3bb8 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 21 Feb 2020 15:49:15 -0800 Subject: [PATCH 45/54] update Doctocat --- docs/package.json | 2 +- docs/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index d62b23d7374..db421f50ba5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,7 +11,7 @@ "node": "10.x" }, "dependencies": { - "@primer/gatsby-theme-doctocat": "^0.16.8", + "@primer/gatsby-theme-doctocat": "^0.16.10", "@primer/octicons-react": "^9.2.0", "@styled-system/prop-types": "^5.1.0", "@styled-system/theme-get": "^5.1.0", diff --git a/docs/yarn.lock b/docs/yarn.lock index 3093e81ad5c..b78a93b4b32 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1234,10 +1234,10 @@ react-is "16.10.2" styled-system "5.1.2" -"@primer/gatsby-theme-doctocat@^0.16.8": - version "0.16.8" - resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.8.tgz#2e9dfbcc5c888f919e1df3bb15ba48d5d365bc37" - integrity sha512-K5875cOJswUUUA0bDDjMduejkTA/343aC/MotKu+lxl/70BSxfwVagkJ8OjKfb4WjrpMDwVcN841Hq3chdL/iQ== +"@primer/gatsby-theme-doctocat@0.16.10": + version "0.16.10" + resolved "https://registry.yarnpkg.com/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.16.10.tgz#9798bca7b08b548e8b9bd62f8ca7a8be9003d5a5" + integrity sha512-173EeoIEwf1cAO3te4XDYg+kjQwLhtlOU2LAHty8T7Hb8hjOLysBPO3rmmtz583+eWhASA0GBb6cvR5S6/OQHg== dependencies: "@babel/preset-env" "^7.5.5" "@babel/preset-react" "^7.0.0" From 0f293fcfac0e9939cebf8ab06c64160c1dce744d Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 5 Mar 2020 12:54:12 -0800 Subject: [PATCH 46/54] update comment --- src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index c9e9c6635ee..e6f3b4d6d9a 100644 --- a/src/theme.js +++ b/src/theme.js @@ -91,7 +91,7 @@ const buttons = { focus: '#138934', //custom green hover: '#138934', //custom green active: '#138934', //custom green - disabled: '#94D3A2' // custom + disabled: '#94D3A2' // custom gray }, shadow: { default: ' 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)', From a361806244ff3f31e43b0d80c9238a0d3b2cb150 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 5 Mar 2020 13:05:23 -0800 Subject: [PATCH 47/54] update state label colors --- src/StateLabel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/StateLabel.js b/src/StateLabel.js index 83e0543e56e..bd0bda8baae 100644 --- a/src/StateLabel.js +++ b/src/StateLabel.js @@ -8,9 +8,9 @@ import StyledOcticon from './StyledOcticon' const statusMap = { issueClosed: colors.red[6], - pullClosed: colors.red[6], + pullClosed: colors.red[5], pullMerged: colors.purple[5], - issueOpened: '#2cbe4e', // This was generated by a sass function in Primer, so using a hex here + issueOpened: '#159739', // Custom green pullOpened: '#2cbe4e', // This was generated by a sass function in Primer, so using a hex here gray: colors.gray[5] } From 3704927ed0ef3090edf6d95fb0b23d3768cdaf78 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 5 Mar 2020 13:14:55 -0800 Subject: [PATCH 48/54] update tests --- src/__tests__/__snapshots__/StateLabel.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/__snapshots__/StateLabel.js.snap b/src/__tests__/__snapshots__/StateLabel.js.snap index dbc1dfc44fb..708477ab03c 100644 --- a/src/__tests__/__snapshots__/StateLabel.js.snap +++ b/src/__tests__/__snapshots__/StateLabel.js.snap @@ -97,7 +97,7 @@ exports[`StateLabel respects the status prop 1`] = ` color: #fff; font-size: 14px; text-align: center; - background-color: #2cbe4e; + background-color: #159739; border-radius: 100px; } From 2ba98fcd3bc5fa2bdb31c3bbd89ff24d6bdd1fdf Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 6 Mar 2020 13:52:36 -0800 Subject: [PATCH 49/54] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7ca241cfac6..676d7629ec1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/components", - "version": "15.2.4", + "version": "16.0.0", "description": "Primer react components", "main": "dist/index.umd.js", "module": "dist/index.esm.js", From 8fffec2f129c556cd3392e72ec4f7093e5e3d5e8 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 6 Mar 2020 13:59:52 -0800 Subject: [PATCH 50/54] update snaps --- .../__snapshots__/BreadcrumbItem.js.snap | 147 ++++++++++++++---- src/__tests__/__snapshots__/SideNav.js.snap | 2 +- 2 files changed, 121 insertions(+), 28 deletions(-) diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap index 56fedfc74f0..24f1ee41fbb 100644 --- a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap +++ b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap @@ -35,7 +35,111 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` "1012px", "1280px", ], + "buttons": Object { + "danger": Object { + "bg": Object { + "active": "#cb2431", + "default": "#fafbfc", + "disabled": "#F3F4F6", + "hover": "#cb2431", + }, + "border": Object { + "active": "#9e1c23", + "default": "#e1e4e8", + "hover": "#b31d28", + }, + "color": Object { + "active": "#fff", + "default": "#cb2431", + "disabled": "rgba(203,36,49, .5)", + "hover": "#fff", + }, + "shadow": Object { + "active": "inset 0px 2px 0px rgba(179, 29, 40, 0.4)", + "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)", + "focus": "0 0 0 3px rgba(203, 36, 49, 0.4)", + "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)", + }, + }, + "default": Object { + "bg": Object { + "active": "#F3F4F6", + "default": "#fafbfc", + "disabled": "#fafbfc", + "hover": "#F3F4F6", + }, + "border": Object { + "active": "#d1d5da", + "default": "#e1e4e8", + "disabled": "#eaecef", + }, + "color": Object { + "default": "#24292e", + "disabled": "#959da5", + }, + "shadow": Object { + "active": "inset 0px 2px 0px rgba(149, 157, 165, 0.1)", + "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)", + "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)", + "hover": "0px 1px 0px rgba(209, 213, 218, 0.2), inset 0px 2px 0px rgba(255, 255, 255, 0.1)", + }, + }, + "outline": Object { + "bg": Object { + "active": "#0366d6", + "default": "#fafbfc", + "disabled": "#F3F4F6", + "hover": "#0366d6", + }, + "border": Object { + "active": "rgba(4, 66, 137, .5)", + "default": "#e1e4e8", + "hover": "#005cc5", + }, + "color": Object { + "active": "#fff", + "default": "#005cc5", + "disabled": "#959da5", + "hover": "#fff", + }, + "shadow": Object { + "active": "inset 0px 1px 0px rgba(4, 66, 137, 0.2)", + "default": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.25)", + "focus": "0 0 0 3px rgba(3, 102, 214, 0.3)", + "hover": "0px 1px 0px rgba(149, 157, 165, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)", + }, + }, + "primary": Object { + "bg": Object { + "active": "#138934", + "default": "#159739", + "disabled": "#94D3A2", + "focus": "#138934", + "hover": "#138934", + }, + "border": Object { + "active": "#176f2c", + "default": "#22863a", + "disabled": "rgba(34, 134, 58, 0.1)", + "hover": "#176f2c", + }, + "color": Object { + "default": "#fff", + "disabled": "rgba(255, 255, 255, 0.50)", + }, + "shadow": Object { + "active": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)", + "default": " 0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)", + "focus": "0 0 0 3px #94D3A2", + }, + }, + }, "colors": Object { + "bg": Object { + "disabled": "#F3F4F6", + "gray": "#f6f8fa", + "grayLight": "#fafbfc", + }, "black": "#1b1f23", "blackfade15": "rgba(27, 31, 35, 0.15)", "blackfade20": "rgba(27, 31, 35, 0.20)", @@ -55,32 +159,10 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` "#05264c", ], "bodytext": "#24292e", - "button": Object { - "activeBg": "rgb(233, 236, 239)", - "bg2": "rgb(239, 243, 246)", - "border": "rgba(27, 31, 35, 0.2)", - "dangerActiveBg": "rgb(181, 32, 44)", - "dangerDisabledColor": "rgba(203,36,49,0.4)", - "dangerFocusShadow": "rgba(203, 36, 49, 0.4)", - "dangerHoverBgImage": "rgb(222, 68, 80)", - "disabledBg": "#eff3f6", - "disabledColor": "rgba(36, 41, 46, 0.4)", - "focusShadow": "rgba(3, 102, 214, 0.3)", - "hoverBg": "rgb(230, 235, 241)", - "outlineBlue": "rgb(3, 102, 214)", - "outlineShadow": "rgba(3, 102, 214, 0.4)", - "primaryActiveBg": "rgb(39, 159, 67)", - "primaryActiveShadow": "rgba(27, 31, 35, 0.15)", - "primaryBg": "rgb(40, 167, 69)", - "primaryBgImage": "rgb(52, 208, 88)", - "primaryBorder": "rgba(27, 31, 35, 0.5)", - "primaryDisabledBg": "#94d3a2", - "primaryDisabledBorder": "rgba(27,31,35,0.2)", - "primaryDisabledColor": "rgba(255, 255, 255, .75)", - "primaryFocusShadow": "rgba(52, 208, 88, 0.4)", - "primaryHoverBg": "rgb(38, 159, 66)", - "primaryHoverBgImage": "rgb(47, 203, 83)", - "white": "rgb(255, 255, 255)", + "border": Object { + "gray": "#e1e4e8", + "grayDark": "#d1d5da", + "grayLight": "#eaecef", }, "counter": Object { "bg": "rgba(27, 31, 35, 0.08)", @@ -156,8 +238,15 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` "success": "#28a745", "unknown": "#959da5", }, + "text": Object { + "gray": "#586069", + "grayDark": "#24292e", + "grayLight": "#6a737d", + "red": "#cb2431", + }, "white": "#fff", "whitefade15": "rgba(255, 255, 255, 0.15)", + "whitefade50": "rgba(255, 255, 255, 0.50)", "yellow": Array [ "#fffdef", "#fffbdd", @@ -206,13 +295,17 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` "0", "3px", "6px", + "100px", ], "shadows": Object { "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)", - "formControl": "rgba(27, 31, 35, 0.075) 0px 1px 2px inset", + "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)", + "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)", "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em", "large": "0 1px 15px rgba(27, 31, 35, 0.15)", "medium": "0 1px 5px rgba(27, 31, 35, 0.15)", + "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)", + "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)", "small": "0 1px 1px rgba(27, 31, 35, 0.1)", }, "space": Array [ diff --git a/src/__tests__/__snapshots__/SideNav.js.snap b/src/__tests__/__snapshots__/SideNav.js.snap index b8e0ff7c8d6..6cbe8ca657f 100644 --- a/src/__tests__/__snapshots__/SideNav.js.snap +++ b/src/__tests__/__snapshots__/SideNav.js.snap @@ -4,7 +4,7 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = ` .c0 { border: none; border-color: #e1e4e8; - border-radius: 3px; + border-radius: 6px; } .c2 { From b093dc88c94afb856624e3394b3cfe9e86130906 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 6 Mar 2020 14:11:23 -0800 Subject: [PATCH 51/54] update selected color --- src/SideNav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SideNav.js b/src/SideNav.js index dd8a08a8dd0..95d42a44d9c 100644 --- a/src/SideNav.js +++ b/src/SideNav.js @@ -119,7 +119,7 @@ SideNav.Link = styled(Link).attrs(props => { // Bar on the left &::before { - background-color: ${get('colors.orange.7')}; + background-color: ${get('colors.orange.5')}; } } } From 8b9ce754a4eb95f208a547516081cd9231efcf5d Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 6 Mar 2020 14:23:53 -0800 Subject: [PATCH 52/54] remove box shadow --- src/SideNav.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/SideNav.js b/src/SideNav.js index 95d42a44d9c..517954d063f 100644 --- a/src/SideNav.js +++ b/src/SideNav.js @@ -77,11 +77,6 @@ SideNav.Link = styled(Link).attrs(props => { border-top: 0; } - &:last-child { - // makes sure there is a "bottom border" in case the list is not long enough - box-shadow: 0 1px 0 ${get('colors.gray.2')}; - } - // Bar on the left &::before { position: absolute; From 3e8a065a9e7b4a2f58bed65388f0ac0836f2d8a8 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Fri, 6 Mar 2020 14:24:09 -0800 Subject: [PATCH 53/54] update box shadow --- src/__tests__/__snapshots__/SideNav.js.snap | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/__tests__/__snapshots__/SideNav.js.snap b/src/__tests__/__snapshots__/SideNav.js.snap index 6cbe8ca657f..ccd14ec95f5 100644 --- a/src/__tests__/__snapshots__/SideNav.js.snap +++ b/src/__tests__/__snapshots__/SideNav.js.snap @@ -26,10 +26,6 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = ` border-top: 0; } -.c1.variant-normal > .c3:last-child { - box-shadow: 0 1px 0 #e1e4e8; -} - .c1.variant-normal > .c3::before { position: absolute; top: 0; @@ -68,7 +64,7 @@ exports[`SideNav and SideNav.Link renders with default props 1`] = ` .c1.variant-normal > .c3[aria-current='page']::before, .c1.variant-normal > .c3[aria-selected='true']::before { - background-color: #d15704; + background-color: #f66a0a; } .c1.variant-lightweight > .c3 { @@ -127,10 +123,6 @@ exports[`SideNav and SideNav.Link renders with default props 2`] = ` border-top: 0; } -.c1.variant-normal > .c0:last-child { - box-shadow: 0 1px 0 #e1e4e8; -} - .c1.variant-normal > .c0::before { position: absolute; top: 0; @@ -169,7 +161,7 @@ exports[`SideNav and SideNav.Link renders with default props 2`] = ` .c1.variant-normal > .c0[aria-current='page']::before, .c1.variant-normal > .c0[aria-selected='true']::before { - background-color: #d15704; + background-color: #f66a0a; } .c1.variant-lightweight > .c0 { From 88254587a099f0747b46c4a0337b42899e0a6f29 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Mon, 9 Mar 2020 12:25:50 -0700 Subject: [PATCH 54/54] update bg colors for buttons --- src/__tests__/__snapshots__/BreadcrumbItem.js.snap | 8 ++++---- src/__tests__/__snapshots__/Button.js.snap | 8 ++++---- src/__tests__/__snapshots__/Dropdown.js.snap | 4 ++-- src/__tests__/__snapshots__/FilterListItem.js.snap | 8 ++++---- src/__tests__/__snapshots__/SubNavLink.js.snap | 8 ++++---- src/__tests__/__snapshots__/UnderlineNavLink.js.snap | 8 ++++---- src/theme.js | 8 ++++---- 7 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap index 24f1ee41fbb..5aa788ce136 100644 --- a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap +++ b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap @@ -38,7 +38,7 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` "buttons": Object { "danger": Object { "bg": Object { - "active": "#cb2431", + "active": "#be222e", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#cb2431", @@ -63,7 +63,7 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` }, "default": Object { "bg": Object { - "active": "#F3F4F6", + "active": "#edeff2", "default": "#fafbfc", "disabled": "#fafbfc", "hover": "#F3F4F6", @@ -86,7 +86,7 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` }, "outline": Object { "bg": Object { - "active": "#0366d6", + "active": "#035fc7", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#0366d6", @@ -111,7 +111,7 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` }, "primary": Object { "bg": Object { - "active": "#138934", + "active": "#128031", "default": "#159739", "disabled": "#94D3A2", "focus": "#138934", diff --git a/src/__tests__/__snapshots__/Button.js.snap b/src/__tests__/__snapshots__/Button.js.snap index bb96b8c622f..5e05be29c2c 100644 --- a/src/__tests__/__snapshots__/Button.js.snap +++ b/src/__tests__/__snapshots__/Button.js.snap @@ -56,7 +56,7 @@ exports[`Button respects the "disabled" prop 1`] = ` } .c0:active { - background-color: #F3F4F6; + background-color: #edeff2; box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1); border-color: #d1d5da; } @@ -132,7 +132,7 @@ exports[`ButtonDanger renders correct disabled styles 1`] = ` .c0:active { color: #fff; - background-color: #cb2431; + background-color: #be222e; box-shadow: inset 0px 2px 0px rgba(179,29,40,0.4); border-color: #9e1c23; } @@ -208,7 +208,7 @@ exports[`ButtonOutline renders correct disabled styles 1`] = ` .c0:active { color: #fff; - background-color: #0366d6; + background-color: #035fc7; border-color: rgba(4,66,137,.5); box-shadow: inset 0px 1px 0px rgba(4,66,137,0.2); } @@ -282,7 +282,7 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = ` } .c0:active { - background-color: #138934; + background-color: #128031; box-shadow: inset 0px 1px 0px rgba(20,70,32,0.2); border-color: #176f2c; } diff --git a/src/__tests__/__snapshots__/Dropdown.js.snap b/src/__tests__/__snapshots__/Dropdown.js.snap index 1d14cf8e730..d4659409279 100644 --- a/src/__tests__/__snapshots__/Dropdown.js.snap +++ b/src/__tests__/__snapshots__/Dropdown.js.snap @@ -56,7 +56,7 @@ exports[`Dropdown matches the snapshots 1`] = ` } .c2:active { - background-color: #F3F4F6; + background-color: #edeff2; box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1); border-color: #d1d5da; } @@ -165,7 +165,7 @@ exports[`Dropdown matches the snapshots 2`] = ` } .c2:active { - background-color: #F3F4F6; + background-color: #edeff2; box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1); border-color: #d1d5da; } diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap index 1644c2c3e3d..a8400eefd40 100644 --- a/src/__tests__/__snapshots__/FilterListItem.js.snap +++ b/src/__tests__/__snapshots__/FilterListItem.js.snap @@ -51,7 +51,7 @@ exports[`FilterList.Item renders the given "as" prop 1`] = ` "buttons": Object { "danger": Object { "bg": Object { - "active": "#cb2431", + "active": "#be222e", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#cb2431", @@ -76,7 +76,7 @@ exports[`FilterList.Item renders the given "as" prop 1`] = ` }, "default": Object { "bg": Object { - "active": "#F3F4F6", + "active": "#edeff2", "default": "#fafbfc", "disabled": "#fafbfc", "hover": "#F3F4F6", @@ -99,7 +99,7 @@ exports[`FilterList.Item renders the given "as" prop 1`] = ` }, "outline": Object { "bg": Object { - "active": "#0366d6", + "active": "#035fc7", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#0366d6", @@ -124,7 +124,7 @@ exports[`FilterList.Item renders the given "as" prop 1`] = ` }, "primary": Object { "bg": Object { - "active": "#138934", + "active": "#128031", "default": "#159739", "disabled": "#94D3A2", "focus": "#138934", diff --git a/src/__tests__/__snapshots__/SubNavLink.js.snap b/src/__tests__/__snapshots__/SubNavLink.js.snap index 87f4cfff23b..2c426a7aad5 100644 --- a/src/__tests__/__snapshots__/SubNavLink.js.snap +++ b/src/__tests__/__snapshots__/SubNavLink.js.snap @@ -78,7 +78,7 @@ exports[`SubNav.Link renders the given "as" prop 1`] = ` "buttons": Object { "danger": Object { "bg": Object { - "active": "#cb2431", + "active": "#be222e", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#cb2431", @@ -103,7 +103,7 @@ exports[`SubNav.Link renders the given "as" prop 1`] = ` }, "default": Object { "bg": Object { - "active": "#F3F4F6", + "active": "#edeff2", "default": "#fafbfc", "disabled": "#fafbfc", "hover": "#F3F4F6", @@ -126,7 +126,7 @@ exports[`SubNav.Link renders the given "as" prop 1`] = ` }, "outline": Object { "bg": Object { - "active": "#0366d6", + "active": "#035fc7", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#0366d6", @@ -151,7 +151,7 @@ exports[`SubNav.Link renders the given "as" prop 1`] = ` }, "primary": Object { "bg": Object { - "active": "#138934", + "active": "#128031", "default": "#159739", "disabled": "#94D3A2", "focus": "#138934", diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap index 9d23b7a4770..02b5e7ee681 100644 --- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap +++ b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap @@ -55,7 +55,7 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = ` "buttons": Object { "danger": Object { "bg": Object { - "active": "#cb2431", + "active": "#be222e", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#cb2431", @@ -80,7 +80,7 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = ` }, "default": Object { "bg": Object { - "active": "#F3F4F6", + "active": "#edeff2", "default": "#fafbfc", "disabled": "#fafbfc", "hover": "#F3F4F6", @@ -103,7 +103,7 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = ` }, "outline": Object { "bg": Object { - "active": "#0366d6", + "active": "#035fc7", "default": "#fafbfc", "disabled": "#F3F4F6", "hover": "#0366d6", @@ -128,7 +128,7 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = ` }, "primary": Object { "bg": Object { - "active": "#138934", + "active": "#128031", "default": "#159739", "disabled": "#94D3A2", "focus": "#138934", diff --git a/src/theme.js b/src/theme.js index 84f549c1f27..b6c6a66d944 100644 --- a/src/theme.js +++ b/src/theme.js @@ -65,7 +65,7 @@ const buttons = { bg: { default: colors.bg.grayLight, hover: '#F3F4F6', // custom gray - active: '#F3F4F6', //custom gray + active: '#edeff2', //custom gray disabled: colors.bg.grayLight }, shadow: { @@ -90,7 +90,7 @@ const buttons = { default: '#159739', //custom green focus: '#138934', //custom green hover: '#138934', //custom green - active: '#138934', //custom green + active: '#128031', // 2% darker than hover bg disabled: '#94D3A2' // custom gray }, shadow: { @@ -114,7 +114,7 @@ const buttons = { bg: { default: gray[0], hover: red[6], - active: red[6], + active: '#be222e', // 2% darker than hover bg disabled: '#F3F4F6' }, shadow: { @@ -139,7 +139,7 @@ const buttons = { bg: { default: gray[0], hover: blue[5], - active: blue[5], + active: '#035fc7', // 2% darker than hover bg disabled: '#F3F4F6' }, shadow: {