Shopify · aaronccasanova · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023 · Jun 22, 2023
diff --git a/polaris-react/src/components/Card/Card.stories.tsx b/polaris-react/src/components/Card/Card.stories.tsx
@@ -10,6 +10,8 @@ import {
   Text,
 } from '@shopify/polaris';
 
+import {useFeatures} from '../../utilities/features';
+
 export default {
   component: Card,
 } as ComponentMeta<typeof Card>;
@@ -28,8 +30,14 @@ export function Default() {
 }
 
 export function WithBackgroundSubdued() {
+  const {polarisSummerEditions2023} = useFeatures();
+
   return (
-    <Card background="bg-subdued">
+    <Card
+      background={
+        polarisSummerEditions2023 ? 'bg-secondary-experimental' : 'bg-subdued'
+      }
+    >
       <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
@@ -67,6 +75,8 @@ export function WithResponsivePadding() {
 }
 
 export function WithSubduedSection() {
+  const {polarisSummerEditions2023} = useFeatures();
+
   return (
     <Card roundedAbove="sm">
       <VerticalStack gap="5">
@@ -85,7 +95,14 @@ export function WithSubduedSection() {
         marginInline={{xs: '4', sm: '5'}}
       >
         <Divider />
-        <Box background="bg-subdued" padding={{xs: '4', sm: '5'}}>
+        <Box
+          background={
+            polarisSummerEditions2023
+              ? 'bg-secondary-experimental'
+              : 'bg-subdued'
+          }
+          padding={{xs: '4', sm: '5'}}
+        >
           <VerticalStack gap="2">
             <Text variant="headingSm" as="h3">
               Deactivated staff accounts

diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
@@ -149,6 +149,10 @@
   &.ShowTotalsInFooter .TableRow:nth-child(2n + 1) .Cell,
   &.ShowTotalsInFooter.RowCountIsEven .TableRow:nth-child(2n) .Cell {
     background: var(--p-color-bg-subdued);
+
+    #{$se23} & {
+      background: var(--p-color-bg-secondary-experimental);
+    }
   }
 }
 
@@ -394,11 +398,16 @@
   border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
+    background: var(--p-color-bg-secondary-experimental);
     border-bottom: var(--p-border-width-1) solid var(--p-color-border);
   }
 
   .ZebraStripingOnData.ShowTotals & {
     background: var(--p-color-bg-subdued);
+
+    #{$se23} & {
+      background: var(--p-color-bg-secondary-experimental);
+    }
   }
 
   .ZebraStripingOnData.ShowTotals.RowCountIsEven &,
@@ -444,6 +453,7 @@
   border-bottom-right-radius: var(--p-border-radius-2);
 
   #{$se23} & {
+    background: var(--p-color-bg-secondary-experimental);
     padding: var(--p-space-2) var(--p-space-3);
     border-top: var(--p-border-width-1) solid var(--p-color-border);
     border-radius: 0;

diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
@@ -156,7 +156,7 @@
   }
 
   #{$se23} & {
-    background: var(--p-color-bg);
+    background: var(--p-color-bg-secondary-experimental);
     border-radius: var(--p-border-radius-2);
     border: var(--p-color-border) dashed var(--p-border-width-1);
 
@@ -172,6 +172,10 @@
 
     &:active {
       background: var(--p-color-bg-subdued);
+
+      #{$se23} & {
+        background: var(--p-color-bg-secondary-experimental);
+      }
     }
 
     &::after {

diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
@@ -43,7 +43,7 @@
   }
 
   #{$se23} & {
-    background: var(--p-color-bg);
+    background: var(--p-color-bg-secondary-experimental);
     border-radius: var(--p-border-radius-2);
     border: var(--p-color-border) dashed var(--p-border-width-1);
 
@@ -59,6 +59,10 @@
 
     &:active {
       background: var(--p-color-bg-subdued);
+
+      #{$se23} & {
+        background: var(--p-color-bg-secondary-experimental);
+      }
     }
 
     &.disabledFilterButton {
@@ -74,6 +78,10 @@
 
       &:active {
         background: var(--p-color-bg-subdued);
+
+        #{$se23} & {
+          background: var(--p-color-bg-secondary-experimental);
+        }
       }
     }
 

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -119,7 +119,7 @@ $loading-panel-height: 53px;
   .TableHeading-first,
   .TableHeading-second {
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-secondary-experimental);
     }
   }
 
@@ -190,6 +190,10 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-subdued);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-secondary-experimental);
+      }
     }
   }
 
@@ -261,6 +265,10 @@ $loading-panel-height: 53px;
   .TableRow:nth-child(2n) .TableCell:last-child {
     background: var(--p-color-bg-subdued);
 
+    #{$se23} & {
+      background: var(--p-color-bg-secondary-experimental);
+    }
+
     &:hover {
       background-color: var(--p-color-bg-hover);
 
@@ -293,6 +301,7 @@ $loading-panel-height: 53px;
   border: 0;
 
   #{$se23} & {
+    background: var(--p-color-bg-secondary-experimental);
     padding: var(--p-space-1_5-experimental);
     line-height: var(--p-font-line-height-1);
 
@@ -320,6 +329,10 @@ $loading-panel-height: 53px;
 
 .TableHeading-sortable {
   background: var(--p-color-bg-subdued);
+
+  #{$se23} & {
+    background: var(--p-color-bg-secondary-experimental);
+  }
 }
 
 .TableHeading-flush {
@@ -575,6 +588,10 @@ $loading-panel-height: 53px;
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell:first-child {
       background-color: var(--p-color-bg-subdued);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-secondary-experimental);
+      }
     }
   }
 
