Merge main at c75c87d into next

.changeset/quiet-pans-itch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Migrated font custom properties

.changeset/spicy-nails-heal.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added a `warning` `status` to the `IndexTable.Row`

polaris-react/src/components/ActionList/ActionList.scss

@@ -10,7 +10,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     --pc-action-list-image-size: 20px;
   }
   --pc-action-list-item-vertical-padding: calc(
-    (var(--pc-action-list-item-min-height) - var(--p-font-line-height-2)) / 2
+    (var(--pc-action-list-item-min-height) - var(--p-font-line-height-500)) / 2
   );
   // stylelint-enable
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss

@@ -5,7 +5,7 @@
   --pc-mapped-actions-image-size: 20px;
   --pc-mapped-actions-item-min-height: var(--p-space-1000);
   --pc-mapped-actions-item-vertical-padding: calc(
-    (var(--pc-mapped-actions-item-min-height) - var(--p-font-line-height-2)) / 2
+    (var(--pc-mapped-actions-item-min-height) - var(--p-font-line-height-500)) / 2
   );
   // stylelint-enable
   margin-bottom: var(--p-space-300);

polaris-react/src/components/Button/Button.scss

@@ -6,11 +6,11 @@
   --pc-button-slim-min-height: var(--p-font-line-height-4);
   --pc-button-large-min-height: 32px;
   --pc-button-vertical-padding: calc(
-    (36px - var(--p-font-line-height-2) - var(--p-space-050)) / 2
+    (36px - var(--p-font-line-height-500) - var(--p-space-050)) / 2
   );
   --pc-button-slim-vertical-padding: calc(
     (
-        var(--pc-button-slim-min-height) - var(--p-font-line-height-2) -
+        var(--pc-button-slim-min-height) - var(--p-font-line-height-500) -
           var(--p-space-050)
       ) / 2
   );
@@ -876,7 +876,7 @@
 
     .Content {
       font-size: var(--p-font-size-75);
-      line-height: var(--p-font-line-height-1);
+      line-height: var(--p-font-line-height-400);
     }
   }
 }
@@ -907,7 +907,7 @@
   .Content {
     font-size: var(--p-font-size-80-experimental);
     font-weight: var(--p-font-weight-medium);
-    line-height: var(--p-font-line-height-2);
+    line-height: var(--p-font-line-height-500);
     letter-spacing: initial;
 
     @media #{$p-breakpoints-md-up} {

polaris-react/src/components/CheckableButton/CheckableButton.scss

@@ -5,7 +5,7 @@
   color: var(--p-color-text);
   font-size: var(--p-font-size-75);
   font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-1);
+  line-height: var(--p-font-line-height-400);
   letter-spacing: initial;
   display: flex;
   align-items: center;

polaris-react/src/components/Filters/Filters.scss

@@ -106,7 +106,7 @@
 
   @media #{$p-breakpoints-md-up} {
     font-size: var(--p-font-size-75);
-    line-height: var(--p-font-line-height-1);
+    line-height: var(--p-font-line-height-400);
     height: 24px;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     padding: 0 0.375rem 0 var(--p-space-200);

polaris-react/src/components/FooterHelp/FooterHelp.scss

@@ -13,9 +13,9 @@
 }
 
 .Text {
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
   border: none;
   letter-spacing: initial;
 }

polaris-react/src/components/Frame/Frame.scss

@@ -313,9 +313,9 @@ $sidebar-breakpoint: 1200px;
     @include button-base;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($border-width: 1px);
-    font-size: var(--p-font-size-100);
+    font-size: var(--p-font-size-350);
     font-weight: var(--p-font-weight-medium);
-    line-height: var(--p-font-line-height-1);
+    line-height: var(--p-font-line-height-400);
     letter-spacing: initial;
     color: var(--p-color-text);
 

polaris-react/src/components/IndexTable/IndexTable.scss

@@ -185,6 +185,28 @@ $loading-panel-height: 53px;
     }
   }
 
+  &.statusWarning {
+    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical status for suspended products
+    &,
+    .TableCell-first,
+    .TableCell-first + .TableCell {
+      background-color: var(--p-color-bg-warning-subdued-experimental);
+    }
+  }
+
+  &.statusWarning {
+    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- added crtical status for suspended products
+    &,
+    .TableCell-first,
+    .TableCell-first + .TableCell {
+      background-color: var(--p-color-bg-warning-subdued-experimental);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-warning-subdued-experimental);
+      }
+    }
+  }
+
   &.statusSubdued {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &,
@@ -268,6 +290,14 @@ $loading-panel-height: 53px;
       }
     }
 
