diff --git a/src/components/CustomProperties/styles.ts b/src/components/CustomProperties/styles.ts index af9a92bda33..1fd026cc9a6 100644 --- a/src/components/CustomProperties/styles.ts +++ b/src/components/CustomProperties/styles.ts @@ -1,10 +1,11 @@ -import type { +import { + tokens, + osColorSchemes, Tokens, ColorScheme, - TokenObject, + TokenGroup, OSColorSchemes, } from '../../tokens'; -import {tokens, osColorSchemes} from '../../tokens'; /** Default light color-scheme declarations. */ const lightDeclarations = getColorSchemeDeclarations( @@ -51,8 +52,8 @@ export function getColorSchemeRules( * Creates static CSS custom properties. * Note: These values don't vary by color-scheme. */ -export function getStaticCustomProperties(designTokens: Tokens) { - return Object.entries(designTokens) +export function getStaticCustomProperties(tokens: Tokens) { + return Object.entries(tokens) .filter(([tokenGroup]) => tokenGroup !== 'colorSchemes') .map(([_, tokens]) => getCustomProperties(tokens)) .join(''); @@ -75,7 +76,7 @@ export function getColorSchemeDeclarations( /** * Creates CSS custom properties for a given tokens object. */ -export function getCustomProperties(tokens: TokenObject) { +export function getCustomProperties(tokens: TokenGroup) { return Object.entries(tokens) .map(([name, value]) => `--p-${name}:${value};`) .join(''); diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx index fdb5608cca0..13889ba14dd 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 type { +import { + osColorSchemes, ColorScheme, ColorSchemes, Tokens, - TokenObject, + TokenGroup, } from '../../../tokens'; -import {osColorSchemes} from '../../../tokens'; import { CustomProperties, DEFAULT_COLOR_SCHEME, @@ -24,19 +24,19 @@ interface ColorSchemeAttribute { 'color-scheme': ColorScheme; } -const mockTokens: TokenObject = { +const mockTokenGroup: TokenGroup = { 'design-token-1': 'valueA', 'design-token-2': 'valueB', }; const mockColorSchemes: ColorSchemes = { - light: mockTokens, - dark: mockTokens, + light: mockTokenGroup, + dark: mockTokenGroup, }; -const mockDesignTokens: Tokens = { +const mockTokens: Tokens = { colorSchemes: mockColorSchemes, - motion: mockTokens, + motion: mockTokenGroup, // Note: We don't need to assign mock values to the remaining static tokens. legacyTokens: {}, typography: {}, @@ -149,7 +149,7 @@ describe('', () => { describe('getCustomProperties', () => { it('creates a string of CSS custom properties', () => { - const customProperties = getCustomProperties(mockTokens); + const customProperties = getCustomProperties(mockTokenGroup); expect(customProperties).toBe(expectedCustomProperties); }); @@ -159,7 +159,7 @@ describe('', () => { it('creates a string of CSS declarations for a given color-scheme', () => { const declarations = getColorSchemeDeclarations( 'dark', - mockDesignTokens, + mockTokens, osColorSchemes, ); @@ -169,7 +169,7 @@ describe('', () => { describe('getColorSchemeRules', () => { it('creates a string of CSS rules for each color-scheme', () => { - const rules = getColorSchemeRules(mockDesignTokens, osColorSchemes); + const rules = getColorSchemeRules(mockTokens, osColorSchemes); const expectedRules = Object.keys(mockColorSchemes) .map( @@ -186,9 +186,7 @@ describe('', () => { describe('getStaticCustomProperties', () => { it('creates a string of static CSS custom properties', () => { - const staticCustomProperties = getStaticCustomProperties( - mockDesignTokens, - ); + const staticCustomProperties = getStaticCustomProperties(mockTokens); expect(staticCustomProperties).toBe(expectedCustomProperties); }); diff --git a/src/tokens/_color.ts b/src/tokens/_color.ts index 21cb2ce9d1a..128f0a55332 100644 --- a/src/tokens/_color.ts +++ b/src/tokens/_color.ts @@ -1,11 +1,11 @@ -import type {TokenObject} from './tokens'; +import type {TokenGroup} from './tokens'; /** * All light color-scheme tokens. * * Note: These values were cut/paste directly from the devtools. */ -export const lightColorScheme: TokenObject = { +export const lightColorScheme: TokenGroup = { background: 'rgba(246, 246, 247, 1)', 'background-hovered': 'rgba(241, 242, 243, 1)', 'background-pressed': 'rgba(237, 238, 239, 1)', @@ -140,7 +140,7 @@ export const lightColorScheme: TokenObject = { * * Note: These values were cut/paste directly from the devtools. */ -export const darkColorScheme: TokenObject = { +export const darkColorScheme: TokenGroup = { 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 index 1a5e6652577..80545ac66b8 100644 --- a/src/tokens/_legacy-tokens.ts +++ b/src/tokens/_legacy-tokens.ts @@ -1,4 +1,4 @@ -import type {TokenObject} from './tokens'; +import type {TokenGroup} from './tokens'; /** * This file contains legacy design tokens that have not yet been categorized @@ -6,7 +6,7 @@ import type {TokenObject} from './tokens'; * categorizing tokens by group, moving them into separate files, and/or * deprecating any undesired tokens. */ -export const legacyTokens: TokenObject = { +export const legacyTokens: TokenGroup = { 'border-radius-slim': '0.2rem', 'border-radius-base': '0.4rem', 'border-radius-wide': '0.8rem', diff --git a/src/tokens/_motion.ts b/src/tokens/_motion.ts index 40dac2d8388..73168bb23f6 100644 --- a/src/tokens/_motion.ts +++ b/src/tokens/_motion.ts @@ -1,6 +1,6 @@ -import type {TokenObject} from './tokens'; +import type {TokenGroup} from './tokens'; -export const motion: TokenObject = { +export const motion: TokenGroup = { 'duration-1': '100ms', 'duration-2': '200ms', 'duration-3': '300ms', diff --git a/src/tokens/_typography.ts b/src/tokens/_typography.ts index 5bd7144729b..5774acd2fba 100644 --- a/src/tokens/_typography.ts +++ b/src/tokens/_typography.ts @@ -1,6 +1,6 @@ -import type {TokenObject} from './tokens'; +import type {TokenGroup} from './tokens'; -export const typography: TokenObject = { +export const typography: TokenGroup = { 'font-weight-regular': '400', 'font-weight-medium': '500', 'font-weight-semibold': '600', diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts index 4d5414b2f68..fdfe96766a8 100644 --- a/src/tokens/tokens.ts +++ b/src/tokens/tokens.ts @@ -7,7 +7,7 @@ import {typography} from './_typography'; * Values to convert to CSS custom properties. * @example {background: '#000'} // --p-background: #000; */ -export interface TokenObject { +export interface TokenGroup { [token: string]: string; } @@ -32,23 +32,19 @@ export const osColorSchemes: OSColorSchemes = { * Polaris color schemes and their associated color tokens. */ export type ColorSchemes = { - [C in ColorScheme]: TokenObject; + [C in ColorScheme]: TokenGroup; }; const colorSchemes: ColorSchemes = { - light: { - ...lightColorScheme, - }, - dark: { - ...darkColorScheme, - }, + light: lightColorScheme, + dark: darkColorScheme, }; export interface Tokens { colorSchemes: ColorSchemes; - legacyTokens: TokenObject; - motion: TokenObject; - typography: TokenObject; + legacyTokens: TokenGroup; + motion: TokenGroup; + typography: TokenGroup; } export const tokens: Tokens = {