From 2bc29addf538410d153dfacab3c2a8908317eefa Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Thu, 25 Dec 2025 10:49:08 +0000 Subject: [PATCH] remove tailwind --- package.json | 2 - spark.meta.json | 4 - src/index.scss | 103 ----------------- src/main.scss | 186 ------------------------------ src/styles/theme.scss | 262 ------------------------------------------ 5 files changed, 557 deletions(-) delete mode 100644 spark.meta.json diff --git a/package.json b/package.json index 5d686abb2..20251f66d 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,6 @@ "devDependencies": { "@eslint/js": "^9.39.2", "@playwright/test": "^1.57.0", - "@tailwindcss/postcss": "^4.1.8", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react-swc": "^4.2.2", @@ -100,7 +99,6 @@ "eslint-plugin-react-refresh": "^0.4.19", "globals": "^16.0.0", "prisma": "^6.19.1", - "tailwindcss": "^4.1.11", "typescript": "~5.9.3", "typescript-eslint": "^8.38.0", "vite": "^7.3.0" diff --git a/spark.meta.json b/spark.meta.json deleted file mode 100644 index a277bc5f2..000000000 --- a/spark.meta.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "templateVersion": 1, - "dbType": "kv" -} \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 9a9b07066..e69de29bb 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,103 +0,0 @@ -@import 'tailwindcss'; -/* TODO: Re-enable tw-animate-css after fixing import resolution */ -/* @import "tw-animate-css"; */ - -@layer base { - * { - @apply border-border - } -} - -:root { - --background: oklch(0.92 0.03 290); - --foreground: oklch(0.25 0.02 260); - - --card: oklch(1 0 0); - --card-foreground: oklch(0.25 0.02 260); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.25 0.02 260); - - --primary: oklch(0.55 0.18 290); - --primary-foreground: oklch(0.98 0 0); - --secondary: oklch(0.35 0.02 260); - --secondary-foreground: oklch(0.90 0.01 260); - --muted: oklch(0.95 0.02 290); - --muted-foreground: oklch(0.50 0.02 260); - --accent: oklch(0.70 0.17 195); - --accent-foreground: oklch(0.2 0.02 260); - --destructive: oklch(0.55 0.22 25); - --destructive-foreground: oklch(0.98 0 0); - - --border: oklch(0.85 0.02 290); - --input: oklch(0.85 0.02 290); - --ring: oklch(0.70 0.17 195); - - --sidebar: oklch(0.35 0.02 260); - --sidebar-foreground: oklch(0.90 0.01 260); - --sidebar-primary: oklch(0.55 0.18 290); - --sidebar-primary-foreground: oklch(0.98 0 0); - --sidebar-accent: oklch(0.40 0.03 260); - --sidebar-accent-foreground: oklch(0.90 0.01 260); - --sidebar-border: oklch(0.30 0.02 260); - --sidebar-ring: oklch(0.70 0.17 195); - - --canvas: oklch(0.96 0.01 290); - --drop-zone: oklch(0.70 0.17 195 / 0.1); - --drop-zone-border: oklch(0.70 0.17 195); - - --radius: 0.5rem; -} - -@theme { - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - - --color-canvas: var(--canvas); - --color-drop-zone: var(--drop-zone); - --color-drop-zone-border: var(--drop-zone-border); - - --radius-sm: calc(var(--radius) * 0.5); - --radius-md: var(--radius); - --radius-lg: calc(var(--radius) * 1.5); - --radius-xl: calc(var(--radius) * 2); - --radius-2xl: calc(var(--radius) * 3); - --radius-full: 9999px; -} - -body { - font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; -} - -h1, h2, h3, h4, h5, h6 { - font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; -} - -code, pre, .font-mono { - font-family: 'JetBrains Mono', 'Courier New', monospace; -} diff --git a/src/main.scss b/src/main.scss index dfaac6ebd..e69de29bb 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,186 +0,0 @@ -@import 'tailwindcss'; - -@import './styles/theme.css'; -@import './index.css'; -@import "tw-animate-css"; -/* - ---break--- -*/ -@custom-variant dark (&:is(.dark *)); - -@config '../tailwind.config.js'; - -/* - The default border color has changed to `currentColor` in Tailwind CSS v4, - so we've added these compatibility styles to make sure everything still - looks the same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add an explicit border - color utility to any element that depends on these defaults. -*/ -@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentColor); - } -} - -/* - ---break--- -*/ -:root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); -} - -/* - ---break--- -*/ -.dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); -} - -/* - ---break--- -*/ -@theme inline { - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - --animate-accordion-down: accordion-down 0.2s ease-out; - --animate-accordion-up: accordion-up 0.2s ease-out; - - /* - ---break--- -*/ - @keyframes accordion-down { - from { - height: 0; - } - - to { - height: var(--radix-accordion-content-height); - } - } - - /* - ---break--- -*/ - @keyframes accordion-up { - from { - height: var(--radix-accordion-content-height); - } - - to { - height: 0; - } - } -} - -/* - ---break--- -*/ -@layer base { - * { - @apply border-border outline-ring/50; - } - - body { - @apply bg-background text-foreground; - } -} \ No newline at end of file diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 8da23f27d..e69de29bb 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -1,262 +0,0 @@ -@import "tailwindcss"; - -@import '@radix-ui/colors/sage-dark.css' layer(base); -@import '@radix-ui/colors/olive.css' layer(base); -@import '@radix-ui/colors/olive-dark.css' layer(base); -@import '@radix-ui/colors/sand.css' layer(base); -@import '@radix-ui/colors/sand-dark.css' layer(base); -@import '@radix-ui/colors/red.css' layer(base); -@import '@radix-ui/colors/red-dark.css' layer(base); -@import '@radix-ui/colors/ruby.css' layer(base); -@import '@radix-ui/colors/ruby-dark.css' layer(base); -@import '@radix-ui/colors/crimson.css' layer(base); -@import '@radix-ui/colors/crimson-dark.css' layer(base); -@import '@radix-ui/colors/pink.css' layer(base); -@import '@radix-ui/colors/pink-dark.css' layer(base); -@import '@radix-ui/colors/plum.css' layer(base); -@import '@radix-ui/colors/plum-dark.css' layer(base); -@import '@radix-ui/colors/purple.css' layer(base); -@import '@radix-ui/colors/purple-dark.css' layer(base); -@import '@radix-ui/colors/violet.css' layer(base); -@import '@radix-ui/colors/violet-dark.css' layer(base); -@import '@radix-ui/colors/iris.css' layer(base); -@import '@radix-ui/colors/iris-dark.css' layer(base); -@import '@radix-ui/colors/indigo.css' layer(base); -@import '@radix-ui/colors/indigo-dark.css' layer(base); -@import '@radix-ui/colors/blue.css' layer(base); -@import '@radix-ui/colors/blue-dark.css' layer(base); -@import '@radix-ui/colors/cyan.css' layer(base); -@import '@radix-ui/colors/cyan-dark.css' layer(base); -@import '@radix-ui/colors/teal.css' layer(base); -@import '@radix-ui/colors/teal-dark.css' layer(base); -@import '@radix-ui/colors/jade.css' layer(base); -@import '@radix-ui/colors/jade-dark.css' layer(base); -@import '@radix-ui/colors/green.css' layer(base); -@import '@radix-ui/colors/green-dark.css' layer(base); -@import '@radix-ui/colors/grass.css' layer(base); -@import '@radix-ui/colors/grass-dark.css' layer(base); -@import '@radix-ui/colors/bronze.css' layer(base); -@import '@radix-ui/colors/bronze-dark.css' layer(base); -@import '@radix-ui/colors/gold.css' layer(base); -@import '@radix-ui/colors/gold-dark.css' layer(base); -@import '@radix-ui/colors/brown.css' layer(base); -@import '@radix-ui/colors/brown-dark.css' layer(base); -@import '@radix-ui/colors/orange.css' layer(base); -@import '@radix-ui/colors/orange-dark.css' layer(base); -@import '@radix-ui/colors/amber.css' layer(base); -@import '@radix-ui/colors/amber-dark.css' layer(base); -@import '@radix-ui/colors/yellow.css' layer(base); -@import '@radix-ui/colors/yellow-dark.css' layer(base); -@import '@radix-ui/colors/lime.css' layer(base); -@import '@radix-ui/colors/lime-dark.css' layer(base); -@import '@radix-ui/colors/mint.css' layer(base); -@import '@radix-ui/colors/mint-dark.css' layer(base); -@import '@radix-ui/colors/sky.css' layer(base); -@import '@radix-ui/colors/sky-dark.css' layer(base); -@import '@radix-ui/colors/tomato.css' layer(base); -@import '@radix-ui/colors/tomato-dark.css' layer(base); -@import '@radix-ui/colors/gray.css' layer(base); -@import '@radix-ui/colors/gray-dark.css' layer(base); -@import '@radix-ui/colors/mauve.css' layer(base); -@import '@radix-ui/colors/mauve-dark.css' layer(base); -@import '@radix-ui/colors/slate.css' layer(base); -@import '@radix-ui/colors/slate-dark.css' layer(base); -@import '@radix-ui/colors/slate-alpha.css' layer(base); -@import '@radix-ui/colors/slate-dark-alpha.css' layer(base); - -@import 'tailwindcss/theme' layer(theme); - -@import 'tailwindcss/preflight' layer(base); - -/* - The default border color has changed to `currentColor` in Tailwind CSS v4, - so we've added these compatibility styles to make sure everything still - looks the same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add an explicit border - color utility to any element that depends on these defaults. -*/ -@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentColor); - } -} - -@layer base { - #spark-app { - --tomato-contrast: #fff; - --red-contrast: #fff; - --ruby-contrast: #fff; - --crimson-contrast: #fff; - --pink-contrast: #fff; - --plum-contrast: #fff; - --purple-contrast: #fff; - --violet-contrast: #fff; - --iris-contrast: #fff; - --indigo-contrast: #fff; - --blue-contrast: #fff; - --cyan-contrast: #fff; - --teal-contrast: #fff; - --jade-contrast: #fff; - --green-contrast: #fff; - --grass-contrast: #fff; - --bronze-contrast: #fff; - --gold-contrast: #fff; - --brown-contrast: #fff; - --orange-contrast: #fff; - --amber-contrast: #000; - --yellow-contrast: #000; - --lime-contrast: #000; - --mint-contrast: #000; - --sky-contrast: #000; - --gray-contrast: #fff; - --mauve-contrast: #fff; - --slate-contrast: #fff; - --sage-contrast: #fff; - --olive-contrast: #fff; - --sand-contrast: #fff; - - /** - * Spacing scale - * - * These variables define a spacing scale based on Tailwind's default. - * We've introduced a --size-scale variable as a multiplier. - * By adjusting this single value, we can proportionally - * scale all spacing throughout the entire application. - * - * https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale - */ - --size-scale: 1; - --size-0: 0px; - --size-px: 1px; - --size-0-5: calc(0.125rem * var(--size-scale)); - --size-1: calc(0.25rem * var(--size-scale)); - --size-1-5: calc(0.375rem * var(--size-scale)); - --size-2: calc(0.5rem * var(--size-scale)); - --size-2-5: calc(0.625rem * var(--size-scale)); - --size-3: calc(0.75rem * var(--size-scale)); - --size-3-5: calc(0.875rem * var(--size-scale)); - --size-4: calc(1rem * var(--size-scale)); - --size-5: calc(1.25rem * var(--size-scale)); - --size-6: calc(1.5rem * var(--size-scale)); - --size-7: calc(1.75rem * var(--size-scale)); - --size-8: calc(2rem * var(--size-scale)); - --size-9: calc(2.25rem * var(--size-scale)); - --size-10: calc(2.5rem * var(--size-scale)); - --size-11: calc(2.75rem * var(--size-scale)); - --size-12: calc(3rem * var(--size-scale)); - --size-14: calc(3.5rem * var(--size-scale)); - --size-16: calc(4rem * var(--size-scale)); - --size-20: calc(5rem * var(--size-scale)); - --size-24: calc(6rem * var(--size-scale)); - --size-28: calc(7rem * var(--size-scale)); - --size-32: calc(8rem * var(--size-scale)); - --size-36: calc(9rem * var(--size-scale)); - --size-40: calc(10rem * var(--size-scale)); - --size-44: calc(11rem * var(--size-scale)); - --size-48: calc(12rem * var(--size-scale)); - --size-52: calc(13rem * var(--size-scale)); - --size-56: calc(14rem * var(--size-scale)); - --size-60: calc(15rem * var(--size-scale)); - --size-64: calc(16rem * var(--size-scale)); - --size-72: calc(18rem * var(--size-scale)); - --size-80: calc(20rem * var(--size-scale)); - --size-96: calc(24rem * var(--size-scale)); - - /* Border radii */ - --radius-factor: 1; - --radius-sm: calc(2px * var(--radius-factor) * var(--size-scale)); - --radius-md: calc(6px * var(--radius-factor) * var(--size-scale)); - --radius-lg: calc(8px * var(--radius-factor) * var(--size-scale)); - --radius-xl: calc(12px * var(--radius-factor) * var(--size-scale)); - --radius-2xl: calc(16px * var(--radius-factor) * var(--size-scale)); - --radius-full: 9999px; - - /* Neutral colors */ - --color-neutral-1: var(--slate-1); - --color-neutral-2: var(--slate-2); - --color-neutral-3: var(--slate-3); - --color-neutral-4: var(--slate-4); - --color-neutral-5: var(--slate-5); - --color-neutral-6: var(--slate-6); - --color-neutral-7: var(--slate-7); - --color-neutral-8: var(--slate-8); - --color-neutral-9: var(--slate-9); - --color-neutral-10: var(--slate-10); - --color-neutral-11: var(--slate-11); - --color-neutral-12: var(--slate-12); - --color-neutral-a1: var(--slate-a1); - --color-neutral-a2: var(--slate-a2); - --color-neutral-a3: var(--slate-a3); - --color-neutral-a4: var(--slate-a4); - --color-neutral-a5: var(--slate-a5); - --color-neutral-a6: var(--slate-a6); - --color-neutral-a7: var(--slate-a7); - --color-neutral-a8: var(--slate-a8); - --color-neutral-a9: var(--slate-a9); - --color-neutral-a10: var(--slate-a10); - --color-neutral-a11: var(--slate-a11); - --color-neutral-a12: var(--slate-a12); - --color-neutral-contrast: var(--slate-contrast); - - /* Accent colors */ - --color-accent-1: var(--blue-1); - --color-accent-2: var(--blue-2); - --color-accent-3: var(--blue-3); - --color-accent-4: var(--blue-4); - --color-accent-5: var(--blue-5); - --color-accent-6: var(--blue-6); - --color-accent-7: var(--blue-7); - --color-accent-8: var(--blue-8); - --color-accent-9: var(--blue-9); - --color-accent-10: var(--blue-10); - --color-accent-11: var(--blue-11); - --color-accent-12: var(--blue-12); - --color-accent-contrast: var(--blue-contrast); - - /* Secondary accent colors */ - --color-accent-secondary-1: var(--violet-1); - --color-accent-secondary-2: var(--violet-2); - --color-accent-secondary-3: var(--violet-3); - --color-accent-secondary-4: var(--violet-4); - --color-accent-secondary-5: var(--violet-5); - --color-accent-secondary-6: var(--violet-6); - --color-accent-secondary-7: var(--violet-7); - --color-accent-secondary-8: var(--violet-8); - --color-accent-secondary-9: var(--violet-9); - --color-accent-secondary-10: var(--violet-10); - --color-accent-secondary-11: var(--violet-11); - --color-accent-secondary-12: var(--violet-12); - --color-accent-secondary-contrast: var(--violet-contrast); - - /* Foreground colors */ - --color-fg: var(--color-neutral-12); - --color-fg-secondary: var(--color-neutral-a11); - - /* Background colors */ - --color-bg: #ffffff; - --color-bg-inset: var(--color-neutral-2); - --color-bg-overlay: #ffffff; - - /* Focus ring */ - --color-focus-ring: var(--color-accent-9); - - /* Fonts */ - --font-sans-serif: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace; - --font-family: var(--font-sans-serif); - } - - #spark-app.dark-theme { - --color-bg: var(--color-neutral-1); - --color-bg-inset: #000000; - --color-bg-overlay: var(--color-neutral-3); - } -} \ No newline at end of file