feat(tokens): add text color (#741)

* feat(tokens): add text color

* chore: fix story names

packages/tokens/src/index.ts

@@ -16,3 +16,6 @@ export type {
   SkinTonePalette,
   SkinToneNestedPalettes,
 } from './skin-tone';
+
+export { textColor } from './text-color';
+export type { TextColorToken, TextColorPalette } from './text-color';

packages/tokens/src/text-color.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as textColor from './text-color';
+
+const meta: Meta = {
+  title: 'Text color',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Heading: Story = {
+  render: () => (
+    <span style={{ color: textColor.heading }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'heading',
+};
+
+export const Body: Story = {
+  render: () => (
+    <span style={{ color: textColor.body }}>Empower learners everywhere</span>
+  ),
+  name: 'body',
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <span style={{ color: textColor.disabled }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'disabled',
+};
+
+export const Icon: Story = {
+  render: () => (
+    <span style={{ color: textColor.icon }}>Empower learners everywhere</span>
+  ),
+  name: 'icon',
+};
+
+export const SecondaryIcon: Story = {
+  render: () => (
+    <span style={{ color: textColor.secondaryIcon }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'secondaryIcon',
+};
+
+export const InverseHeading: Story = {
+  render: () => (
+    <span style={{ color: textColor.inverseHeading }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'inverseHeading',
+};
+
+export const InverseBody: Story = {
+  render: () => (
+    <span style={{ color: textColor.inverseBody }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'inverseBody',
+};
+
+export const InverseDisabled: Story = {
+  render: () => (
+    <span style={{ color: textColor.inverseDisabled }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'inverseDisabled',
+};
+
+export const InverseIcon: Story = {
+  render: () => (
+    <span style={{ color: textColor.inverseIcon }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'inverseIcon',
+};
+
+export const InverseSecondaryIcon: Story = {
+  render: () => (
+    <span style={{ color: textColor.inverseSecondaryIcon }}>
+      Empower learners everywhere
+    </span>
+  ),
+  name: 'inverseSecondaryIcon',
+};
+
+export const TextColor: Story = {
+  render: () => (
+    <div>
+      {Object.entries(textColor.textColor).map(([name, value]) => (
+        <div key={name} style={{ marginTop: 8 }}>
+          <div>{name}</div>
+          <span style={{ color: value }}>Empower learners everywhere</span>
+        </div>
+      ))}
+    </div>
+  ),
+  name: 'textColor (palette)',
+};

packages/tokens/src/text-color.ts

@@ -0,0 +1,37 @@
+import * as color from './color';
+import type { ColorToken } from './color';
+
+/** An alias token for a CSS color property value. */
+export type TextColorToken = ColorToken;
+
+export const heading = color.N600 satisfies TextColorToken;
+export const body = color.N500 satisfies TextColorToken;
+export const subdued = color.N400 satisfies TextColorToken;
+export const disabled = color.N100 satisfies TextColorToken;
+export const icon = color.N500 satisfies TextColorToken;
+export const secondaryIcon = color.N300 satisfies TextColorToken;
+
+export const inverseHeading = color.N0 satisfies TextColorToken;
+export const inverseBody = color.N60 satisfies TextColorToken;
+export const inverseSubdued = color.N70 satisfies TextColorToken;
+export const inverseDisabled = color.N90 satisfies TextColorToken;
+export const inverseIcon = color.N60 satisfies TextColorToken;
+export const inverseSecondaryIcon = color.N80 satisfies TextColorToken;
+
+/** A palette of text color tokens. */
+export type TextColorPalette = Record<string, TextColorToken>;
+
+export const textColor = {
+  heading,
+  body,
+  subdued,
+  disabled,
+  icon,
+  secondaryIcon,
+  inverseHeading,
+  inverseBody,
+  inverseSubdued,
+  inverseDisabled,
+  inverseIcon,
+  inverseSecondaryIcon,
+} as const satisfies TextColorPalette;