diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts index 1696dade..41e98df1 100644 --- a/packages/tokens/src/index.ts +++ b/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'; diff --git a/packages/tokens/src/text-color.stories.tsx b/packages/tokens/src/text-color.stories.tsx new file mode 100644 index 00000000..74cc61aa --- /dev/null +++ b/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: () => ( + + Empower learners everywhere + + ), + name: 'heading', +}; + +export const Body: Story = { + render: () => ( + Empower learners everywhere + ), + name: 'body', +}; + +export const Disabled: Story = { + render: () => ( + + Empower learners everywhere + + ), + name: 'disabled', +}; + +export const Icon: Story = { + render: () => ( + Empower learners everywhere + ), + name: 'icon', +}; + +export const SecondaryIcon: Story = { + render: () => ( + + Empower learners everywhere + + ), + name: 'secondaryIcon', +}; + +export const InverseHeading: Story = { + render: () => ( + + Empower learners everywhere + + ), + name: 'inverseHeading', +}; + +export const InverseBody: Story = { + render: () => ( + + Empower learners everywhere + + ), + name: 'inverseBody', +}; + +export const InverseDisabled: Story = { + render: () => ( + + Empower learners everywhere + + ), + name: 'inverseDisabled', +}; + +export const InverseIcon: Story = { + render: () => ( + + Empower learners everywhere + + ), + name: 'inverseIcon', +}; + +export const InverseSecondaryIcon: Story = { + render: () => ( + + Empower learners everywhere + + ), + name: 'inverseSecondaryIcon', +}; + +export const TextColor: Story = { + render: () => ( +
+ {Object.entries(textColor.textColor).map(([name, value]) => ( +
+
{name}
+ Empower learners everywhere +
+ ))} +
+ ), + name: 'textColor (palette)', +}; diff --git a/packages/tokens/src/text-color.ts b/packages/tokens/src/text-color.ts new file mode 100644 index 00000000..953a7292 --- /dev/null +++ b/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; + +export const textColor = { + heading, + body, + subdued, + disabled, + icon, + secondaryIcon, + inverseHeading, + inverseBody, + inverseSubdued, + inverseDisabled, + inverseIcon, + inverseSecondaryIcon, +} as const satisfies TextColorPalette;