+    &.statusWarning {
+      &,
+      .TableCell-first,
+      .TableCell-first + .TableCell {
+        background-color: var(--p-color-bg-warning-subdued-experimental);
+      }
+    }
+
     /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     &.statusSubdued {
       /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
@@ -501,7 +531,7 @@ $loading-panel-height: 53px;
   font-weight: var(--p-font-weight-medium);
   color: var(--p-color-text-subdued);
   font-size: var(--p-font-size-75);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
 
   &:hover,
   &:focus {
@@ -719,6 +749,20 @@ $loading-panel-height: 53px;
     }
   }
 
+  .statusWarning {
+    // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical status for suspended products
+    .TableCell:first-child {
+      background-color: var(--p-color-bg-warning-subdued-experimental);
+    }
+  }
+
+  .statusWarning {
+    // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical status for suspended products
+    .TableCell:first-child {
+      background-color: var(--p-color-bg-warning-subdued-experimental);
+    }
+  }
+
   .statusSubdued {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell:first-child {
@@ -785,6 +829,12 @@ $loading-panel-height: 53px;
     }
   }
 
+  .statusWarning {
+    .TableCell:last-child {
+      background-color: var(--p-color-bg-warning-subdued-experimental);
+    }
+  }
+
   .statusSubdued {
     .TableCell:last-child {
       background-color: var(--p-color-bg-subdued);

polaris-react/src/components/IndexTable/IndexTable.stories.tsx

@@ -1606,6 +1606,15 @@ export function WithRowStatus() {
       amountSpent: '$40',
       status: 'critical',
     },
+    {
+      id: '3414',
+      url: '#',
+      name: 'Volleyball Player',
+      location: 'Delaware, USA',
+      orders: 50,
+      amountSpent: '$80',
+      status: 'warning',
+    },
   ];
   const resourceName = {
     singular: 'customer',

polaris-react/src/components/IndexTable/components/Row/Row.tsx

@@ -13,7 +13,7 @@ import type {Range} from '../../../../utilities/index-provider/types';
 import styles from '../../IndexTable.scss';
 
 type RowType = 'data' | 'subheader';
-type RowStatus = 'success' | 'subdued' | 'critical';
+type RowStatus = 'success' | 'subdued' | 'critical' | 'warning';
 type TableRowElementType = HTMLTableRowElement & HTMLLIElement;
 
 export interface RowProps {

polaris-react/src/components/Layout/Layout.scss

@@ -17,7 +17,7 @@ $relative-size: $primary-basis / $secondary-basis;
   @media print {
     body & {
       font-size: var(--p-font-size-75);
-      line-height: var(--p-font-line-height-1);
+      line-height: var(--p-font-line-height-400);
     }
 
     a,

polaris-react/src/components/Navigation/Navigation.scss

@@ -628,7 +628,7 @@ $nav-max-width: 360px;
     }
 
     @media #{$p-breakpoints-md-up} {
-      font-size: var(--p-font-size-100);
+      font-size: var(--p-font-size-350);
       line-height: 1;
     }
   }
@@ -795,8 +795,8 @@ $nav-max-width: 360px;
     margin-bottom: calc(var(--p-space-200) + var(--p-space-050));
 
     @media #{$p-breakpoints-md-down} {
-      font-size: var(--p-font-size-100);
-      line-height: var(--p-font-line-height-2);
+      font-size: var(--p-font-size-350);
+      line-height: var(--p-font-line-height-500);
     }
 
     @media #{$p-breakpoints-md-up} {

polaris-react/src/components/Navigation/_variables.scss

@@ -189,8 +189,8 @@ $nav-animation-variables: (
   flex: 1 1 auto;
   margin-top: calc(var(--p-space-200) + var(--p-space-050));
   margin-bottom: calc(var(--p-space-200) + var(--p-space-050));
-  line-height: var(--p-font-line-height-2);
-  font-size: var(--p-font-size-100);
+  line-height: var(--p-font-line-height-500);
+  font-size: var(--p-font-size-350);
 
   @media #{$p-breakpoints-md-up} {
     margin-top: var(--p-space-100);
@@ -200,7 +200,7 @@ $nav-animation-variables: (
   @media #{$p-breakpoints-md-down} {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     font-size: 15px;
-    line-height: var(--p-font-line-height-2);
+    line-height: var(--p-font-line-height-500);
   }
 }
 

