From 6d06f54f4570052b734290e31e80576a626638ce Mon Sep 17 00:00:00 2001 From: Aveline Thelen Date: Tue, 30 Nov 2021 13:48:03 -0800 Subject: [PATCH] remove instances of rem() Co-Authored-By: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- src/components/Button/Button.scss | 10 +-- .../CheckableButton/CheckableButton.scss | 3 +- .../components/FileUpload/FileUpload.scss | 4 +- .../components/Checkbox/Checkbox.scss | 8 +- src/components/Indicator/Indicator.scss | 4 +- src/components/KeyboardKey/KeyboardKey.scss | 4 +- src/components/Layout/Layout.scss | 4 +- src/components/Link/Link.scss | 8 +- .../Listbox/components/Loading/Loading.scss | 2 +- .../MessageIndicator/MessageIndicator.scss | 6 +- src/components/Modal/Modal.scss | 2 +- .../Modal/components/Dialog/Dialog.scss | 10 +-- src/components/Navigation/Navigation.scss | 22 +++--- src/components/Navigation/_variables.scss | 26 +++---- .../OptionList/components/Option/Option.scss | 2 +- src/components/Page/Page.scss | 2 +- .../Page/components/Header/Header.scss | 2 +- .../Header/components/Title/Title.scss | 6 +- src/components/Popover/Popover.scss | 10 +-- src/components/ProgressBar/ProgressBar.scss | 6 +- src/components/RadioButton/RadioButton.scss | 2 +- src/components/RangeSlider/RangeSlider.scss | 2 +- .../components/DualThumb/DualThumb.scss | 8 +- .../components/SingleThumb/SingleThumb.scss | 6 +- src/components/ResourceItem/ResourceItem.scss | 20 ++--- src/components/ResourceList/ResourceList.scss | 2 +- src/components/ResourceList/_variables.scss | 6 +- src/components/Scrollable/Scrollable.scss | 2 +- src/components/Select/Select.scss | 4 +- .../SettingAction/SettingAction.scss | 2 +- src/components/Sheet/Sheet.scss | 2 +- .../SkeletonBodyText/SkeletonBodyText.scss | 4 +- .../SkeletonDisplayText.scss | 2 +- src/components/SkeletonPage/SkeletonPage.scss | 16 ++-- src/components/Spinner/Spinner.scss | 4 +- src/components/Tabs/Tabs.scss | 4 +- src/components/Tag/Tag.scss | 4 +- src/components/TextField/TextField.scss | 4 +- .../TooltipOverlay/TooltipOverlay.scss | 2 +- src/components/TopBar/TopBar.scss | 4 +- src/components/TopBar/_variables.scss | 2 +- .../TopBar/components/Menu/Menu.scss | 4 +- .../Menu/components/Message/Message.scss | 2 +- .../components/SearchField/SearchField.scss | 6 +- .../TopBar/components/UserMenu/UserMenu.scss | 2 +- .../VideoThumbnail/VideoThumbnail.scss | 12 +-- src/styles/foundation/_border-width.scss | 6 +- src/styles/foundation/_focus-ring.scss | 12 +-- src/styles/foundation/_layout.scss | 32 ++++---- src/styles/foundation/_typography.scss | 76 +++++++++---------- src/styles/shared/_buttons.scss | 2 +- src/styles/shared/_controls.scss | 6 +- src/styles/shared/_icons.scss | 2 +- src/styles/shared/_interaction-state.scss | 4 +- src/styles/shared/_skeleton.scss | 6 +- 55 files changed, 205 insertions(+), 210 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 8857aa33d65..2741360528d 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -1,11 +1,11 @@ @import '../../styles/common'; $min-height: control-height(); -$vertical-padding: ($min-height - line-height(body) - rem(2px)) / 2; -$slim-min-height: rem(28px); -$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2; -$large-min-height: rem(44px); -$large-vertical-padding: ($large-min-height - line-height(body) - rem(2px)) / 2; +$vertical-padding: ($min-height - line-height(body) - 2px) / 2; +$slim-min-height: 28px; +$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2; +$large-min-height: 44px; +$large-vertical-padding: ($large-min-height - line-height(body) - 2px) / 2; $spinner-size: 20px; $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent, diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss index 34fb8c23b70..a73b4055704 100644 --- a/src/components/CheckableButton/CheckableButton.scss +++ b/src/components/CheckableButton/CheckableButton.scss @@ -2,8 +2,7 @@ $button-min-height: control-height(); -$button-vertical-padding: ($button-min-height - line-height(body) - rem(2px)) / - 2; +$button-vertical-padding: ($button-min-height - line-height(body) - 2px) / 2; .CheckableButton { @include text-style-button; diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss index e70f9654d64..7d5f881a081 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.scss +++ b/src/components/DropZone/components/FileUpload/FileUpload.scss @@ -1,8 +1,8 @@ @import '../../../../styles/common'; $fileupload-padding: 15px; -$slim-min-height: rem(30px); -$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2; +$slim-min-height: 30px; +$slim-vertical-padding: ($slim-min-height - line-height(body) - 2px) / 2; .FileUpload { padding: $fileupload-padding; diff --git a/src/components/IndexTable/components/Checkbox/Checkbox.scss b/src/components/IndexTable/components/Checkbox/Checkbox.scss index 7e50b773a4f..088d545e280 100644 --- a/src/components/IndexTable/components/Checkbox/Checkbox.scss +++ b/src/components/IndexTable/components/Checkbox/Checkbox.scss @@ -1,9 +1,9 @@ @import '../../../../styles/common'; -$expanded-height: rem(32px); -$expanded-width: rem(32px); -$condensed-height: rem(44px); -$condensed-width: rem(50px); +$expanded-height: 32px; +$expanded-width: 32px; +$condensed-height: 44px; +$condensed-width: 50px; .TableCellContentContainer { display: flex; diff --git a/src/components/Indicator/Indicator.scss b/src/components/Indicator/Indicator.scss index 99fb36a8429..5195ea43406 100644 --- a/src/components/Indicator/Indicator.scss +++ b/src/components/Indicator/Indicator.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; -$size: rem(10px); -$base-position: rem(-4px); +$size: 10px; +$base-position: -4px; .Indicator { &::before, diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss index 0554bfdeb9e..10f8106502a 100644 --- a/src/components/KeyboardKey/KeyboardKey.scss +++ b/src/components/KeyboardKey/KeyboardKey.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$key-base-height: rem(24px); +$key-base-height: 24px; .KeyboardKey { --p-bottom-shadow-size: 2px; @@ -14,7 +14,7 @@ $key-base-height: rem(24px); 0 var(--p-bottom-shadow-size) 0 1px var(--p-border-subdued); border-radius: var(--p-border-radius-base); font-family: font-family(); - font-size: rem(12px); + font-size: 12px; font-weight: var(--p-font-weight-medium); line-height: $key-base-height; color: var(--p-text-subdued); diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 5f604130145..0dad1ca0e0f 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -16,8 +16,8 @@ $relative-size: $primary-basis / $secondary-basis; @media print { body & { - font-size: rem(11px); - line-height: rem(16px); + font-size: 11px; + line-height: 16px; } a, diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss index 3bc88241a8f..0706b318df2 100644 --- a/src/components/Link/Link.scss +++ b/src/components/Link/Link.scss @@ -31,10 +31,10 @@ position: absolute; z-index: -1; // this mimics the box model of the plain button backdrop - top: rem(-2px); - right: rem(-5px); - bottom: rem(-2px); - left: rem(-5px); + top: -2px; + right: -5px; + bottom: -2px; + left: -5px; display: block; border-radius: border-radius(); diff --git a/src/components/Listbox/components/Loading/Loading.scss b/src/components/Listbox/components/Loading/Loading.scss index b1ebae9230c..169de63e002 100644 --- a/src/components/Listbox/components/Loading/Loading.scss +++ b/src/components/Listbox/components/Loading/Loading.scss @@ -1,6 +1,6 @@ @import '../../../../styles/common'; -$item-min-height: rem(40px); +$item-min-height: 40px; .ListItem { padding: 0; diff --git a/src/components/MessageIndicator/MessageIndicator.scss b/src/components/MessageIndicator/MessageIndicator.scss index ac94a3581f2..d95789e5796 100644 --- a/src/components/MessageIndicator/MessageIndicator.scss +++ b/src/components/MessageIndicator/MessageIndicator.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; -$indicator-size: rem(12px); -$indicator-position: rem(-3px); +$indicator-size: 12px; +$indicator-position: -3px; .MessageIndicatorWrapper { position: relative; @@ -16,5 +16,5 @@ $indicator-position: rem(-3px); height: $indicator-size; border-radius: 100%; background-color: var(--p-icon-highlight); - border: solid rem(2px) var(--p-background); + border: solid 2px var(--p-background); } diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss index e36f3d2e70b..7f75766ee7e 100644 --- a/src/components/Modal/Modal.scss +++ b/src/components/Modal/Modal.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$small-width: rem(620px); +$small-width: 620px; .BodyWrapper { display: flex; diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss index 66638ac598a..ef41d6e0a94 100644 --- a/src/components/Modal/components/Dialog/Dialog.scss +++ b/src/components/Modal/components/Dialog/Dialog.scss @@ -1,13 +1,13 @@ @import '../../../../styles/common'; -$top-offset-slide-in-start: rem(200px); +$top-offset-slide-in-start: 200px; $vertical-spacing: 60px; $height-limit: 600px; -$xsmall-width: rem(380px); -$small-width: rem(620px); -$large-width: rem(980px); +$xsmall-width: 380px; +$small-width: 620px; +$large-width: 980px; // @TODO simplify media queries so this isn't needed -$dangerous-magic-space-16: rem(64px); +$dangerous-magic-space-16: 64px; .Container { position: fixed; diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 423688b2d2b..5f7a604a8da 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -2,11 +2,11 @@ @import './variables'; // Base Navigation styles -$active-indicator-width: rem(3px); -$nav-max-width: rem(360px); +$active-indicator-width: 3px; +$nav-max-width: 360px; .Navigation { - --icon-size: #{rem(20px)}; + --icon-size: 20px; display: flex; flex-direction: column; align-items: stretch; @@ -56,7 +56,7 @@ $nav-max-width: rem(360px); } @include breakpoint-after(nav-min-window-corrected()) { - padding-top: rem(12px); + padding-top: 12px; } } @@ -239,7 +239,7 @@ $disabled-fade: 0.6; } // Secondary styles -$secondary-item-font-size: rem(15px); +$secondary-item-font-size: 15px; .SecondaryNavigation { flex-basis: 100%; margin-left: 0; @@ -282,14 +282,14 @@ $secondary-item-font-size: rem(15px); @include breakpoint-after(nav-min-window-corrected()) { font-size: $item-font-size-small; - line-height: rem(28px); + line-height: 28px; } } .Text { - margin-top: rem(6px); - margin-bottom: rem(6px); - line-height: rem(20px); + margin-top: 6px; + margin-bottom: 6px; + line-height: 20px; } .Item-selected { @@ -438,8 +438,8 @@ $secondary-item-font-size: rem(15px); .Indicator { position: relative; display: inline-block; - height: rem(10px); - width: rem(10px); + height: 10px; + width: 10px; } .SecondaryNavigation-noIcon .Item { diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index e6a654fd746..f83ece5ca18 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -1,15 +1,15 @@ -$item-font-size: rem(16px); -$item-font-size-small: rem(14px); -$item-line-height-small: rem(32px); -$item-line-height-large: rem(36px); -$text-line-height: rem(20px); +$item-font-size: 16px; +$item-font-size-small: 14px; +$item-line-height-small: 32px; +$item-line-height-large: 36px; +$text-line-height: 20px; $nav-variables: ( - mobile-spacing: rem(10px), - desktop-spacing: rem(6px), - mobile-height: rem(40px), - desktop-height: rem(32px), - icon-size: rem(20px), - item-line-height: rem(40px), + mobile-spacing: 10px, + desktop-spacing: 6px, + mobile-height: 40px, + desktop-height: 32px, + icon-size: 20px, + item-line-height: 40px, ); @function nav($variable) { @return map-get($nav-variables, $variable); @@ -152,8 +152,8 @@ $nav-animation-variables: ( } @include breakpoint-before(nav-min-window-corrected()) { - font-size: rem(15px); - line-height: rem(19px); + font-size: 15px; + line-height: 19px; } } diff --git a/src/components/OptionList/components/Option/Option.scss b/src/components/OptionList/components/Option/Option.scss index 03aefa6c627..0db62c5ea11 100644 --- a/src/components/OptionList/components/Option/Option.scss +++ b/src/components/OptionList/components/Option/Option.scss @@ -2,7 +2,7 @@ @import '../../../../styles/shared/typography'; $min-height: control-height(); -$control-vertical-adjustment: rem(2px); +$control-vertical-adjustment: 2px; .Option { @include unstyled-button; diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss index ec69d2140c9..316eaaeeb4b 100644 --- a/src/components/Page/Page.scss +++ b/src/components/Page/Page.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$navigation-elements-height: rem(36px); +$navigation-elements-height: 36px; $title-height: line-height(display-large, large-screen); $stacking-order: ( title: 10, diff --git a/src/components/Page/components/Header/Header.scss b/src/components/Page/components/Header/Header.scss index da50e68044e..d387ddc47b9 100644 --- a/src/components/Page/components/Header/Header.scss +++ b/src/components/Page/components/Header/Header.scss @@ -5,7 +5,7 @@ $button-style-breakpoint: 768px; $medium-layout: 860px; $desktop-layout: 1080px; $individual-action-padding-x: calc(1.5 * var(--p-space-2)); -$action-menu-rollup-computed-width: rem(40px); +$action-menu-rollup-computed-width: 40px; .Header { @include page-header-layout; diff --git a/src/components/Page/components/Header/components/Title/Title.scss b/src/components/Page/components/Header/components/Title/Title.scss index 3d3eea716e7..1154c4b99ff 100644 --- a/src/components/Page/components/Header/components/Title/Title.scss +++ b/src/components/Page/components/Header/components/Title/Title.scss @@ -3,11 +3,11 @@ .Title { @include text-breakword; @include text-emphasis-strong; - font-size: rem(24px); - line-height: rem(28px); + font-size: 24px; + line-height: 28px; @include when-typography-not-condensed { - font-size: rem(20px); + font-size: 20px; } } diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 7bf5d4eb18e..28b5b58c20f 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -1,10 +1,10 @@ @import '../../styles/common'; -$arrow-size: rem(14px); -$visible-portion-of-arrow: rem(5px); -$content-max-height: rem(500px); -$content-max-width: rem(400px); -$vertical-motion-offset: rem(-5px); +$arrow-size: 14px; +$visible-portion-of-arrow: 5px; +$content-max-height: 500px; +$content-max-width: 400px; +$vertical-motion-offset: -5px; .Popover { max-width: calc(100vw - 2 * var(--p-space-4)); diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss index a439cb7e492..011fd12e0ec 100644 --- a/src/components/ProgressBar/ProgressBar.scss +++ b/src/components/ProgressBar/ProgressBar.scss @@ -3,9 +3,9 @@ @function progress-bar-height($height: base) { $base: 16px; $data: ( - small: rem($base / 2), - base: rem($base), - large: rem($base * 2), + small: $base / 2, + base: $base, + large: $base * 2, ); @return map-get($data, $height); diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss index 6eb61a62871..7636c10d1ba 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/RadioButton/RadioButton.scss @@ -70,7 +70,7 @@ transform var(--p-duration-100) var(--p-ease); @media (forced-colors: active) { - @include high-contrast-border(rem(5px)); + @include high-contrast-border(5px); } } diff --git a/src/components/RangeSlider/RangeSlider.scss b/src/components/RangeSlider/RangeSlider.scss index ea8df9a3abf..7eeb31e47e2 100644 --- a/src/components/RangeSlider/RangeSlider.scss +++ b/src/components/RangeSlider/RangeSlider.scss @@ -1,4 +1,4 @@ -$range-track-height: rem(4px); +$range-track-height: 4px; $range-thumb-size: var(--p-range-slider-thumb-size-base); @mixin track-dashed { diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index 5e9193b807d..9c031fd0a8b 100644 --- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss +++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss @@ -1,9 +1,9 @@ @import '../../../../styles/common'; @import '../../RangeSlider'; -$range-wrapper: rem(28px); +$range-wrapper: 28px; -$range-thumb-border-error: rem(2px) solid var(--p-border-critical); +$range-thumb-border-error: 2px solid var(--p-border-critical); .Wrapper { --pc-input: 10; @@ -105,8 +105,8 @@ $range-thumb-border-error: rem(2px) solid var(--p-border-critical); } } -$range-output-size: rem(32px); -$range-output-spacing: rem(16px); +$range-output-size: 32px; +$range-output-spacing: 16px; .Prefix { flex: 0 0 auto; diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index ab9518d45d0..28340a31db9 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -124,7 +124,7 @@ &:focus { @include range-thumb-selectors { border-color: var(--p-surface); - box-shadow: 0 0 0 rem(2px) var(--p-focused); + box-shadow: 0 0 0 2px var(--p-focused); } @include high-contrast-outline; @@ -155,12 +155,12 @@ } /// Output value indicator -$range-output-size: rem(32px); +$range-output-size: 32px; $range-output-translate-x: calc( -50% + var(--Polaris-RangeSlider-output-factor) * #{$range-thumb-size} ); -$range-output-spacing: rem(16px); +$range-output-spacing: 16px; .Output { position: absolute; diff --git a/src/components/ResourceItem/ResourceItem.scss b/src/components/ResourceItem/ResourceItem.scss index 0a6f54c8021..3154db789da 100644 --- a/src/components/ResourceItem/ResourceItem.scss +++ b/src/components/ResourceItem/ResourceItem.scss @@ -2,14 +2,14 @@ // translate-offset equals handle-width - padding $resource-list-item-variables: ( - padding: rem(12px), - control-indent: -1 * rem(12px), - min-height: rem(44px), - handle-width: rem(48px), - disclosure-width: rem(48px), + padding: 12px, + control-indent: -1 * 12px, + min-height: 44px, + handle-width: 48px, + disclosure-width: 48px, clickable-stacking-order: 1, content-stacking-order: 2, - actions-height: rem(56px), + actions-height: 56px, breakpoint-small: 458px, ); @@ -34,7 +34,7 @@ $resource-list-item-variables: ( } .ResourceItem { - --p-translate-offset: calc(#{rem(48px)} - #{rem(12px)} + var(--p-space-1)); + --p-translate-offset: calc(48px - 12px + var(--p-space-1)); position: relative; outline: none; cursor: pointer; @@ -258,14 +258,14 @@ $resource-list-item-variables: ( .ListItem { position: relative; - @include focus-ring($border-width: rem(-1px)); + @include focus-ring($border-width: -1px); .ListItem + & { border-top: border('divider'); } &::after { - border-radius: rem(2px); + border-radius: 2px; } &:last-of-type { @@ -292,6 +292,6 @@ $resource-list-item-variables: ( // stylelint-disable-next-line selector-max-class, selector-max-specificity, selector-max-combinators * + ul > &:first-of-type.focused::after { - top: rem(1px); + top: 1px; } } diff --git a/src/components/ResourceList/ResourceList.scss b/src/components/ResourceList/ResourceList.scss index cb31923dfde..7668666c7e3 100644 --- a/src/components/ResourceList/ResourceList.scss +++ b/src/components/ResourceList/ResourceList.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; @import './variables'; -$item-wrapper-loading-height: rem(64px); +$item-wrapper-loading-height: 64px; @mixin disabled-pointer-events { pointer-events: none; diff --git a/src/components/ResourceList/_variables.scss b/src/components/ResourceList/_variables.scss index 79dd4f87e3b..6b3dbe8bf05 100644 --- a/src/components/ResourceList/_variables.scss +++ b/src/components/ResourceList/_variables.scss @@ -1,8 +1,8 @@ $resource-list-variables: ( breakpoint-small: 458px, - header-min-height: rem(56px), - header-padding-small: rem(12px), - header-vertical-padding: rem(10px), + header-min-height: 56px, + header-padding-small: 12px, + header-vertical-padding: 10px, header-content-min-height: control-height(), list-stacking-order: 1, content-wrapper-stacking-order: 1, diff --git a/src/components/Scrollable/Scrollable.scss b/src/components/Scrollable/Scrollable.scss index f428b320a83..25f177064e2 100644 --- a/src/components/Scrollable/Scrollable.scss +++ b/src/components/Scrollable/Scrollable.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$shadow-size: rem(20px); +$shadow-size: 20px; $shadow-bottom: inset 0 (-1 * $shadow-size) $shadow-size (-1 * $shadow-size) var(--p-hint-from-direct-light); $shadow-top: inset 0 $shadow-size $shadow-size (-1 * $shadow-size) diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index 7673668cbf3..6f830114beb 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -52,7 +52,7 @@ .InlineLabel { @include text-emphasis-subdued; - margin-right: rem(4px); + margin-right: 4px; white-space: nowrap; overflow: hidden; } @@ -100,7 +100,7 @@ border-radius: var(--p-border-radius-base); background-color: var(--p-surface); box-shadow: var(--p-button-drop-shadow); - @include focus-ring($border-width: rem(1px)); + @include focus-ring($border-width: 1px); // 'position' needs to sit below focus-ring since it will be overwritten // with relative when the focus ring style is 'base' // stylelint-disable-next-line order/properties-order diff --git a/src/components/SettingAction/SettingAction.scss b/src/components/SettingAction/SettingAction.scss index 78d3dd00fba..a6b40c1e5ee 100644 --- a/src/components/SettingAction/SettingAction.scss +++ b/src/components/SettingAction/SettingAction.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$feature-width: rem(350px); +$feature-width: 350px; .SettingAction { display: flex; diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss index 596f2960946..5a5a887cb4c 100644 --- a/src/components/Sheet/Sheet.scss +++ b/src/components/Sheet/Sheet.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$sheet-desktop-width: rem(380px); +$sheet-desktop-width: 380px; .Sheet { position: fixed; diff --git a/src/components/SkeletonBodyText/SkeletonBodyText.scss b/src/components/SkeletonBodyText/SkeletonBodyText.scss index a9f9f229ea9..8206d0815f0 100644 --- a/src/components/SkeletonBodyText/SkeletonBodyText.scss +++ b/src/components/SkeletonBodyText/SkeletonBodyText.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; -$body-text-height: rem(8px); -$body-text-line-height: rem(12px); +$body-text-height: 8px; +$body-text-line-height: 12px; $body-text-last-line-width: 80%; .SkeletonBodyText { diff --git a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss index aea6039d5c5..39834b5c94e 100644 --- a/src/components/SkeletonDisplayText/SkeletonDisplayText.scss +++ b/src/components/SkeletonDisplayText/SkeletonDisplayText.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$skeleton-display-text-max-width: rem(120px); +$skeleton-display-text-max-width: 120px; @mixin skeleton-display-text-height($size) { height: line-height($size); diff --git a/src/components/SkeletonPage/SkeletonPage.scss b/src/components/SkeletonPage/SkeletonPage.scss index 310a5ae84c3..2aef97a8a5b 100644 --- a/src/components/SkeletonPage/SkeletonPage.scss +++ b/src/components/SkeletonPage/SkeletonPage.scss @@ -1,9 +1,9 @@ @import '../../styles/common'; -$action-text-spacing: rem(24px); -$primary-action-button-height: rem(36px); -$primary-action-button-width: rem(100px); -$skeleton-display-text-max-width: rem(120px); +$action-text-spacing: 24px; +$primary-action-button-height: 36px; +$primary-action-button-width: 100px; +$skeleton-display-text-max-width: 120px; .Page { @include page-layout; @@ -47,18 +47,18 @@ $skeleton-display-text-max-width: rem(120px); .Title { @include text-emphasis-strong; - font-size: rem(24px); - line-height: rem(28px); + font-size: 24px; + line-height: 28px; @include when-typography-not-condensed { - font-size: rem(20px); + font-size: 20px; } } .SkeletonTitle { @include skeleton-content; max-width: $skeleton-display-text-max-width; - height: rem(28px); + height: 28px; } .PrimaryAction { diff --git a/src/components/Spinner/Spinner.scss b/src/components/Spinner/Spinner.scss index bda74dd9118..b5ce7ba0f8a 100644 --- a/src/components/Spinner/Spinner.scss +++ b/src/components/Spinner/Spinner.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; -$small-size: rem(20px); -$large-size: rem(44px); +$small-size: 20px; +$large-size: 44px; @keyframes loading { to { diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss index d3d2c00db66..fbb2a37cab8 100644 --- a/src/components/Tabs/Tabs.scss +++ b/src/components/Tabs/Tabs.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; -$item-min-height: rem(16px); -$item-min-width: rem(50px); +$item-min-height: 16px; +$item-min-width: 50px; $item-vertical-padding: $item-min-height / 2; $underline-height: border-width(thicker); $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss index 77878537243..33f90c8b48d 100644 --- a/src/components/Tag/Tag.scss +++ b/src/components/Tag/Tag.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; -$height: rem(28px); -$icon-size: rem(16px); +$height: 28px; +$icon-size: 16px; .Tag { display: inline-flex; diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 912c91abd77..946cf51e6cd 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -3,7 +3,7 @@ $textfield-backdrop-offset: -(border-width(thick)); $backdrop-horizontal-spacing: calc(var(--p-space-2) * 1.5); $addon-horizontal-spacing: 0.25em; -$spinner-icon-size: rem(12px); +$spinner-icon-size: 12px; $prefix-horizontal-spacing: var(--p-space-2); .TextField { @@ -237,7 +237,7 @@ $prefix-horizontal-spacing: var(--p-space-2); display: flex; align-self: stretch; flex-direction: column; - width: rem(22px); + width: 22px; cursor: pointer; } diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss index 9be206f6f84..6553aa77eea 100644 --- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss +++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss @@ -1,6 +1,6 @@ @import '../../../../styles/common'; -$content-max-width: rem(200px); +$content-max-width: 200px; .TooltipOverlay { --p-offset-from-activator: var(--p-space-1); diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss index 6ec54d49092..7590b6fe50f 100644 --- a/src/components/TopBar/TopBar.scss +++ b/src/components/TopBar/TopBar.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; @import './variables'; -$icon-size: rem(20px); +$icon-size: 20px; $page-left-alignment-breakpoint-max: 1238px; $context-control-expand-after: 1400px; @@ -63,7 +63,7 @@ $context-control-expand-after: 1400px; @include unstyled-button; position: relative; align-self: center; - margin-left: calc(var(--p-space-2) + #{rem(2px)}); + margin-left: calc(var(--p-space-2) + 2px); margin-right: var(--p-space-2); padding: var(--p-space-2); border-radius: border-radius(); diff --git a/src/components/TopBar/_variables.scss b/src/components/TopBar/_variables.scss index 08143a2f99d..f4e394fbe84 100644 --- a/src/components/TopBar/_variables.scss +++ b/src/components/TopBar/_variables.scss @@ -3,7 +3,7 @@ $stacking-order: ( search: 20, ); -$search-max-width: rem(580px); +$search-max-width: 580px; // TODO: Replace `$large-width` breakpoints with // `page-content-when-not-partially-condensed` diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index 3d1a04eec7b..1789355eb12 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -1,7 +1,7 @@ @import '../../../../styles/common'; $activator-variables: ( - min-width: rem(36px), + min-width: 36px, transition: ( background-color 0.1s, ), @@ -27,7 +27,7 @@ $activator-variables: ( justify-content: center; align-items: center; min-width: menu(min-width); - padding: rem(6px) var(--p-space-2); + padding: 6px var(--p-space-2); border: 0; cursor: pointer; transition: menu(transition); diff --git a/src/components/TopBar/components/Menu/components/Message/Message.scss b/src/components/TopBar/components/Menu/components/Message/Message.scss index 67a7ff36bb0..1d16f95a0fc 100644 --- a/src/components/TopBar/components/Menu/components/Message/Message.scss +++ b/src/components/TopBar/components/Menu/components/Message/Message.scss @@ -1,6 +1,6 @@ @import '../../../../../../styles/common'; -$section-max-width: rem(325px); +$section-max-width: 325px; .Section { max-width: $section-max-width; diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss index 59251cd3c3c..2430a7b7c95 100644 --- a/src/components/TopBar/components/SearchField/SearchField.scss +++ b/src/components/TopBar/components/SearchField/SearchField.scss @@ -1,9 +1,9 @@ @import '../../../../styles/common'; @import '../../variables'; -$icon-size: rem(20px); -$input-height: rem(34px); -$new-input-height: rem(36px); +$icon-size: 20px; +$input-height: 34px; +$new-input-height: 36px; $search-icon-width: calc(#{$icon-size} + var(--p-space-4)); .SearchField { diff --git a/src/components/TopBar/components/UserMenu/UserMenu.scss b/src/components/TopBar/components/UserMenu/UserMenu.scss index 2fa92b4f5b1..1e4e4151cc0 100644 --- a/src/components/TopBar/components/UserMenu/UserMenu.scss +++ b/src/components/TopBar/components/UserMenu/UserMenu.scss @@ -1,7 +1,7 @@ @import '../../../../styles/common'; .Details { - max-width: rem(160px); + max-width: 160px; margin-left: var(--p-space-2); @include breakpoint-before(layout-width(page-with-nav), false) { diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index 4db8a0a4842..6e11d037dcd 100644 --- a/src/components/VideoThumbnail/VideoThumbnail.scss +++ b/src/components/VideoThumbnail/VideoThumbnail.scss @@ -1,6 +1,6 @@ @import '../../styles/common'; -$start-button-size: rem(60px); -$progress-bar-height: rem(6px); +$start-button-size: 60px; +$progress-bar-height: 6px; .Thumbnail { position: relative; @@ -51,10 +51,10 @@ $progress-bar-height: rem(6px); position: absolute; top: 50%; left: 50%; - width: rem($start-button-size); - height: rem($start-button-size); - margin-top: rem(-$start-button-size / 2); - margin-left: rem(-$start-button-size / 2); + width: $start-button-size; + height: $start-button-size; + margin-top: -$start-button-size / 2; + margin-left: -$start-button-size / 2; } .Timestamp { diff --git a/src/styles/foundation/_border-width.scss b/src/styles/foundation/_border-width.scss index 08d9a594428..1a4dfec15e1 100644 --- a/src/styles/foundation/_border-width.scss +++ b/src/styles/foundation/_border-width.scss @@ -1,7 +1,7 @@ $border-width-data: ( - base: rem(1px), - thick: rem(2px), - thicker: rem(3px), + base: 1px, + thick: 2px, + thicker: 3px, ); /// Returns the width of the specified border type. diff --git a/src/styles/foundation/_focus-ring.scss b/src/styles/foundation/_focus-ring.scss index ce3e88c7c5a..60b82c1c8fd 100644 --- a/src/styles/foundation/_focus-ring.scss +++ b/src/styles/foundation/_focus-ring.scss @@ -8,15 +8,11 @@ /// @mixin focus-ring($size: 'base', $border-width: 0, $style: 'base') { - $stroke: rem(2px); + $stroke: 2px; // calc does not like performing addition with a unitless number (`0`, NOT `0px`) - // This is a problem because `rem(0px)` returns `0`, not `0px`. + // This is a problem because `0px` returns `0`, not `0px`. // Make sure that we can handle unitless zeros by not trying to do math with them - $offset: if( - $border-width == 0, - rem(1px), - calc(#{$border-width} + #{rem(1px)}) - ); + $offset: if($border-width == 0, 1px, calc(#{$border-width} + 1px)); $border-radius: if( $size == 'wide', var(--p-border-radius-wide), @@ -39,7 +35,7 @@ pointer-events: none; box-shadow: 0 0 0 $negative-offset var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); - border-radius: calc(#{$border-radius} + #{rem(1px)}); + border-radius: calc(#{$border-radius} + 1px); } } @else if $style == 'focused' { &::after { diff --git a/src/styles/foundation/_layout.scss b/src/styles/foundation/_layout.scss index 11713b5f76d..4abcc97c1a4 100644 --- a/src/styles/foundation/_layout.scss +++ b/src/styles/foundation/_layout.scss @@ -1,8 +1,8 @@ $navigation-width: 240px !default; // @TODO simplify media queries so this isn't needed -$dangerous-magic-space-4: rem(16px); -$dangerous-magic-space-5: rem(20px); -$dangerous-magic-space-8: rem(32px); +$dangerous-magic-space-4: 16px; +$dangerous-magic-space-5: 20px; +$dangerous-magic-space-8: 32px; //// /// Layout @@ -11,28 +11,28 @@ $dangerous-magic-space-8: rem(32px); $layout-width-data: ( primary: ( - min: rem(480px), - max: rem(662px), + min: 480px, + max: 662px, ), secondary: ( - min: rem(240px), - max: rem(320px), + min: 240px, + max: 320px, ), one-half-width: ( - base: rem(450px), + base: 450px, ), one-third-width: ( - base: rem(240px), + base: 240px, ), nav: ( - base: rem($navigation-width), + base: $navigation-width, ), page-with-nav: ( - base: rem(769px), + base: 769px, ), page-content: ( - not-condensed: rem(680px), - partially-condensed: rem(450px), + not-condensed: 680px, + partially-condensed: 450px, ), inner-spacing: ( base: $dangerous-magic-space-4, @@ -60,13 +60,13 @@ $layout-width-data: ( $dismiss-icon-size: 32px; @function top-bar-height() { - @return rem(56px); + @return 56px; } @function mobile-nav-width() { - @return calc(100vw - #{rem($dismiss-icon-size) + $dangerous-magic-space-8}); + @return calc(100vw - #{$dismiss-icon-size} + #{$dangerous-magic-space-8}); } @function nav-min-window-corrected() { - @return rem(769px); + @return 769px; } diff --git a/src/styles/foundation/_typography.scss b/src/styles/foundation/_typography.scss index 3bf7f551537..5dd77e6e7e1 100644 --- a/src/styles/foundation/_typography.scss +++ b/src/styles/foundation/_typography.scss @@ -19,89 +19,89 @@ $font-family-data: ( $line-height-data: ( caption: ( - base: rem(20px), - large-screen: rem(16px), + base: 20px, + large-screen: 16px, ), heading: ( - base: rem(24px), + base: 24px, ), subheading: ( - base: rem(16px), + base: 16px, ), input: ( - base: rem(24px), + base: 24px, ), body: ( - base: rem(20px), + base: 20px, ), button: ( - base: rem(16px), + base: 16px, ), button-large: ( - base: rem(20px), + base: 20px, ), display-x-large: ( - base: rem(36px), - large-screen: rem(44px), + base: 36px, + large-screen: 44px, ), display-large: ( - base: rem(28px), - large-screen: rem(32px), + base: 28px, + large-screen: 32px, ), display-medium: ( - base: rem(28px), - large-screen: rem(32px), + base: 28px, + large-screen: 32px, ), display-small: ( - base: rem(24px), - large-screen: rem(28px), + base: 24px, + large-screen: 28px, ), ); $font-size-data: ( caption: ( - base: rem(13px), - large-screen: rem(12px), + base: 13px, + large-screen: 12px, ), heading: ( - base: rem(17px), - large-screen: rem(16px), + base: 17px, + large-screen: 16px, ), subheading: ( - base: rem(13px), - large-screen: rem(12px), + base: 13px, + large-screen: 12px, ), input: ( - base: rem(16px), - large-screen: rem(14px), + base: 16px, + large-screen: 14px, ), body: ( - base: rem(15px), - large-screen: rem(14px), + base: 15px, + large-screen: 14px, ), button: ( - base: rem(15px), - large-screen: rem(14px), + base: 15px, + large-screen: 14px, ), button-large: ( - base: rem(17px), - large-screen: rem(16px), + base: 17px, + large-screen: 16px, ), display-x-large: ( - base: rem(27px), - large-screen: rem(42px), + base: 27px, + large-screen: 42px, ), display-large: ( - base: rem(24px), - large-screen: rem(28px), + base: 24px, + large-screen: 28px, ), display-medium: ( - base: rem(21px), - large-screen: rem(26px), + base: 21px, + large-screen: 26px, ), display-small: ( - base: rem(16px), - large-screen: rem(20px), + base: 16px, + large-screen: 20px, ), ); diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index aba6b3cb0fe..d4cc746546c 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -6,7 +6,7 @@ @mixin button-base { $min-height: control-height(); - $vertical-padding: ($min-height - line-height(body) - rem(2px)) / 2; + $vertical-padding: ($min-height - line-height(body) - 2px) / 2; @include recolor-icon(var(--p-icon)); @include focus-ring($border-width: border-width('base')); diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 06f98e70c0a..e64006a7367 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -1,13 +1,13 @@ @function control-height() { - @return rem(36px); + @return 36px; } @function control-slim-height() { - @return rem(28px); + @return 28px; } @function control-vertical-padding() { - @return (control-height() - line-height(input) - rem(2px)) / 2; + @return (control-height() - line-height(input) - 2px) / 2; } @function control-icon-transition() { diff --git a/src/styles/shared/_icons.scss b/src/styles/shared/_icons.scss index aae95dc0793..42fe91fbebc 100644 --- a/src/styles/shared/_icons.scss +++ b/src/styles/shared/_icons.scss @@ -1,5 +1,5 @@ @function icon-size() { - @return rem(20px); + @return 20px; } @mixin recolor-icon( diff --git a/src/styles/shared/_interaction-state.scss b/src/styles/shared/_interaction-state.scss index 6e872cbf8a2..2cfe1a4ea18 100644 --- a/src/styles/shared/_interaction-state.scss +++ b/src/styles/shared/_interaction-state.scss @@ -15,11 +15,11 @@ ); @if $state == 'focused' { - box-shadow: inset rem(2px) 0 0 var(--p-focused); + box-shadow: inset 2px 0 0 var(--p-focused); } @if $state == 'focused-destructive' { - box-shadow: inset rem(2px) 0 0 var(--p-focused); + box-shadow: inset 2px 0 0 var(--p-focused); } } background-image: $backgrounds; diff --git a/src/styles/shared/_skeleton.scss b/src/styles/shared/_skeleton.scss index 516ea2599bd..bc3e71654f4 100644 --- a/src/styles/shared/_skeleton.scss +++ b/src/styles/shared/_skeleton.scss @@ -1,7 +1,7 @@ // Used by both Thumbnail and SkeletonThumbnail -$small-thumbnail-size: rem(40px); -$medium-thumbnail-size: rem(60px); -$large-thumbnail-size: rem(80px); +$small-thumbnail-size: 40px; +$medium-thumbnail-size: 60px; +$large-thumbnail-size: 80px; $thumbnail-sizes: ( small: $small-thumbnail-size,