feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

packages/design-system/lib/components/Typography/Typography.stories.tsx

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Typography } from './Typography.tsx'
+
+import TypographyDocs from './Typography.docs.mdx'
+
+import { config as typographyConfig } from './variants'
+
+const meta: Meta<typeof Typography> = {
+  title: 'Components/Typography',
+  component: Typography,
+  args: { variant: typographyConfig.defaultVariants.variant },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(typographyConfig.variants.variant),
+      table: {
+        defaultValue: { summary: typographyConfig.defaultVariants.variant },
+      },
+    },
+  },
+  parameters: { docs: { toc: true, page: TypographyDocs } },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Typography>
+
+export const TitleLg: Story = {
+  name: 'Title/lg',
+  args: {
+    variant: 'Title/lg',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleMd: Story = {
+  name: 'Title/md',
+  args: {
+    variant: 'Title/md',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleMdRegular: Story = {
+  name: 'Title/mdRegular',
+  args: {
+    variant: 'Title/mdRegular',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSm: Story = {
+  name: 'Title/sm',
+  args: {
+    variant: 'Title/sm',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSmRegular: Story = {
+  name: 'Title/smRegular',
+  args: {
+    variant: 'Title/smRegular',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleXs: Story = {
+  name: 'Title/xs',
+  args: {
+    variant: 'Title/xs',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleDecorativeLg: Story = {
+  name: 'Title/Decorative/lg',
+  args: {
+    variant: 'Title/Decorative/lg',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleDecorativeMd: Story = {
+  name: 'Title/Decorative/md',
+  args: {
+    variant: 'Title/Decorative/md',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSubtitleLg: Story = {
+  name: 'Title/Subtitle/lg',
+  args: {
+    variant: 'Title/Subtitle/lg',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleSubtitleMd: Story = {
+  name: 'Title/Subtitle/md',
+  args: {
+    variant: 'Title/Subtitle/md',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const TitleOverlineSm: Story = {
+  name: 'Title/Overline/sm',
+  args: {
+    variant: 'Title/Overline/sm',
+    children: <h1>The quick brown fox jumps over the lazy dog</h1>,
+  },
+}
+export const BodyLeadtext: Story = {
+  name: 'Body/Lead text',
+  args: {
+    variant: 'Body/Lead text',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyParagraphMdRegular: Story = {
+  name: 'Body/Paragraph/mdRegular',
+  args: {
+    variant: 'Body/Paragraph/mdRegular',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyParagraphMdBold: Story = {
+  name: 'Body/Paragraph/mdBold',
+  args: {
+    variant: 'Body/Paragraph/mdBold',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodySupportingtextCaptionSmRegular: Story = {
+  name: 'Body/Supporting text (caption)/smRegular',
+  args: {
+    variant: 'Body/Supporting text (caption)/smRegular',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodySupportingtextCaptionSmBold: Story = {
+  name: 'Body/Supporting text (caption)/smBold',
+  args: {
+    variant: 'Body/Supporting text (caption)/smBold',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyUnderlineMd: Story = {
+  name: 'Body/Underline/md',
+  args: {
+    variant: 'Body/Underline/md',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const BodyUnderlineSm: Story = {
+  name: 'Body/Underline/sm',
+  args: {
+    variant: 'Body/Underline/sm',
+    children: <p>The quick brown fox jumps over the lazy dog</p>,
+  },
+}
+export const TagSm: Story = {
+  name: 'Tag/sm',
+  args: {
+    variant: 'Tag/sm',
+    children: <span>The quick brown fox jumps over the lazy dog</span>,
+  },
+}
+export const LinkMd: Story = {
+  name: 'Link/md',
+  args: {
+    variant: 'Link/md',
+    children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
+  },
+}
+export const LinkSm: Story = {
+  name: 'Link/sm',
+  args: {
+    variant: 'Link/sm',
+    children: <a href="#">The quick brown fox jumps over the lazy dog</a>,
+  },
+}
+export const LabelXsRegular: Story = {
+  name: 'Label/xsRegular',
+  args: {
+    variant: 'Label/xsRegular',
+    children: <span>The quick brown fox jumps over the lazy dog</span>,
+  },
+}
+export const LabelXsBold: Story = {
+  name: 'Label/xsBold',
+  args: {
+    variant: 'Label/xsBold',
+    children: <span>The quick brown fox jumps over the lazy dog</span>,
+  },
+}