diff --git a/.gitignore b/.gitignore index 173aa33..f96346c 100644 --- a/.gitignore +++ b/.gitignore @@ -40,4 +40,6 @@ yarn-error.log* # typescript *.tsbuildinfo -next-env.d.ts \ No newline at end of file +next-env.d.ts + +dump.sql diff --git a/app/(public)/register-company/page.tsx b/app/(public)/register-company/page.tsx index 5099e36..905e0e6 100644 --- a/app/(public)/register-company/page.tsx +++ b/app/(public)/register-company/page.tsx @@ -54,7 +54,7 @@ export default function RegisterCompany() {
@@ -77,7 +77,6 @@ export default function RegisterCompany() { pendingText="Saatmine..." type="submit" formAction={submitCompanyRegistration} - className="mt-4 hover:bg-primary/90" > diff --git a/lib/root-metdata.ts b/lib/root-metdata.ts index ab70a57..cf221a6 100644 --- a/lib/root-metdata.ts +++ b/lib/root-metdata.ts @@ -32,7 +32,7 @@ export const generateRootMetadata = async (): Promise => { description: appConfig.description, }, icons: { - icon: '/images/favicon/favicon.ico', + icon: '/images/favicon/icon.ico', apple: '/images/favicon/apple-touch-icon.png', }, }; diff --git a/packages/ui/src/shadcn/button.tsx b/packages/ui/src/shadcn/button.tsx index 6210a54..4b6c138 100644 --- a/packages/ui/src/shadcn/button.tsx +++ b/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', diff --git a/packages/ui/src/shadcn/dialog.tsx b/packages/ui/src/shadcn/dialog.tsx index 5870ca2..b4ae4ae 100644 --- a/packages/ui/src/shadcn/dialog.tsx +++ b/packages/ui/src/shadcn/dialog.tsx @@ -20,7 +20,7 @@ const DialogOverlay: React.FC< > = ({ className, ...props }) => ( = ({ className, ...props }) => ( = ({ - - - -Created by potrace 1.14, written by Peter Selinger 2001-2017 - - - - + + diff --git a/public/images/favicon/site.webmanifest b/public/images/favicon/site.webmanifest index 0012322..aed9405 100644 --- a/public/images/favicon/site.webmanifest +++ b/public/images/favicon/site.webmanifest @@ -1,6 +1,6 @@ { - "name": "Makerkit", - "short_name": "makerkit", + "name": "Med Report", + "short_name": "medreport", "theme_color": "#fff", "background_color": "#fff", "display": "fullscreen", diff --git a/styles/STYLE_GUIDE.md b/styles/STYLE_GUIDE.md new file mode 100644 index 0000000..87d577f --- /dev/null +++ b/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 +``` + + + + diff --git a/styles/globals.css b/styles/globals.css index 2ee21cd..530eefc 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -32,7 +32,6 @@ body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; - /* @apply font-sans */ } *, diff --git a/styles/shadcn-ui.css b/styles/shadcn-ui.css index 1493bbd..4286334 100644 --- a/styles/shadcn-ui.css +++ b/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); - --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 { diff --git a/styles/theme.css b/styles/theme.css index df2155d..efe60af 100644 --- a/styles/theme.css +++ b/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-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);