# 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