polaris-react/src/components/Page/Page.scss

@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 $navigation-elements-height: 36px;
-$title-height: var(--p-font-line-height-5);
+$title-height: var(--p-font-line-height-800);
 $stacking-order: (
   title: 10,
   breadcrumbs: 20,

polaris-react/src/components/Select/Select.scss

@@ -83,7 +83,7 @@
     // stylelint-disable-next-line selector-max-combinators, selector-max-type -- generated by polaris-migrator DO NOT COPY
     div > span {
       font-size: var(--p-font-size-200);
-      line-height: var(--p-font-line-height-2);
+      line-height: var(--p-font-line-height-500);
     }
   }
 }
@@ -107,7 +107,7 @@
   // Even though the input is invisible, text styles apply to the options menu
   font-size: var(--p-font-size-200);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
   letter-spacing: initial;
   position: absolute;
   // Required to solve a bug causing Safari 13 to crash https://bugs.webkit.org/show_bug.cgi?id=202055
@@ -124,8 +124,8 @@
   border: none;
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-100);
-    line-height: var(--p-font-line-height-2);
+    font-size: var(--p-font-size-350);
+    line-height: var(--p-font-line-height-500);
   }
 }
 

polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss

@@ -14,8 +14,8 @@ $skeleton-display-text-max-width: 120px;
 
 .DisplayText {
   // stylelint-disable -- Polaris component custom properties
-  --pc-skeleton-display-text-height: var(--p-font-line-height-2);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-2);
+  --pc-skeleton-display-text-height: var(--p-font-line-height-500);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-500);
   // stylelint-enable
   max-width: $skeleton-display-text-max-width;
 
@@ -30,24 +30,24 @@ $skeleton-display-text-max-width: 120px;
 
 .sizeSmall {
   // stylelint-disable -- Polaris component custom properties
-  --pc-skeleton-display-text-height: var(--p-font-line-height-3);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-4);
+  --pc-skeleton-display-text-height: var(--p-font-line-height-600);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-700);
   // stylelint-enable
   @include skeleton-display-text-height;
 }
 
 .sizeMedium {
   // stylelint-disable -- Polaris component custom properties
-  --pc-skeleton-display-text-height: var(--p-font-line-height-4);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-5);
+  --pc-skeleton-display-text-height: var(--p-font-line-height-700);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-800);
   // stylelint-enable
   @include skeleton-display-text-height;
 }
 
 .sizeLarge {
   // stylelint-disable -- Polaris component custom properties
-  --pc-skeleton-display-text-height: var(--p-font-line-height-4);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-5);
+  --pc-skeleton-display-text-height: var(--p-font-line-height-700);
+  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-800);
   // stylelint-enable
   @include skeleton-display-text-height;
 }

polaris-react/src/components/Text/Text.scss

@@ -84,7 +84,7 @@
 
   @media #{$p-breakpoints-md-up} {
     font-size: var(--p-font-size-300);
-    line-height: var(--p-font-line-height-3);
+    line-height: var(--p-font-line-height-600);
   }
 }
 
@@ -112,12 +112,12 @@
 
 @mixin _heading3xl {
   font-size: var(--p-font-size-500);
-  line-height: var(--p-font-line-height-6);
+  line-height: var(--p-font-line-height-1000);
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
     font-size: var(--p-font-size-600);
-    line-height: var(--p-font-line-height-7);
+    line-height: var(--p-font-line-height-1200);
   }
 }
 
@@ -131,7 +131,7 @@
 
 .bodySm {
   font-size: var(--p-font-size-75);
-  line-height: var(--p-font-line-height-1);
+  line-height: var(--p-font-line-height-400);
 }
 
 .bodyMd {

polaris-react/src/styles/shared/_buttons.scss

@@ -1,6 +1,6 @@
 @mixin button-base {
   $vertical-padding: calc(
-    (36px - var(--p-font-line-height-2) - var(--p-space-050)) / 2
+    (36px - var(--p-font-line-height-500) - var(--p-space-050)) / 2
   );
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY