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

.gitignore

@@ -41,3 +41,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+dump.sql

app/(marketing)/page.tsx

@@ -9,7 +9,7 @@ import {
 import { Trans } from '@kit/ui/trans';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
-import { MedReportTitle } from '@/components/MedReportTitle';
+import { MedReportTitle } from '@/components/med-report-title';
 
 function Home() {
   return (

app/(public)/register-company/page.tsx

@@ -54,7 +54,7 @@ export default function RegisterCompany() {
         <form
           onSubmit={handleSubmit(onSubmit)}
           noValidate
-          className="flex gap-7 flex-col text-left pt-8 px-6"
+          className="flex gap-6 flex-col text-left pt-8 px-6"
         >
           <FormItem>
             <Label>Ettevõtte nimi</Label>
@@ -77,7 +77,6 @@ export default function RegisterCompany() {
             pendingText="Saatmine..."
             type="submit"
             formAction={submitCompanyRegistration}
-            className="mt-4 hover:bg-primary/90"
           >
             <Trans i18nKey={'account:requestCompanyAccount'} />
           </SubmitButton>

lib/root-metdata.ts

@@ -32,7 +32,7 @@ export const generateRootMetadata = async (): Promise<Metadata> => {
       description: appConfig.description,
     },
     icons: {
-      icon: '/images/favicon/favicon.ico',
+      icon: '/images/favicon/icon.ico',
       apple: '/images/favicon/apple-touch-icon.png',
     },
   };

packages/ui/src/shadcn/button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva(
         link: 'decoration-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        default: 'h-10 mt-0 py-2 px-8',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         icon: 'h-9 w-9',

packages/ui/src/shadcn/dialog.tsx

@@ -20,7 +20,7 @@ const DialogOverlay: React.FC<
 > = ({ className, ...props }) => (
   <DialogPrimitive.Overlay
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/30',
       className,
     )}
     {...props}
@@ -80,7 +80,7 @@ const DialogTitle: React.FC<
 > = ({ className, ...props }) => (
   <DialogPrimitive.Title
     className={cn(
-      'text-lg leading-none font-semibold tracking-tight',
+      'text-2xl leading-none font-semibold tracking-tight',
       className,
     )}
     {...props}

packages/ui/src/shadcn/input.tsx

@@ -13,7 +13,7 @@ const Input: React.FC<InputProps> = ({
     <input
       type={type}
       className={cn(
-        'border-input file:text-foreground hover:border-ring/50 placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-2xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'border-border-border file:text-foreground hover:border-ring/50 placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
       )}
       {...props}

public/images/favicon/safari-pinned-tab.svg

@@ -1,20 +1,3 @@
-<?xml version="1.0" standalone="no"?>
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+<path d="M20.7002 11.7002C15.7296 11.7002 11.7002 15.7296 11.7002 20.7002H8.10059C8.10059 13.7414 13.7414 8.10059 20.7002 8.10059V11.7002ZM12.8994 0.299805C12.8994 7.25859 7.25859 12.8994 0.299805 12.8994V9.2998C5.27037 9.2998 9.2998 5.27037 9.2998 0.299805H12.8994Z" fill="#0A5328"/>
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="139.000000pt" height="139.000000pt" viewBox="0 0 139.000000 139.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,139.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M313 1197 c-29 -10 -66 -32 -84 -48 -18 -16 -34 -29 -35 -29 -2 0 -3
-10 -2 23 2 47 2 47 -92 47 -79 0 -90 -2 -91 -17 0 -10 -1 -237 -2 -506 l-2
--487 93 0 c50 0 92 3 93 8 0 4 1 160 2 347 2 308 4 344 21 377 52 106 175 145
-283 90 47 -25 68 -47 89 -97 14 -33 16 -87 15 -382 l0 -343 94 0 94 0 3 358 3
-359 29 41 c71 104 232 119 317 29 53 -56 53 -58 56 -417 1 -184 2 -343 2 -353
-1 -16 10 -17 93 -15 l92 3 0 325 c1 179 -2 348 -7 375 -28 181 -174 315 -357
-329 -94 7 -213 -33 -285 -96 l-40 -35 -45 38 c-97 82 -239 114 -337 76z"/>
-</g>
 </svg>

public/images/favicon/site.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "Makerkit",
+  "name": "Med Report",
-  "short_name": "makerkit",
+  "short_name": "medreport",
   "theme_color": "#fff",
   "background_color": "#fff",
   "display": "fullscreen",

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

styles/globals.css

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

styles/shadcn-ui.css

@@ -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);
 
+        --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-background: var(--background);
-        --sidebar-foreground: oklch(37.05% 0.012 285.8);
+        --sidebar-foreground: var(--foreground);
-        --sidebar-primary: var(--color-neutral-950);
+        --sidebar-primary: var(--primary);
         --sidebar-primary-foreground: var(--color-white);
-        --sidebar-accent: var(--color-neutral-100);
+        --sidebar-accent: var(--secondary);
-        --sidebar-accent-foreground: var(--color-neutral-950);
+        --sidebar-accent-foreground: var(--secondary-foreground);
         --sidebar-border: var(--border);
-        --sidebar-ring: var(--color-blue-500);
+        --sidebar-ring: var(--ring);
-        /* --foreground: 240 10% 4%; */
     }
 
     .dark {

styles/theme.css

@@ -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-sm: calc(var(--radius) - 2px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
-  --radius-lg: 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);

supabase/config.toml

@@ -7,7 +7,7 @@ project_id = "MRB2B"
 [api]
 enabled = true
 # Port to use for the API URL.
-port = 54321
+port = 55321
 # Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
 # endpoints. `public` and `graphql_public` schemas are included by default.
 schemas = ["public", "graphql_public", "audit"]
@@ -33,7 +33,7 @@ major_version = 15
 [db.pooler]
 enabled = false
 # Port to use for the local connection pooler.
-port = 54329
+port = 55329
 # Specifies when a server connection can be reused by other clients.
 # Configure one of the supported pooler modes: `transaction`, `session`.
 pool_mode = "transaction"
@@ -67,7 +67,7 @@ enabled = true
 [studio]
 enabled = true
 # Port to use for Supabase Studio.
-port = 54323
+port = 55323
 # External URL of the API server that frontend connects to.
 api_url = "http://127.0.0.1"
 # OpenAI API Key to use for Supabase AI in the Supabase Studio.
@@ -78,7 +78,7 @@ openai_api_key = "env(OPENAI_API_KEY)"
 [inbucket]
 enabled = true
 # Port to use for the email testing server web interface.
-port = 54324
+port = 55324
 # Uncomment to expose additional ports for testing user applications that send emails.
 # smtp_port = 54325
 # pop3_port = 54326
@@ -290,7 +290,7 @@ deno_version = 1
 
 [analytics]
 enabled = true
-port = 54327
+port = 55327
 # Configure one of the supported backends: `postgres`, `bigquery`.
 backend = "postgres"