design-tokens.stories.mdx

import { Meta } from "@storybook/addon-docs/blocks";

Design Tokens

Common colors for texts and backgrounds

Variable name	Value	Description
--color-success	lime
--color-warning	yellow
--color-error	red

Text colors

Variable name	Default	Dark	Description
--color-text-primary	#111	#eee	Primary color
--color-text-secondary	#999	Secondary color
--color-text-link	deepskyblue
--color-text-link-hover	blue

Background colors

Variable name	Default	Dark	Description
--color-bg-primary	#fff	#111
--color-bg-secondary	#eee

Font sizes

Variable name	Value	Description
--font-size-xs	8px
--font-size-s	12px
--font-size-m	16px
--font-size-l	24px
--font-size-xl	32px

Line heights

Variable name	Value	Description
--line-height-narrow	1.1
--line-height-normal	1.3
--line-height-wide	1.5

Spacing

Variable name	Value	Description
--space-xs	4px
--space-s	8px
--space-m	12px
--space-l	16px
--space-xl	24px

Shadows

Variable name	Default	Dark	Description
--shadow-modal	0px 5px 15px rgba(43, 51, 62, 0.5)
--shadow-light	0px 4px 8px rgba(126, 143, 164, 0.15)	0px 5px 15px rgba(43, 51, 62, 0.2)