From 008a19261eb6408c076d0e9d0b7e798e3ef721e3 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 24 Nov 2021 11:18:21 -0800 Subject: [PATCH 1/3] Clean up from directory change --- src/components/CustomProperties/styles.ts | 13 +++++----- .../tests/CustomProperties.test.tsx | 24 +++++++++---------- src/tokens/_color.ts | 6 ++--- src/tokens/_legacy-tokens.ts | 4 ++-- src/tokens/_motion.ts | 4 ++-- src/tokens/_typography.ts | 4 ++-- src/tokens/tokens.ts | 18 ++++++-------- 7 files changed, 34 insertions(+), 39 deletions(-) diff --git a/src/components/CustomProperties/styles.ts b/src/components/CustomProperties/styles.ts index af9a92bda33..a8beb567d52 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, + TokensGroup, 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: TokensGroup) { 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..774ecb90189 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, + TokensGroup, } from '../../../tokens'; -import {osColorSchemes} from '../../../tokens'; import { CustomProperties, DEFAULT_COLOR_SCHEME, @@ -24,19 +24,19 @@ interface ColorSchemeAttribute { 'color-scheme': ColorScheme; } -const mockTokens: TokenObject = { +const mockTokensGroup: TokensGroup = { 'design-token-1': 'valueA', 'design-token-2': 'valueB', }; const mockColorSchemes: ColorSchemes = { - light: mockTokens, - dark: mockTokens, + light: mockTokensGroup, + dark: mockTokensGroup, }; -const mockDesignTokens: Tokens = { +const mockTokens: Tokens = { colorSchemes: mockColorSchemes, - motion: mockTokens, + motion: mockTokensGroup, // Note: We don't need to assign mock values to the remaining static tokens. legacyTokens: {}, typography: {}, @@ -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..9d76ffec64a 100644 --- a/src/tokens/_color.ts +++ b/src/tokens/_color.ts @@ -1,11 +1,11 @@ -import type {TokenObject} from './tokens'; +import type {TokensGroup} from './tokens'; /** * All light color-scheme tokens. * * Note: These values were cut/paste directly from the devtools. */ -export const lightColorScheme: TokenObject = { +export const lightColorScheme: TokensGroup = { 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: TokensGroup = { 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..5cb2f494319 100644 --- a/src/tokens/_legacy-tokens.ts +++ b/src/tokens/_legacy-tokens.ts @@ -1,4 +1,4 @@ -import type {TokenObject} from './tokens'; +import type {TokensGroup} 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: TokensGroup = { '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..d7e6ed3a4b0 100644 --- a/src/tokens/_motion.ts +++ b/src/tokens/_motion.ts @@ -1,6 +1,6 @@ -import type {TokenObject} from './tokens'; +import type {TokensGroup} from './tokens'; -export const motion: TokenObject = { +export const motion: TokensGroup = { 'duration-1': '100ms', 'duration-2': '200ms', 'duration-3': '300ms', diff --git a/src/tokens/_typography.ts b/src/tokens/_typography.ts index 5bd7144729b..071ac6e41ca 100644 --- a/src/tokens/_typography.ts +++ b/src/tokens/_typography.ts @@ -1,6 +1,6 @@ -import type {TokenObject} from './tokens'; +import type {TokensGroup} from './tokens'; -export const typography: TokenObject = { +export const typography: TokensGroup = { '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..77dd66a0f4e 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 TokensGroup { [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]: TokensGroup; }; const colorSchemes: ColorSchemes = { - light: { - ...lightColorScheme, - }, - dark: { - ...darkColorScheme, - }, + light: lightColorScheme, + dark: darkColorScheme, }; export interface Tokens { colorSchemes: ColorSchemes; - legacyTokens: TokenObject; - motion: TokenObject; - typography: TokenObject; + legacyTokens: TokensGroup; + motion: TokensGroup; + typography: TokensGroup; } export const tokens: Tokens = { From a97020ff507c1bce6f6a7eb52c3782d3b3f0bbcf Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 24 Nov 2021 11:29:54 -0800 Subject: [PATCH 2/3] Fix test error --- src/components/CustomProperties/tests/CustomProperties.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx index 774ecb90189..96dc28ae6ff 100644 --- a/src/components/CustomProperties/tests/CustomProperties.test.tsx +++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx @@ -149,7 +149,7 @@ describe('', () => { describe('getCustomProperties', () => { it('creates a string of CSS custom properties', () => { - const customProperties = getCustomProperties(mockTokens); + const customProperties = getCustomProperties(mockTokensGroup); expect(customProperties).toBe(expectedCustomProperties); }); From c7f2870bbe8648ebca6e582a8c6efe968b6a1bb1 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 24 Nov 2021 11:31:51 -0800 Subject: [PATCH 3/3] TokensGroup -> TokenGroup --- src/components/CustomProperties/styles.ts | 4 ++-- .../CustomProperties/tests/CustomProperties.test.tsx | 12 ++++++------ src/tokens/_color.ts | 6 +++--- src/tokens/_legacy-tokens.ts | 4 ++-- src/tokens/_motion.ts | 4 ++-- src/tokens/_typography.ts | 4 ++-- src/tokens/tokens.ts | 10 +++++----- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/CustomProperties/styles.ts b/src/components/CustomProperties/styles.ts index a8beb567d52..1fd026cc9a6 100644 --- a/src/components/CustomProperties/styles.ts +++ b/src/components/CustomProperties/styles.ts @@ -3,7 +3,7 @@ import { osColorSchemes, Tokens, ColorScheme, - TokensGroup, + TokenGroup, OSColorSchemes, } from '../../tokens'; @@ -76,7 +76,7 @@ export function getColorSchemeDeclarations( /** * Creates CSS custom properties for a given tokens object. */ -export function getCustomProperties(tokens: TokensGroup) { +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 96dc28ae6ff..13889ba14dd 100644 --- a/src/components/CustomProperties/tests/CustomProperties.test.tsx +++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx @@ -6,7 +6,7 @@ import { ColorScheme, ColorSchemes, Tokens, - TokensGroup, + TokenGroup, } from '../../../tokens'; import { CustomProperties, @@ -24,19 +24,19 @@ interface ColorSchemeAttribute { 'color-scheme': ColorScheme; } -const mockTokensGroup: TokensGroup = { +const mockTokenGroup: TokenGroup = { 'design-token-1': 'valueA', 'design-token-2': 'valueB', }; const mockColorSchemes: ColorSchemes = { - light: mockTokensGroup, - dark: mockTokensGroup, + light: mockTokenGroup, + dark: mockTokenGroup, }; const mockTokens: Tokens = { colorSchemes: mockColorSchemes, - motion: mockTokensGroup, + 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(mockTokensGroup); + const customProperties = getCustomProperties(mockTokenGroup); expect(customProperties).toBe(expectedCustomProperties); }); diff --git a/src/tokens/_color.ts b/src/tokens/_color.ts index 9d76ffec64a..128f0a55332 100644 --- a/src/tokens/_color.ts +++ b/src/tokens/_color.ts @@ -1,11 +1,11 @@ -import type {TokensGroup} 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: TokensGroup = { +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: TokensGroup = { * * Note: These values were cut/paste directly from the devtools. */ -export const darkColorScheme: TokensGroup = { +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 5cb2f494319..80545ac66b8 100644 --- a/src/tokens/_legacy-tokens.ts +++ b/src/tokens/_legacy-tokens.ts @@ -1,4 +1,4 @@ -import type {TokensGroup} 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 {TokensGroup} from './tokens'; * categorizing tokens by group, moving them into separate files, and/or * deprecating any undesired tokens. */ -export const legacyTokens: TokensGroup = { +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 d7e6ed3a4b0..73168bb23f6 100644 --- a/src/tokens/_motion.ts +++ b/src/tokens/_motion.ts @@ -1,6 +1,6 @@ -import type {TokensGroup} from './tokens'; +import type {TokenGroup} from './tokens'; -export const motion: TokensGroup = { +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 071ac6e41ca..5774acd2fba 100644 --- a/src/tokens/_typography.ts +++ b/src/tokens/_typography.ts @@ -1,6 +1,6 @@ -import type {TokensGroup} from './tokens'; +import type {TokenGroup} from './tokens'; -export const typography: TokensGroup = { +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 77dd66a0f4e..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 TokensGroup { +export interface TokenGroup { [token: string]: string; } @@ -32,7 +32,7 @@ export const osColorSchemes: OSColorSchemes = { * Polaris color schemes and their associated color tokens. */ export type ColorSchemes = { - [C in ColorScheme]: TokensGroup; + [C in ColorScheme]: TokenGroup; }; const colorSchemes: ColorSchemes = { @@ -42,9 +42,9 @@ const colorSchemes: ColorSchemes = { export interface Tokens { colorSchemes: ColorSchemes; - legacyTokens: TokensGroup; - motion: TokensGroup; - typography: TokensGroup; + legacyTokens: TokenGroup; + motion: TokenGroup; + typography: TokenGroup; } export const tokens: Tokens = {