4721 cleanup

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('');

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('<CustomProperties />', () => {
 
   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('<CustomProperties />', () => {
     it('creates a string of CSS declarations for a given color-scheme', () => {
       const declarations = getColorSchemeDeclarations(
         'dark',
-        mockDesignTokens,
+        mockTokens,
         osColorSchemes,
       );
 
@@ -169,7 +169,7 @@ describe('<CustomProperties />', () => {
 
   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('<CustomProperties />', () => {
 
   describe('getStaticCustomProperties', () => {
     it('creates a string of static CSS custom properties', () => {
-      const staticCustomProperties = getStaticCustomProperties(
-        mockDesignTokens,
-      );
+      const staticCustomProperties = getStaticCustomProperties(mockTokens);
 
       expect(staticCustomProperties).toBe(expectedCustomProperties);
     });

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)',

src/tokens/_legacy-tokens.ts

@@ -1,12 +1,12 @@
-import type {TokenObject} from './tokens';
+import type {TokenGroup} 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 = {
+export const legacyTokens: TokenGroup = {
   'border-radius-slim': '0.2rem',
   'border-radius-base': '0.4rem',
   'border-radius-wide': '0.8rem',

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',

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',

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 = {