diff --git a/.changeset/flat-knives-hammer.md b/.changeset/flat-knives-hammer.md
new file mode 100644
index 0000000000..e499e0695f
--- /dev/null
+++ b/.changeset/flat-knives-hammer.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': minor
+---
+
+Adds `RecursiveRecord` type
diff --git a/.changeset/pretty-paws-try.md b/.changeset/pretty-paws-try.md
new file mode 100644
index 0000000000..53e0a308c0
--- /dev/null
+++ b/.changeset/pretty-paws-try.md
@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/tokens': minor
+---
+
+- Improves semantics of color token segment type names (e.g. `Type` -> `Property`, `State` -> `InteractionState`).
+- Adds TSDoc to color types
+- Deprecates `Mode` enum in favor if `Theme` (exported from `lib`)
diff --git a/.gitignore b/.gitignore
index d044970b01..419999bfe5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -56,3 +56,6 @@ scripts/tmp.*.ts
 .changeset/pre.json
 
 TODO.md
+
+# PR train config (https://github.com/realyze/pr-train)
+.pr-train.yml
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index 7708138eb1..4c98f350d1 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -7,7 +7,7 @@ import getTheme from './getTheme';
 export * from './helpers';
 export { validateChildren, isComponentType } from './validateChildren';
 export { createSyntheticEvent } from './createSyntheticEvent';
-export { type Mutable } from './types';
+export type { Mutable, RecursiveRecord } from './types';
 
 export { typeIs, createUniqueClassName, getNodeTextContent, getTheme, Theme };
 export type { DarkModeProps, LgIdProps };
diff --git a/packages/lib/src/types/Mutable.ts b/packages/lib/src/types/Mutable.d.ts
similarity index 100%
rename from packages/lib/src/types/Mutable.ts
rename to packages/lib/src/types/Mutable.d.ts
diff --git a/packages/lib/src/types/RecursiveRecord.d.ts b/packages/lib/src/types/RecursiveRecord.d.ts
new file mode 100644
index 0000000000..850ca1b386
--- /dev/null
+++ b/packages/lib/src/types/RecursiveRecord.d.ts
@@ -0,0 +1,34 @@
+/**
+ * Create a recursive Record type of any number of key sets.
+ *
+ * The second parameter (`Strict`) determines whether each union of Keys
+ * must be complete in each recursive `Record`
+ * Passing `false` to this parameter will wrap each recursive `Record` in `Partial`,
+ * resulting in a looser Record definition.
+ *
+ * E.g.
+ * ```ts
+ * ColorRecord = RecursiveRecord<
+ *   [Theme, Property, Variant, State, string],
+ *   false
+ * > =
+ * Partial<Record<Theme,
+ *   Partial<Record<Property,
+ *     Partial<Record<Variant,
+ *       Partial<Record<State, string>>
+ *     >>
+ *   >>
+ * >>
+ * ```
+ * */
+export type RecursiveRecord<
+  Keys extends Array<any>,
+  Strict extends boolean = true,
+> = Keys extends [
+  infer Key, // the current union of keys
+  ...infer Rest,
+]
+  ? Strict extends true
+    ? Record<Key & string, RecursiveRecord<Rest, Strict>>
+    : Partial<Record<Key & string, RecursiveRecord<Rest, Strict>>>
+  : Keys;
diff --git a/packages/lib/src/types/index.ts b/packages/lib/src/types/index.ts
index 062b519106..f4b09fb773 100644
--- a/packages/lib/src/types/index.ts
+++ b/packages/lib/src/types/index.ts
@@ -1 +1,2 @@
-export { type Mutable } from './Mutable';
+export type { Mutable } from './Mutable';
+export type { RecursiveRecord } from './RecursiveRecord';
diff --git a/packages/tokens/src/color/color.ts b/packages/tokens/src/color/color.ts
index f6129be918..890207cbdc 100644
--- a/packages/tokens/src/color/color.ts
+++ b/packages/tokens/src/color/color.ts
@@ -1,10 +1,10 @@
-import { Mode } from '../mode';
+import { Theme } from '@leafygreen-ui/lib';
 
