# MedReport Design System

## Tokens

### Spacing - gaps

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

```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

```css
--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);
```

```css
.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](https://www.figma.com/design/eJfnhLYy7IP7ARVhmtEPPY/Medreport---Design-system?node-id=70-115&p=f&vars=1&var-id=3269-10748&m=dev) are defined here:

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

Example of usage

```css
  --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.

read more on [makerkit doc](https://makerkit.dev/docs/next-supabase-turbo/customization/adding-shadcn-ui-components)

## Fonts

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