diff --git a/.changeset/tasty-ducks-punch.md b/.changeset/tasty-ducks-punch.md new file mode 100644 index 00000000000..aee4bba2602 --- /dev/null +++ b/.changeset/tasty-ducks-punch.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-tokens': patch +--- + +Updated public primitive `base` and `light-uplift` theme scales diff --git a/polaris-tokens/src/themes/base/border.ts b/polaris-tokens/src/themes/base/border.ts index 21d11fe9698..b02b92afd4f 100644 --- a/polaris-tokens/src/themes/base/border.ts +++ b/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)})`; +} diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts index 1a80dff4dc8..b0c2ec5ea03 100644 --- a/polaris-tokens/src/themes/base/font.ts +++ b/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)})`; +} diff --git a/polaris-tokens/src/themes/base/space.ts b/polaris-tokens/src/themes/base/space.ts index c937cd1c8c5..1dbd6d5c713 100644 --- a/polaris-tokens/src/themes/base/space.ts +++ b/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)})`; +} diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts index 2e5eb408cd7..91d1875086f 100644 --- a/polaris-tokens/src/themes/light-uplift.ts +++ b/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( diff --git a/polaris-tokens/src/utilities.ts b/polaris-tokens/src/utilities.ts index f496ab4e007..94b3344ac56 100644 --- a/polaris-tokens/src/utilities.ts +++ b/polaris-tokens/src/utilities.ts @@ -92,6 +92,10 @@ export function tokensToRems>(tokenGroup: T) { ) as T; } +export function createVarName(token: string) { + return `--p-${token}`; +} + export function createVar(token: string) { return `--p-${token}`; }