From 13ce5ec685fab2ac69f66a0bc70600f782354601 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Tue, 3 Oct 2023 10:49:23 -0600
Subject: [PATCH] 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>
---
 .../src/components/Banner/Banner.tsx          |   8 +-
 .../src/components/Icon/Icon.stories.tsx      |   2 +-
 .../sticky-manager/sticky-manager.ts          |   2 +-
 polaris-tokens/src/themes/base/border.ts      |  75 +---
 polaris-tokens/src/themes/base/font.ts        |  64 +---
 polaris-tokens/src/themes/base/shadow.ts      | 113 +-----
 polaris-tokens/src/themes/base/space.ts       |  69 +---
 .../src/themes/light-high-contrast.ts         |   2 +-
 polaris-tokens/src/themes/light-uplift.ts     | 323 ------------------
 9 files changed, 13 insertions(+), 645 deletions(-)
 delete mode 100644 polaris-tokens/src/themes/light-uplift.ts

diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index 9cdc5ff0891..84de9779e16 100644
--- 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
index 0ab0eb94911..d6511c1a39b 100644
--- 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
index 179e96fece1..399e85015f3 100644
--- 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
index bb0a4ff8b21..022cf6cb942 100644
--- 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
index 221fb6b916e..667c0f214b9 100644
--- 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
index edf137aeaf1..a116dec3c9d 100644
--- 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',
-  },
 };
diff --git a/polaris-tokens/src/themes/base/space.ts b/polaris-tokens/src/themes/base/space.ts
index 58ac2455bb9..3b1f73388f0 100644
--- a/polaris-tokens/src/themes/base/space.ts
+++ b/polaris-tokens/src/themes/base/space.ts
@@ -1,10 +1,7 @@
 import {size} from '../../size';
-import type {Experimental} from '../../types';
 import {createVarName} from '../../utilities';
 import type {MetaTokenProperties} from '../types';
 
-type SpaceScaleExperimental = Experimental<'1_5'>;
-
 export type SpaceScale =
   | '0'
   | '025'
@@ -23,23 +20,7 @@ export type SpaceScale =
   | '2000'
   | '2400'
   | '2800'
-  | '3200'
-  | '05'
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '8'
-  | '10'
-  | '12'
-  | '16'
-  | '20'
-  | '24'
-  | '28'
-  | '32'
-  | SpaceScaleExperimental;
+  | '3200';
 
 export type SpaceAlias =
   /** Specialty and component spacing. */
