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