From 35e98fd98faa14bf32d3e75849525cf200df57b3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 2 Dec 2021 13:48:44 -0500 Subject: [PATCH 01/19] Clean up unnecessary interpolation Co-Authored-By: Kyle Durand <6844391+kyledurand@users.noreply.github.com> --- src/components/DropZone/DropZone.scss | 2 +- .../components/SingleThumb/SingleThumb.scss | 10 +++------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss index a41dc60bc38..fe82cbc1666 100755 --- a/src/components/DropZone/DropZone.scss +++ b/src/components/DropZone/DropZone.scss @@ -17,7 +17,7 @@ $dropzone-min-height-small: 50px; } @mixin set-border-radius { - border-radius: calc(var(--p-border-radius-1) + #{border-width()} + #{1px}); + border-radius: calc(var(--p-border-radius-1) + #{border-width()} + 1px); } .DropZone { diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index c2b8307637a..5b0a8088a48 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -61,9 +61,7 @@ var(--pc-single-thumb-progress-upper) 100%; @mixin rangeSliderThumbPosition($size) { - margin-top: calc( - -1 * (#{$size} - #{var(--pc-range-slider-track-height)}) / 2 - ); + margin-top: calc(-1 * (#{$size} - var(--pc-range-slider-track-height)) / 2); } &::-ms-tooltip { @@ -162,9 +160,7 @@ /// Output value indicator $range-output-size: 32px; $range-output-translate-x: calc( - -50% + var(--Polaris-RangeSlider-output-factor) * #{var( - --pc-range-slider-thumb-size - )} + -50% + var(--Polaris-RangeSlider-output-factor) * var(--pc-range-slider-thumb-size) ); $range-output-spacing: 16px; @@ -188,7 +184,7 @@ $range-output-spacing: 16px; opacity: 1; visibility: visible; bottom: calc( - #{var(--pc-range-slider-thumb-size)} + #{$range-thumb-size-difference} + var(--pc-range-slider-thumb-size) + #{$range-thumb-size-difference} ); } } From f20e930e547a59e4f25d715fbf688e7ac6af7245 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 2 Dec 2021 13:52:32 -0500 Subject: [PATCH 02/19] Rename border radius 50% token for clarity Co-Authored-By: Kyle Durand <6844391+kyledurand@users.noreply.github.com> --- src/components/Avatar/Avatar.scss | 4 ++-- src/components/Badge/Badge.scss | 2 +- src/components/ColorPicker/ColorPicker.scss | 2 +- src/components/ExceptionList/ExceptionList.scss | 2 +- src/components/Frame/Frame.scss | 2 +- src/components/Icon/Icon.scss | 2 +- src/components/Indicator/Indicator.scss | 2 +- src/components/MessageIndicator/MessageIndicator.scss | 2 +- src/components/README.md | 2 +- src/components/RadioButton/RadioButton.scss | 8 ++++---- .../RangeSlider/components/DualThumb/DualThumb.scss | 2 +- .../RangeSlider/components/SingleThumb/SingleThumb.scss | 2 +- src/tokens/_shape.ts | 2 +- 13 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss index 919dfb68a96..70e60e95679 100644 --- a/src/components/Avatar/Avatar.scss +++ b/src/components/Avatar/Avatar.scss @@ -12,7 +12,7 @@ max-width: 100%; background: var(--p-surface-neutral); color: var(--p-icon-subdued); - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); user-select: none; @media (forced-colors: active) { @@ -82,7 +82,7 @@ width: 100%; height: 100%; background-color: var(--p-background); - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); transform: translate(-50%, -50%); object-fit: cover; } diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index ef0b7749ed8..5e5d42babd6 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -71,7 +71,7 @@ var(--pc-badge-vertical-padding) - var(--pc-badge-pip-spacing) ); border: border-width(thick) solid currentColor; - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); flex-shrink: 0; } diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss index f99e2c8155b..031e89629d8 100644 --- a/src/components/ColorPicker/ColorPicker.scss +++ b/src/components/ColorPicker/ColorPicker.scss @@ -80,7 +80,7 @@ will-change: transform; background: transparent; border: var(--p-border-radius-1) solid var(--p-surface); - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); pointer-events: none; } diff --git a/src/components/ExceptionList/ExceptionList.scss b/src/components/ExceptionList/ExceptionList.scss index f921054f44a..affe939bbf9 100644 --- a/src/components/ExceptionList/ExceptionList.scss +++ b/src/components/ExceptionList/ExceptionList.scss @@ -41,7 +41,7 @@ .Bullet { width: 6px; height: 6px; - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); background-color: var(--p-icon-subdued); .statusWarning & { diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss index 15045add24b..0b3f4174248 100644 --- a/src/components/Frame/Frame.scss +++ b/src/components/Frame/Frame.scss @@ -83,7 +83,7 @@ margin: var(--p-space-4); padding: 0; border: none; - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); background: none; opacity: 0; pointer-events: none; diff --git a/src/components/Icon/Icon.scss b/src/components/Icon/Icon.scss index 2812695996a..c115a1eaa5a 100644 --- a/src/components/Icon/Icon.scss +++ b/src/components/Icon/Icon.scss @@ -26,7 +26,7 @@ bottom: calc(-1 * var(--p-space-1)); left: calc(-1 * var(--p-space-1)); right: calc(-1 * var(--p-space-1)); - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); } } diff --git a/src/components/Indicator/Indicator.scss b/src/components/Indicator/Indicator.scss index f2110ce7e3c..f841400a36b 100644 --- a/src/components/Indicator/Indicator.scss +++ b/src/components/Indicator/Indicator.scss @@ -13,7 +13,7 @@ $base-position: -4px; top: $base-position; width: $size; height: $size; - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); border: calc(#{$size} / 2) solid transparent; } } diff --git a/src/components/MessageIndicator/MessageIndicator.scss b/src/components/MessageIndicator/MessageIndicator.scss index 574094ab767..ec095dfd667 100644 --- a/src/components/MessageIndicator/MessageIndicator.scss +++ b/src/components/MessageIndicator/MessageIndicator.scss @@ -14,7 +14,7 @@ $indicator-position: -3px; right: $indicator-position; width: $indicator-size; height: $indicator-size; - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); background-color: var(--p-icon-highlight); border: solid 2px var(--p-background); } diff --git a/src/components/README.md b/src/components/README.md index 2467670f3dd..080c3dd01e2 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -108,7 +108,7 @@ Wrap your application in a div that contains the Polaris CSS variables. This is ```html
``` diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss index 444b94fea0f..b7e6001c8a7 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/RadioButton/RadioButton.scss @@ -14,7 +14,7 @@ // stylelint-disable-next-line selector-max-specificity, selector-max-class &::after { - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); } } @@ -50,7 +50,7 @@ width: 100%; height: 100%; border: var(--p-control-border-width) solid var(--p-border); - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); background-color: var(--p-surface); transition: border-color var(--p-duration-100) var(--p-ease); @@ -65,7 +65,7 @@ height: var(--p-icon-size); width: var(--p-icon-size); background-color: var(--p-interactive); - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); transition: opacity var(--p-duration-100) var(--p-ease), transform var(--p-duration-100) var(--p-ease); @@ -77,7 +77,7 @@ @include focus-ring($border-width: var(--p-control-border-width)); &::after { - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); } &.hover, diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index 5ebafe361f8..88625a66a2a 100644 --- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss +++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss @@ -84,7 +84,7 @@ $range-thumb-border-error: 2px solid var(--p-border-critical); padding: 0; width: var(--pc-range-slider-thumb-size); height: var(--pc-range-slider-thumb-size); - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); border: border-width() solid var(--p-interactive); background: linear-gradient(var(--p-interactive), var(--p-interactive)); -webkit-tap-highlight-color: transparent; diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index 5b0a8088a48..a7a9143586d 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -91,7 +91,7 @@ width: var(--pc-range-slider-thumb-size); height: var(--pc-range-slider-thumb-size); border: 1px solid transparent; - border-radius: var(--p-border-radius-6); + border-radius: var(--p-border-radius-half); background: linear-gradient(var(--p-interactive), var(--p-interactive)); box-shadow: 0 0 0 0 var(--p-focused); appearance: none; diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 4608a35d8dd..f6d79c9aa6c 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -7,5 +7,5 @@ export const shape: TokenGroup = { 'border-radius-3': '12px', 'border-radius-4': '16px', 'border-radius-5': '20px', - 'border-radius-6': '50%', + 'border-radius-half': '50%', }; From f3685a6bf7eb505d4c11152dff41a2f21da869fe Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Thu, 2 Dec 2021 13:54:47 -0500 Subject: [PATCH 03/19] Burn custom property in favor of token Co-Authored-By: Kyle Durand <6844391+kyledurand@users.noreply.github.com> --- src/components/IndexTable/IndexTable.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index 43391af8672..afb1df34afc 100644 --- a/src/components/IndexTable/IndexTable.scss +++ b/src/components/IndexTable/IndexTable.scss @@ -418,7 +418,6 @@ $loading-panel-height: 53px; $scroll-bar-size: var(--p-space-2); .ScrollBarContainer { - --pc-scroll-bar-container-border-radius: 4px; position: sticky; z-index: var(--pc-index-table-scroll-bar); bottom: 0; @@ -442,7 +441,7 @@ $scroll-bar-size: var(--p-space-2); } .ScrollBar::-webkit-scrollbar-track { - border-radius: var(--pc-scroll-bar-container-border-radius); + border-radius: var(--p-border-radius-1); background-color: transparent; } @@ -454,7 +453,7 @@ $scroll-bar-size: var(--p-space-2); } .ScrollBar::-webkit-scrollbar-thumb { - border-radius: var(--pc-scroll-bar-container-border-radius); + border-radius: var(--p-border-radius-1); background-color: var(--p-border-neutral-subdued); transition: background-color var(--p-duration-100) ease-out; } From 7d23d4be50e3030c7334e7004bdf32044be0dddd Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 09:00:50 -0500 Subject: [PATCH 04/19] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 0243d3c41d3..30cfcede9f5 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -26,6 +26,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed `nonDesignLangaugeCustomProperties` and `designLangaugeCustomProperties` ([#4770](https://github.com/Shopify/polaris-react/pull/4770)) - Removed the `rem()` scss function and any references ([#4761](https://github.com/Shopify/polaris-react/pull/4761/)) - Removed unnecessary `--p-border-radius-` properties and moved border-radius custom properties to tokens ([#4763](https://github.com/Shopify/polaris-react/pull/4763)) +- Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) ### New components From 2f46619312f1ab287dba3f3ffc4f62bc5dfe5a5f Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 09:47:23 -0500 Subject: [PATCH 05/19] Add temporary tokens to replace border-radius() values --- src/components/README.md | 2 +- src/tokens/_shape.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/README.md b/src/components/README.md index 080c3dd01e2..b9f6e0f6be4 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -108,7 +108,7 @@ Wrap your application in a div that contains the Polaris CSS variables. This is ```html
``` diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index f6d79c9aa6c..7adea86b5a6 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -2,7 +2,9 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', + 'border-radius-base': '3px', 'border-radius-1': '4px', + 'border-radius-large': '6px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px', From 8846cf9505b8501e48f0ee269429ce7b7305be1a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 09:50:03 -0500 Subject: [PATCH 06/19] Replace border-radius() with temp token --- src/components/ActionList/ActionList.scss | 2 +- .../Autocomplete/components/MappedAction/MappedAction.scss | 2 +- src/components/Banner/Banner.scss | 2 +- src/components/CheckableButton/CheckableButton.scss | 2 +- src/components/Frame/Frame.scss | 2 +- src/components/Link/Link.scss | 2 +- src/components/RangeSlider/components/DualThumb/DualThumb.scss | 2 +- .../RangeSlider/components/SingleThumb/SingleThumb.scss | 2 +- src/components/Tag/Tag.scss | 2 +- src/components/TextStyle/TextStyle.scss | 2 +- .../Tooltip/components/TooltipOverlay/TooltipOverlay.scss | 2 +- src/components/TopBar/TopBar.scss | 2 +- src/components/TopBar/components/Menu/Menu.scss | 2 +- src/styles/shared/_buttons.scss | 2 +- src/styles/shared/_skeleton.scss | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index 2fee5911670..947e8e78260 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -121,7 +121,7 @@ align-items: center; height: var(--pc-action-list-image-size); width: var(--pc-action-list-image-size); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); // We need the negative margin to ensure that the image does not set // the minimum height of the action item. diff --git a/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/src/components/Autocomplete/components/MappedAction/MappedAction.scss index d5c4827be91..d244029edd4 100644 --- a/src/components/Autocomplete/components/MappedAction/MappedAction.scss +++ b/src/components/Autocomplete/components/MappedAction/MappedAction.scss @@ -93,7 +93,7 @@ align-items: center; height: var(--pc-mapped-actions-image-size); width: var(--pc-mapped-actions-image-size); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); // We need the negative margin to ensure that the image does not set // the minimum height of the action item. diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 998d7c0d29e..bdfcff79b4b 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -169,7 +169,7 @@ } .withinPage { - border-radius: 0 0 border-radius() border-radius(); + border-radius: 0 0 var(--p-border-radius-base) var(--p-border-radius-base); padding: var(--p-space-5); @include banner-variants(true); diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss index 6f9daabbcfd..3f9faaa0414 100644 --- a/src/components/CheckableButton/CheckableButton.scss +++ b/src/components/CheckableButton/CheckableButton.scss @@ -60,7 +60,7 @@ $button-vertical-padding: ($button-min-height - line-height(body) - 2px) / 2; } &.CheckableButton-plain { - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); box-shadow: none; background: transparent; border: none; diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss index 0b3f4174248..de76dc036bb 100644 --- a/src/components/Frame/Frame.scss +++ b/src/components/Frame/Frame.scss @@ -99,7 +99,7 @@ &:focus { @include focus-ring($style: focused); position: absolute; - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); outline: none; } diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss index 0706b318df2..dcc8305db36 100644 --- a/src/components/Link/Link.scss +++ b/src/components/Link/Link.scss @@ -37,7 +37,7 @@ left: -5px; display: block; - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); } } diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index 88625a66a2a..b366bc81c8e 100644 --- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss +++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss @@ -161,7 +161,7 @@ $range-output-spacing: 16px; height: $range-output-size; background-color: var(--p-surface); box-shadow: var(--p-popover-shadow); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); transition-property: transform; transition-duration: var(--p-duration-150); transition-timing-function: var(--p-ease); diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index a7a9143586d..cf7b58e6212 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -197,7 +197,7 @@ $range-output-spacing: 16px; min-width: $range-output-size; height: $range-output-size; background-color: var(--p-surface); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); transition-property: transform; transition-duration: var(--p-duration-200); transition-timing-function: var(--p-ease); diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss index 6e3df3882e1..4d427a7d8d9 100644 --- a/src/components/Tag/Tag.scss +++ b/src/components/Tag/Tag.scss @@ -70,7 +70,7 @@ $icon-size: 16px; height: $height; width: $height; margin-left: var(--p-space-1); - border-radius: 0 border-radius() border-radius() 0; + border-radius: 0 var(--p-border-radius-base) var(--p-border-radius-base) 0; &:hover { background: var(--p-surface-neutral-hovered); diff --git a/src/components/TextStyle/TextStyle.scss b/src/components/TextStyle/TextStyle.scss index 30e8b155943..73da1ef7246 100644 --- a/src/components/TextStyle/TextStyle.scss +++ b/src/components/TextStyle/TextStyle.scss @@ -11,7 +11,7 @@ .variationCode { position: relative; padding: 0 var(--p-space-1); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); background-color: var(--p-surface-subdued); display: inline-block; font-size: 1.15em; diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss index ba34e7b1860..ddf0a17b9a9 100644 --- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss +++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss @@ -28,7 +28,7 @@ $content-max-width: 200px; .Content { position: relative; - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); background-color: var(--p-surface); color: var(--p-text); max-width: $content-max-width; diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss index 9eb4d582cf0..936e19ba2a5 100644 --- a/src/components/TopBar/TopBar.scss +++ b/src/components/TopBar/TopBar.scss @@ -66,7 +66,7 @@ $context-control-expand-after: 1400px; margin-left: calc(var(--p-space-2) + 2px); margin-right: var(--p-space-2); padding: var(--p-space-2); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); fill: var(--p-icon); // Icon will inherit this fill transition: var(--p-duration-150) fill var(--p-ease) 33ms; diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index e9cb4620fc9..15ece2a3e3e 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -32,7 +32,7 @@ $activator-variables: ( cursor: pointer; transition: menu(transition); margin-right: var(--p-space-2); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); &:focus { @include focus-ring($style: 'focused'); diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index dadefeb8179..36025c46051 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -209,7 +209,7 @@ padding: 2px 5px; margin: -2px -5px; background: var(--p-action-secondary-hovered); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); } @mixin unstyled-button() { diff --git a/src/styles/shared/_skeleton.scss b/src/styles/shared/_skeleton.scss index bc3e71654f4..9ce8666d002 100644 --- a/src/styles/shared/_skeleton.scss +++ b/src/styles/shared/_skeleton.scss @@ -25,7 +25,7 @@ $thumbnail-sizes: ( left: 0; display: block; background-color: var(--p-surface-neutral); - border-radius: border-radius(); + border-radius: var(--p-border-radius-base); @media screen and (-ms-high-contrast: active) { background-color: ms-high-contrast-color('disabled-text'); From 90b77e2a3a2049b452aac05d6ad6f97c463abd8a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 09:51:24 -0500 Subject: [PATCH 07/19] Replace border-radius(large) with temp token --- src/components/Modal/components/CloseButton/CloseButton.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/components/CloseButton/CloseButton.scss b/src/components/Modal/components/CloseButton/CloseButton.scss index 7df0a4c075b..55ff07b380a 100644 --- a/src/components/Modal/components/CloseButton/CloseButton.scss +++ b/src/components/Modal/components/CloseButton/CloseButton.scss @@ -6,7 +6,7 @@ margin-left: var(--p-space-5); margin-right: calc(-1 * var(--p-space-2)); padding: var(--p-space-2); - border-radius: border-radius(large); + border-radius: var(--p-border-radius-large); &:hover { background: var(--p-surface-hovered); From fd67727d78a67d26c328dc9ac755a14fef0fc807 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 09:55:13 -0500 Subject: [PATCH 08/19] Remove border-radius() function file and imports --- src/styles/_common.scss | 1 - src/styles/_public-api.scss | 1 - src/styles/foundation/_border-radius.scss | 12 ------------ 3 files changed, 14 deletions(-) delete mode 100644 src/styles/foundation/_border-radius.scss diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 9ef86230647..b35ab8dada4 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -8,7 +8,6 @@ @import './foundation/colors'; @import './foundation/border-width'; @import './foundation/borders'; -@import './foundation/border-radius'; @import './foundation/layout'; @import './foundation/shadows'; @import './foundation/typography'; diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss index f81aae032d9..7c87e041630 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -21,7 +21,6 @@ @import './foundation/spacing'; @import './foundation/border-width'; @import './foundation/borders'; -@import './foundation/border-radius'; @import './foundation/layout'; @import './foundation/shadows'; @import './foundation/typography'; diff --git a/src/styles/foundation/_border-radius.scss b/src/styles/foundation/_border-radius.scss deleted file mode 100644 index b2f8ba7c4c6..00000000000 --- a/src/styles/foundation/_border-radius.scss +++ /dev/null @@ -1,12 +0,0 @@ -$border-radius-data: ( - base: 3px, - large: 6px, -); - -/// Returns the border radius of the specified size. -/// @param {String} $size - The border radius’s size. -/// @return {Number} The border radius value. - -@function border-radius($size: base) { - @return map-get($border-radius-data, $size); -} From dbebdc9481cb2b227e3deb4a68e06ee8b31c841c Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 09:57:45 -0500 Subject: [PATCH 09/19] Test visual regression for changing border-radius-base from 3px to 2px --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 7adea86b5a6..18955fa1d24 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -2,7 +2,7 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', - 'border-radius-base': '3px', + 'border-radius-base': '2px', 'border-radius-1': '4px', 'border-radius-large': '6px', 'border-radius-2': '8px', From 35d116126c7889ee37b9b5994a6def9a2c51b01c Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 10:09:55 -0500 Subject: [PATCH 10/19] Make a huge change to see if regression testing is working --- src/tokens/_shape.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 18955fa1d24..164e855e28c 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -2,9 +2,9 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', - 'border-radius-base': '2px', + 'border-radius-base': '20px', 'border-radius-1': '4px', - 'border-radius-large': '6px', + 'border-radius-large': '60px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px', From 946a02693149658dcb115bedb72c3e66e040326f Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 10:18:28 -0500 Subject: [PATCH 11/19] Make an even more massive change just to double check regression testing --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 164e855e28c..5a4e47b87f8 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -3,7 +3,7 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', 'border-radius-base': '20px', - 'border-radius-1': '4px', + 'border-radius-1': '0', 'border-radius-large': '60px', 'border-radius-2': '8px', 'border-radius-3': '12px', From 2957878fb7aafcd995422d2e3effd96eaf60e5d3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 10:28:24 -0500 Subject: [PATCH 12/19] Revert all changes to for regression testing --- src/tokens/_shape.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 5a4e47b87f8..7adea86b5a6 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -2,9 +2,9 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', - 'border-radius-base': '20px', - 'border-radius-1': '0', - 'border-radius-large': '60px', + 'border-radius-base': '3px', + 'border-radius-1': '4px', + 'border-radius-large': '6px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px', From 6454eb60948d71e55a3eb0afe85a7c312fd68132 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 10:37:25 -0500 Subject: [PATCH 13/19] Test visual regression for changing border-radius-base from 3px to 2px --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 7adea86b5a6..18955fa1d24 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -2,7 +2,7 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', - 'border-radius-base': '3px', + 'border-radius-base': '2px', 'border-radius-1': '4px', 'border-radius-large': '6px', 'border-radius-2': '8px', From 19f83571bd0665fc70e60220ed5d0cb0fa395602 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 10:51:24 -0500 Subject: [PATCH 14/19] Test visual regression for changing border-radius-base from 3px to 4px --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 18955fa1d24..c2753e63e1c 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -2,7 +2,7 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', - 'border-radius-base': '2px', + 'border-radius-base': '4px', 'border-radius-1': '4px', 'border-radius-large': '6px', 'border-radius-2': '8px', From f6761819283da37f10ff574f13969245aa872dc0 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 12:08:58 -0500 Subject: [PATCH 15/19] Test visual regression for changing border-radius-large from 6px to 4px --- src/tokens/_shape.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index c2753e63e1c..2a937282ca9 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -2,9 +2,9 @@ import type {TokenGroup} from './tokens'; export const shape: TokenGroup = { 'border-radius-05': '2px', - 'border-radius-base': '4px', + 'border-radius-base': '3px', 'border-radius-1': '4px', - 'border-radius-large': '6px', + 'border-radius-large': '4px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px', From 65fd64f8b8934ea0ac942a6cd70279108b165e65 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 12:16:20 -0500 Subject: [PATCH 16/19] Test visual regression for changing border-radius-large from 6px to 4px --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 2a937282ca9..1dd36f102fb 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -4,7 +4,7 @@ export const shape: TokenGroup = { 'border-radius-05': '2px', 'border-radius-base': '3px', 'border-radius-1': '4px', - 'border-radius-large': '4px', + 'border-radius-large': '8px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px', From 3a30b9249eadf9f6ed12f24d63eef91f135b09c8 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 12:17:17 -0500 Subject: [PATCH 17/19] Revert "Test visual regression for changing border-radius-large from 6px to 4px" This reverts commit 65fd64f8b8934ea0ac942a6cd70279108b165e65. --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 1dd36f102fb..2a937282ca9 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -4,7 +4,7 @@ export const shape: TokenGroup = { 'border-radius-05': '2px', 'border-radius-base': '3px', 'border-radius-1': '4px', - 'border-radius-large': '8px', + 'border-radius-large': '4px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px', From 8d9558dee0316428c3cf62b34453771d661f0460 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 12:17:50 -0500 Subject: [PATCH 18/19] Test visual regression for changing border-radius-large from 6px to 8px --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 2a937282ca9..1dd36f102fb 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -4,7 +4,7 @@ export const shape: TokenGroup = { 'border-radius-05': '2px', 'border-radius-base': '3px', 'border-radius-1': '4px', - 'border-radius-large': '4px', + 'border-radius-large': '8px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px', From 77845560f6903fa1fb3375a86da82c51a06bdda1 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 3 Dec 2021 12:34:05 -0500 Subject: [PATCH 19/19] Revert all changes for regression testing --- src/tokens/_shape.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tokens/_shape.ts b/src/tokens/_shape.ts index 1dd36f102fb..7adea86b5a6 100644 --- a/src/tokens/_shape.ts +++ b/src/tokens/_shape.ts @@ -4,7 +4,7 @@ export const shape: TokenGroup = { 'border-radius-05': '2px', 'border-radius-base': '3px', 'border-radius-1': '4px', - 'border-radius-large': '8px', + 'border-radius-large': '6px', 'border-radius-2': '8px', 'border-radius-3': '12px', 'border-radius-4': '16px',