@@ -122,54 +103,6 @@ export const space: {
   'space-table-cell-padding': {
     value: createVar('space-150'),
   },
-  'space-05': {
-    value: '2px',
-  },
-  'space-1': {
-    value: '4px',
-  },
-  'space-1_5-experimental': {
-    value: '6px',
-  },
-  'space-2': {
-    value: '8px',
-  },
-  'space-3': {
-    value: '12px',
-  },
-  'space-4': {
-    value: '16px',
-  },
-  'space-5': {
-    value: '20px',
-  },
-  'space-6': {
-    value: '24px',
-  },
-  'space-8': {
-    value: '32px',
-  },
-  'space-10': {
-    value: '40px',
-  },
-  'space-12': {
-    value: '48px',
-  },
-  'space-16': {
-    value: '64px',
-  },
-  'space-20': {
-    value: '80px',
-  },
-  'space-24': {
-    value: '96px',
-  },
-  'space-28': {
-    value: '112px',
-  },
-  'space-32': {
-    value: '128px',
-  },
 };
 
 function createVar(spaceTokenName: SpaceTokenName) {
diff --git a/polaris-tokens/src/themes/light-high-contrast.ts b/polaris-tokens/src/themes/light-high-contrast.ts
index 64586c9f875..ec808e88d4b 100644
--- a/polaris-tokens/src/themes/light-high-contrast.ts
+++ b/polaris-tokens/src/themes/light-high-contrast.ts
@@ -30,7 +30,7 @@ export const metaThemeLightHighContrastPartial = createMetaThemePartial({
     },
   },
   shadow: {
-    'shadow-bevel-experimental': {
+    'shadow-bevel-100': {
       value:
         '0px 1px 0px 0px rgba(26, 26, 26, 0.07), 0px 1px 0px 0px rgba(208, 208, 208, 0.40) inset, 1px 0px 0px 0px #CCC inset, -1px 0px 0px 0px #CCC inset, 0px -1px 0px 0px #999 inset',
     },
diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts
deleted file mode 100644
index ea7122aea2e..00000000000
--- a/polaris-tokens/src/themes/light-uplift.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-import * as colors from '../colors-experimental';
-import {size} from '../size';
-
-import {createMetaTheme, createMetaThemePartial} from './utils';
-
-export const metaThemeLightUpliftPartial = createMetaThemePartial({
-  border: {
-    // v12.0.0
-    'border-radius-0': {value: size[0]},
-    'border-radius-050': {value: size['050']},
-    'border-radius-100': {value: size[100]},
-    'border-radius-150': {value: size[150]},
-    'border-radius-200': {value: size[200]},
-    'border-radius-300': {value: size[300]},
-    'border-radius-400': {value: size[400]},
-    'border-radius-500': {value: size[500]},
-    'border-radius-750': {value: size[750]},
-    'border-width-0165': {value: size['0165']},
-    'border-width-025': {value: size['025']},
-    'border-width-050': {value: size['050']},
-    'border-width-100': {value: size[100]},
-  },
-  color: {
-    // v12.0.0
-    'color-bg-surface': {value: colors.gray[1]},
-    'color-bg-surface-secondary': {value: colors.gray[4]},
-    'color-bg-surface-secondary-hover': {value: colors.gray[6]},
-    'color-bg-surface-secondary-active': {value: colors.gray[7]},
-    'color-bg-surface-tertiary': {value: colors.gray[5]},
-    'color-bg-fill-tertiary': {value: colors.gray[8]},
-    'color-bg-fill-tertiary-hover': {value: colors.gray[9]},
-    'color-bg-fill-tertiary-active': {value: colors.gray[10]},
-    'color-input-bg-surface': {value: colors.gray[2]},
-    'color-input-bg-surface-hover': {value: colors.gray[3]},
-    'color-input-bg-surface-active': {value: colors.gray[4]},
-    'color-bg-surface-selected': {value: colors.gray[3]},
-    'color-bg-fill-success': {value: colors.green[12]},
-    'color-bg-fill-success-hover': {value: colors.green[13]},
-    'color-bg-fill-success-active': {value: colors.green[14]},
-    'color-bg-fill-success-secondary': {value: colors.green[3]},
-    'color-bg-surface-success': {value: colors.green[3]},
-    'color-bg-surface-success-hover': {value: colors.green[4]},
-    'color-bg-surface-success-active': {value: colors.green[5]},
-    'color-bg-fill-critical': {value: colors.red[12]},
-    'color-bg-fill-critical-hover': {value: colors.red[13]},
-    'color-bg-fill-critical-active': {value: colors.red[14]},
-    'color-bg-fill-critical-secondary': {value: colors.red[6]},
-    'color-bg-surface-critical': {value: colors.red[4]},
-    'color-bg-surface-critical-hover': {value: colors.red[5]},
-    'color-bg-surface-critical-active': {value: colors.red[6]},
-    'color-bg-fill-caution': {value: colors.yellow[6]},
-    'color-bg-fill-caution-secondary': {value: colors.yellow[4]},
-    'color-bg-surface-caution': {value: colors.yellow[2]},
-    'color-bg-surface-caution-hover': {value: colors.yellow[3]},
-    'color-bg-surface-caution-active': {value: colors.yellow[4]},
-    'color-bg-fill-info': {value: colors.azure[9]},
-    'color-bg-fill-info-secondary': {value: colors.azure[4]},
-    'color-bg-surface-info': {value: colors.azure[3]},
-    'color-bg-surface-info-hover': {value: colors.azure[4]},
-    'color-bg-surface-info-active': {value: colors.azure[6]},
-    'color-bg-fill-warning': {value: colors.orange[9]},
-    'color-bg-fill-warning-secondary': {value: colors.orange[7]},
-    'color-bg-surface-warning': {value: colors.orange[3]},
-    'color-bg-fill-magic': {value: colors.purple[12]},
-    'color-bg-fill-magic-secondary': {value: colors.purple[6]},
-    'color-bg-fill-magic-secondary-hover': {value: colors.purple[7]},
-    'color-bg-fill-magic-secondary-active': {value: colors.purple[8]},
-    'color-bg-surface-magic-hover': {value: colors.purple[4]},
-    'color-bg-fill-secondary': {value: colors.gray[6]},
-    'color-bg-fill-inverse': {value: colors.gray[15]},
-    'color-bg-fill-inverse-hover': {value: colors.gray[14]},
-    'color-bg-fill-inverse-active': {value: colors.gray[13]},
-    'color-bg-surface-transparent': {value: colors.blackAlpha[1]},
-    'color-bg-fill-transparent-hover': {value: colors.blackAlpha[5]},
-    'color-bg-fill-transparent-active': {value: colors.blackAlpha[6]},
-    'color-bg-fill-disabled': {value: colors.blackAlpha[5]},
-    'color-bg-fill-transparent-secondary': {value: colors.blackAlpha[6]},
-    'color-bg-fill-brand-disabled': {value: colors.blackAlpha[9]},
-    'color-backdrop-bg': {value: colors.blackAlpha[14]},
-    'color-avatar-bg-fill': {value: colors.gray[11]},
-    'color-avatar-one-bg-fill': {value: colors.magenta[7]},
-    'color-avatar-two-bg-fill': {value: colors.green[7]},
-    'color-avatar-three-bg-fill': {value: colors.cyan[7]},
-    'color-avatar-four-bg-fill': {value: colors.azure[7]},
-    'color-avatar-five-bg-fill': {value: colors.rose[7]},
-    'color-text-secondary': {value: colors.gray[13]},
-    'color-text-emphasis': {value: colors.blue[13]},
-    'color-text-emphasis-hover': {value: colors.blue[14]},
-    'color-text-emphasis-active': {value: colors.blue[15]},
-    'color-text-brand': {value: colors.gray[14]},
-    'color-text-brand-hover': {value: colors.gray[15]},
-    'color-text-info-on-bg-fill': {value: colors.azure[16]},
-    'color-text-inverse-secondary': {value: colors.gray[11]},
-    'color-avatar-text-on-bg-fill': {value: colors.gray[1]},
-    'color-avatar-one-text-on-bg-fill': {value: colors.magenta[14]},
-    'color-avatar-two-text-on-bg-fill': {value: colors.green[14]},
-    'color-avatar-three-text-on-bg-fill': {value: colors.cyan[14]},
-    'color-avatar-four-text-on-bg-fill': {value: colors.azure[14]},
-    'color-avatar-five-text-on-bg-fill': {value: colors.rose[14]},
-    'color-icon-secondary': {value: colors.gray[12]},
-    'color-icon-emphasis': {value: colors.blue[13]},
-    'color-icon-emphasis-hover': {value: colors.blue[14]},
-    'color-icon-emphasis-active': {value: colors.blue[15]},
-    'color-icon-brand': {value: colors.gray[16]},
-    'color-border-secondary': {value: colors.gray[7]},
-    'color-input-border': {value: colors.gray[12]},
-    'color-input-border-hover': {value: colors.gray[13]},
-    'color-input-border-active': {value: colors.gray[16]},
-    'color-border-emphasis-hover': {value: colors.blue[14]},
-    'color-border-emphasis-active': {value: colors.blue[15]},
-    'color-border-focus': {value: colors.blue[13]},
-    'color-border-brand': {value: colors.gray[8]},
-    'color-border-critical-secondary': {value: colors.red[14]},
-    'color-border-magic-secondary': {value: colors.purple[12]},
-    // v11.0.0
-    'color-bg-inverse': {value: colors.gray[16]},
-    'color-bg-inset-strong': {value: colors.gray[15]},
-    'color-bg-inverse-hover': {value: colors.gray[14]},
-    'color-bg-inverse-active': {value: colors.gray[13]},
-    'color-bg-strong-hover': {value: colors.gray[9]},
-    'color-bg-strong-active': {value: colors.gray[10]},
-    'color-bg-strong': {value: colors.gray[8]},
-    'color-bg-subdued-active': {value: colors.gray[7]},
-    'color-bg-disabled': {value: colors.gray[7]},
-    'color-bg-interactive-disabled': {value: colors.gray[7]},
-    'color-bg-app': {value: colors.gray[6]},
-    'color-bg-app-hover': {value: colors.gray[2]},
-    'color-bg-app-selected': {value: colors.gray[3]},
-    'color-bg-active': {value: colors.gray[4]},
-    'color-bg-subdued-hover': {value: colors.gray[6]},
-    'color-bg-inset': {value: colors.gray[6]},
-    'color-bg-hover': {value: colors.gray[3]},
-    'color-bg-subdued': {value: colors.gray[4]},
-    'color-bg-input': {value: colors.gray[1]},
-    'color-bg': {value: colors.gray[1]},
-    'color-bg-primary-active': {value: colors.gray[16]},
-    'color-bg-primary-hover': {value: colors.gray[16]},
-    'color-bg-primary': {value: colors.gray[15]},
-    'color-bg-success-strong': {value: colors.green[12]},
-    'color-bg-success': {value: colors.green[3]},
-    'color-bg-primary-subdued-active': {value: colors.gray[6]},
-    'color-bg-success-subdued': {value: colors.green[3]},
-    'color-bg-primary-subdued-hover': {value: colors.gray[7]},
-    'color-bg-success-subdued-hover': {value: colors.green[5]},
-    'color-bg-primary-subdued': {value: colors.gray[8]},
-    'color-bg-primary-subdued-selected': {value: colors.gray[6]},
-    'color-bg-critical-strong-active': {value: colors.red[14]},
-    'color-bg-critical-strong-hover': {value: colors.red[13]},
-    'color-bg-critical-strong': {value: colors.red[12]},
-    'color-bg-critical-subdued-active': {value: colors.red[6]},
-    'color-bg-critical': {value: colors.red[6]},
-    'color-bg-critical-subdued': {value: colors.red[4]},
-    'color-bg-critical-subdued-hover': {value: colors.red[5]},
-    'color-bg-caution-strong': {value: colors.yellow[6]},
-    'color-bg-caution': {value: colors.yellow[4]},
-    'color-bg-caution-subdued-active': {value: colors.yellow[4]},
-    'color-bg-caution-subdued': {value: colors.yellow[2]},
-    'color-bg-caution-subdued-hover': {value: colors.yellow[3]},
-    'color-bg-info-strong': {value: colors.azure[9]},
-    'color-bg-info-subdued-active': {value: colors.azure[6]},
-    'color-bg-info': {value: colors.azure[4]},
-    'color-bg-info-subdued': {value: colors.azure[3]},
-    'color-bg-info-subdued-hover': {value: colors.azure[4]},
-    'color-bg-interactive-active': {value: colors.gray[14]},
-    'color-bg-interactive-hover': {value: colors.gray[15]},
-    'color-bg-interactive': {value: colors.gray[16]},
-    'color-bg-interactive-subdued-active': {value: colors.gray[6]},
-    'color-bg-interactive-subdued-hover': {value: colors.gray[7]},
-    'color-bg-interactive-subdued': {value: colors.gray[8]},
-    'color-bg-interactive-selected': {value: colors.gray[6]},
-    'color-bg-warning': {value: colors.orange[7]},
-    'color-bg-magic-strong': {value: colors.purple[12]},
-    'color-bg-magic-hover': {value: colors.purple[7]},
-    'color-bg-magic-active': {value: colors.purple[8]},
-    'color-bg-magic': {value: colors.purple[6]},
-    'color-bg-magic-subdued-hover': {value: colors.purple[4]},
-    'color-bg-magic-subdued-active': {value: colors.purple[6]},
-    'color-bg-magic-subdued': {value: colors.purple[3]},
-    'color-border-input-hover': {value: colors.gray[13]},
-    'color-border-inverse': {value: colors.gray[13]},
-    'color-border-strong-hover': {value: colors.gray[11]},
-    'color-border-input': {value: colors.gray[12]},
-    'color-border-hover': {value: colors.gray[10]},
-    'color-border-strong': {value: colors.gray[10]},
-    'color-border': {value: colors.gray[8]},
-    'color-border-disabled': {value: colors.gray[7]},
-    'color-border-subdued': {value: colors.gray[7]},
-    'color-border-interactive-disabled': {value: colors.gray[7]},
-    'color-border-primary': {value: colors.gray[8]},
-    'color-border-success': {value: colors.green[5]},
-    'color-border-success-subdued': {value: colors.green[5]},
-    'color-border-critical-active': {value: colors.red[11]},
-    'color-border-critical-hover': {value: colors.red[10]},
-    'color-border-critical': {value: colors.red[9]},
-    'color-border-critical-subdued': {value: colors.red[9]},
-    'color-border-caution': {value: colors.yellow[5]},
-    'color-border-caution-subdued': {value: colors.yellow[5]},
-    'color-border-info': {value: colors.azure[9]},
-    'color-border-info-subdued': {value: colors.azure[9]},
-    'color-border-interactive-active': {value: colors.blue[15]},
-    'color-border-interactive-hover': {value: colors.blue[14]},
-    'color-border-interactive': {value: colors.blue[13]},
-    'color-border-interactive-focus': {value: colors.blue[13]},
-    'color-border-interactive-subdued': {value: colors.blue[13]},
-    'color-border-magic-strong': {value: colors.purple[12]},
-    'color-border-magic': {value: colors.purple[10]},
-    'color-icon-hover': {value: colors.gray[15]},
-    'color-icon': {value: colors.gray[14]},
-    'color-icon-subdued': {value: colors.gray[12]},
-    'color-icon-disabled': {value: colors.gray[10]},
-    'color-icon-interactive-disabled': {value: colors.gray[10]},
-    'color-icon-inverse': {value: colors.gray[8]},
-    'color-icon-on-color': {value: colors.gray[1]},
-    'color-icon-primary': {value: colors.gray[16]},
-    'color-icon-success': {value: colors.green[12]},
-    'color-icon-critical': {value: colors.red[11]},
-    'color-icon-caution': {value: colors.yellow[11]},
-    'color-icon-info': {value: colors.azure[11]},
-    'color-icon-warning': {value: colors.orange[11]},
-    'color-icon-interactive-active': {value: colors.blue[15]},
-    'color-icon-interactive-hover': {value: colors.blue[14]},
-    'color-icon-interactive': {value: colors.blue[13]},
-    'color-icon-interactive-inverse': {value: colors.blue[8]},
-    'color-icon-magic': {value: colors.purple[13]},
-    'color-text': {value: colors.gray[15]},
-    'color-text-subdued': {value: colors.gray[13]},
-    'color-text-disabled': {value: colors.gray[11]},
-    'color-text-interactive-disabled': {value: colors.gray[10]},
-    'color-text-inverse-subdued': {value: colors.gray[10]},
-    'color-text-inverse': {value: colors.gray[8]},
-    'color-text-on-color': {value: colors.gray[1]},
-    'color-text-success-strong': {value: colors.green[15]},
-    'color-text-success': {value: colors.green[15]},
-    'color-text-primary': {value: colors.gray[14]},
-    'color-text-primary-hover': {value: colors.gray[14]},
-    'color-text-critical-strong': {value: colors.red[14]},
-    'color-text-critical-active': {value: colors.red[16]},
-    'color-text-critical': {value: colors.red[14]},
-    'color-text-caution-strong': {value: colors.yellow[15]},
-    'color-text-caution': {value: colors.yellow[15]},
-    'color-text-info-strong': {value: colors.azure[16]},
-    'color-text-info': {value: colors.azure[14]},
-    'color-text-warning-strong': {value: colors.orange[16]},
-    'color-text-interactive-active': {value: colors.blue[15]},
-    'color-text-interactive-hover': {value: colors.blue[14]},
-    'color-text-interactive': {value: colors.blue[13]},
-    'color-text-interactive-inverse': {value: colors.blue[8]},
-    'color-text-magic-strong': {value: colors.purple[15]},
-    'color-text-magic': {value: colors.purple[14]},
-  },
-  font: {
-    // v12.0.0
-    'font-size-275': {value: size[275]},
-    'font-size-325': {value: size[325]},
-    'font-size-350': {value: size[350]},
-    'font-size-750': {value: size[750]},
-    'font-size-900': {value: size[900]},
-    'font-size-1000': {value: size[1000]},
-    'font-line-height-300': {value: size[300]},
-    'font-line-height-400': {value: size[400]},
-    'font-line-height-500': {value: size[500]},
-    'font-line-height-600': {value: size[600]},
-    'font-line-height-700': {value: size[700]},
-    'font-line-height-800': {value: size[800]},
-    'font-line-height-1000': {value: size[1000]},
-    'font-line-height-1200': {value: size[1200]},
-    // v11.0.0
-    'font-family-sans': {
-      value:
-        "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
-    },
-    'font-size-500': {value: '30px'},
-    'font-size-600': {value: '36px'},
-  },
-  motion: {
-    // v11.0.0
-    'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
-  },
-  space: {
-    // v12.0.0
-    'space-050': {value: size['050']},
-    'space-100': {value: size[100]},
-    'space-150': {value: size[150]},
-    'space-200': {value: size[200]},
-    'space-300': {value: size[300]},
-    'space-400': {value: size[400]},
-    'space-500': {value: size[500]},
-    'space-600': {value: size[600]},
-    'space-800': {value: size[800]},
-    'space-1000': {value: size[1000]},
-    'space-1200': {value: size[1200]},
-    'space-1600': {value: size[1600]},
-    'space-2000': {value: size[2000]},
-    'space-2400': {value: size[2400]},
-    'space-2800': {value: size[2800]},
-    'space-3200': {value: size[3200]},
-  },
-  shadow: {
-    // v11.0.0
-    'shadow-inset-lg': {
-      value:
-        'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
-    },
-    'shadow-inset-md': {
-      value:
-        'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
-    },
-    'shadow-inset-sm': {
-      value:
-        'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
-    },
-    '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)'},
-  },
-});
-
-export const metaThemeLightUplift = createMetaTheme(
-  metaThemeLightUpliftPartial,
-);