Remove deprecated v11 custom properties (#10674)

### WHY are these changes introduced? Part of #10661 ### WHAT is this pull request doing? Removes all deprecated v11 custom properties from polaris minus color tokens. --------- Co-authored-by: aveline <aveline@users.noreply.github.com> Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Co-authored-by: Laura Griffee <21976492+lgriffee@users.noreply.github.com> Co-authored-by: Sophie Schneider <20652326+sophschneider@users.noreply.github.com> Co-authored-by: Lo Kim <lo.kim@shopify.com>
Shopify · Oct 12, 2023 · 665bfe7 · 665bfe7
1 parent b797cd0
commit 665bfe7
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 645 deletions.
diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
@@ -199,10 +199,10 @@ export function DefaultBanner({
         <Box
           background={backgroundColor}
           color={textColor}
-          borderStartStartRadius={smUp ? '3' : undefined}
-          borderStartEndRadius={smUp ? '3' : undefined}
-          borderEndStartRadius={!hasContent && smUp ? '3' : undefined}
-          borderEndEndRadius={!hasContent && smUp ? '3' : undefined}
+          borderStartStartRadius={smUp ? '300' : undefined}
+          borderStartEndRadius={smUp ? '300' : undefined}
+          borderEndStartRadius={!hasContent && smUp ? '300' : undefined}
+          borderEndEndRadius={!hasContent && smUp ? '300' : undefined}
           padding="300"
         >
           <InlineStack

diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -13,7 +13,7 @@ export function Default() {
 
 export function Colored() {
   return (
-    <BlockStack gap="2">
+    <BlockStack gap="200">
       <Text as="p" variant="bodyMd" alignment="center">
         Base tone
       </Text>

diff --git a/polaris-react/src/utilities/sticky-manager/sticky-manager.ts b/polaris-react/src/utilities/sticky-manager/sticky-manager.ts
@@ -135,7 +135,7 @@ export class StickyManager {
     }
 
     const stickyOffset = offset
-      ? this.getOffset(stickyNode) + parseInt(space['space-5'], 10)
+      ? this.getOffset(stickyNode) + parseInt(space['space-500'], 10)
       : this.getOffset(stickyNode);
 
     const scrollPosition = scrollTop + stickyOffset;

diff --git a/polaris-tokens/src/themes/base/border.ts b/polaris-tokens/src/themes/base/border.ts
@@ -1,10 +1,7 @@
-import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
 import {size} from '../../size';
 import {createVar as createVarName} from '../../utilities';
 
-type BorderRadiusScaleExperimental = Experimental<'0' | '1_5'>;
-
 export type BorderRadiusScale =
   | '0'
   | '050'
@@ -14,33 +11,13 @@ export type BorderRadiusScale =
   | '300'
   | '400'
   | '500'
-  | '750'
-  | '05'
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | BorderRadiusScaleExperimental;
-
-type BorderWidthScaleExperimental = Experimental<'1' | '2'>;
+  | '750';
 
 export type BorderRadiusAlias = 'full';
 
 export type BorderRadiusAliasOrScale = BorderRadiusAlias | BorderRadiusScale;
 
-export type BorderWidthScale =
-  | '0165'
-  | '025'
-  | '050'
-  | '100'
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | BorderWidthScaleExperimental;
+export type BorderWidthScale = '0165' | '025' | '050' | '100';
 
 export type BorderTokenName =
   | `border-radius-${BorderRadiusAliasOrScale}`
@@ -83,33 +60,6 @@ export const border: {
   'border-radius-full': {
     value: '9999px',
   },
-  'border-radius-0-experimental': {
-    value: '0px',
-  },
-  'border-radius-05': {
-    value: '2px',
-  },
-  'border-radius-1': {
-    value: '4px',
-  },
-  'border-radius-2': {
-    value: '8px',
-  },
-  'border-radius-3': {
-    value: '12px',
-  },
-  'border-radius-4': {
-    value: '16px',
-  },
-  'border-radius-5': {
-    value: '20px',
-  },
-  'border-radius-6': {
-    value: '30px',
-  },
-  'border-radius-1_5-experimental': {
-    value: '6px',
-  },
   'border-width-0165': {
     value: size['0165'],
   },
@@ -122,27 +72,6 @@ export const border: {
   'border-width-100': {
     value: size[100],
   },
-  'border-width-1': {
-    value: '1px',
-  },
-  'border-width-2': {
-    value: '2px',
-  },
-  'border-width-3': {
-    value: '3px',
-  },
-  'border-width-4': {
-    value: '4px',
-  },
-  'border-width-5': {
-    value: '5px',
-  },
-  'border-width-1-experimental': {
-    value: '0.66px',
-  },
-  'border-width-2-experimental': {
-    value: '1px',
-  },
 };
 
 export function createVar(borderTokenName: BorderTokenName) {

diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts
@@ -1,13 +1,10 @@
 import {size} from '../../size';
-import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
 import {createVar as createVarName} from '../../utilities';
 
 export type FontFamilyPrefix = 'font-family';
 type FontFamilyAlias = 'sans' | 'mono';
 
-type FontSizeScaleExperimental = Experimental<'70' | '80'>;
-
 export type FontSizePrefix = 'font-size';
 export type FontSizeScale =
   | '275'
@@ -19,14 +16,7 @@ export type FontSizeScale =
   | '600'
   | '750'
   | '900'
-  | '1000'
-  | '75'
-  | '100'
-  | '200'
-  | '700'
-  | FontSizeScaleExperimental;
-
-type FontLineHeightScaleExperimental = Experimental<'075'>;
+  | '1000';
 
 export type FontLineHeightPrefix = 'font-line-height';
 export type FontLineHeightScale =
@@ -37,15 +27,7 @@ export type FontLineHeightScale =
   | '700'
   | '800'
   | '1000'
-  | '1200'
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '7'
-  | FontLineHeightScaleExperimental;
+  | '1200';
 
 export type FontLetterSpacingPrefix = 'font-letter-spacing';
 export type FontLetterSpacingAlias = 'densest' | 'denser' | 'dense' | 'normal';
@@ -112,24 +94,6 @@ export const font: {
   'font-size-1000': {
     value: size[1000],
   },
-  'font-size-70-experimental': {
-    value: '11px',
-  },
-  'font-size-75': {
-    value: '12px',
-  },
-  'font-size-80-experimental': {
-    value: '13px',
-  },
-  'font-size-100': {
-    value: '14px',
-  },
-  'font-size-200': {
-    value: '16px',
-  },
-  'font-size-700': {
-    value: '40px',
-  },
   'font-weight-regular': {
     value: '450',
   },
@@ -178,30 +142,6 @@ export const font: {
   'font-line-height-1200': {
     value: size[1200],
   },
-  'font-line-height-075-experimental': {
-    value: '12px',
-  },
-  'font-line-height-1': {
-    value: '16px',
-  },
-  'font-line-height-2': {
-    value: '20px',
-  },
-  'font-line-height-3': {
-    value: '24px',
-  },
-  'font-line-height-4': {
-    value: '28px',
-  },
-  'font-line-height-5': {
-    value: '32px',
-  },
-  'font-line-height-6': {
-    value: '40px',
-  },
-  'font-line-height-7': {
-    value: '48px',
-  },
 };
 
 export function createVar(fontTokenName: FontTokenName) {

diff --git a/polaris-tokens/src/themes/base/shadow.ts b/polaris-tokens/src/themes/base/shadow.ts
@@ -1,23 +1,5 @@
-import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
 
-type ShadowAliasExperimental = Experimental<
-  | 'bevel'
-  | 'card-sm'
-  | 'card-md'
-  | 'card-lg'
-  | 'button'
-  | 'button-hover'
-  | 'button-disabled'
-  | 'button-primary-strong-inset'
-  | 'button-primary-strong-hover'
-  | 'button-primary-strong'
-  | 'button-primary'
-  | 'button-primary-hover'
-  | 'button-inset'
-  | 'border-inset'
->;
-
 export type ShadowScale = '0' | '100' | '200' | '300' | '400' | '500' | '600';
 
 export type ShadowBevelScale = '100';
@@ -37,18 +19,7 @@ export type ShadowAlias =
   | 'button-primary-success'
   | 'button-primary-success-hover'
   | 'button-primary-success-inset'
-  | 'border-inset'
-  | 'inset-lg'
-  | 'inset-md'
-  | 'inset-sm'
-  | 'none'
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | ShadowAliasExperimental;
+  | 'border-inset';
 
 export type ShadowAliasOrScale = ShadowAlias | ShadowScale;
 
@@ -147,86 +118,4 @@ export const shadow: {
   'shadow-border-inset': {
     value: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',
   },
-  'shadow-inset-lg': {
-    value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
-  },
-  'shadow-inset-md': {
-    value: 'inset 0px 2px 4px rgba(31, 33, 36, 0.32)',
-  },
-  'shadow-inset-sm': {
-    value: 'inset 0px 0px 3px rgba(31, 33, 36, 0.56)',
-  },
-  'shadow-none': {
-    value: 'none',
-  },
-  'shadow-xs': {
-    value: '0px 1px 0px rgba(0, 0, 0, 0.07)',
-  },
-  'shadow-sm': {
-    value: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)',
-  },
-  'shadow-md': {
-    value: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)',
-  },
-  'shadow-lg': {
-    value: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)',
-  },
-  'shadow-xl': {
-    value: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)',
-  },
-  'shadow-2xl': {
-    value: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)',
-  },
-  'shadow-bevel-experimental': {
-    value:
-      '1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.5) inset',
-  },
-  'shadow-card-sm-experimental': {
-    value:
-      '0px 2px 0px rgba(0, 0, 0, 0.07), 0px 1px 0px rgba(0, 0, 0, 0.07), 1px 0px 0px #E3E3E3, -1px 0px 0px #E3E3E3, 0px -1px 0px #E3E3E3',
-  },
-  'shadow-card-md-experimental': {
-    value:
-      '0px 3px 1px -1px rgba(0, 0, 0, 0.07),  0px -1px 0px 0px rgba(0, 0, 0, 0.16),  1px 0px 0px 0px rgba(227, 227, 227, 1),  -1px 0px 0px 0px rgba(227, 227, 227, 1),  0px 1px 0px 0px rgba(227, 227, 227, 1)',
-  },
-  'shadow-card-lg-experimental': {
-    value:
-      '0px 4px 6px -2px rgba(0, 0, 0, 0.2), inset 0px -1px 0px #D4D4D4, inset -1px 0px 0px #E3E3E3, inset 1px 0px 0px #E3E3E3, inset 0px 1px 0px #E3E3E3',
-  },
-  'shadow-button-experimental': {
-    value:
-      'inset 0px -1px 0px #B5B5B5, inset -1px 0px 0px #E3E3E3, inset 1px 0px 0px #E3E3E3, inset 0px 1px 0px #E3E3E3',
-  },
-  'shadow-button-hover-experimental': {
-    value: `inset 0px -1px 0px #cccccc, inset 1px 0px 0px #ebebeb, inset -1px 0px 0px #ebebeb, inset 0px 1px 0px #ebebeb`,
-  },
-  'shadow-button-disabled-experimental': {
-    value: 'inset 0px 0px 0px 1px rgba(227, 227, 227, 1)',
-  },
-  'shadow-button-primary-strong-inset-experimental': {
-    value: '0px 3px 0px 0px #000 inset',
-  },
-  'shadow-button-primary-strong-hover-experimental': {
-    value:
-      '0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.16) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 0px 0px 0.5px #1A1A1A',
-  },
-  'shadow-button-primary-strong-experimental': {
-    value:
-      '0px 2px 0px 0px rgba(255, 255, 255, 0.2) inset, 2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -2px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 1px #000 inset, 0px 1px 0px 0px #000 inset',
-  },
-  'shadow-button-primary-experimental': {
-    value:
-      '0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) inset',
-  },
-  'shadow-button-primary-hover-experimental': {
-    value:
-      '-1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.25), 0px -1.5px 0px 0px rgba(255, 255, 255, 0.07) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset',
-  },
-  'shadow-button-inset-experimental': {
-    value:
-      '0px 2px 0px 0px rgba(0, 0, 0, 0.60) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset, -1px 0px 1px 0px rgba(0, 0, 0, 0.20) inset',
-  },
-  'shadow-border-inset-experimental': {
-    value: '0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset',
-  },
 };