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: () => ( +