68 lines
1.5 KiB
Markdown
68 lines
1.5 KiB
Markdown
# 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
|
|
```
|
|
|
|
|
|
|
|
|