diff --git a/src/components/CustomProperties/CustomProperties.tsx b/src/components/CustomProperties/CustomProperties.tsx index e5b84dbe981..b5d1516392a 100644 --- a/src/components/CustomProperties/CustomProperties.tsx +++ b/src/components/CustomProperties/CustomProperties.tsx @@ -1,6 +1,6 @@ import React, {useEffect} from 'react'; -import type {ColorScheme} from '../../designTokens'; +import type {ColorScheme} from '../../tokens'; import {styles} from './styles'; diff --git a/src/components/CustomProperties/styles.ts b/src/components/CustomProperties/styles.ts index 13dc2c1e5f6..af9a92bda33 100644 --- a/src/components/CustomProperties/styles.ts +++ b/src/components/CustomProperties/styles.ts @@ -1,23 +1,22 @@ -import { +import type { + Tokens, ColorScheme, - designTokens, - DesignTokens, - osColorSchemes, + TokenObject, OSColorSchemes, - Tokens, -} from '../../designTokens'; +} from '../../tokens'; +import {tokens, osColorSchemes} from '../../tokens'; /** Default light color-scheme declarations. */ const lightDeclarations = getColorSchemeDeclarations( 'light', - designTokens, + tokens, osColorSchemes, ); /** Default dark color-scheme declarations. */ const darkDeclarations = getColorSchemeDeclarations( 'dark', - designTokens, + tokens, osColorSchemes, ); @@ -29,17 +28,17 @@ const darkDeclarations = getColorSchemeDeclarations( * [color-scheme="dim"] {...} */ export function getColorSchemeRules( - designTokens: DesignTokens, + tokens: Tokens, osColorSchemes: OSColorSchemes, ) { - return Object.keys(designTokens.colorSchemes) + return Object.keys(tokens.colorSchemes) .map((key) => { const colorScheme = key as ColorScheme; const selector = `[color-scheme="${colorScheme}"]`; const properties = getColorSchemeDeclarations( colorScheme, - designTokens, + tokens, osColorSchemes, ); @@ -52,7 +51,7 @@ export function getColorSchemeRules( * Creates static CSS custom properties. * Note: These values don't vary by color-scheme. */ -export function getStaticCustomProperties(designTokens: DesignTokens) { +export function getStaticCustomProperties(designTokens: Tokens) { return Object.entries(designTokens) .filter(([tokenGroup]) => tokenGroup !== 'colorSchemes') .map(([_, tokens]) => getCustomProperties(tokens)) @@ -64,19 +63,19 @@ export function getStaticCustomProperties(designTokens: DesignTokens) { */ export function getColorSchemeDeclarations( colorScheme: ColorScheme, - designTokens: DesignTokens, + tokens: Tokens, osColorSchemes: OSColorSchemes, ) { return [ `color-scheme:${osColorSchemes[colorScheme]};`, - getCustomProperties(designTokens.colorSchemes[colorScheme]), + getCustomProperties(tokens.colorSchemes[colorScheme]), ].join(''); } /** * Creates CSS custom properties for a given tokens object. */ -export function getCustomProperties(tokens: Tokens) { +export function getCustomProperties(tokens: TokenObject) { return Object.entries(tokens) .map(([name, value]) => `--p-${name}:${value};`) .join(''); @@ -88,7 +87,7 @@ export function getCustomProperties(tokens: Tokens) { export const styles = /* css */ ` :root { ${lightDeclarations} - ${getStaticCustomProperties(designTokens)} + ${getStaticCustomProperties(tokens)} } @media (prefers-color-scheme: dark) { @@ -97,5 +96,5 @@ export const styles = /* css */ ` } } -${getColorSchemeRules(designTokens, osColorSchemes)} +${getColorSchemeRules(tokens, osColorSchemes)} `; diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx index c89bfed3e71..fdb5608cca0 100644 --- a/src/components/CustomProperties/tests/CustomProperties.test.tsx +++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx @@ -1,13 +1,13 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; -import { +import type { ColorScheme, ColorSchemes, - DesignTokens, - osColorSchemes, Tokens, -} from '../../../designTokens'; + TokenObject, +} from '../../../tokens'; +import {osColorSchemes} from '../../../tokens'; import { CustomProperties, DEFAULT_COLOR_SCHEME, @@ -24,7 +24,7 @@ interface ColorSchemeAttribute { 'color-scheme': ColorScheme; } -const mockTokens: Tokens = { +const mockTokens: TokenObject = { 'design-token-1': 'valueA', 'design-token-2': 'valueB', }; @@ -34,7 +34,7 @@ const mockColorSchemes: ColorSchemes = { dark: mockTokens, }; -const mockDesignTokens: DesignTokens = { +const mockDesignTokens: Tokens = { colorSchemes: mockColorSchemes, motion: mockTokens, // Note: We don't need to assign mock values to the remaining static tokens. diff --git a/src/designTokens/colorSchemes.ts b/src/designTokens/colorSchemes.ts deleted file mode 100644 index 8e8a97264c0..00000000000 --- a/src/designTokens/colorSchemes.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type {Tokens} from './designTokens'; -import {lightLegacyTokens, darkLegacyTokens} from './legacyTokens'; - -/** - * Polaris color schemes. - */ -export type ColorScheme = 'light' | 'dark'; - -/** - * Mapping of Polaris color schemes to operating system color schemes. - * - * Note: The associated OS value will be set for the CSS `color-scheme` declaration. - * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme - */ -export type OSColorSchemes = { - [C in ColorScheme]: 'light' | 'dark' | 'normal'; -}; - -export const osColorSchemes: OSColorSchemes = { - light: 'light', - dark: 'dark', -}; - -/** - * Polaris color schemes and their associated color tokens. - */ -export type ColorSchemes = { - [C in ColorScheme]: Tokens; -}; - -export const colorSchemes: ColorSchemes = { - light: { - ...lightLegacyTokens, - }, - dark: { - ...darkLegacyTokens, - }, -}; diff --git a/src/designTokens/designTokens.ts b/src/designTokens/designTokens.ts deleted file mode 100644 index 0f87d1a4273..00000000000 --- a/src/designTokens/designTokens.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {colorSchemes, ColorSchemes} from './colorSchemes'; -import {motion} from './motion'; -import {typography} from './typography'; -import {legacyTokens} from './legacyTokens'; - -export interface Tokens { - /** - * Values to convert to CSS custom properties. - * @example {background: '#000'} // --p-background: #000; - */ - [token: string]: string; -} - -export interface DesignTokens { - colorSchemes: ColorSchemes; - legacyTokens: Tokens; - motion: Tokens; - typography: Tokens; -} - -export const designTokens: DesignTokens = { - colorSchemes, - legacyTokens, - motion, - typography, -}; diff --git a/src/designTokens/index.ts b/src/designTokens/index.ts deleted file mode 100644 index cdf1ae9e7c2..00000000000 --- a/src/designTokens/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './colorSchemes'; - -export * from './designTokens'; - -export * from './motion'; diff --git a/src/designTokens/legacyTokens.ts b/src/tokens/_color.ts similarity index 82% rename from src/designTokens/legacyTokens.ts rename to src/tokens/_color.ts index 0445cb580db..21cb2ce9d1a 100644 --- a/src/designTokens/legacyTokens.ts +++ b/src/tokens/_color.ts @@ -1,66 +1,11 @@ -/** - * This file contains legacy design tokens that have not yet been categorized - * and organized into files. The goal is to eventually remove this file by - * categorizing tokens by group, moving them into separate files, and/or - * deprecating any undesired tokens. - */ -import type {Tokens} from './designTokens'; - -/** - * All static design tokens. - * - * Note: These values were cut/paste directly from the devtools. - */ -export const legacyTokens: Tokens = { - 'border-radius-slim': '0.2rem', - 'border-radius-base': '0.4rem', - 'border-radius-wide': '0.8rem', - 'border-radius-full': '50%', - 'card-shadow': - '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)', - 'popover-shadow': - '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)', - 'modal-shadow': - '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)', - 'top-bar-shadow': '0 2px 2px -1px var(--p-shadow-from-direct-light)', - 'button-drop-shadow': '0 1px 0 rgba(0, 0, 0, 0.05)', - 'button-inner-shadow': 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)', - 'button-pressed-inner-shadow': 'inset 0 1px 0 rgba(0, 0, 0, 0.15)', - 'override-loading-z-index': '514', - 'choice-size': '2rem', - 'icon-size': '1rem', - 'choice-margin': '0.1rem', - 'control-border-width': '0.2rem', - 'banner-border-default': - 'inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)', - 'banner-border-success': - 'inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)', - 'banner-border-highlight': - 'inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)', - 'banner-border-warning': - 'inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)', - 'banner-border-critical': - 'inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)', - 'thin-border-subdued': '0.1rem solid var(--p-border-subdued)', - 'text-field-spinner-offset': '0.2rem', - 'text-field-focus-ring-offset': '-0.4rem', - 'text-field-focus-ring-border-radius': '0.7rem', - 'button-group-item-spacing': '-0.1rem', - 'duration-100': '100ms', - 'duration-150': '150ms', - 'ease-in': 'cubic-bezier(0.5, 0.1, 1, 1)', - ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', - 'range-slider-thumb-size-base': '1.6rem', - 'range-slider-thumb-size-active': '2.4rem', - 'frame-offset': '0px', -}; +import type {TokenObject} from './tokens'; /** * All light color-scheme tokens. * * Note: These values were cut/paste directly from the devtools. */ -export const lightLegacyTokens: Tokens = { +export const lightColorScheme: TokenObject = { background: 'rgba(246, 246, 247, 1)', 'background-hovered': 'rgba(241, 242, 243, 1)', 'background-pressed': 'rgba(237, 238, 239, 1)', @@ -195,7 +140,7 @@ export const lightLegacyTokens: Tokens = { * * Note: These values were cut/paste directly from the devtools. */ -export const darkLegacyTokens: Tokens = { +export const darkColorScheme: TokenObject = { background: 'rgba(11, 12, 13, 1)', 'background-hovered': 'rgba(11, 12, 13, 1)', 'background-pressed': 'rgba(11, 12, 13, 1)', diff --git a/src/tokens/_legacy-tokens.ts b/src/tokens/_legacy-tokens.ts new file mode 100644 index 00000000000..1a5e6652577 --- /dev/null +++ b/src/tokens/_legacy-tokens.ts @@ -0,0 +1,51 @@ +import type {TokenObject} from './tokens'; + +/** + * This file contains legacy design tokens that have not yet been categorized + * and organized into files. The goal is to eventually remove this file by + * categorizing tokens by group, moving them into separate files, and/or + * deprecating any undesired tokens. + */ +export const legacyTokens: TokenObject = { + 'border-radius-slim': '0.2rem', + 'border-radius-base': '0.4rem', + 'border-radius-wide': '0.8rem', + 'border-radius-full': '50%', + 'card-shadow': + '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)', + 'popover-shadow': + '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)', + 'modal-shadow': + '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)', + 'top-bar-shadow': '0 2px 2px -1px var(--p-shadow-from-direct-light)', + 'button-drop-shadow': '0 1px 0 rgba(0, 0, 0, 0.05)', + 'button-inner-shadow': 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)', + 'button-pressed-inner-shadow': 'inset 0 1px 0 rgba(0, 0, 0, 0.15)', + 'override-loading-z-index': '514', + 'choice-size': '2rem', + 'icon-size': '1rem', + 'choice-margin': '0.1rem', + 'control-border-width': '0.2rem', + 'banner-border-default': + 'inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued)', + 'banner-border-success': + 'inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued)', + 'banner-border-highlight': + 'inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued)', + 'banner-border-warning': + 'inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued)', + 'banner-border-critical': + 'inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued)', + 'thin-border-subdued': '0.1rem solid var(--p-border-subdued)', + 'text-field-spinner-offset': '0.2rem', + 'text-field-focus-ring-offset': '-0.4rem', + 'text-field-focus-ring-border-radius': '0.7rem', + 'button-group-item-spacing': '-0.1rem', + 'duration-100': '100ms', + 'duration-150': '150ms', + 'ease-in': 'cubic-bezier(0.5, 0.1, 1, 1)', + ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', + 'range-slider-thumb-size-base': '1.6rem', + 'range-slider-thumb-size-active': '2.4rem', + 'frame-offset': '0px', +}; diff --git a/src/designTokens/motion.ts b/src/tokens/_motion.ts similarity index 85% rename from src/designTokens/motion.ts rename to src/tokens/_motion.ts index 46c80502a2e..40dac2d8388 100644 --- a/src/designTokens/motion.ts +++ b/src/tokens/_motion.ts @@ -1,6 +1,6 @@ -import type {Tokens} from './designTokens'; +import type {TokenObject} from './tokens'; -export const motion: Tokens = { +export const motion: TokenObject = { 'duration-1': '100ms', 'duration-2': '200ms', 'duration-3': '300ms', diff --git a/src/designTokens/typography.ts b/src/tokens/_typography.ts similarity index 60% rename from src/designTokens/typography.ts rename to src/tokens/_typography.ts index c1f352906d8..5bd7144729b 100644 --- a/src/designTokens/typography.ts +++ b/src/tokens/_typography.ts @@ -1,6 +1,6 @@ -import type {Tokens} from './designTokens'; +import type {TokenObject} from './tokens'; -export const typography: Tokens = { +export const typography: TokenObject = { 'font-weight-regular': '400', 'font-weight-medium': '500', 'font-weight-semibold': '600', diff --git a/src/tokens/index.ts b/src/tokens/index.ts new file mode 100644 index 00000000000..e56053c1660 --- /dev/null +++ b/src/tokens/index.ts @@ -0,0 +1 @@ +export * from './tokens'; diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts new file mode 100644 index 00000000000..4d5414b2f68 --- /dev/null +++ b/src/tokens/tokens.ts @@ -0,0 +1,59 @@ +import {legacyTokens} from './_legacy-tokens'; +import {lightColorScheme, darkColorScheme} from './_color'; +import {motion} from './_motion'; +import {typography} from './_typography'; + +/** + * Values to convert to CSS custom properties. + * @example {background: '#000'} // --p-background: #000; + */ +export interface TokenObject { + [token: string]: string; +} + +export type ColorScheme = 'light' | 'dark'; + +/** + * Mapping of Polaris color schemes to operating system color schemes. + * + * Note: The associated OS value will be set for the CSS `color-scheme` declaration. + * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme + */ +export type OSColorSchemes = { + [C in ColorScheme]: 'light' | 'dark' | 'normal'; +}; + +export const osColorSchemes: OSColorSchemes = { + light: 'light', + dark: 'dark', +}; + +/** + * Polaris color schemes and their associated color tokens. + */ +export type ColorSchemes = { + [C in ColorScheme]: TokenObject; +}; + +const colorSchemes: ColorSchemes = { + light: { + ...lightColorScheme, + }, + dark: { + ...darkColorScheme, + }, +}; + +export interface Tokens { + colorSchemes: ColorSchemes; + legacyTokens: TokenObject; + motion: TokenObject; + typography: TokenObject; +} + +export const tokens: Tokens = { + colorSchemes, + legacyTokens, + motion, + typography, +};