From 565f19808c528a2d33042c339603ea76d6097d0c Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Tue, 2 Mar 2021 10:25:50 -0600 Subject: [PATCH 01/11] implement functional color variables for Breadcrumb breadcrumb tweaks --- .changeset/wicked-ears-give.md | 5 +++++ src/Breadcrumb.tsx | 6 +++--- src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap | 6 +++--- 3 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 .changeset/wicked-ears-give.md diff --git a/.changeset/wicked-ears-give.md b/.changeset/wicked-ears-give.md new file mode 100644 index 00000000000..7e275e81a5f --- /dev/null +++ b/.changeset/wicked-ears-give.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Use functional color variables in Breadcrumb diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx index 826f1f10e3f..f1c7ac8c703 100644 --- a/src/Breadcrumb.tsx +++ b/src/Breadcrumb.tsx @@ -16,7 +16,7 @@ const Wrapper = styled.li` &::after { padding-right: 0.5em; padding-left: 0.5em; - color: ${get('colors.gray.2')}; + color: ${get('colors.text.disabled')}; font-size: ${get('fontSizes.1')}; content: '/'; } @@ -63,7 +63,7 @@ const BreadcrumbItem = styled.a.attrs(props => ({ className: classnames(props.selected && SELECTED_CLASS, props.className), 'aria-current': props.selected ? 'page' : null }))` - color: ${get('colors.blue.5')}; + color: ${get('colors.text.link')}; display: inline-block; font-size: ${get('fontSizes.1')}; text-decoration: none; @@ -71,7 +71,7 @@ const BreadcrumbItem = styled.a.attrs(props => ({ text-decoration: underline; } &.selected { - color: ${get('colors.gray.7')}; + color: ${get('colors.text.primary')}; pointer-events: none; } ${COMMON} diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap b/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap index 467b10d0148..c00cfb9efe1 100644 --- a/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap +++ b/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap @@ -15,7 +15,7 @@ exports[`Breadcrumb.Item adds activeClassName={SELECTED_CLASS} when it gets a "t } .c0.selected { - color: #444d56; + color: #24292e; pointer-events: none; } @@ -42,7 +42,7 @@ exports[`Breadcrumb.Item renders consistently 1`] = ` } .c0.selected { - color: #444d56; + color: #24292e; pointer-events: none; } @@ -67,7 +67,7 @@ exports[`Breadcrumb.Item respects the "selected" prop 1`] = ` } .c0.selected { - color: #444d56; + color: #24292e; pointer-events: none; } From 170876e6546a435faf7e0401d6fc8060a64b199d Mon Sep 17 00:00:00 2001 From: Van Anderson Date: Mon, 1 Mar 2021 12:24:25 -0600 Subject: [PATCH 02/11] implement functional color variables for Button --- .changeset/tame-chicken-warn.md | 5 ++++ src/Button/Button.tsx | 30 ++++++++++----------- src/__tests__/__snapshots__/Button.tsx.snap | 30 +++++++++++---------- 3 files changed, 36 insertions(+), 29 deletions(-) create mode 100644 .changeset/tame-chicken-warn.md diff --git a/.changeset/tame-chicken-warn.md b/.changeset/tame-chicken-warn.md new file mode 100644 index 00000000000..6c6d2d0ee75 --- /dev/null +++ b/.changeset/tame-chicken-warn.md @@ -0,0 +1,5 @@ +--- +'@primer/components': patch +--- + +Use functional color variables in Button diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 0f3ff973122..7c8ad0b4fa5 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -5,33 +5,33 @@ import {ComponentProps} from '../utils/types' import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} 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')}; + color: ${get('colors.btn.text')}; + background-color: ${get('colors.btn.bg')}; + border: 1px solid ${get('colors.btn.border')}; + box-shadow: ${get('shadows.btn.shadow')}, ${get('shadows.btn.insetShadow')}}; &:hover { - background-color: ${get('buttons.default.bg.hover')}; - border-color: ${get('buttons.default.border.hover')}; - box-shadow: ${get('buttons.default.shadow.hover')}; + background-color: ${get('colors.btn.hoverBg')}; + border-color: ${get('colors.btn.hoverBorder')}; + box-shadow: ${get('shadows.btn.focusShadow')}, ${get('shadows.btn.insetShadow')}; } // focus must come before :active so that the active box shadow overrides &:focus { - border-color: rgba(27, 31, 35, 0.15); - box-shadow: ${get('buttons.default.shadow.focus')}; + border-color: ${get('colors.btn.focusBorder')}; + box-shadow: ${get('shadows.btn.focusShadow')}; } &:active { - background-color: ${get('buttons.default.bg.active')}; - box-shadow: ${get('buttons.default.shadow.active')}; - border-color: ${get('buttons.default.border.active')}; + background-color: ${get('colors.btn.selectedBg')}; + box-shadow: ${get('shadows.btn.shadowActive')}; + border-color: ${get('colors.btn.border')}; } &:disabled { - color: ${get('buttons.default.color.disabled')}; - background-color: ${get('buttons.default.bg.disabled')}; - border-color: ${get('buttons.default.border.disabled')}; + color: ${get('colors.text.disabled')}; + background-color: ${get('colors.btn.bg')}; + border-color: ${get('colors.btn.border')}; } ${buttonSystemProps}; diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/src/__tests__/__snapshots__/Button.tsx.snap index 5d4135cf442..671cb5bd9b7 100644 --- a/src/__tests__/__snapshots__/Button.tsx.snap +++ b/src/__tests__/__snapshots__/Button.tsx.snap @@ -25,8 +25,8 @@ exports[`Button renders consistently 1`] = ` font-size: 14px; color: #24292e; background-color: #fafbfc; - border: 1px solid rgba(27,31,35,0.12); - box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25); + border: 1px solid rgba(27,31,35,0.15); + box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25); } .c0:hover { @@ -47,8 +47,9 @@ exports[`Button renders consistently 1`] = ` } .c0:hover { - background-color: #F3F4F6; - box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1); + background-color: #f3f4f6; + border-color: rgba(27,31,35,0.15); + box-shadow: 0 0 0 3px rgba(3,102,214,0.3),inset 0 1px 0 rgba(255,255,255,0.25); } .c0:focus { @@ -58,14 +59,14 @@ exports[`Button renders consistently 1`] = ` .c0:active { background-color: #edeff2; - box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1); - border-color: #d1d5da; + box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15); + border-color: rgba(27,31,35,0.15); } .c0:disabled { color: #959da5; background-color: #fafbfc; - border-color: #eaecef; + border-color: rgba(27,31,35,0.15); }