@@ -618,7 +635,7 @@ $loading-panel-height: 53px;
       z-index: auto;
 
       #{$se23} & {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-secondary-experimental);
       }
     }
   }
@@ -637,6 +654,10 @@ $loading-panel-height: 53px;
   .statusSubdued {
     .TableCell:last-child {
       background-color: var(--p-color-bg-subdued);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-secondary-experimental);
+      }
     }
   }
 
@@ -669,6 +690,10 @@ $loading-panel-height: 53px;
 .Table-sortable {
   .TableHeading {
     background-color: var(--p-color-bg-subdued);
+
+    #{$se23} & {
+      background-color: var(--p-color-bg-secondary-experimental);
+    }
   }
 }
 

diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -22,7 +22,7 @@ $key-base-dimension: 28px;
   user-select: none;
 
   #{$se23} & {
-    background: var(--p-color-bg-subdued);
+    background: var(--p-color-bg-secondary-experimental);
     border-radius: var(--p-border-radius-1);
     color: var(--p-color-text-subdued);
     box-shadow: none;

diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -33,6 +33,10 @@
 
 .subdued {
   background-color: var(--p-color-bg-subdued);
+
+  #{$se23} & {
+    background-color: var(--p-color-bg-secondary-experimental);
+  }
 }
 
 .Section-hideOnPrint,
@@ -127,6 +131,10 @@
 .Section-subdued {
   background-color: var(--p-color-bg-subdued);
 
+  #{$se23} & {
+    background-color: var(--p-color-bg-secondary-experimental);
+  }
+
   @media (-ms-high-contrast: active) {
     background-color: transparent;
   }

diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
@@ -135,6 +135,10 @@ $list-filters-footer-height: 70px;
     height: var(--p-space-025);
     background-color: var(--p-color-bg-subdued);
     display: block;
+
+    #{$se23} & {
+      background-color: var(--p-color-bg-secondary-experimental);
+    }
   }
 
   &::before {
@@ -156,6 +160,10 @@ $list-filters-footer-height: 70px;
     height: var(--p-space-025);
     background-color: var(--p-color-bg-subdued);
     display: block;
+
+    #{$se23} & {
+      background-color: var(--p-color-bg-secondary-experimental);
+    }
   }
 
   &::before {
@@ -179,6 +187,10 @@ $list-filters-footer-height: 70px;
     height: var(--p-space-025);
     background-color: var(--p-color-bg-subdued);
     display: block;
+
+    #{$se23} & {
+      background-color: var(--p-color-bg-secondary-experimental);
+    }
   }
 
   &::after {

diff --git a/polaris-react/src/components/Modal/components/Section/Section.tsx b/polaris-react/src/components/Modal/components/Section/Section.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Box} from '../../../Box';
 import {classNames} from '../../../../utilities/css';
+import {useFeatures} from '../../../../utilities/features';
 
 import styles from './Section.scss';
 
@@ -18,6 +19,8 @@ export function Section({
   subdued = false,
   titleHidden = false,
 }: SectionProps) {
+  const {polarisSummerEditions2023} = useFeatures();
+
   const className = classNames(
     styles.Section,
     titleHidden && styles.titleHidden,
@@ -29,7 +32,11 @@ export function Section({
         as="section"
         padding={flush ? '0' : '5'}
         {...(titleHidden && {paddingInlineEnd: '0'})}
-        {...(subdued && {background: 'bg-subdued'})}
+        {...(subdued && {
+          background: polarisSummerEditions2023
+            ? 'bg-secondary-experimental'
+            : 'bg-subdued',
+        })}
       >
         {children}
       </Box>

diff --git a/polaris-react/src/components/Tabs/Tabs.scss b/polaris-react/src/components/Tabs/Tabs.scss
@@ -135,6 +135,10 @@
     &:not([aria-disabled='true']):hover {
       background-color: var(--p-color-bg-subdued);
       color: var(--p-color-text-primary);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-secondary-experimental);
+      }
     }
 
     &:not([aria-disabled='true']):focus-visible {
@@ -148,6 +152,10 @@
       background-color: var(--p-color-bg-subdued);
       color: var(--p-color-text-primary);
       z-index: var(--p-z-index-1);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-secondary-experimental);
+      }
     }
 
     @media #{$p-breakpoints-md-up} {
@@ -182,6 +190,10 @@
     background: var(--p-color-bg-subdued);
     color: var(--p-color-text);
 
+    #{$se23} & {
+      background: var(--p-color-bg-secondary-experimental);
+    }
+
     &[aria-disabled='true'] {
       background: var(--p-color-bg-disabled);
       color: var(--p-color-text-disabled);
@@ -191,10 +203,18 @@
     &:not([aria-disabled='true']):focus {
       background-color: var(--p-color-bg-subdued);
       color: var(--p-color-text-primary);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-secondary-experimental);
+      }
     }
 
     &:not([aria-disabled='true']):active {
       background-color: var(--p-color-bg-subdued);
+
+      #{$se23} & {
+        background-color: var(--p-color-bg-secondary-experimental);
+      }
     }
   }
 }