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

B2B-95: add design system token values to theme, apply to main components

Browse Source
This commit is contained in:
devmc-ee
2025-06-11 21:28:42 +03:00
parent 4aedc0b527
commit 0490c0ba80
23 changed files with 186 additions and 1493 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
styles/STYLE_GUIDE.md Normal file
View File

@@ -0,0 +1,67 @@
# 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
```

1
styles/globals.css
View File

@@ -32,7 +32,6 @@
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
/* @apply font-sans */
}
*,

50
styles/shadcn-ui.css
View File

@@ -11,35 +11,64 @@
--font-sans: var(--font-sans) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-heading: var(--font-heading);
--background: var(--color-white);
--background: hsla(0, 0%, 100%, 1);
--foreground: hsla(240, 10%, 4%, 1);
--foreground-50: hsla(240, 10%, 4%, 0.5);
--background-90: hsla(0, 0%, 100%, 0.9);
--background-80: hsla(0, 0%, 100%, 0.8);
--card: var(--color-white);
--card-foreground: var(--color-neutral-950);
--popover: var(--color-white);
--popover: hsla(0, 0%, 100%, 1);
--popover-foreground: hsla(240, 10%, 4%, 1);
--primary: hsla(145, 78%, 18%, 1);
--primary-foreground: hsla(356, 100%, 97%, 1);
--primary-90: hsla(145, 78%, 18%, 0.9);
--primary-80: hsla(145, 78%, 18%, 0.8);
--primary-50: hsla(145, 78%, 18%, 0.5);
--primary-20: hsla(145, 78%, 18%, 0.2);
--primary-10: hsla(145, 78%, 18%, 0.1);
--secondary: hsla(240, 5%, 96%, 1);
--secondary-foreground: hsla(240, 6%, 10%, 1);
--secondary-90: hsla(240, 5%, 96%, 0.9);
--secondary-80: hsla(240, 5%, 96%, 0.8);
--muted: hsla(240, 5%, 96%, 1);
--muted-foreground: hsla(240, 4%, 41%, 1);
--muted-90: hsla(240, 5%, 96%, 0.9);
--muted-80: hsla(240, 5%, 96%, 0.8);
--muted-50: hsla(240, 5%, 96%, 0.5);
--muted-40: hsla(240, 5%, 96%, 0.4);
--accent: hsla(240, 5%, 96%, 1);
--accent-foreground: hsla(240, 6%, 10%, 1);
--accent-90: hsla(240, 5%, 96%, 0.9);
--accent-80: hsla(240, 5%, 96%, 0.8);
--accent-50: hsla(240, 5%, 96%, 0.5);
--destructive: hsla(0, 84%, 60%, 1);
--destructive-foreground: hsla(0, 0%, 98%, 1);
--border: hsla(240, 6%, 90%, 1);
--destructiv-90: hsla(0, 84%, 60%, 0.9);
--destructiv-80: hsla(0, 84%, 60%, 0.8);
--destructiv-50: hsla(0, 84%, 60%, 0.5);
--border: hsla(240, 6%, 90%, 1);
--input: hsla(240, 6%, 90%, 1);
--ring: var(--color-neutral-800);
--radius: 1rem;
--radius: calc(1rem);
--spacing: 0.25rem;
--chart-1: var(--color-orange-400);
--chart-2: var(--color-teal-600);
@@ -47,15 +76,14 @@
--chart-4: var(--color-yellow-200);
--chart-5: var(--color-orange-200);
--sidebar-background: var(--color-neutral-50);
--sidebar-foreground: oklch(37.05% 0.012 285.8);
--sidebar-primary: var(--color-neutral-950);
--sidebar-background: var(--background);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--color-white);
--sidebar-accent: var(--color-neutral-100);
--sidebar-accent-foreground: var(--color-neutral-950);
--sidebar-accent: var(--secondary);
--sidebar-accent-foreground: var(--secondary-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--color-blue-500);
/* --foreground: 240 10% 4%; */
--sidebar-ring: var(--ring);
}
.dark {

65
styles/theme.css
View File

@@ -43,17 +43,74 @@
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
/* text colors */
--color-text-foreground: var(--foreground);
--color-text-primary: var(--primary);
--color-text-primary-foreground: var(--primary-foreground);
--color-text-secondary: var(--secondary);
--color-text-secondary-foreground: var(--secondary-foreground);
--color-text-muted: var(--muted);
--color-text-muted-foreground: var(--muted-foreground);
--color-text-accent: var(--accent);
--color-text-accent-foreground: var(--accent-foreground);
--color-text-destructive: var(--destructive);
--color-text-destructive-foreground: var(--destructive-foreground);
--color-text-popover-foreground: var(--popover-foreground);
/* background colors */
--color-bg-background: var(--background);
--color-bg-background-90: var(--background-90);
--color-bg-background-80: var(--background-80);
--color-bg-primary: var(--primary);
--color-bg-primary-90: var(--primary-90);
--color-bg-primary-80: var(--primary-80);
--color-bg-primary-20: var(--primary-20);
--color-bg-primary-10: var(--primary-10);
--color-bg-secondary: var(--secondary);
--color-bg-secondary-90: var(--secondary-90);
--color-bg-secondary-80: var(--secondary-80);
--color-bg-destructive: var(--destructive);
--color-bg-destructive-90: var(--destructive-90);
--color-bg-destructive-80: var(--destructive-80);
--color-bg-accent: var(--accent);
--color-bg-accent-90: var(--accent-90);
--color-bg-accent-80: var(--accent-80);
--color-bg-accent-50: var(--accent-50);
--color-bg-muted: var(--muted);
--color-bg-muted-90: var(--muted-90);
--color-bg-muted-80: var(--muted-80);
--color-bg-muted-50: var(--muted-50);
--color-bg-popover: var(--popover);
--color-bg-border: var(--border);
--color-bg-input: var(--input);
/* border colors */
--color-border-border: var(--border);
--color-border-foreground: var(--foreground);
--color-border-foreground-50: var(--foreground-50);
--color-border-input: var(--input);
--color-border-ring: var(--ring);
--color-border-primary: var(--primary);
--color-border-primary-50: var(--primary-50);
--color-border-primary-foreground: var(--primary-foreground);
--color-border-destructive: var(--destructive-50);
--color-border-toast-destructive: var(--muted-40);
--color-border-muted: var(--muted);
--radius-radius: var(--radius);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-sm: calc(var(--radius) - 2px);
--radius-md: var(--radius);
--radius-lg: calc(var(--radius) + 2px);
--radius-xl: calc(var(--radius) + 4px);
--font-sans: -apple-system, var(--font-sans);
--font-heading: var(--font-heading);
--color-sidebar: var(--sidebar-background);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-foreground: var(--color-text-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);