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',
+  },
+}

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

@@ -0,0 +1,29 @@
+'use client'
+
+import { Button as ButtonRAC } from 'react-aria-components'
+
+import { variants } from './variants'
+
+import type { ButtonProps } from './types'
+
+export function Button({
+  variant,
+  color,
+  size,
+
+  typography,
+  className,
+
+  ...props
+}: ButtonProps) {
+  const classNames = variants({
+    variant,
+    color,
+    size,
+
+    typography,
+    className,
+  })
+
+  return <ButtonRAC {...props} className={classNames} />
+}

packages/design-system/lib/components/Button/button.module.css

@@ -0,0 +1,80 @@
+.button {
+  border-radius: var(--Corner-radius-rounded);
+  border-width: 2px;
+  border-style: solid;
+  cursor: pointer;
+}
+
+.size-large {
+  padding: var(--Space-x2) var(--Space-x3);
+}
+
+.size-medium {
+  padding: var(--Space-x15) var(--Space-x2);
+}
+
+.size-small {
+  padding: 10px var(--Space-x2);
+}
+
+.variant-primary {
+  background-color: var(--Component-Button-Brand-Primary-Default);
+  border-color: var(--Component-Button-Brand-Primary-Border-Default);
+  color: var(--Component-Button-Brand-Primary-On-fill-Default);
+}
+
+.variant-primary:hover {
+  background-color: var(--Component-Button-Brand-Primary-Hover);
+  border-color: var(--Component-Button-Brand-Primary-Border-Hover);
+  color: var(--Component-Button-Brand-Primary-On-fill-Hover);
+}
+
+.variant-primary:disabled {
+  background-color: var(--Component-Button-Brand-Primary-Disabled);
+  border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
+  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
+}
+
+.variant-secondary {
+  background-color: var(--Component-Button-Brand-Secondary-Default);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Default);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+}
+
+.variant-secondary:hover {
+  background-color: var(--Component-Button-Brand-Secondary-Hover);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+}
+
+.variant-secondary:disabled {
+  background-color: var(--Component-Button-Brand-Secondary-Disabled);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+}
+
+.variant-tertiary {
+  background-color: var(--Component-Button-Brand-Tertiary-Default);
+  border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
+  color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
+}
+
+.variant-tertiary:hover {
+  background-color: var(--Component-Button-Brand-Tertiary-Hover);
+  border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
+  color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
+}
+
+.variant-tertiary:disabled {
+  background-color: var(--Component-Button-Brand-Tertiary-Disabled);
+  border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
+  color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
+}
+
+.variant-text {
+  background-color: transparent;
+  border-color: transparent;
+  /* TODO: Missing text variant tokens for button */
+  color: var(--Scandic-Red-100);
+  padding: var(--Space-x15) 0;
+}

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

@@ -0,0 +1 @@
+export { Button } from './Button'

packages/design-system/lib/components/Button/types.ts

@@ -0,0 +1,10 @@
+import { Button } from 'react-aria-components'
+
+import type { VariantProps } from 'class-variance-authority'
+import type { ComponentProps } from 'react'
+
+import type { variants } from './variants'
+
+export interface ButtonProps
+  extends ComponentProps<typeof Button>,
+    VariantProps<typeof variants> {}

packages/design-system/lib/components/Button/variants.ts

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority'
+
+import { withTypography } from '../Typography/variants'
+
+import styles from './button.module.css'
+
+export const config = {
+  variants: {
+    variant: {
+      Primary: styles['variant-primary'],
+      Secondary: styles['variant-secondary'],
+      Tertiary: styles['variant-tertiary'],
+      Text: styles['variant-text'],
+    },
+    color: {
+      Primary: styles['color-primary'],
+      Inverted: styles['color-inverted'],
+    },
+    size: {
+      Small: styles['size-small'],
+      Medium: styles['size-medium'],
+      Large: styles['size-large'],
+    },
+  },
+  defaultVariants: {
+    variant: 'Primary',
+    color: 'Primary',
+    size: 'Large',
+  },
+} as const
+
+export const variants = cva(styles.button, withTypography(config))