feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

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

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { fn } from '@storybook/test'
+
+import { Button } from './Button'
+import { config as buttonConfig } from './variants'
+import { config as typographyConfig } from '../Typography/variants'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+    typography: {
+      control: 'select',
+      options: Object.keys(typographyConfig.variants.variant),
+    },
+    variant: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.variant),
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const PrimaryDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Primary button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Primary',
+  },
+}
+
+export const PrimaryLarge: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    size: 'Large',
+  },
+}
+
+export const PrimaryMedium: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const PrimarySmall: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    size: 'Small',
+  },
+}
+
+export const SecondaryDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Secondary button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Secondary',
+  },
+}
+
+export const SecondaryLarge: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    size: 'Large',
+  },
+}
+
+export const SecondaryMedium: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const SecondarySmall: Story = {
+  args: {
+    ...SecondaryDefault.args,
+    size: 'Small',
+  },
+}
+
+export const TertiaryDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Tertiary button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Tertiary',
+  },
+}
+
+export const TertiaryLarge: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    size: 'Large',
+  },
+}
+
+export const TertiaryMedium: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const TertiarySmall: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    size: 'Small',
+  },
+}
+
+export const TextDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Text button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+  },
+}
+
+export const TextLarge: Story = {
+  args: {
+    ...TextDefault.args,
+    size: 'Large',
+  },
+}
+
+export const TextMedium: Story = {
+  args: {
+    ...TextDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const TextSmall: Story = {
+  args: {
+    ...TextDefault.args,
+    size: 'Small',
+  },
+}