Rename designTokens to tokens

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

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)}
 `;

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.

src/designTokens/legacyTokens.ts → 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)',

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',
+};

src/designTokens/motion.ts → 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',

src/designTokens/typography.ts → 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',

src/tokens/index.ts

@@ -0,0 +1 @@
+export * from './tokens';