diff --git a/UNRELEASED-v8.md b/UNRELEASED-v9.md similarity index 98% rename from UNRELEASED-v8.md rename to UNRELEASED-v9.md index cd8eb01713a..f320f469294 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v9.md @@ -35,6 +35,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) - Removed the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938)) +- Removed the `border()` scss function ([#4934](https://github.com/Shopify/polaris-react/pull/4934)) - Removed the font-family() function and replaced any instances with tokens ([#4940](https://github.com/Shopify/polaris-react/pull/4940)) ### New components diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index 99b08dd50cd..5c5c73205e7 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -13,14 +13,14 @@ } .Section-withoutTitle:not(:first-child) { - border-top: border('divider'); + border-top: var(--p-border-divider); } .Actions { outline: none; list-style: none; margin: 0; - border-top: border('divider'); + border-top: var(--p-border-divider); padding: var(--p-space-2); } diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 972e57b1792..89d0c44cb48 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -53,7 +53,7 @@ } + .Section { - border-top: border('divider'); + border-top: var(--p-border-divider); @media print { border-top: 0; @@ -100,7 +100,7 @@ } .Header + & { - border-top: border('divider'); + border-top: var(--p-border-divider); margin-top: var(--p-space-5); } } @@ -123,7 +123,7 @@ + .Subsection { margin-top: var(--p-space-4); padding-top: var(--p-space-4); - border-top: border('divider'); + border-top: var(--p-border-divider); @media print { border-top: 0; @@ -150,7 +150,7 @@ } .Section-subdued + & { - border-top: border('divider'); + border-top: var(--p-border-divider); padding: var(--p-space-5); } } diff --git a/src/components/DataTable/DataTable.scss b/src/components/DataTable/DataTable.scss index 75383b9c72a..840a4e8f5df 100644 --- a/src/components/DataTable/DataTable.scss +++ b/src/components/DataTable/DataTable.scss @@ -62,7 +62,7 @@ $breakpoint: 768px; // stylelint-disable selector-max-class, selector-max-combinators .TableRow + .TableRow { .Cell { - border-top: border('divider'); + border-top: var(--p-border-divider); } } @@ -92,7 +92,7 @@ $breakpoint: 768px; .Cell-header { @include text-emphasis-normal; - border-bottom: border(dark); + border-bottom: var(--p-border-dark); border-top: 0; } @@ -166,11 +166,11 @@ $breakpoint: 768px; .Cell-total { @include text-emphasis-strong; background: var(--p-surface-subdued); - border-bottom: border(); + border-bottom: var(--p-border-base); } .Cell-total-footer { - border-top: border('divider'); + border-top: var(--p-border-divider); border-bottom: none; border-bottom-left-radius: var(--p-border-radius-1); border-bottom-right-radius: var(--p-border-radius-1); @@ -181,7 +181,7 @@ $breakpoint: 768px; background: var(--p-surface-subdued); color: var(--p-text-subdued); text-align: center; - border-top: border('divider'); + border-top: var(--p-border-divider); border-bottom-left-radius: var(--p-border-radius-1); border-bottom-right-radius: var(--p-border-radius-1); } diff --git a/src/components/DescriptionList/DescriptionList.scss b/src/components/DescriptionList/DescriptionList.scss index fb1e9e7c232..73f7dc96631 100644 --- a/src/components/DescriptionList/DescriptionList.scss +++ b/src/components/DescriptionList/DescriptionList.scss @@ -32,7 +32,7 @@ $breakpoint: 550px; // stylelint-disable-next-line selector-max-class, selector-max-combinators .Description + & + .Description { - border-top: border('divider'); + border-top: var(--p-border-divider); } } } @@ -46,7 +46,7 @@ $breakpoint: 550px; } + .Term { - border-top: border('divider'); + border-top: var(--p-border-divider); } @include page-content-breakpoint-after($breakpoint) { @@ -59,7 +59,7 @@ $breakpoint: 550px; // stylelint-disable-next-line selector-max-class, selector-max-combinators + .Term + .Description { - border-top: border('divider'); + border-top: var(--p-border-divider); } } } diff --git a/src/components/Filters/Filters.scss b/src/components/Filters/Filters.scss index 57c76783471..cfef67a89bd 100644 --- a/src/components/Filters/Filters.scss +++ b/src/components/Filters/Filters.scss @@ -19,7 +19,7 @@ $list-filters-footer-height: 70px; top: 0; width: 100%; padding: var(--p-space-4) var(--p-space-5); - border-bottom: border('divider'); + border-bottom: var(--p-border-divider); height: $list-filters-header-height; box-sizing: border-box; display: flex; @@ -46,7 +46,7 @@ $list-filters-footer-height: 70px; bottom: 0; width: 100%; padding: var(--p-space-4) var(--p-space-5); - border-top: border('divider'); + border-top: var(--p-border-divider); height: $list-filters-footer-height; box-sizing: border-box; display: flex; @@ -65,7 +65,7 @@ $list-filters-footer-height: 70px; } .EmptyFooterState { - border-top: border('divider'); + border-top: var(--p-border-divider); padding-top: var(--p-space-4); width: 100%; display: flex; diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index b40dbd8666b..8f1d82ae4b8 100644 --- a/src/components/IndexTable/IndexTable.scss +++ b/src/components/IndexTable/IndexTable.scss @@ -422,7 +422,7 @@ $scroll-bar-size: var(--p-space-2); z-index: var(--pc-index-table-scroll-bar); bottom: 0; padding: var(--p-space-05); - border-top: border('divider'); + border-top: var(--p-border-divider); background-color: var(--p-surface); border-bottom-right-radius: var(--p-border-radius-1); border-bottom-left-radius: var(--p-border-radius-1); @@ -480,7 +480,7 @@ $scroll-bar-size: var(--p-space-2); transform: translateX(calc(-1 * var(--pc-index-table-translate-offset))); transition: transform var(--p-ease) var(--p-duration-200); display: flex; - border-top: border('divider'); + border-top: var(--p-border-divider); filter: none; align-items: center; } diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss index 520bdd15ce5..5775cd215fc 100644 --- a/src/components/Layout/Layout.scss +++ b/src/components/Layout/Layout.scss @@ -69,7 +69,7 @@ $relative-size: $primary-basis / $secondary-basis; + .AnnotatedSection { @include page-content-when-not-fully-condensed { padding-top: var(--p-space-4); - border-top: border('divider'); + border-top: var(--p-border-divider); } } } diff --git a/src/components/Listbox/components/Option/Option.scss b/src/components/Listbox/components/Option/Option.scss index 4a033a3785a..50b36eca1f6 100644 --- a/src/components/Listbox/components/Option/Option.scss +++ b/src/components/Listbox/components/Option/Option.scss @@ -11,5 +11,5 @@ } .divider { - border-bottom: border('divider'); + border-bottom: var(--p-border-divider); } diff --git a/src/components/Listbox/components/Section/Section.scss b/src/components/Listbox/components/Section/Section.scss index cb78debb671..2fc27034a02 100644 --- a/src/components/Listbox/components/Section/Section.scss +++ b/src/components/Listbox/components/Section/Section.scss @@ -4,7 +4,7 @@ list-style-type: none; padding: 0; margin: 0; - border-bottom: border('divider'); + border-bottom: var(--p-border-divider); } .noDivider { diff --git a/src/components/Modal/components/Footer/Footer.scss b/src/components/Modal/components/Footer/Footer.scss index 8e4a4f0f38a..c4f4c9a01ef 100644 --- a/src/components/Modal/components/Footer/Footer.scss +++ b/src/components/Modal/components/Footer/Footer.scss @@ -7,7 +7,7 @@ width: 100%; min-height: calc(var(--p-space-4) * 4); padding: var(--p-space-4); - border-top: border('divider'); + border-top: var(--p-border-divider); } .FooterContent { diff --git a/src/components/Modal/components/Header/Header.scss b/src/components/Modal/components/Header/Header.scss index 57cf8ec101c..42dee2637d1 100644 --- a/src/components/Modal/components/Header/Header.scss +++ b/src/components/Modal/components/Header/Header.scss @@ -5,7 +5,7 @@ align-items: flex-start; flex-shrink: 0; padding: var(--p-space-4) var(--p-space-5); - border-bottom: border('divider'); + border-bottom: var(--p-border-divider); } .titleHidden { diff --git a/src/components/Modal/components/Section/Section.scss b/src/components/Modal/components/Section/Section.scss index bdd1460b0a9..68e8726848c 100644 --- a/src/components/Modal/components/Section/Section.scss +++ b/src/components/Modal/components/Section/Section.scss @@ -5,7 +5,7 @@ padding: var(--p-space-5); &:not(:last-of-type) { - border-bottom: border('divider'); + border-bottom: var(--p-border-divider); } &.subdued { diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index aaa1a752c77..81f24bb3b61 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -17,7 +17,7 @@ $nav-max-width: 360px; min-height: 100%; background-color: var(--p-background); -webkit-overflow-scrolling: touch; - border-right: border('divider'); + border-right: var(--p-border-divider); @include safe-area-for(padding-bottom, 0, bottom); @@ -343,7 +343,7 @@ $secondary-item-font-size: 15px; } .Section-withSeparator { - border-top: border('divider'); + border-top: var(--p-border-divider); } .SectionHeading { diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss index dc9248206db..66a2d295b5e 100644 --- a/src/components/Page/Page.scss +++ b/src/components/Page/Page.scss @@ -37,6 +37,6 @@ body { } .divider { - border-top: border(); + border-top: var(--p-border-base); padding-top: var(--p-space-4); } diff --git a/src/components/PageActions/PageActions.scss b/src/components/PageActions/PageActions.scss index 508c98fac64..e707c791617 100644 --- a/src/components/PageActions/PageActions.scss +++ b/src/components/PageActions/PageActions.scss @@ -3,7 +3,7 @@ .PageActions { margin: 0 auto; padding: var(--p-space-5); - border-top: border('divider'); + border-top: var(--p-border-divider); @include page-content-when-not-fully-condensed { padding: var(--p-space-5) 0; diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 72caa0f0d4b..0a642bd88ec 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -93,7 +93,7 @@ $vertical-motion-offset: -5px; max-width: 100%; + .Pane { - border-top: border('divider'); + border-top: var(--p-border-divider); } &:focus { @@ -110,7 +110,7 @@ $vertical-motion-offset: -5px; padding: var(--p-space-4); + .Section { - border-top: border('divider'); + border-top: var(--p-border-divider); } } diff --git a/src/components/ResourceItem/ResourceItem.scss b/src/components/ResourceItem/ResourceItem.scss index 9b90edadf23..c158c9684a6 100644 --- a/src/components/ResourceItem/ResourceItem.scss +++ b/src/components/ResourceItem/ResourceItem.scss @@ -259,7 +259,7 @@ $resource-list-item-variables: ( @include focus-ring($border-width: -1px); .ListItem + & { - border-top: border('divider'); + border-top: var(--p-border-divider); } &::after { diff --git a/src/components/ResourceList/ResourceList.scss b/src/components/ResourceList/ResourceList.scss index 68ba2e8a3e2..8864a451f32 100644 --- a/src/components/ResourceList/ResourceList.scss +++ b/src/components/ResourceList/ResourceList.scss @@ -24,7 +24,7 @@ $item-wrapper-loading-height: 64px; } + .ResourceList { - border-top: border('divider'); + border-top: var(--p-border-divider); } } @@ -37,7 +37,7 @@ $item-wrapper-loading-height: 64px; border-top-right-radius: var(--p-border-radius-2); + .ResourceList { - border-top: border('divider'); + border-top: var(--p-border-divider); } } @@ -212,7 +212,7 @@ $item-wrapper-loading-height: 64px; max-width: 100%; + .ItemWrapper { - border-top: border('divider'); + border-top: var(--p-border-divider); } } diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss index 5c0c51cc99a..baef5752387 100644 --- a/src/components/Sheet/Sheet.scss +++ b/src/components/Sheet/Sheet.scss @@ -11,7 +11,7 @@ $sheet-desktop-width: 380px; box-shadow: var(--p-shadow-modal); @media screen and (-ms-high-contrast: active) { - border-left: border(); + border-left: var(--p-border-base); } @include frame-when-nav-displayed { diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss index 0f6d51c58ad..70f81d76cc7 100644 --- a/src/components/Tabs/Tabs.scss +++ b/src/components/Tabs/Tabs.scss @@ -15,7 +15,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); } .Wrapper { - border-bottom: border('divider'); + border-bottom: var(--p-border-divider); padding: 0 var(--p-space-2); } diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss index 9346ab7fad7..7191913ad44 100644 --- a/src/components/TextField/TextField.scss +++ b/src/components/TextField/TextField.scss @@ -96,7 +96,7 @@ $prefix-horizontal-spacing: var(--p-space-2); margin: 0; padding: control-vertical-padding() $backdrop-horizontal-spacing; background: none; - border: border(transparent); + border: var(--p-border-transparent); font-family: var(--p-font-family-sans); appearance: none; caret-color: var(--p-text); diff --git a/src/components/Thumbnail/Thumbnail.scss b/src/components/Thumbnail/Thumbnail.scss index bb36d2be89d..44277404e76 100644 --- a/src/components/Thumbnail/Thumbnail.scss +++ b/src/components/Thumbnail/Thumbnail.scss @@ -8,7 +8,7 @@ min-width: thumbnail-size(small); max-width: 100%; border-radius: var(--p-border-radius-1); - border: border('divider'); + border: var(--p-border-divider); &::after { content: ''; diff --git a/src/components/TopBar/components/Menu/Menu.scss b/src/components/TopBar/components/Menu/Menu.scss index 05ba989ac10..d72457ce646 100644 --- a/src/components/TopBar/components/Menu/Menu.scss +++ b/src/components/TopBar/components/Menu/Menu.scss @@ -77,5 +77,5 @@ $activator-variables: ( .Section { margin-top: var(--p-space-2); padding-top: var(--p-space-2); - border-top: border('divider'); + border-top: var(--p-border-divider); } diff --git a/src/components/TopBar/components/Menu/components/Message/Message.scss b/src/components/TopBar/components/Menu/components/Message/Message.scss index 1d16f95a0fc..3aaa404a49e 100644 --- a/src/components/TopBar/components/Menu/components/Message/Message.scss +++ b/src/components/TopBar/components/Menu/components/Message/Message.scss @@ -6,5 +6,5 @@ $section-max-width: 325px; max-width: $section-max-width; margin-top: var(--p-space-2); padding-top: var(--p-space-2); - border-top: border('divider'); + border-top: var(--p-border-divider); } diff --git a/src/styles/_common.scss b/src/styles/_common.scss index d7d99ada3bd..466bf516a01 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -5,7 +5,6 @@ // stylelint-disable scss/partial-no-import @import './foundation/utilities'; -@import './foundation/borders'; @import './foundation/layout'; @import './foundation/focus-ring'; @import './foundation/accessibility'; diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss index 4ca6e299bdd..0b9e9fe93dd 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -17,7 +17,6 @@ // stylelint-disable scss/partial-no-import @import './foundation/utilities'; -@import './foundation/borders'; @import './foundation/layout'; @import './foundation/focus-ring'; diff --git a/src/styles/foundation/_borders.scss b/src/styles/foundation/_borders.scss deleted file mode 100644 index af56f095a52..00000000000 --- a/src/styles/foundation/_borders.scss +++ /dev/null @@ -1,20 +0,0 @@ -$borders-data: ( - base: var(--p-border-width-1) solid var(--p-border-subdued), - dark: var(--p-border-width-1) solid var(--p-border), - transparent: var(--p-border-width-1) solid transparent, - divider: var(--p-border-width-1) solid var(--p-divider), -); - -/// Returns the default border. -/// @param {String} $variant [base] - The border variant key. -/// @return {List} The border value. - -@function border($variant: base) { - $fetched-value: map-get($borders-data, $variant); - - @if $fetched-value { - @return $fetched-value; - } @else { - @error 'Border variant `#{$variant}` not found. Available variants: #{available-names($borders-data)}'; - } -} diff --git a/src/tokens/token-groups/shape.json b/src/tokens/token-groups/shape.json index 2bcd0194e71..27508fcebb6 100644 --- a/src/tokens/token-groups/shape.json +++ b/src/tokens/token-groups/shape.json @@ -11,5 +11,9 @@ "border-radius-half": "50%", "border-width-1": "1px", "border-width-2": "2px", - "border-width-3": "3px" + "border-width-3": "3px", + "border-base": "var(--p-border-width-1) solid var(--p-border-subdued)", + "border-dark": "var(--p-border-width-1) solid var(--p-border)", + "border-transparent": "var(--p-border-width-1) solid transparent", + "border-divider": "var(--p-border-width-1) solid var(--p-divider)" }