feat(SW-375): new tokens

new asset generation logic

BREAKING CHANGE: New tokens.

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { fn } from '@storybook/test'
+
+import { ChipButton } from './ChipButton.tsx'
+import ChevronRightSmallIcon from '../Icons/ChevronRightSmall.tsx'
+
+const meta: Meta<typeof ChipButton> = {
+  title: 'Components/Chip/ChipButton 🚧',
+  component: ChipButton,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ChipButton>
+
+export const Default: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <>
+        Button Chip <ChevronRightSmallIcon width={20} height={20} />
+      </>
+    ),
+  },
+}

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

@@ -0,0 +1,21 @@
+import { Button as ButtonRAC } from 'react-aria-components'
+
+import { Typography } from '../Typography'
+
+import styles from './chip-button.module.css'
+
+import type { ComponentPropsWithRef } from 'react'
+
+export function ChipButton({
+  children,
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof ButtonRAC>) {
+  return (
+    <Typography variant="Body/Supporting text (caption)/smBold">
+      <ButtonRAC {...props} className={[styles.chip, className].join(' ')}>
+        {children}
+      </ButtonRAC>
+    </Typography>
+  )
+}

packages/design-system/lib/components/ChipButton/chip-button.module.css

@@ -0,0 +1,19 @@
+.chip {
+  background-color: var(--Component-Button-Inverted-Default);
+  border-color: var(--Component-Button-Inverted-Border-Default);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-sm);
+  padding: var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Interactive-Default);
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.chip:hover {
+  /* TODO: change to proper Component-variable once it is available */
+  background-color: var(--Scandic-Peach-10);
+  /* TODO: change to proper Component-variable once it is available */
+  color: var(--Scandic-Red-100);
+}

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

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