n8n/packages/design-system/src/styleguide/fonts.stories.mdx

import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Sizes from './Sizes.vue';
import VariableTable from './VariableTable.vue';

<Meta title="Styleguide/Font" />

# Font

## Font Sizes

<Canvas>
	<Story name="font-size">
		{{
			template: `<sizes :variables="['--font-size-3xs', '--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']" attr="font-size" />`,
			components: {
				Sizes,
			},
		}}
	</Story>
</Canvas>

## Line Heights

<Canvas>
	<Story name="line-height">
		{{
			template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
			components: {
				VariableTable,
			},
		}}
	</Story>
</Canvas>

## Font Weights

<Canvas>
	<Story name="font-weight">
		{{
			template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
			components: {
				VariableTable,
			},
		}}
	</Story>
</Canvas>

## Font Family

<Canvas>
	<Story name="font-family">
		{{
			template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
			components: {
				VariableTable,
			},
		}}
	</Story>
</Canvas>