Skip to content

refactor: major codebase clean up and refactor #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
addidotlol wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

refactor: major codebase clean up and refactor #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6d29977
feat: add shadcn-svelte
addidotlol Apr 25, 2026
a699537
refactor: inline single-use components into page routes
addidotlol Apr 25, 2026
7e06fa5
chore: remove unused components
addidotlol Apr 25, 2026
63543a9
chore: add dark class to html root element
addidotlol Apr 25, 2026
fe469fb
fix: didnt set lang ts lol
addidotlol Apr 25, 2026
b7ec2b8
refactor: migrate ui to shadcn tokens
addidotlol Apr 25, 2026
2bac1c8
chore: remove old icon packages
addidotlol Apr 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
334 changes: 174 additions & 160 deletions bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"tailwind": {
"css": "src/app.css",
"baseColor": "neutral"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils",
"ui": "$lib/components/ui",
"hooks": "$lib/hooks",
"lib": "$lib"
},
"typescript": true,
"registry": "https://shadcn-svelte.com/registry",
"style": "vega",
"iconLibrary": "lucide",
"menuColor": "default",
"menuAccent": "subtle"
}
18 changes: 12 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
{
"dependencies": {
"@steeze-ui/carbon-icons": "^1.2.1",
"@steeze-ui/svelte-icon": "^1.6.2",
"@tailwindplus/elements": "^1.0.22",
"arktype": "^2.2.0",
"autumn-js": "^1.2.8",
Expand All @@ -10,7 +8,9 @@
},
"devDependencies": {
"@eslint/compat": "^2.0.3",
"@eslint/js": "^9.0.0",
"@eslint/js": "^10.0.1",
"@internationalized/date": "^3.12.0",
"@lucide/svelte": "^1.11.0",
"@sveltejs/adapter-cloudflare": "^7.2.6",
"@sveltejs/kit": "^2.57.1",
"@sveltejs/vite-plugin-svelte": "^7.0.0",
Expand All @@ -22,7 +22,9 @@
"@typescript-eslint/eslint-plugin": "^8.58.2",
"@typescript-eslint/parser": "^8.58.2",
"atmn": "^1.1.8",
"eslint": "^9.0.0",
"bits-ui": "^2.16.3",
"clsx": "^2.1.1",
"eslint": "^10.2.1",
"eslint-config-prettier": "^10.1.8",
"eslint-import-resolver-typescript": "^4.4.4",
"eslint-plugin-compat": "^7.0.1",
Expand All @@ -35,15 +37,16 @@
"eslint-plugin-promise": "^7.2.1",
"eslint-plugin-sonarjs": "^4.0.3",
"eslint-plugin-storybook": "^10.3.5",
"eslint-plugin-svelte": "^3.17.0",
"eslint-plugin-svelte": "^3.17.1",
"eslint-plugin-unicorn": "^64.0.0",
"eslint-plugin-unused-imports": "^4.4.1",
"globals": "^17.5.0",
"mdsvex": "^0.12.7",
"postcss-html": "^1.8.1",
"prettier": "^3.8.3",
"prettier-plugin-svelte": "^3.5.1",
"prettier-plugin-tailwindcss": "^0.7.2",
"prettier-plugin-tailwindcss": "^0.7.3",
"shadcn-svelte": "^1.2.7",
"stylelint": "^17.9.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-idiomatic-order": "^10.0.0",
Expand All @@ -52,7 +55,10 @@
"super-sitemap": "^1.0.12",
"svelte": "^5.55.3",
"svelte-check": "^4.4.6",
"tailwind-merge": "^3.5.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.2.2",
"tw-animate-css": "^1.4.0",
"typescript": "^6.0.3",
"typescript-eslint": "^8.59.0",
"ultracite": "7.6.1",
Expand Down
223 changes: 198 additions & 25 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,78 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn-svelte/tailwind.css';

@custom-variant dark (&:is(.dark *));

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@theme {
/* Legacy tokens */
--color-fyra-red-50: #fbf6f5;
--color-fyra-red-100: #f8edeb;
--color-fyra-red-200: #f2dbd9;
--color-fyra-red-300: #e6bfbb;
--color-fyra-red-400: #d89894;
--color-fyra-red-500: #c6716d;
--color-fyra-red-600: #a54a4b;
--color-fyra-red-700: #923e40;
--color-fyra-red-800: #7b363b;
--color-fyra-red-900: #6a3136;
--color-fyra-red-950: #3a171a;
--color-fyra-gray-50: #fafafa;
--color-fyra-gray-100: #f4f4f5;
--color-fyra-gray-200: #e4e4e7;
--color-fyra-gray-300: #d5d5d7;
--color-fyra-gray-400: #a2a2a9;
--color-fyra-gray-500: #727279;
--color-fyra-gray-600: #53535a;
--color-fyra-gray-700: #404045;
--color-fyra-gray-800: #27272a;
--color-fyra-gray-900: #18181a;
--color-fyra-gray-950: #09090b;
--font-sans: inter, system-ui, sans-serif;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-background: var(--background);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
--font-mono: jetbrains mono, monospace;
--font-serif: georgia, serif;
--radius: 0.5rem;
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
--tracking-normal: var(--tracking-normal);
--shadow-2xl: var(--shadow-2xl);
--shadow-xl: var(--shadow-xl);
--shadow-lg: var(--shadow-lg);
--shadow-md: var(--shadow-md);
--shadow: var(--shadow);
--shadow-sm: var(--shadow-sm);
--shadow-xs: var(--shadow-xs);
--shadow-2xs: var(--shadow-2xs);
--spacing: var(--spacing);
--letter-spacing: var(--letter-spacing);
--shadow-offset-y: var(--shadow-offset-y);
--shadow-offset-x: var(--shadow-offset-x);
--shadow-spread: var(--shadow-spread);
--shadow-blur: var(--shadow-blur);
--shadow-opacity: var(--shadow-opacity);
--color-shadow-color: var(--shadow-color);
--color-destructive-foreground: var(--destructive-foreground);
}

@font-face {
Expand All @@ -52,11 +98,11 @@
}

@theme {
--font-sans: 'Satoshi-Variable', 'Satoshi-Regular', sans-serif;
--font-sans: 'Satoshi-Variable', system-ui, sans-serif;
}

html {
@apply w-screen overflow-x-clip bg-fyra-gray-900 text-fyra-gray-50;
@apply w-screen overflow-x-clip bg-background text-foreground;
}

body {
Expand Down Expand Up @@ -98,3 +144,130 @@ body {
}
}
}

:root {
--background: oklch(98.51% 0 0deg);
--foreground: oklch(20.99% 0.0039 286.0588deg);
--card: oklch(100% 0 0deg);
--card-foreground: oklch(20.99% 0.0039 286.0588deg);
--popover: oklch(100% 0 0deg);
--popover-foreground: oklch(20.99% 0.0039 286.0588deg);
--primary: oklch(74.08% 0.0777 23.1114deg);
--primary-foreground: oklch(25.81% 0.0555 16.4657deg);
--secondary: oklch(96.74% 0.0013 286.3752deg);
--secondary-foreground: oklch(37.33% 0.0085 285.9832deg);
--muted: oklch(96.74% 0.0013 286.3752deg);
--muted-foreground: oklch(55.44% 0.0107 286.0451deg);
--accent: oklch(90.96% 0.0257 23.6074deg);
--accent-foreground: oklch(47.68% 0.1139 20.9784deg);
--destructive: oklch(42.71% 0.0963 17.6194deg);
--border: oklch(91.97% 0.004 286.3202deg);
--input: oklch(91.97% 0.004 286.3202deg);
--ring: oklch(74.08% 0.0777 23.1114deg);
--chart-1: oklch(74.08% 0.0777 23.1114deg);
--chart-2: oklch(55.44% 0.0107 286.0451deg);
--chart-3: oklch(47.68% 0.1139 20.9784deg);
--chart-4: oklch(71.44% 0.01 286.1428deg);
--chart-5: oklch(64.19% 0.1081 23.3769deg);
--radius: 0.5rem;
--sidebar: oklch(96.74% 0.0013 286.3752deg);
--sidebar-foreground: oklch(37.33% 0.0085 285.9832deg);
--sidebar-primary: oklch(74.08% 0.0777 23.1114deg);
--sidebar-primary-foreground: oklch(25.81% 0.0555 16.4657deg);
--sidebar-accent: oklch(91.97% 0.004 286.3202deg);
--sidebar-accent-foreground: oklch(20.99% 0.0039 286.0588deg);
--sidebar-border: oklch(87.36% 0.0027 286.3433deg);
--sidebar-ring: oklch(74.08% 0.0777 23.1114deg);
--destructive-foreground: oklch(97.67% 0.0055 31.0539deg);
--font-sans: inter, system-ui, sans-serif;
--font-serif: georgia, serif;
--font-mono: jetbrains mono, monospace;
--shadow-color: #000;
--shadow-opacity: 0.1;
--shadow-blur: 10px;
--shadow-spread: 0px;
--shadow-offset-x: 0px;
--shadow-offset-y: 2px;
--letter-spacing: 0px;
--spacing: 0.25rem;
--shadow-2xs: 0px 2px 10px 0px hsl(0deg 0% 0% / 5%);
--shadow-xs: 0px 2px 10px 0px hsl(0deg 0% 0% / 5%);
--shadow-sm: 0px 2px 10px 0px hsl(0deg 0% 0% / 10%), 0px 1px 2px -1px hsl(0deg 0% 0% / 10%);
--shadow: 0px 2px 10px 0px hsl(0deg 0% 0% / 10%), 0px 1px 2px -1px hsl(0deg 0% 0% / 10%);
--shadow-md: 0px 2px 10px 0px hsl(0deg 0% 0% / 10%), 0px 2px 4px -1px hsl(0deg 0% 0% / 10%);
--shadow-lg: 0px 2px 10px 0px hsl(0deg 0% 0% / 10%), 0px 4px 6px -1px hsl(0deg 0% 0% / 10%);
--shadow-xl: 0px 2px 10px 0px hsl(0deg 0% 0% / 10%), 0px 8px 10px -1px hsl(0deg 0% 0% / 10%);
--shadow-2xl: 0px 2px 10px 0px hsl(0deg 0% 0% / 25%);
--tracking-normal: 0.01em;
}

.dark {
--background: oklch(14.08% 0.0044 285.8229deg);
--foreground: oklch(98.51% 0 0deg);
--card: oklch(20.99% 0.0039 286.0588deg);
--card-foreground: oklch(98.51% 0 0deg);
--popover: oklch(20.99% 0.0039 286.0588deg);
--popover-foreground: oklch(98.51% 0 0deg);
--primary: oklch(74.08% 0.0777 23.1114deg);
--primary-foreground: oklch(25.81% 0.0555 16.4657deg);
--secondary: oklch(20.99% 0.0039 286.0588deg);
--secondary-foreground: oklch(98.51% 0 0deg);
--muted: oklch(20.99% 0.0039 286.0588deg);
--muted-foreground: oklch(71.44% 0.01 286.1428deg);
--accent: oklch(37.33% 0.0085 285.9832deg);
--accent-foreground: oklch(90.96% 0.0257 23.6074deg);
--destructive: oklch(47.68% 0.1139 20.9784deg);
--border: oklch(27.39% 0.0055 286.0326deg);
--input: oklch(27.39% 0.0055 286.0326deg);
--ring: oklch(74.08% 0.0777 23.1114deg);
--chart-1: oklch(74.08% 0.0777 23.1114deg);
--chart-2: oklch(71.44% 0.01 286.1428deg);
--chart-3: oklch(64.19% 0.1081 23.3769deg);
--chart-4: oklch(55.44% 0.0107 286.0451deg);
--chart-5: oklch(52.63% 0.1207 21.4448deg);
--sidebar: oklch(20.99% 0.0039 286.0588deg);
--sidebar-foreground: oklch(87.36% 0.0027 286.3433deg);
--sidebar-primary: oklch(74.08% 0.0777 23.1114deg);
--sidebar-primary-foreground: oklch(25.81% 0.0555 16.4657deg);
--sidebar-accent: oklch(27.39% 0.0055 286.0326deg);
--sidebar-accent-foreground: oklch(98.51% 0 0deg);
--sidebar-border: oklch(27.39% 0.0055 286.0326deg);
--sidebar-ring: oklch(74.08% 0.0777 23.1114deg);
--destructive-foreground: oklch(97.67% 0.0055 31.0539deg);
--radius: 0.5rem;
--font-sans: inter, system-ui, sans-serif;
--font-serif: georgia, serif;
--font-mono: jetbrains mono, monospace;
--shadow-color: #000;
--shadow-opacity: 0.5;
--shadow-blur: 12px;
--shadow-spread: 0px;
--shadow-offset-x: 0px;
--shadow-offset-y: 4px;
--letter-spacing: 0.01em;
--spacing: 0.25rem;
--shadow-2xs: 0px 4px 12px 0px hsl(0deg 0% 0% / 25%);
--shadow-xs: 0px 4px 12px 0px hsl(0deg 0% 0% / 25%);
--shadow-sm: 0px 4px 12px 0px hsl(0deg 0% 0% / 50%), 0px 1px 2px -1px hsl(0deg 0% 0% / 50%);
--shadow: 0px 4px 12px 0px hsl(0deg 0% 0% / 50%), 0px 1px 2px -1px hsl(0deg 0% 0% / 50%);
--shadow-md: 0px 4px 12px 0px hsl(0deg 0% 0% / 50%), 0px 2px 4px -1px hsl(0deg 0% 0% / 50%);
--shadow-lg: 0px 4px 12px 0px hsl(0deg 0% 0% / 50%), 0px 4px 6px -1px hsl(0deg 0% 0% / 50%);
--shadow-xl: 0px 4px 12px 0px hsl(0deg 0% 0% / 50%), 0px 8px 10px -1px hsl(0deg 0% 0% / 50%);
--shadow-2xl: 0px 4px 12px 0px hsl(0deg 0% 0% / 125%);
}

@layer base {
* {
@apply border-border outline-ring/50;
}

body {
@apply bg-background text-foreground;

letter-spacing: var(--tracking-normal);
}

html {
@apply font-sans;
}
}
3 changes: 2 additions & 1 deletion src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<!doctype html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
Expand Down
Loading
Loading