From ad86f56b6e0dd94dcb81ed085d34e08a3b7c32d6 Mon Sep 17 00:00:00 2001 From: Ates Goral Date: Fri, 9 Jul 2021 13:15:48 -0400 Subject: [PATCH 1/3] Upgrade to dart-sass --- package.json | 2 +- yarn.lock | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 6298d4b0735..6785c29e63b 100644 --- a/package.json +++ b/package.json @@ -134,7 +134,7 @@ "marked": "^0.7.0", "mutationobserver-shim": "^0.3.3", "node-cmd": "^3.0.0", - "node-sass": "^4.12.0", + "sass": "^1.35.2", "npm-run-all": "^4.1.5", "object-hash": "^1.3.1", "postcss": "^7.0.18", diff --git a/yarn.lock b/yarn.lock index 5e5f32d30d9..f4255f8c251 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4681,6 +4681,14 @@ anymatch@^3.0.3, anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" +anymatch@~3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" + integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + apollo-codegen-core@0.36.5: version "0.36.5" resolved "https://registry.yarnpkg.com/apollo-codegen-core/-/apollo-codegen-core-0.36.5.tgz#9941058b39e61e54757c3aa9783c143670f4a3f5" @@ -6502,6 +6510,21 @@ chokidar@*, chokidar@^3.3.1, chokidar@^3.4.1: optionalDependencies: fsevents "~2.1.2" +"chokidar@>=3.0.0 <4.0.0": + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + chokidar@^2.0.4, chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -9646,7 +9669,7 @@ fsevents@^2.1.2, fsevents@~2.1.2: resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e" integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ== -fsevents@~2.3.1: +fsevents@~2.3.1, fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== @@ -9845,6 +9868,13 @@ glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0: dependencies: is-glob "^4.0.1" +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + glob-promise@^3.4.0: version "3.4.0" resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.4.0.tgz#b6b8f084504216f702dc2ce8c9bc9ac8866fdb20" @@ -13854,7 +13884,7 @@ node-releases@^1.1.69: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.69.tgz#3149dbde53b781610cd8b486d62d86e26c3725f6" integrity sha512-DGIjo79VDEyAnRlfSqYTsy+yoHd2IOjJiKUozD2MV2D85Vso6Bug56mb9tT/fY5Urt0iqk01H7x+llAruDR2zA== -node-sass@^4.12.0, node-sass@^4.13.0: +node-sass@^4.13.0: version "4.14.1" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5" integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g== @@ -16316,6 +16346,13 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + realpath-native@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866" @@ -17013,6 +17050,13 @@ sass-resources-loader@^2.0.1: glob "^7.1.6" loader-utils "^2.0.0" +sass@^1.35.2: + version "1.35.2" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.35.2.tgz#b732314fcdaf7ef8d0f1698698adc378043cb821" + integrity sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw== + dependencies: + chokidar ">=3.0.0 <4.0.0" + sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" From 26dedf6f9f915fe0bb81ecc9ac0b3a3e8765338f Mon Sep 17 00:00:00 2001 From: Ates Goral Date: Fri, 9 Jul 2021 18:27:37 -0400 Subject: [PATCH 2/3] Update Rollup plugin --- config/rollup/plugin-styles.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/config/rollup/plugin-styles.js b/config/rollup/plugin-styles.js index 4b4110ae7f6..959f6bad088 100644 --- a/config/rollup/plugin-styles.js +++ b/config/rollup/plugin-styles.js @@ -2,7 +2,7 @@ import path from 'path'; import {promisify} from 'util'; import {createFilter} from '@rollup/pluginutils'; -import nodeSass from 'node-sass'; +import sass from 'sass'; import postcss from 'postcss'; import cssModules from 'postcss-modules'; @@ -22,7 +22,7 @@ export function styles({ const filter = createFilter(include, exclude); - const renderSass = promisify(nodeSass.render); + const renderSass = promisify(sass.render); const styleProcessor = postcss([ cssModules({ @@ -147,7 +147,6 @@ export function styles({ const sassOutput = await renderSass({ data: source, - outputStyle: 'compact', includePaths: [path.dirname(id)], }).then((result) => result.css.toString()); From 38d1786c94d968e5c92a31c2ae1c5798a72f30f7 Mon Sep 17 00:00:00 2001 From: Ates Goral Date: Fri, 9 Jul 2021 18:29:01 -0400 Subject: [PATCH 3/3] Divison migrations --- src/components/ActionList/ActionList.scss | 2 +- src/components/AppProvider/AppProvider.scss | 4 +++- src/components/Avatar/Avatar.scss | 4 ++-- src/components/Badge/Badge.scss | 2 +- src/components/Breadcrumbs/Breadcrumbs.scss | 2 +- src/components/Button/Button.scss | 10 +++++----- .../CheckableButton/CheckableButton.scss | 4 ++-- src/components/ColorPicker/ColorPicker.scss | 4 +++- src/components/DatePicker/DatePicker.scss | 4 +++- .../DropZone/components/FileUpload/FileUpload.scss | 2 +- src/components/KeyboardKey/KeyboardKey.scss | 2 +- src/components/Layout/Layout.scss | 4 +++- .../OptionList/components/Option/Option.scss | 2 +- src/components/Page/components/Header/Header.scss | 4 ++-- src/components/ProgressBar/ProgressBar.scss | 2 +- .../components/DualThumb/DualThumb.scss | 4 ++-- .../components/SingleThumb/SingleThumb.scss | 6 +++--- src/components/Tabs/Tabs.scss | 2 +- src/components/VideoThumbnail/VideoThumbnail.scss | 8 +++++--- src/styles/foundation/_colors.scss | 8 +++++--- src/styles/foundation/_typography.scss | 2 +- src/styles/foundation/_utilities.scss | 14 ++++++++------ src/styles/shared/_buttons.scss | 2 +- src/styles/shared/_controls.scss | 2 +- 24 files changed, 57 insertions(+), 43 deletions(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index 48d684bc359..9d22c222921 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -2,7 +2,7 @@ $image-size: rem(20px); $item-min-height: rem(40px); -$item-vertical-padding: ($item-min-height - line-height(body)) / 2; +$item-vertical-padding: ($item-min-height - line-height(body)) * 0.5; .ActionList { list-style: none; diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss index 4318ecc1a31..51921ae6ec8 100644 --- a/src/components/AppProvider/AppProvider.scss +++ b/src/components/AppProvider/AppProvider.scss @@ -2,6 +2,8 @@ // polaris-react. As the AppProvider is a required wrapper when using polaris // components then this css shall always be present. +@use "sass:math"; + @import '../../styles/common'; :root { @@ -32,7 +34,7 @@ button { html { position: relative; - font-size: ($base-font-size / $default-browser-font-size) * 100%; + font-size: math.div($base-font-size, $default-browser-font-size) * 100%; -webkit-font-smoothing: antialiased; // This needs to come after -webkit-font-smoothing diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss index 1b5e582b098..c41e063ca73 100644 --- a/src/components/Avatar/Avatar.scss +++ b/src/components/Avatar/Avatar.scss @@ -12,7 +12,7 @@ $large-size: rem(60px); max-width: 100%; background: var(--p-surface-neutral); color: var(--p-icon-subdued); - border-radius: $large-size / 2; + border-radius: $large-size * 0.5; user-select: none; @media (forced-colors: active) { @@ -78,7 +78,7 @@ $large-size: rem(60px); width: 100%; height: 100%; background-color: var(--p-background); - border-radius: $large-size / 2; + border-radius: $large-size * 0.5; transform: translate(-50%, -50%); object-fit: cover; } diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index e21eaff5069..727ca9ddff1 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -7,7 +7,7 @@ $horizontal-padding: spacing(tight); $vertical-padding: rem(3px); $pip-size: rem(10px); -$pip-spacing: ($height - $pip-size) / 2; +$pip-spacing: ($height - $pip-size) * 0.5; .Badge { --p-component-badge-pip-color: var(--p-icon); diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss index 516ff89e9a3..d286a00b322 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.scss +++ b/src/components/Breadcrumbs/Breadcrumbs.scss @@ -13,7 +13,7 @@ $icon-size: rem(20px); color: var(--p-text-subdued); text-decoration: none; margin: 0; - padding: spacing(extra-tight) / 2; + padding: spacing(extra-tight) * 0.5; border-radius: var(--p-border-radius-base); border: 1px solid var(--p-border-neutral-subdued); @include focus-ring($border-width: rem(1px)); diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index da54c0c9edc..580c2dc2b3f 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; +$vertical-padding: ($min-height - line-height(body) - rem(2px)) * 0.5; $slim-min-height: rem(28px); -$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2; +$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) * 0.5; $large-min-height: rem(44px); -$large-vertical-padding: ($large-min-height - line-height(body) - rem(2px)) / 2; +$large-vertical-padding: ($large-min-height - line-height(body) - rem(2px)) * 0.5; $spinner-size: rem(20px); $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent, @@ -107,8 +107,8 @@ $stacking-order: ( position: absolute; top: 50%; left: 50%; - margin-top: -($spinner-size / 2); - margin-left: -($spinner-size / 2); + margin-top: -($spinner-size * 0.5); + margin-left: -($spinner-size * 0.5); } .primary { diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss index 03bf3f8a887..0a14bf5c1dc 100644 --- a/src/components/CheckableButton/CheckableButton.scss +++ b/src/components/CheckableButton/CheckableButton.scss @@ -2,8 +2,8 @@ $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) - rem(2px)) * + 0.5; $control-size: rem(16px); $chekbox-label-margin: rem(20px); diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss index d9d4660f38c..90d0c19af0a 100644 --- a/src/components/ColorPicker/ColorPicker.scss +++ b/src/components/ColorPicker/ColorPicker.scss @@ -1,3 +1,5 @@ +@use "sass:list"; + @import '../../styles/common'; $picker-size: rem(160px); @@ -15,7 +17,7 @@ $stacking-order: ( var(--p-surface) 0% 25%, var(--p-surface-neutral-subdued) 0% 50% ) - 50% / #{spacing() spacing()}; + list.slash(50%, spacing() spacing()); } .ColorPicker { diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index 7e0244b4441..d2bc32fa4a5 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @import '../../styles/common'; $font-size: rem(12px); @@ -35,7 +37,7 @@ $range-end-border-radius: rem(30px); } .DayCell { - width: (100% / 7); + width: math.div(100%, 7); background: transparent; margin: 0; padding: 0; diff --git a/src/components/DropZone/components/FileUpload/FileUpload.scss b/src/components/DropZone/components/FileUpload/FileUpload.scss index 5c84fb39a7f..bbebed5312c 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.scss +++ b/src/components/DropZone/components/FileUpload/FileUpload.scss @@ -2,7 +2,7 @@ $fileupload-padding: rem(15px); $slim-min-height: rem(30px); -$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) / 2; +$slim-vertical-padding: ($slim-min-height - line-height(body) - rem(2px)) * 0.5; .FileUpload { padding: $fileupload-padding; diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss index f20cc4fb54f..5a22c1cee3f 100644 --- a/src/components/KeyboardKey/KeyboardKey.scss +++ b/src/components/KeyboardKey/KeyboardKey.scss @@ -6,7 +6,7 @@ $bottom-shadow-size: 2px; .KeyboardKey { display: inline-block; height: $key-base-height; - margin: 0 (spacing(extra-tight) / 2) $bottom-shadow-size; + margin: 0 (spacing(extra-tight) * 0.5) $bottom-shadow-size; padding: 0 spacing(extra-tight); background-color: var(--p-surface); box-shadow: 0 0 0 1px var(--p-border-subdued), diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index f06b29e041b..3523cac7d94 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -1,10 +1,12 @@ +@use "sass:math"; + @import '../../styles/common'; $secondary-basis: layout-width(secondary, min); $primary-basis: layout-width(primary, min); $one-half-basis: layout-width(one-half-width, base); $one-third-basis: layout-width(one-third-width, base); -$relative-size: $primary-basis / $secondary-basis; +$relative-size: math.div($primary-basis, $secondary-basis); .Layout { display: flex; diff --git a/src/components/OptionList/components/Option/Option.scss b/src/components/OptionList/components/Option/Option.scss index 0298a61e844..0894c277187 100644 --- a/src/components/OptionList/components/Option/Option.scss +++ b/src/components/OptionList/components/Option/Option.scss @@ -10,7 +10,7 @@ $control-vertical-adjustment: rem(2px); min-height: $min-height; text-align: left; border-radius: var(--p-border-radius-base); - margin-top: spacing(tight) / 2; + margin-top: spacing(tight) * 0.5; } .SingleSelectOption { diff --git a/src/components/Page/components/Header/Header.scss b/src/components/Page/components/Header/Header.scss index 96127f17c43..eba732af448 100644 --- a/src/components/Page/components/Header/Header.scss +++ b/src/components/Page/components/Header/Header.scss @@ -125,7 +125,7 @@ $action-menu-rollup-computed-width: rem(40px); // stylelint-disable-next-line selector-max-class .mobileView & { position: absolute; - top: spacing(loose) + (control-height() / 4); + top: spacing(loose) + (control-height() * 0.25); right: spacing(loose); margin-top: 0; @@ -136,7 +136,7 @@ $action-menu-rollup-computed-width: rem(40px); // stylelint-disable-next-line selector-max-class .mobileView.hasNavigation & { - top: control-height() / 2; + top: control-height() * 0.5; } @include print-hidden; diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss index 928265de67c..a25c17f5064 100644 --- a/src/components/ProgressBar/ProgressBar.scss +++ b/src/components/ProgressBar/ProgressBar.scss @@ -3,7 +3,7 @@ @function progress-bar-height($height: base) { $base: 16px; $data: ( - small: rem($base / 2), + small: rem($base * 0.5), base: rem($base), large: rem($base * 2), ); diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index 72d7963a869..9d18d2c396e 100644 --- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss +++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss @@ -131,7 +131,7 @@ $range-output-spacing: rem(16px); transition-property: opacity, visibility, bottom; transition-duration: var(--p-duration-1-5-0); transition-timing-function: var(--p-ease); - transform: translateX(calc(-50% + #{$range-thumb-size / 2})); + transform: translateX(calc(-50% + #{$range-thumb-size * 0.5})); .Thumbs:hover + &, .Thumbs:focus + & { @@ -169,7 +169,7 @@ $range-output-spacing: rem(16px); transform: translateY(-$range-output-spacing); @include page-content-when-not-partially-condensed { - transform: translateY(-($range-output-spacing / 2)); + transform: translateY(-($range-output-spacing * 0.5)); } } // stylelint-enable selector-max-specificity, selector-max-combinators, selector-max-class diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index 00c9d6b5442..adc1753e91c 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -111,11 +111,11 @@ $stacking-order: ( &::-ms-thumb { margin-top: 0; - transform: translateY($range-thumb-size / 5) scale(0.4); + transform: translateY($range-thumb-size * 0.2) scale(0.4); } &::-webkit-slider-thumb { - margin-top: -($range-thumb-size - $range-track-height) / 2; + margin-top: -($range-thumb-size - $range-track-height) * 0.5; } &:active { @@ -216,7 +216,7 @@ $range-output-spacing: rem(16px); transform: translateY(-$range-output-spacing); @include page-content-when-not-partially-condensed { - transform: translateY(-($range-output-spacing / 2)); + transform: translateY(-($range-output-spacing * 0.5)); } } @include high-contrast-outline; diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss index 5bb586bf6eb..3b0e6210ca9 100644 --- a/src/components/Tabs/Tabs.scss +++ b/src/components/Tabs/Tabs.scss @@ -2,7 +2,7 @@ $item-min-height: rem(16px); $item-min-width: rem(50px); -$item-vertical-padding: $item-min-height / 2; +$item-vertical-padding: $item-min-height * 0.5; $underline-height: border-width(thicker); $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index 4a53dab6c77..8d47e3d81c1 100644 --- a/src/components/VideoThumbnail/VideoThumbnail.scss +++ b/src/components/VideoThumbnail/VideoThumbnail.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + @import '../../styles/common'; $start-button-size: rem(60px); $progress-bar-height: rem(6px); @@ -5,7 +7,7 @@ $progress-bar-height: rem(6px); .Thumbnail { position: relative; // Accommodating 16:9 responsive block for video - padding-bottom: 9 / 16 * 100%; + padding-bottom: math.div(9, 16) * 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; @@ -53,8 +55,8 @@ $progress-bar-height: rem(6px); 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); + margin-top: rem(-$start-button-size * 0.5); + margin-left: rem(-$start-button-size * 0.5); } .Timestamp { diff --git a/src/styles/foundation/_colors.scss b/src/styles/foundation/_colors.scss index 25aef509719..3de0e2af50c 100644 --- a/src/styles/foundation/_colors.scss +++ b/src/styles/foundation/_colors.scss @@ -1,4 +1,6 @@ // stylelint-disable-next-line scss/partial-no-import +@use "sass:math"; + @import '../polaris-tokens/colors.color-map'; /// @@ -69,9 +71,9 @@ $color-palette-data: map-extend( $background: rgb(255, 255, 255); } - $red: red($background) * red($foreground) / 255; - $green: green($background) * green($foreground) / 255; - $blue: blue($background) * blue($foreground) / 255; + $red: math.div(red($background) * red($foreground), 255); + $green: math.div(green($background) * green($foreground), 255); + $blue: math.div(blue($background) * blue($foreground), 255); $opacity: opacity($foreground); $background-opacity: opacity($background); diff --git a/src/styles/foundation/_typography.scss b/src/styles/foundation/_typography.scss index e1e0bc4ae34..3bf7f551537 100644 --- a/src/styles/foundation/_typography.scss +++ b/src/styles/foundation/_typography.scss @@ -14,7 +14,7 @@ $font-family-data: ( Consolas, Liberation Mono, Menlo, - monospace !default}, + monospace}, ); $line-height-data: ( diff --git a/src/styles/foundation/_utilities.scss b/src/styles/foundation/_utilities.scss index 85c28bda793..1d5cd29fafe 100644 --- a/src/styles/foundation/_utilities.scss +++ b/src/styles/foundation/_utilities.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + $default-browser-font-size: 16px; $base-font-size: 10px; @@ -13,9 +15,9 @@ $base-font-size: 10px; } @else if $unit == 'rem' { @return $value; } @else if $unit == 'px' { - @return $value / $base-font-size * 1rem; + @return math.div($value, $base-font-size) * 1rem; } @else if $unit == 'em' { - @return $unit / 1em * 1rem; + @return math.div($unit, 1em) * 1rem; } @else { @error 'Value must be in px, em, or rem.'; } @@ -33,9 +35,9 @@ $base-font-size: 10px; } @else if $unit == 'px' { @return $value; } @else if $unit == 'em' { - @return ($value / 1em) * $base-font-size; + @return math.div($value, 1em) * $base-font-size; } @else if $unit == 'rem' { - @return ($value / 1rem) * $base-font-size; + @return math.div($value, 1rem) * $base-font-size; } @else { @error 'Value must be in rem, em, or px.'; } @@ -54,9 +56,9 @@ $base-font-size: 10px; } @else if $unit == 'em' { @return $value; } @else if $unit == 'rem' { - @return $value / 1rem * 1em * ($base-font-size / $default-browser-font-size); + @return math.div($value, 1rem) * 1em * math.div($base-font-size, $default-browser-font-size); } @else if $unit == 'px' { - @return $value / $default-browser-font-size * 1em; + @return math.div($value, $default-browser-font-size) * 1em; } @else { @error 'Value must be in px, rem, or em.'; } diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index e3152567d72..d293b850cd9 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) - rem(2px)) * 0.5; @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 050bbfbc0be..f94844e7e58 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -7,7 +7,7 @@ } @function control-vertical-padding() { - @return (control-height() - line-height(input) - rem(2px)) / 2; + @return (control-height() - line-height(input) - rem(2px)) * 0.5; } @function control-icon-transition() {