MedReport Design System

Tokens

Spacing - gaps

--spacing: 0.25rem; /* 1rem = 16px styles/shadcn-ui.css */

gap = --spacing * key

Key	Value (px)
0	0
1	4
2	8
3	12
4	16
5	20
6	24
7	28
8	32
9	36
10	40
11	44
12	48

Use as gap-[key], e.g. gap-7

Radius

--radius: 1rem; /* 16px - styles/shadcn-ui.css */
--radius-radius: var(--radius); /* styles/theme.css */

--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);

.rounded-md {
  border-radius: var(--radius-md);
}

Class	Radius
rounded-sm	12
rounded-md	14
rounded-lg	16
rounded-xl	20
rounded-full	9999

Custom colors

All color tokens from MedReport Design System are defined here:

styles/shadcn-ui.css - colors scheme, global variables, classes styles/theme.css - color definition for all properties

Example of usage

  --color-text-foreground -> className="[property name]-text-foreground" -> className="text-text-foreground", border-text-foreground

Components

Add the component to the packages/ui/src/shadcn directory.
Replace the imports with the relative imports.
Export the component by adding a new export to the package.json file.
Import the component directly from the package.

Fonts

https://makerkit.dev/docs/next-supabase-turbo/customization/fonts

1.9 KiB Raw Blame History