Update public primitive base and light-uplift theme scales

.changeset/tasty-ducks-punch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': patch
+---
+
+Updated public primitive `base` and `light-uplift` theme scales

polaris-tokens/src/themes/base/border.ts

@@ -1,6 +1,6 @@
-import {size} from '../../size';
 import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
+import {createVarName} from '../../utilities';
 
 type BorderRadiusScaleExperimental = Experimental<'0' | '1_5'>;
 
@@ -50,31 +50,31 @@ export const border: {
   [TokenName in BorderTokenName]: MetaTokenProperties;
 } = {
   'border-radius-0': {
-    value: size[0],
+    value: createVar('border-radius-0-experimental'),
   },
   'border-radius-050': {
-    value: size['050'],
+    value: createVar('border-radius-05'),
   },
   'border-radius-100': {
-    value: size[100],
+    value: createVar('border-radius-1'),
   },
   'border-radius-150': {
-    value: size[150],
+    value: createVar('border-radius-1_5-experimental'),
   },
   'border-radius-200': {
-    value: size[200],
+    value: createVar('border-radius-2'),
   },
   'border-radius-300': {
-    value: size[300],
+    value: createVar('border-radius-3'),
   },
   'border-radius-400': {
-    value: size[400],
+    value: createVar('border-radius-4'),
   },
   'border-radius-500': {
-    value: size[500],
+    value: createVar('border-radius-5'),
   },
   'border-radius-750': {
-    value: size[750],
+    value: createVar('border-radius-6'),
   },
   'border-radius-full': {
     value: '9999px',
@@ -107,16 +107,16 @@ export const border: {
     value: '6px',
   },
   'border-width-0165': {
-    value: size['0165'],
+    value: createVar('border-width-1-experimental'),
   },
   'border-width-025': {
-    value: size['025'],
+    value: createVar('border-width-1'),
   },
   'border-width-050': {
-    value: size['050'],
+    value: createVar('border-width-2'),
   },
   'border-width-100': {
-    value: size[100],
+    value: createVar('border-width-4'),
   },
   'border-width-1': {
     value: '1px',
@@ -140,3 +140,7 @@ export const border: {
     value: '1px',
   },
 };
+
+function createVar(borderTokenName: BorderTokenName) {
+  return `var(${createVarName(borderTokenName)})`;
+}

polaris-tokens/src/themes/base/font.ts

@@ -1,5 +1,5 @@
-import {size} from '../../size';
 import type {Experimental} from '../../types';
+import {createVarName} from '../../utilities';
 import type {MetaTokenProperties} from '../types';
 
 type FontFamilyAlias = 'sans' | 'mono';
@@ -67,22 +67,22 @@ export const font: {
       "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
   },
   'font-size-275': {
-    value: size[275],
+    value: createVar('font-size-70-experimental'),
   },
   'font-size-325': {
-    value: size[325],
+    value: createVar('font-size-80-experimental'),
   },
   'font-size-350': {
-    value: size[350],
+    value: createVar('font-size-100'),
   },
   'font-size-750': {
-    value: size[750],
+    value: createVar('font-size-500'),
   },
   'font-size-900': {
-    value: size[900],
+    value: createVar('font-size-600'),
   },
   'font-size-1000': {
-    value: size[1000],
+    value: createVar('font-size-700'),
   },
   'font-size-70-experimental': {
     value: '11px',
@@ -127,28 +127,28 @@ export const font: {
     value: '700',
   },
   'font-line-height-300': {
-    value: size[300],
+    value: createVar('font-line-height-075-experimental'),
   },
   'font-line-height-400': {
-    value: size[400],
+    value: createVar('font-line-height-1'),
   },
   'font-line-height-500': {
-    value: size[500],
+    value: createVar('font-line-height-2'),
   },
   'font-line-height-600': {
-    value: size[600],
+    value: createVar('font-line-height-3'),
   },
   'font-line-height-700': {
-    value: size[700],
+    value: createVar('font-line-height-4'),
   },
   'font-line-height-800': {
-    value: size[800],
+    value: createVar('font-line-height-5'),
   },
   'font-line-height-1000': {
-    value: size[1000],
+    value: createVar('font-line-height-6'),
   },
   'font-line-height-1200': {
-    value: size[1200],
+    value: createVar('font-line-height-7'),
   },
   'font-line-height-075-experimental': {
     value: '12px',
@@ -175,3 +175,7 @@ export const font: {
     value: '48px',
   },
 };
+
+function createVar(fontTokenName: FontTokenName) {
+  return `var(${createVarName(fontTokenName)})`;
+}

polaris-tokens/src/themes/base/space.ts

@@ -1,5 +1,6 @@
 import {size} from '../../size';
 import type {Experimental} from '../../types';
+import {createVarName} from '../../utilities';
 import type {MetaTokenProperties} from '../types';
 
 type SpaceScaleExperimental = Experimental<'1_5'>;
@@ -56,52 +57,52 @@ export const space: {
     value: size['025'],
   },
   'space-050': {
-    value: size['050'],
+    value: createVar('space-05'),
   },
   'space-100': {
-    value: size[100],
+    value: createVar('space-1'),
   },
   'space-150': {
-    value: size[150],
+    value: createVar('space-1_5-experimental'),
   },
   'space-200': {
-    value: size[200],
+    value: createVar('space-2'),
   },
   'space-300': {
-    value: size[300],
+    value: createVar('space-3'),
   },
   'space-400': {
-    value: size[400],
+    value: createVar('space-4'),
   },
   'space-500': {
-    value: size[500],
+    value: createVar('space-5'),
   },
   'space-600': {
-    value: size[600],
+    value: createVar('space-6'),
   },
   'space-800': {
-    value: size[800],
+    value: createVar('space-8'),
   },
   'space-1000': {
-    value: size[1000],
+    value: createVar('space-10'),
   },
   'space-1200': {
-    value: size[1200],
+    value: createVar('space-12'),
   },
   'space-1600': {
-    value: size[1600],
+    value: createVar('space-16'),
   },
   'space-2000': {
-    value: size[2000],
+    value: createVar('space-20'),
   },
   'space-2400': {
-    value: size[2400],
+    value: createVar('space-24'),
   },
   'space-2800': {
-    value: size[2800],
+    value: createVar('space-28'),
   },
   'space-3200': {
-    value: size[3200],
+    value: createVar('space-32'),
   },
   'space-05': {
     value: '2px',
@@ -152,3 +153,7 @@ export const space: {
     value: '128px',
   },
 };
+
+function createVar(spaceTokenName: SpaceTokenName) {
+  return `var(${createVarName(spaceTokenName)})`;
+}

polaris-tokens/src/themes/light-uplift.ts

@@ -1,40 +1,27 @@
 import * as colors from '../colors-experimental';
+import {size} from '../size';
 
 import {createMetaTheme, createMetaThemePartial} from './utils';
 
 export const metaThemeLightUpliftPartial = createMetaThemePartial({
-  motion: {
-    'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
-  },
-  font: {
-    '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'},
-  },
-  shadow: {
-    '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)'},
+  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: {
+    // 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]()},
@@ -170,6 +157,74 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
     '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(

polaris-tokens/src/utilities.ts

@@ -92,6 +92,10 @@ export function tokensToRems<T extends Exact<MetadataGroup, T>>(tokenGroup: T) {
   ) as T;
 }
 
+export function createVarName(token: string) {
+  return `--p-${token}`;
+}
+
 export function createVar(token: string) {
   return `--p-${token}`;
 }