From 4e3ae6f4e603f3cda2e92618962636ffe4c3d022 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 27 Mar 2020 13:31:30 -0700 Subject: [PATCH 1/2] Update box shadow to match Primer CSS Next --- src/theme.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/theme.js b/src/theme.js index 79bbd79b2ac..d94a38017cc 100644 --- a/src/theme.js +++ b/src/theme.js @@ -192,10 +192,10 @@ const theme = { lineHeights, 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)', - large: '0 1px 15px rgba(27, 31, 35, 0.15)', - 'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)', + small: '0 1px 0 rgba(149, 157, 165, 0.1)', + medium: '0 3px 6px rgba(149, 157, 165, 0.15)', + large: '0 8px 24px rgba(149, 157, 165, 0.2)', + 'extra-large': '0 12px 48px rgba(149, 157, 165, 0.3)', 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', From f07eb1e5d4aed3bbf958c18a71b754e0aa79ae1e Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 30 Mar 2020 13:22:12 -0700 Subject: [PATCH 2/2] Update snapshots --- src/__tests__/BorderBox.js | 2 +- src/__tests__/__snapshots__/BreadcrumbItem.js.snap | 8 ++++---- src/__tests__/__snapshots__/CircleBadge.js.snap | 8 ++++---- src/__tests__/__snapshots__/FilterListItem.js.snap | 8 ++++---- src/__tests__/__snapshots__/SubNavLink.js.snap | 8 ++++---- src/__tests__/__snapshots__/UnderlineNavLink.js.snap | 8 ++++---- 6 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js index 9304f6ab166..67a2c3becc8 100644 --- a/src/__tests__/BorderBox.js +++ b/src/__tests__/BorderBox.js @@ -40,6 +40,6 @@ describe('BorderBox', () => { // the test returns the box shadow value without spaces, so had to manually provide the expected string here it('renders box shadow', () => { - expect(render()).toHaveStyleRule('box-shadow', '0 1px 1px rgba(27,31,35,0.1)') + expect(render()).toHaveStyleRule('box-shadow', '0 1px 0 rgba(149,157,165,0.1)') }) }) diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap index 1d89748a790..85923ae7e9d 100644 --- a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap +++ b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap @@ -304,15 +304,15 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = ` "100px", ], "shadows": Object { - "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)", + "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)", "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)", + "large": "0 8px 24px rgba(149, 157, 165, 0.2)", + "medium": "0 3px 6px rgba(149, 157, 165, 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)", + "small": "0 1px 0 rgba(149, 157, 165, 0.1)", }, "space": Array [ "0", diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap index e35e2e949b2..ccce0cf64b7 100644 --- a/src/__tests__/__snapshots__/CircleBadge.js.snap +++ b/src/__tests__/__snapshots__/CircleBadge.js.snap @@ -16,7 +16,7 @@ exports[`CircleBadge respects "as" prop 1`] = ` justify-content: center; background-color: #fff; border-radius: 50%; - box-shadow: 0 1px 5px rgba(27,31,35,0.15); + box-shadow: 0 3px 6px rgba(149,157,165,0.15); width: 96px; height: 96px; } @@ -42,7 +42,7 @@ exports[`CircleBadge respects the inline prop 1`] = ` justify-content: center; background-color: #fff; border-radius: 50%; - box-shadow: 0 1px 5px rgba(27,31,35,0.15); + box-shadow: 0 3px 6px rgba(149,157,165,0.15); width: 96px; height: 96px; } @@ -68,7 +68,7 @@ exports[`CircleBadge respects the variant prop 1`] = ` justify-content: center; background-color: #fff; border-radius: 50%; - box-shadow: 0 1px 5px rgba(27,31,35,0.15); + box-shadow: 0 3px 6px rgba(149,157,165,0.15); width: 128px; height: 128px; } @@ -94,7 +94,7 @@ exports[`CircleBadge uses the size prop to override the variant prop 1`] = ` justify-content: center; background-color: #fff; border-radius: 50%; - box-shadow: 0 1px 5px rgba(27,31,35,0.15); + box-shadow: 0 3px 6px rgba(149,157,165,0.15); width: 20px; height: 20px; } diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap index 6fb22ed9084..210b44246b5 100644 --- a/src/__tests__/__snapshots__/FilterListItem.js.snap +++ b/src/__tests__/__snapshots__/FilterListItem.js.snap @@ -317,15 +317,15 @@ exports[`FilterList.Item renders the given "as" prop 1`] = ` "100px", ], "shadows": Object { - "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)", + "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)", "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)", + "large": "0 8px 24px rgba(149, 157, 165, 0.2)", + "medium": "0 3px 6px rgba(149, 157, 165, 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)", + "small": "0 1px 0 rgba(149, 157, 165, 0.1)", }, "space": Array [ "0", diff --git a/src/__tests__/__snapshots__/SubNavLink.js.snap b/src/__tests__/__snapshots__/SubNavLink.js.snap index c18f1a79131..5539e999aa1 100644 --- a/src/__tests__/__snapshots__/SubNavLink.js.snap +++ b/src/__tests__/__snapshots__/SubNavLink.js.snap @@ -344,15 +344,15 @@ exports[`SubNav.Link renders the given "as" prop 1`] = ` "100px", ], "shadows": Object { - "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)", + "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)", "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)", + "large": "0 8px 24px rgba(149, 157, 165, 0.2)", + "medium": "0 3px 6px rgba(149, 157, 165, 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)", + "small": "0 1px 0 rgba(149, 157, 165, 0.1)", }, "space": Array [ "0", diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap index 7060a25b054..165dc2b1335 100644 --- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap +++ b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap @@ -321,15 +321,15 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = ` "100px", ], "shadows": Object { - "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)", + "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)", "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)", + "large": "0 8px 24px rgba(149, 157, 165, 0.2)", + "medium": "0 3px 6px rgba(149, 157, 165, 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)", + "small": "0 1px 0 rgba(149, 157, 165, 0.1)", }, "space": Array [ "0",