Shopify · aaronccasanova · Dec 10, 2021 · Dec 3, 2021 · Dec 4, 2021 · Dec 6, 2021
diff --git a/.eslintignore b/.eslintignore
@@ -3,7 +3,4 @@ node_modules
 /examples
 /build
 /build-internal
-
-index.esnext
-index.js
-index.mjs
+/src/styles/polaris-tokens
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,3 @@ node_modules
 .DS_Store
 *.scss.d.ts
 .idea
-
-index.esnext
-index.js
-index.mjs
diff --git a/.prettierignore b/.prettierignore
@@ -3,8 +3,4 @@ node_modules
 /build
 /build-internal
 
-/package.json
-
-index.esnext
-index.js
-index.mjs
+/package.json
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,26 @@
+const path = require('path');
+
+const {tokenList} = require('./build/cjs/token-list');
+
+/**
+ * Allowed custom property names in Polaris component styles.
+ */
+const polarisComponentCustomProperties = /--pc-.+/;
+
+module.exports = {
+  extends: ['@shopify/stylelint-plugin/prettier'],
+  plugins: [
+    path.join(__dirname, './stylelint/plugins/custom-properties-allowed-list'),
+  ],
+  rules: {
+    '@shopify/custom-properties-allowed-list': {
+      allowedProperties: [
+        '--polaris-version-number',
+        polarisComponentCustomProperties,
+      ],
+      allowedValues: {
+        '/.+/': [polarisComponentCustomProperties, ...tokenList],
+      },
+    },
+  },
+};
diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md
@@ -28,6 +28,9 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Removed unnecessary `--p-border-radius-` properties and moved border-radius custom properties to tokens ([#4763](https://github.com/Shopify/polaris-react/pull/4763))
 - Dropped support for node < 16 ([#4778](https://github.com/Shopify/polaris-react/pull/4778))
 - Removed `build/styles` directory from build output ([#4728](https://github.com/Shopify/polaris-react/pull/4728))
+- Updated `--global-ribbon-height` CSS custom property to `--pc-frame-global-ribbon-height` ([#4804](https://github.com/Shopify/polaris-react/pull/4804))
+- Updated `--p-frame-offset` CSS custom property to `--pc-frame-offset` ([#4804](https://github.com/Shopify/polaris-react/pull/4804))
+- Updated all `--top-bar-*` CSS custom properties to `--pc-top-bar-*` ([#4804](https://github.com/Shopify/polaris-react/pull/4804))
 - 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))
 

diff --git a/examples/cdn-styles/index.html b/examples/cdn-styles/index.html
@@ -14,10 +14,10 @@
   <body>
     <div
       style="
-        --top-bar-background: #00848e;
-        --top-bar-background-lighter: #1d9ba4;
-        --top-bar-color: #f9fafb;
-        --p-frame-offset: 0px;
+        --pc-top-bar-background: #00848e;
+        --pc-top-bar-background-lighter: #1d9ba4;
+        --pc-top-bar-color: #f9fafb;
+        --pc-frame-offset: 0px;
       "
     >
       <div class="Polaris-Page">

diff --git a/loom.config.ts b/loom.config.ts
@@ -26,8 +26,10 @@ import type {} from '@shopify/loom-plugin-jest';
 // eslint-disable-next-line import/no-default-export
 export default createPackage((pkg) => {
   pkg.entry({root: './src/index.ts'});
+  pkg.entry({name: 'token-list', root: './src/token-list.ts'});
   pkg.use(
     buildLibrary({
+      rootEntrypoints: false,
       jestTestEnvironment: 'jsdom',
       targets: 'extends @shopify/browserslist-config, node 12.20',
       commonjs: true,

diff --git a/package.json b/package.json
@@ -132,6 +132,7 @@
     "postcss-loader": "^4.2.0",
     "postcss-modules": "^4.2.2",
     "postcss-pxtorem": "^5.1.1",
+    "postcss-value-parser": "^4.2.0",
     "prettier": "^2.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -158,11 +159,6 @@
     "ios >= 13.4"
   ],
   "prettier": "@shopify/prettier-config",
-  "stylelint": {
-    "extends": [
-      "@shopify/stylelint-plugin/prettier"
-    ]
-  },
   "size-limit": [
     {
       "name": "cjs",

diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -56,6 +56,6 @@
   width: var(--pc-breadcrumbs-icon-size);
   height: var(--pc-breadcrumbs-icon-size);
   margin: calc(-0.5 * var(--pc-breadcrumbs-icon-size)) 0
-    calc(-0.5 * var(--pc-breadcrumbs-icon-size)) calc(-1 * var(--p-space2));
+    calc(-0.5 * var(--pc-breadcrumbs-icon-size)) calc(-1 * var(--p-space-2));
   margin: 0;
 }
diff --git a/src/components/CheckableButton/CheckableButton.scss b/src/components/CheckableButton/CheckableButton.scss
@@ -21,7 +21,7 @@ $button-vertical-padding: ($button-min-height - line-height(body) - 2px) / 2;
   border-radius: var(--p-border-radius-1);
   width: 100%;
   background: var(--p-surface);
-  box-shadow: var(--p-button-drop-shadow);
+  box-shadow: var(--p-shadow-button);
   border: 1px solid var(--p-border-neutral-subdued);
   border-top-color: var(--p-border-subdued);
   border-bottom-color: var(--p-border-shadow-subdued);

diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss
@@ -12,8 +12,8 @@
   }
 
   @include frame-when-nav-displayed {
-    width: calc(100% - var(--p-frame-offset));
-    margin-left: var(--p-frame-offset);
+    width: calc(100% - var(--pc-frame-offset));
+    margin-left: var(--pc-frame-offset);
   }
 }
 
@@ -32,7 +32,7 @@
 
   @include frame-when-nav-displayed {
     z-index: 1;
-    left: var(--p-frame-offset);
+    left: var(--pc-frame-offset);
     display: flex;
 
     .hasTopBar & {
@@ -126,8 +126,8 @@
   height: top-bar-height();
 
   @include frame-when-nav-displayed {
-    left: var(--p-frame-offset);
-    width: calc(100% - var(--p-frame-offset));
+    left: var(--pc-frame-offset);
+    width: calc(100% - var(--pc-frame-offset));
   }
 }
 
@@ -139,8 +139,8 @@
   width: 100%;
 
   @include frame-when-nav-displayed {
-    left: var(--p-frame-offset);
-    width: calc(100% - var(--p-frame-offset));
+    left: var(--pc-frame-offset);
+    width: calc(100% - var(--pc-frame-offset));
   }
 }
 
@@ -175,7 +175,7 @@
 
 .Content {
   position: relative;
-  padding-bottom: var(--global-ribbon-height, 0);
+  padding-bottom: var(--pc-frame-global-ribbon-height, 0);
   flex: 1;
   @include layout-flex-fix;
 }
@@ -187,16 +187,16 @@
   width: 100%;
 
   @include frame-when-nav-displayed {
-    left: var(--p-frame-offset);
+    left: var(--pc-frame-offset);
 
     .hasNav & {
-      left: calc(#{layout-width(nav)} + var(--p-frame-offset));
+      left: calc(#{layout-width(nav)} + var(--pc-frame-offset));
       @include safe-area-for(
         left,
-        calc(#{layout-width(nav)} + var(--p-frame-offset)),
+        calc(#{layout-width(nav)} + var(--pc-frame-offset)),
         left
       );
-      width: calc(100% - #{layout-width(nav)} - var(--p-frame-offset));
+      width: calc(100% - #{layout-width(nav)} - var(--pc-frame-offset));
     }
   }
 }
@@ -211,7 +211,7 @@
 
   @include frame-when-nav-displayed {
     .hasNav & {
-      left: var(--p-frame-offset);
+      left: var(--pc-frame-offset);
     }
 
     .hasTopBar & {
@@ -225,7 +225,7 @@
   position: fixed;
   z-index: var(--p-z-9);
   top: var(--pc-frame-skip-vertical-offset);
-  left: calc(var(--p-space-2) + var(--p-frame-offset));
+  left: calc(var(--p-space-2) + var(--pc-frame-offset));
   opacity: 0;
   pointer-events: none;
 

diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx
@@ -64,9 +64,6 @@ interface State {
   showContextualSaveBar: boolean;
 }
 
-const GLOBAL_RIBBON_CUSTOM_PROPERTY = '--global-ribbon-height';
-const FRAME_OFFSET_CUSTOM_PROPERTY = '--p-frame-offset';
-
 const APP_FRAME_MAIN = 'AppFrameMain';
 const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
@@ -306,12 +303,15 @@ class FrameInner extends PureComponent<CombinedProps, State> {
 
   private setOffset = () => {
     const {offset = '0px'} = this.props;
-    setRootProperty(FRAME_OFFSET_CUSTOM_PROPERTY, offset);
+    setRootProperty('--pc-frame-offset', offset);
   };
 
   private setGlobalRibbonRootProperty = () => {
     const {globalRibbonHeight} = this.state;
-    setRootProperty(GLOBAL_RIBBON_CUSTOM_PROPERTY, `${globalRibbonHeight}px`);
+    setRootProperty(
+      '--pc-frame-global-ribbon-height',
+      `${globalRibbonHeight}px`,
+    );
   };
 
   private showToast = (toast: ToastPropsWithID) => {

diff --git a/src/components/Frame/components/ToastManager/ToastManager.scss b/src/components/Frame/components/ToastManager/ToastManager.scss
@@ -14,7 +14,7 @@
   right: 0;
   left: 0;
   text-align: center;
-  bottom: var(--global-ribbon-height);
+  bottom: var(--pc-frame-global-ribbon-height);
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/components/Frame/tests/Frame.test.tsx b/src/components/Frame/tests/Frame.test.tsx
@@ -43,15 +43,15 @@ describe('<Frame />', () => {
       mountWithApp(<Frame />);
 
       expect(
-        document.documentElement.style.getPropertyValue('--p-frame-offset'),
+        document.documentElement.style.getPropertyValue('--pc-frame-offset'),
       ).toBe('0px');
     });
 
     it('renders a custom offset property when offset is passed', () => {
       mountWithApp(<Frame offset="6rem" />);
 
       expect(
-        document.documentElement.style.getPropertyValue('--p-frame-offset'),
+        document.documentElement.style.getPropertyValue('--pc-frame-offset'),
       ).toBe('6rem');
     });
 
@@ -269,7 +269,7 @@ describe('<Frame />', () => {
   });
 
   describe('globalRibbon', () => {
-    // Frame sets the --global-ribbon-height custom property based off the
+    // Frame sets the --pc-frame-global-ribbon-height custom property based off the
     // offsetHeight of the component passed into globalRibbon. JSDom doesn't
     // have a layout engine so use a mock value
     beforeEach(() => {
@@ -284,7 +284,7 @@ describe('<Frame />', () => {
       mountWithApp(<Frame globalRibbon={<div />}>I am some content</Frame>);
       expect(
         document.documentElement.style.getPropertyValue(
-          '--global-ribbon-height',
+          '--pc-frame-global-ribbon-height',
         ),
       ).toBe('30px');
     });
@@ -294,14 +294,14 @@ describe('<Frame />', () => {
 
       expect(
         document.documentElement.style.getPropertyValue(
-          '--global-ribbon-height',
+          '--pc-frame-global-ribbon-height',
         ),
       ).toBe('0px');
 
       frame.setProps({globalRibbon: <div />});
       expect(
         document.documentElement.style.getPropertyValue(
-          '--global-ribbon-height',
+          '--pc-frame-global-ribbon-height',
         ),
       ).toBe('30px');
     });
@@ -310,7 +310,7 @@ describe('<Frame />', () => {
       mountWithApp(<Frame />);
       expect(
         document.documentElement.style.getPropertyValue(
-          '--global-ribbon-height',
+          '--pc-frame-global-ribbon-height',
         ),
       ).toBe('0px');
     });

diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss
@@ -234,7 +234,7 @@ $loading-panel-height: 53px;
 }
 
 .TableCell-first + .TableCell {
-  left: var(--p-checkbox-offset);
+  left: var(--pc-checkbox-offset);
   padding-left: 0;
 
   @include breakpoint-after($breakpoint-small) {
@@ -523,5 +523,5 @@ $scroll-bar-size: var(--p-space-2);
 
 .ScrollBarContent {
   height: 1px;
-  width: var(--p-scroll-bar-content-width);
+  width: var(--pc-index-table-scroll-bar-content-width);
 }
diff --git a/src/components/IndexTable/IndexTable.tsx b/src/components/IndexTable/IndexTable.tsx
@@ -201,7 +201,7 @@ function IndexTableBase({
   const resizeTableScrollBar = useCallback(() => {
     if (scrollBarElement.current && tableElement.current && tableInitialized) {
       scrollBarElement.current.style.setProperty(
-        '--p-scroll-bar-content-width',
+        '--pc-index-table-scroll-bar-content-width',
         `${tableElement.current.offsetWidth - SCROLL_BAR_PADDING}px`,
       );
     }
@@ -240,7 +240,7 @@ function IndexTableBase({
   const handleResize = useCallback(() => {
     // hide the scrollbar when resizing
     scrollBarElement.current?.style.setProperty(
-      '--p-scroll-bar-content-width',
+      '--pc-index-table-scroll-bar-content-width',
       `0px`,
     );
 

diff --git a/src/components/IndexTable/components/Checkbox/Checkbox.tsx b/src/components/IndexTable/components/Checkbox/Checkbox.tsx
@@ -63,7 +63,7 @@ export function CheckboxWrapper({children}: CheckboxWrapperProps) {
     if (!checkboxNode.current) return;
 
     const {width} = checkboxNode.current.getBoundingClientRect();
-    setRootProperty('--p-checkbox-offset', `${width}px`);
+    setRootProperty('--pc-checkbox-offset', `${width}px`);
   }, []);
 
   useEffect(() => {

diff --git a/src/components/IndexTable/components/Checkbox/tests/Checkbox.test.tsx b/src/components/IndexTable/components/Checkbox/tests/Checkbox.test.tsx
@@ -93,22 +93,22 @@ describe('<Checkbox />', () => {
         expect(checkbox).toContainReactComponent(CheckboxWrapper);
       });
 
-      it('sets `--p-checkbox-offset` custom property', () => {
+      it('sets `--pc-checkbox-offset` custom property', () => {
         mountWithTable(<Checkbox />, defaultTableProps);
 
         expect(setRootPropertySpy).toHaveBeenLastCalledWith(
-          '--p-checkbox-offset',
+          '--pc-checkbox-offset',
           '0px',
         );
       });
 
-      it('updates `--p-checkbox-offset` custom property on resize', () => {
+      it('updates `--pc-checkbox-offset` custom property on resize', () => {
         mountWithTable(<Checkbox />, defaultTableProps);
         setGetBoundingClientRect(200);
         window.dispatchEvent(new Event('resize'));
 
         expect(setRootPropertySpy).toHaveBeenLastCalledWith(
-          '--p-checkbox-offset',
+          '--pc-checkbox-offset',
           '200px',
         );
       });