-import { ModeColorRecord } from './color.types';
+import { PropertyColorRecord } from './color.types';
 import { darkModeColors } from './darkModeColors';
 import { lightModeColors } from './lightModeColors';
 
 export const color = {
-  [Mode.Dark]: darkModeColors,
-  [Mode.Light]: lightModeColors,
-} as const satisfies Record<Mode, ModeColorRecord>;
+  [Theme.Dark]: darkModeColors,
+  [Theme.Light]: lightModeColors,
+} as const satisfies Record<Theme, PropertyColorRecord>;
diff --git a/packages/tokens/src/color/color.types.ts b/packages/tokens/src/color/color.types.ts
index 50ce1c7c7d..a467cb824c 100644
--- a/packages/tokens/src/color/color.types.ts
+++ b/packages/tokens/src/color/color.types.ts
@@ -1,11 +1,17 @@
-const Type = {
+/**
+ * The element property a color token applies to
+ */
+const Property = {
   Background: 'background',
   Border: 'border',
   Icon: 'icon',
   Text: 'text',
 } as const;
-type Type = (typeof Type)[keyof typeof Type];
+type Property = (typeof Property)[keyof typeof Property];
 
+/**
+ * The context variant in which a color token should be applied
+ */
 const Variant = {
   Disabled: 'disabled',
   Placeholder: 'placeholder',
@@ -21,16 +27,29 @@ const Variant = {
 } as const;
 type Variant = (typeof Variant)[keyof typeof Variant];
 
-const State = {
+/**
+ * The interaction state in which a color token should be applied
+ */
+const InteractionState = {
   Default: 'default',
   Hover: 'hover',
   Focus: 'focus',
 } as const;
-type State = (typeof State)[keyof typeof State];
+type InteractionState =
+  (typeof InteractionState)[keyof typeof InteractionState];
 
+/**
+ * A partial Record,
+ * mapping a subset of {@link Variant} keys
+ * to a Record of {@link InteractionState} color tokens
+ */
 export type VariantColorRecord = Partial<
-  Record<Variant, Record<State, string>>
+  Record<Variant, Record<InteractionState, string>>
 >;
-export type ModeColorRecord = Record<Type, VariantColorRecord>;
 
-export { State, Type, Variant };
+/**
+ * A Record mapping {@link Property} keys to {@link VariantColorRecord}
+ */
+export type PropertyColorRecord = Record<Property, VariantColorRecord>;
+
+export { InteractionState, Property, Variant };
diff --git a/packages/tokens/src/color/darkModeColors.ts b/packages/tokens/src/color/darkModeColors.ts
index adc4ff422d..5e19231cca 100644
--- a/packages/tokens/src/color/darkModeColors.ts
+++ b/packages/tokens/src/color/darkModeColors.ts
@@ -1,168 +1,168 @@
 import { palette } from '@leafygreen-ui/palette';
 
 import {
-  ModeColorRecord,
-  State,
+  InteractionState,
+  type PropertyColorRecord,
   Variant,
-  VariantColorRecord,
+  type VariantColorRecord,
 } from './color.types';
 
 const { black, blue, gray, green, red, white, yellow } = palette;
 
 const darkModeBackgroundColors = {
   [Variant.Primary]: {
-    [State.Default]: black,
-    [State.Hover]: gray.dark2,
-    [State.Focus]: blue.dark3,
+    [InteractionState.Default]: black,
+    [InteractionState.Hover]: gray.dark2,
+    [InteractionState.Focus]: blue.dark3,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.dark4,
-    [State.Hover]: gray.dark2,
-    [State.Focus]: blue.dark3,
+    [InteractionState.Default]: gray.dark4,
+    [InteractionState.Hover]: gray.dark2,
+    [InteractionState.Focus]: blue.dark3,
   },
   [Variant.InversePrimary]: {
-    [State.Default]: gray.light2,
-    [State.Hover]: gray.light3,
-    [State.Focus]: blue.light2,
+    [InteractionState.Default]: gray.light2,
+    [InteractionState.Hover]: gray.light3,
+    [InteractionState.Focus]: blue.light2,
   },
   [Variant.Info]: {
-    [State.Default]: blue.dark3,
-    [State.Hover]: blue.dark3,
-    [State.Focus]: blue.dark3,
+    [InteractionState.Default]: blue.dark3,
+    [InteractionState.Hover]: blue.dark3,
+    [InteractionState.Focus]: blue.dark3,
   },
   [Variant.Warning]: {
-    [State.Default]: yellow.dark3,
-    [State.Hover]: yellow.dark3,
-    [State.Focus]: yellow.dark3,
+    [InteractionState.Default]: yellow.dark3,
+    [InteractionState.Hover]: yellow.dark3,
+    [InteractionState.Focus]: yellow.dark3,
   },
   [Variant.Success]: {
-    [State.Default]: green.dark3,
-    [State.Hover]: green.dark3,
-    [State.Focus]: green.dark3,
+    [InteractionState.Default]: green.dark3,
+    [InteractionState.Hover]: green.dark3,
+    [InteractionState.Focus]: green.dark3,
   },
   [Variant.Error]: {
-    [State.Default]: red.dark3,
-    [State.Hover]: red.dark3,
-    [State.Focus]: red.dark3,
+    [InteractionState.Default]: red.dark3,
+    [InteractionState.Hover]: red.dark3,
+    [InteractionState.Focus]: red.dark3,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.dark3,
-    [State.Hover]: gray.dark3,
-    [State.Focus]: gray.dark3,
+    [InteractionState.Default]: gray.dark3,
+    [InteractionState.Hover]: gray.dark3,
+    [InteractionState.Focus]: gray.dark3,
   },
 } as const satisfies VariantColorRecord;
 
 const darkModeBorderColors = {
   [Variant.Primary]: {
-    [State.Default]: gray.base,
-    [State.Hover]: gray.base,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: gray.base,
+    [InteractionState.Hover]: gray.base,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.dark2,
-    [State.Hover]: gray.dark2,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: gray.dark2,
+    [InteractionState.Hover]: gray.dark2,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Success]: {
-    [State.Default]: green.dark1,
-    [State.Hover]: green.dark1,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: green.dark1,
+    [InteractionState.Hover]: green.dark1,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Error]: {
-    [State.Default]: red.light1,
-    [State.Hover]: red.light1,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: red.light1,
+    [InteractionState.Hover]: red.light1,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.dark2,
-    [State.Hover]: gray.dark2,
-    [State.Focus]: gray.dark2,
+    [InteractionState.Default]: gray.dark2,
+    [InteractionState.Hover]: gray.dark2,
+    [InteractionState.Focus]: gray.dark2,
   },
 } as const satisfies VariantColorRecord;
 
 const darkModeIconColors = {
   [Variant.Primary]: {
-    [State.Default]: gray.light1,
-    [State.Hover]: gray.light3,
-    [State.Focus]: blue.light3,
+    [InteractionState.Default]: gray.light1,
+    [InteractionState.Hover]: gray.light3,
+    [InteractionState.Focus]: blue.light3,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.base,
-    [State.Hover]: gray.light3,
-    [State.Focus]: blue.light3,
+    [InteractionState.Default]: gray.base,
+    [InteractionState.Hover]: gray.light3,
+    [InteractionState.Focus]: blue.light3,
   },
   [Variant.InversePrimary]: {
-    [State.Default]: white,
-    [State.Hover]: black,
-    [State.Focus]: blue.dark2,
+    [InteractionState.Default]: white,
+    [InteractionState.Hover]: black,
+    [InteractionState.Focus]: blue.dark2,
   },
   [Variant.Info]: {
-    [State.Default]: blue.light1,
-    [State.Hover]: blue.light1,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: blue.light1,
+    [InteractionState.Hover]: blue.light1,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Warning]: {
-    [State.Default]: yellow.base,
-    [State.Hover]: yellow.base,
-    [State.Focus]: yellow.base,
+    [InteractionState.Default]: yellow.base,
+    [InteractionState.Hover]: yellow.base,
+    [InteractionState.Focus]: yellow.base,
   },
   [Variant.Success]: {
-    [State.Default]: green.base,
-    [State.Hover]: green.base,
-    [State.Focus]: green.base,
+    [InteractionState.Default]: green.base,
+    [InteractionState.Hover]: green.base,
+    [InteractionState.Focus]: green.base,
   },
   [Variant.Error]: {
-    [State.Default]: red.light1,
-    [State.Hover]: red.light1,
-    [State.Focus]: red.light1,
+    [InteractionState.Default]: red.light1,
+    [InteractionState.Hover]: red.light1,
+    [InteractionState.Focus]: red.light1,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.dark1,
-    [State.Hover]: gray.dark1,
-    [State.Focus]: gray.dark1,
+    [InteractionState.Default]: gray.dark1,
+    [InteractionState.Hover]: gray.dark1,
+    [InteractionState.Focus]: gray.dark1,
   },
 } as const satisfies VariantColorRecord;
 
 const darkModeTextColors = {
   [Variant.Primary]: {
-    [State.Default]: gray.light2,
-    [State.Hover]: gray.light2,
-    [State.Focus]: blue.light3,
+    [InteractionState.Default]: gray.light2,
+    [InteractionState.Hover]: gray.light2,
+    [InteractionState.Focus]: blue.light3,
   },
   [Variant.Placeholder]: {
-    [State.Default]: gray.dark1,
-    [State.Hover]: gray.dark1,
-    [State.Focus]: gray.dark1,
+    [InteractionState.Default]: gray.dark1,
+    [InteractionState.Hover]: gray.dark1,
+    [InteractionState.Focus]: gray.dark1,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.light1,
-    [State.Hover]: gray.light2,
-    [State.Focus]: blue.light3,
+    [InteractionState.Default]: gray.light1,
+    [InteractionState.Hover]: gray.light2,
+    [InteractionState.Focus]: blue.light3,
   },
   [Variant.InversePrimary]: {
-    [State.Default]: black,
-    [State.Hover]: black,
-    [State.Focus]: blue.dark2,
+    [InteractionState.Default]: black,
+    [InteractionState.Hover]: black,
+    [InteractionState.Focus]: blue.dark2,
   },
   [Variant.InverseSecondary]: {
-    [State.Default]: gray.dark2,
-    [State.Hover]: black,
-    [State.Focus]: blue.dark2,
+    [InteractionState.Default]: gray.dark2,
+    [InteractionState.Hover]: black,
+    [InteractionState.Focus]: blue.dark2,
   },
   [Variant.Error]: {
-    [State.Default]: red.light1,
-    [State.Hover]: red.light1,
-    [State.Focus]: red.light1,
+    [InteractionState.Default]: red.light1,
+    [InteractionState.Hover]: red.light1,
+    [InteractionState.Focus]: red.light1,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.dark1,
-    [State.Hover]: gray.dark1,
-    [State.Focus]: gray.dark1,
+    [InteractionState.Default]: gray.dark1,
+    [InteractionState.Hover]: gray.dark1,
+    [InteractionState.Focus]: gray.dark1,
   },
   [Variant.Link]: {
-    [State.Default]: blue.light1,
-    [State.Hover]: blue.light1,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: blue.light1,
+    [InteractionState.Hover]: blue.light1,
+    [InteractionState.Focus]: blue.light1,
   },
 } as const satisfies VariantColorRecord;
 
@@ -171,4 +171,4 @@ export const darkModeColors = {
   border: darkModeBorderColors,
   icon: darkModeIconColors,
   text: darkModeTextColors,
-} as const satisfies ModeColorRecord;
+} as const satisfies PropertyColorRecord;
diff --git a/packages/tokens/src/color/index.ts b/packages/tokens/src/color/index.ts
index 28158d66d5..cea936ab25 100644
--- a/packages/tokens/src/color/index.ts
+++ b/packages/tokens/src/color/index.ts
@@ -1,2 +1,2 @@
 export { color } from './color';
-export { State, Type, Variant } from './color.types';
+export { InteractionState, Property, Variant } from './color.types';
diff --git a/packages/tokens/src/color/lightModeColors.ts b/packages/tokens/src/color/lightModeColors.ts
index 633a62184d..3cfc0d48c7 100644
--- a/packages/tokens/src/color/lightModeColors.ts
+++ b/packages/tokens/src/color/lightModeColors.ts
@@ -1,168 +1,168 @@
 import { palette } from '@leafygreen-ui/palette';
 
 import {
-  ModeColorRecord,
-  State,
+  InteractionState,
+  type PropertyColorRecord,
   Variant,
-  VariantColorRecord,
+  type VariantColorRecord,
 } from './color.types';
 
 const { black, blue, gray, green, red, white, yellow } = palette;
 
 const lightModeBackgroundColors = {
   [Variant.Primary]: {
-    [State.Default]: white,
-    [State.Hover]: gray.light2,
-    [State.Focus]: blue.light3,
+    [InteractionState.Default]: white,
+    [InteractionState.Hover]: gray.light2,
+    [InteractionState.Focus]: blue.light3,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.light3,
-    [State.Hover]: gray.light2,
-    [State.Focus]: blue.light3,
+    [InteractionState.Default]: gray.light3,
+    [InteractionState.Hover]: gray.light2,
+    [InteractionState.Focus]: blue.light3,
   },
   [Variant.InversePrimary]: {
-    [State.Default]: black,
-    [State.Hover]: gray.dark3,
-    [State.Focus]: blue.dark2,
+    [InteractionState.Default]: black,
+    [InteractionState.Hover]: gray.dark3,
+    [InteractionState.Focus]: blue.dark2,
   },
   [Variant.Info]: {
-    [State.Default]: blue.light3,
-    [State.Hover]: blue.light3,
-    [State.Focus]: blue.light3,
+    [InteractionState.Default]: blue.light3,
+    [InteractionState.Hover]: blue.light3,
+    [InteractionState.Focus]: blue.light3,
   },
   [Variant.Warning]: {
-    [State.Default]: yellow.light3,
-    [State.Hover]: yellow.light3,
-    [State.Focus]: yellow.light3,
+    [InteractionState.Default]: yellow.light3,
+    [InteractionState.Hover]: yellow.light3,
+    [InteractionState.Focus]: yellow.light3,
   },
   [Variant.Success]: {
-    [State.Default]: green.light3,
-    [State.Hover]: green.light3,
-    [State.Focus]: green.light3,
+    [InteractionState.Default]: green.light3,
+    [InteractionState.Hover]: green.light3,
+    [InteractionState.Focus]: green.light3,
   },
   [Variant.Error]: {
-    [State.Default]: red.light3,
-    [State.Hover]: red.light3,
-    [State.Focus]: red.light3,
+    [InteractionState.Default]: red.light3,
+    [InteractionState.Hover]: red.light3,
+    [InteractionState.Focus]: red.light3,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.light2,
-    [State.Hover]: gray.light2,
-    [State.Focus]: gray.light2,
+    [InteractionState.Default]: gray.light2,
+    [InteractionState.Hover]: gray.light2,
+    [InteractionState.Focus]: gray.light2,
   },
 } as const satisfies VariantColorRecord;
 
 const lightModeBorderColors = {
   [Variant.Primary]: {
-    [State.Default]: gray.base,
-    [State.Hover]: gray.base,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: gray.base,
+    [InteractionState.Hover]: gray.base,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.light2,
-    [State.Hover]: gray.light2,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: gray.light2,
+    [InteractionState.Hover]: gray.light2,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Success]: {
-    [State.Default]: green.dark1,
-    [State.Hover]: green.dark1,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: green.dark1,
+    [InteractionState.Hover]: green.dark1,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Error]: {
-    [State.Default]: red.base,
-    [State.Hover]: red.base,
-    [State.Focus]: blue.light1,
+    [InteractionState.Default]: red.base,
+    [InteractionState.Hover]: red.base,
+    [InteractionState.Focus]: blue.light1,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.light1,
-    [State.Hover]: gray.light1,
-    [State.Focus]: gray.light1,
+    [InteractionState.Default]: gray.light1,
+    [InteractionState.Hover]: gray.light1,
+    [InteractionState.Focus]: gray.light1,
   },
 } as const satisfies VariantColorRecord;
 
 const lightModeIconColors = {
   [Variant.Primary]: {
-    [State.Default]: gray.dark1,
-    [State.Hover]: black,
-    [State.Focus]: blue.dark1,
+    [InteractionState.Default]: gray.dark1,
+    [InteractionState.Hover]: black,
+    [InteractionState.Focus]: blue.dark1,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.base,
-    [State.Hover]: black,
-    [State.Focus]: blue.dark1,
+    [InteractionState.Default]: gray.base,
+    [InteractionState.Hover]: black,
+    [InteractionState.Focus]: blue.dark1,
   },
   [Variant.InversePrimary]: {
-    [State.Default]: white,
-    [State.Hover]: white,
-    [State.Focus]: blue.light2,
+    [InteractionState.Default]: white,
+    [InteractionState.Hover]: white,
+    [InteractionState.Focus]: blue.light2,
   },
   [Variant.Info]: {
-    [State.Default]: blue.base,
-    [State.Hover]: blue.base,
-    [State.Focus]: blue.base,
+    [InteractionState.Default]: blue.base,
+    [InteractionState.Hover]: blue.base,
+    [InteractionState.Focus]: blue.base,
   },
   [Variant.Warning]: {
-    [State.Default]: yellow.dark2,
-    [State.Hover]: yellow.dark2,
-    [State.Focus]: yellow.dark2,
+    [InteractionState.Default]: yellow.dark2,
+    [InteractionState.Hover]: yellow.dark2,
+    [InteractionState.Focus]: yellow.dark2,
   },
   [Variant.Success]: {
-    [State.Default]: green.dark1,
-    [State.Hover]: green.dark1,
-    [State.Focus]: green.dark1,
+    [InteractionState.Default]: green.dark1,
+    [InteractionState.Hover]: green.dark1,
+    [InteractionState.Focus]: green.dark1,
   },
   [Variant.Error]: {
-    [State.Default]: red.base,
-    [State.Hover]: red.base,
-    [State.Focus]: red.base,
+    [InteractionState.Default]: red.base,
+    [InteractionState.Hover]: red.base,
+    [InteractionState.Focus]: red.base,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.base,
-    [State.Hover]: gray.base,
-    [State.Focus]: gray.base,
+    [InteractionState.Default]: gray.base,
+    [InteractionState.Hover]: gray.base,
+    [InteractionState.Focus]: gray.base,
   },
 } as const satisfies VariantColorRecord;
 
 const lightModeTextColors = {
   [Variant.Primary]: {
-    [State.Default]: black,
-    [State.Hover]: black,
-    [State.Focus]: blue.dark1,
+    [InteractionState.Default]: black,
+    [InteractionState.Hover]: black,
+    [InteractionState.Focus]: blue.dark1,
   },
   [Variant.Secondary]: {
-    [State.Default]: gray.dark1,
-    [State.Hover]: black,
-    [State.Focus]: blue.dark1,
+    [InteractionState.Default]: gray.dark1,
+    [InteractionState.Hover]: black,
+    [InteractionState.Focus]: blue.dark1,
   },
   [Variant.InversePrimary]: {
-    [State.Default]: white,
-    [State.Hover]: white,
-    [State.Focus]: blue.light2,
+    [InteractionState.Default]: white,
+    [InteractionState.Hover]: white,
+    [InteractionState.Focus]: blue.light2,
   },
   [Variant.InverseSecondary]: {
-    [State.Default]: gray.light1,
-    [State.Hover]: white,
-    [State.Focus]: blue.light2,
+    [InteractionState.Default]: gray.light1,
+    [InteractionState.Hover]: white,
+    [InteractionState.Focus]: blue.light2,
   },
   [Variant.Error]: {
-    [State.Default]: red.base,
-    [State.Hover]: red.base,
-    [State.Focus]: red.base,
+    [InteractionState.Default]: red.base,
+    [InteractionState.Hover]: red.base,
+    [InteractionState.Focus]: red.base,
   },
   [Variant.Disabled]: {
-    [State.Default]: gray.base,
-    [State.Hover]: gray.base,
-    [State.Focus]: gray.base,
+    [InteractionState.Default]: gray.base,
+    [InteractionState.Hover]: gray.base,
+    [InteractionState.Focus]: gray.base,
   },
   [Variant.Placeholder]: {
-    [State.Default]: gray.base,
-    [State.Hover]: gray.base,
-    [State.Focus]: gray.base,
+    [InteractionState.Default]: gray.base,
+    [InteractionState.Hover]: gray.base,
+    [InteractionState.Focus]: gray.base,
   },
   [Variant.Link]: {
-    [State.Default]: blue.base,
-    [State.Hover]: blue.base,
-    [State.Focus]: blue.base,
+    [InteractionState.Default]: blue.base,
+    [InteractionState.Hover]: blue.base,
+    [InteractionState.Focus]: blue.base,
   },
 } as const satisfies VariantColorRecord;
 
@@ -171,4 +171,4 @@ export const lightModeColors = {
   border: lightModeBorderColors,
   icon: lightModeIconColors,
   text: lightModeTextColors,
-} as const satisfies ModeColorRecord;
+} as const satisfies PropertyColorRecord;
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
index c3a11ef193..228d677489 100644
--- a/packages/tokens/src/index.ts
+++ b/packages/tokens/src/index.ts
@@ -1,6 +1,12 @@
 export { default as borderRadius } from './borderRadius';
 export { default as breakpoints } from './breakpoints';
-export { color, State, Type, Variant } from './color';
+export { color, InteractionState, Property, Variant } from './color';
+export {
+  /** @deprecated - Prefer {@link InteractionState} */
+  InteractionState as State, // Re-exporting for API consistency
+  /** @deprecated - Prefer {@link Property} */
+  Property as Type, // Re-exporting for API consistency
+} from './color';
 export { default as focusRing } from './focusRing';
 export { default as fontFamilies } from './fontFamilies';
 export { default as fontWeights } from './fontWeights';
diff --git a/packages/tokens/src/mode.ts b/packages/tokens/src/mode.ts
index e7a4ee4012..a2bc983ec1 100644
--- a/packages/tokens/src/mode.ts
+++ b/packages/tokens/src/mode.ts
@@ -1,8 +1,10 @@
+/** @deprecated prefer Theme */
 const Mode = {
   Dark: 'dark',
   Light: 'light',
 } as const;
 
+/** @deprecated prefer Theme */
 type Mode = (typeof Mode)[keyof typeof Mode];
 
 export { Mode };
diff --git a/packages/tokens/tsconfig.json b/packages/tokens/tsconfig.json
index 13b984fea0..8fd7d05abe 100644
--- a/packages/tokens/tsconfig.json
+++ b/packages/tokens/tsconfig.json
@@ -15,6 +15,9 @@
   ],
   "exclude": ["**/*.spec.*", "**/*.stories.*"],
   "references": [
+    {
+      "path": "../lib"
+    },
     {
       "path": "../palette"
     }