k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prettier fix

Browse Source
This commit is contained in:
Danel Kungla
2025-09-19 17:22:36 +03:00
parent efa94b3322
commit 0c2cfe6d18
509 changed files with 17988 additions and 9920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
styles/STYLE_GUIDE.md
View File

@@ -1,17 +1,21 @@
# MedReport Design System
## Tokens
### Spacing - gaps
```css
```css
--spacing: 0.25rem; /* 1rem = 16px styles/shadcn-ui.css */
```
```css
```css
gap = --spacing * key
```
| Key | Value (px) |
|-----|------------|
| 0 | 0 |
| 1 | 4 |
| Key | Value (px) |
| --- | ---------- |
| 0 | 0 |
| 1 | 4 |
| 2 | 8 |
| 3 | 12 |
| 4 | 16 |
@@ -27,42 +31,45 @@ gap = --spacing * key
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
--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);
}
.rounded-md {
border-radius: var(--radius-md);
}
```
| Class | Radius |
|---------------|-------------|
| rounded-sm | 12 |
| rounded-md | 14 |
| rounded-lg | 16 |
| rounded-xl | 20 |
| rounded-full | 9999 |
| 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:
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
`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.
@@ -71,4 +78,5 @@ Example of usage
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
https://makerkit.dev/docs/next-supabase-turbo/customization/fonts