From 3c8955335d932e0a6bfe9e9847b05f32014f393d Mon Sep 17 00:00:00 2001 From: Aveline Thelen Date: Thu, 2 Dec 2021 11:09:46 -0800 Subject: [PATCH 1/5] Set root font size to 100% --- config/postcss-plugins.js | 2 +- src/components/AppProvider/AppProvider.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/postcss-plugins.js b/config/postcss-plugins.js index ee89cfd09a1..b8a0ff5a297 100644 --- a/config/postcss-plugins.js +++ b/config/postcss-plugins.js @@ -4,7 +4,7 @@ const pxtorem = require('postcss-pxtorem'); module.exports = [ postcssShopify, pxtorem({ - rootValue: 10, + rootValue: 16, replace: true, propList: ['*'], }), diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index b6d71df6c56..2d6b15597c1 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -22,7 +22,7 @@ button { html { position: relative; - font-size: ($base-font-size / $default-browser-font-size) * 100%; + font-size: 100%; -webkit-font-smoothing: antialiased; // This needs to come after -webkit-font-smoothing From 07b06fc09bc1a7bb2a63558e78f9a668d7be07ca Mon Sep 17 00:00:00 2001 From: Aveline Thelen Date: Thu, 2 Dec 2021 14:40:54 -0800 Subject: [PATCH 2/5] Convert rem values to px --- .../components/FileUpload/FileUpload.scss | 2 +- src/components/IndexTable/IndexTable.scss | 4 +-- src/components/Layout/Layout.scss | 2 +- src/components/Subheading/Subheading.scss | 2 +- src/tokens/_legacy-tokens.ts | 30 +++++++++---------- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss index 7ee8fc5388f..971834202a7 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.scss +++ b/src/components/DropZone/components/FileUpload/FileUpload.scss @@ -18,7 +18,7 @@ $slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2; } .small { - padding: 1.25rem; + padding: var(--p-space-3); } .FileUpload img { diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index 43391af8672..94cdeb16e25 100644 --- a/src/components/IndexTable/IndexTable.scss +++ b/src/components/IndexTable/IndexTable.scss @@ -504,8 +504,8 @@ $scroll-bar-size: var(--p-space-2); display: flex; align-items: flex-start; width: 100%; - min-height: 5.6rem; - padding: 1rem var(--p-space-4); + min-height: 56px; + padding: 10px var(--p-space-4); background-color: var(--p-surface); &.unselectable { diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 0dad1ca0e0f..520bdd15ce5 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -32,7 +32,7 @@ $relative-size: $primary-basis / $secondary-basis; min-width: 51%; @media print { - flex: 2 2 36rem; + flex: 2 2 360px; } } diff --git a/src/components/Subheading/Subheading.scss b/src/components/Subheading/Subheading.scss index 378edfec3c0..ea622a595b0 100644 --- a/src/components/Subheading/Subheading.scss +++ b/src/components/Subheading/Subheading.scss @@ -5,6 +5,6 @@ margin: 0; @media print { - font-size: 1.1rem; + font-size: 11px; } } diff --git a/src/tokens/_legacy-tokens.ts b/src/tokens/_legacy-tokens.ts index 45420f6639f..cabf4df8ffd 100644 --- a/src/tokens/_legacy-tokens.ts +++ b/src/tokens/_legacy-tokens.ts @@ -18,25 +18,25 @@ export const legacyTokens: TokenGroup = { 'button-inner-shadow': 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)', 'button-pressed-inner-shadow': 'inset 0 1px 0 rgba(0, 0, 0, 0.15)', 'override-loading-z-index': '514', - 'choice-size': '2rem', - 'icon-size': '1rem', - 'choice-margin': '0.1rem', - 'control-border-width': '0.2rem', + 'choice-size': '20px', + 'icon-size': '10px', + 'choice-margin': '1px', + 'control-border-width': '2px', 'banner-border-default': - 'inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)', + 'inset 0 1px 0 0 var(--p-border-neutral-subdued), inset 0 0 0 1px var(--p-border-neutral-subdued)', 'banner-border-success': - 'inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)', + 'inset 0 1px 0 0 var(--p-border-success-subdued), inset 0 0 0 1px var(--p-border-success-subdued)', 'banner-border-highlight': - 'inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)', + 'inset 0 1px 0 0 var(--p-border-highlight-subdued), inset 0 0 0 1px var(--p-border-highlight-subdued)', 'banner-border-warning': - 'inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)', + 'inset 0 1px 0 0 var(--p-border-warning-subdued), inset 0 0 0 1px var(--p-border-warning-subdued)', 'banner-border-critical': - 'inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)', - 'thin-border-subdued': '0.1rem solid var(--p-border-subdued)', - 'text-field-spinner-offset': '0.2rem', - 'text-field-focus-ring-offset': '-0.4rem', - 'button-group-item-spacing': '-0.1rem', - 'range-slider-thumb-size-base': '1.6rem', - 'range-slider-thumb-size-active': '2.4rem', + 'inset 0 1px 0 0 var(--p-border-critical-subdued), inset 0 0 0 1px var(--p-border-critical-subdued)', + 'thin-border-subdued': '1px solid var(--p-border-subdued)', + 'text-field-spinner-offset': '2px', + 'text-field-focus-ring-offset': '-4px', + 'button-group-item-spacing': '-1px', + 'range-slider-thumb-size-base': '16px', + 'range-slider-thumb-size-active': '24px', 'frame-offset': '0px', }; From eee2fb4abcfe3e2a2213c2b46ed3afaa15b5ea81 Mon Sep 17 00:00:00 2001 From: Aveline Thelen Date: Thu, 2 Dec 2021 15:07:03 -0800 Subject: [PATCH 3/5] =?UTF-8?q?try=20a=20fix=20for=20chromatic=20diffs=20?= =?UTF-8?q?=F0=9F=A7=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-body.html | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .storybook/preview-body.html diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 00000000000..325cfa9665a --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1,5 @@ + From a4f041cd3e903d90de733ce65fe23ca998d84210 Mon Sep 17 00:00:00 2001 From: Aveline Thelen Date: Thu, 2 Dec 2021 15:37:50 -0800 Subject: [PATCH 4/5] Update rem values for chromatic snapshots --- src/components/IndexTable/README.md | 6 +++--- src/components/Sheet/README.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md index a0d95520bb0..206987c3dcc 100644 --- a/src/components/IndexTable/README.md +++ b/src/components/IndexTable/README.md @@ -759,7 +759,7 @@ function IndexTableWithFilteringExample() { onClearAll={handleClearAll} /> -
+
-
+