Replace border() with tokens

UNRELEASED-v8.md → 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

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);
 }
 

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);
   }
 }

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);
 }

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);
     }
   }
 }

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;

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;
 }

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);
     }
   }
 }

src/components/Listbox/components/Option/Option.scss

@@ -11,5 +11,5 @@
 }
 
 .divider {
-  border-bottom: border('divider');
+  border-bottom: var(--p-border-divider);
 }

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 {

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 {

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 {

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 {

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 {

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);
 }

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;

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);
   }
 }
 

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 {

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);
   }
 }
 

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 {

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);
 }
 

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);

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: '';

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);
 }

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);
 }

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';

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';