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

styles/STYLE_GUIDE.md

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