chore: separate frontend from backend

app/assets/css/colors.css

@@ -0,0 +1,132 @@
+:root {
+  --text-50: oklch(96.68% 0.005 95.1);
+  --text-100: oklch(93.31% 0.012 96.43);
+  --text-200: oklch(86.46% 0.023 98.68);
+  --text-300: oklch(79.55% 0.036 98.17);
+  --text-400: oklch(72.45% 0.047 99.12);
+  --text-500: oklch(65.27% 0.06 98.88);
+  --text-600: oklch(55.54% 0.05 99.33);
+  --text-700: oklch(45.43% 0.04 98.55);
+  --text-800: oklch(34.63% 0.028 99.26);
+  --text-900: oklch(22.99% 0.017 97.01);
+  --text: oklch(17.69% 0.01 97.92);
+  --text-950: oklch(16.34% 0.008 95.54);
+
+  --background: oklch(97.33% 0.007 88.64);
+  --background-50: oklch(96.7% 0.008 91.48);
+  --background-100: oklch(93.46% 0.017 88);
+  --background-200: oklch(86.85% 0.034 88.07);
+  --background-300: oklch(80.17% 0.051 88.07);
+  --background-400: oklch(73.62% 0.069 89.26);
+  --background-500: oklch(66.8% 0.085 88.59);
+  --background-600: oklch(56.88% 0.071 88.9);
+  --background-700: oklch(46.26% 0.056 87.6);
+  --background-800: oklch(35.24% 0.04 87.71);
+  --background-900: oklch(23.27% 0.023 87.9);
+  --background-950: oklch(16.86% 0.012 91.89);
+
+  --primary-50: oklch(97.22% 0.012 96.42);
+  --primary-100: oklch(94.41% 0.025 97.12);
+  --primary-200: oklch(88.75% 0.05 98.42);
+  --primary-300: oklch(83.15% 0.074 98.36);
+  --primary-400: oklch(77.55% 0.097 98.29);
+  --primary: oklch(74.12% 0.109 98.34);
+  --primary-500: oklch(72% 0.116 97.93);
+  --primary-600: oklch(61.14% 0.097 98.09);
+  --primary-700: oklch(49.77% 0.077 98.34);
+  --primary-800: oklch(37.71% 0.055 98.79);
+  --primary-900: oklch(24.68% 0.033 97.74);
+  --primary-950: oklch(17.23% 0.018 97.53);
+
+  --secondary-50: oklch(97.69% 0.019 100.12);
+  --secondary-100: oklch(95.28% 0.036 96.71);
+  --secondary-200: oklch(90.57% 0.07 97.74);
+  --secondary-300: oklch(86.23% 0.103 98.42);
+  --secondary: oklch(83.86% 0.116 98.04);
+  --secondary-400: oklch(81.72% 0.129 98.31);
+  --secondary-500: oklch(77.44% 0.146 97.07);
+  --secondary-600: oklch(65.69% 0.123 97.5);
+  --secondary-700: oklch(53.48% 0.099 97.52);
+  --secondary-800: oklch(40.18% 0.072 97.19);
+  --secondary-900: oklch(26.04% 0.043 96.76);
+  --secondary-950: oklch(18.17% 0.026 97.52);
+
+  --accent-50: oklch(97.77% 0.019 96.86);
+  --accent-100: oklch(95.53% 0.039 97.44);
+  --accent-200: oklch(91.16% 0.076 97.81);
+  --accent-300: oklch(86.92% 0.11 97.94);
+  --accent: oklch(82.74% 0.136 98);
+  --accent-400: oklch(82.74% 0.136 98);
+  --accent-500: oklch(78.81% 0.152 96.76);
+  --accent-600: oklch(66.8% 0.128 96.97);
+  --accent-700: oklch(54.33% 0.103 96.65);
+  --accent-800: oklch(40.98% 0.076 96.95);
+  --accent-900: oklch(26.42% 0.045 97.53);
+  --accent-950: oklch(18.44% 0.029 102.49);
+}
+.dark {
+  --text-50: oklch(16.34% 0.008 95.54);
+  --text: oklch(96.05% 0.007 97.35);
+  --text-100: oklch(22.99% 0.017 97.01);
+  --text-200: oklch(34.63% 0.028 99.26);
+  --text-300: oklch(45.43% 0.04 98.55);
+  --text-400: oklch(55.54% 0.05 99.33);
+  --text-500: oklch(65.27% 0.06 98.88);
+  --text-600: oklch(72.45% 0.047 99.12);
+  --text-700: oklch(79.55% 0.036 98.17);
+  --text-800: oklch(86.46% 0.023 98.68);
+  --text-900: oklch(93.31% 0.012 96.43);
+  --text-950: oklch(96.68% 0.005 95.1);
+
+  --background-50: oklch(16.86% 0.012 91.89);
+  --background-100: oklch(23.27% 0.023 87.9);
+  --background-200: oklch(35.24% 0.04 87.71);
+  --background-300: oklch(46.26% 0.056 87.6);
+  --background-400: oklch(56.88% 0.071 88.9);
+  --background-500: oklch(66.8% 0.085 88.59);
+  --background-600: oklch(73.62% 0.069 89.26);
+  --background-700: oklch(80.17% 0.051 88.07);
+  --background-800: oklch(86.85% 0.034 88.07);
+  --background-900: oklch(93.46% 0.017 88);
+  --background-950: oklch(96.7% 0.008 91.48);
+  --background: oklch(15.48% 0.011 89.86);
+
+  --primary-50: oklch(17.23% 0.018 97.53);
+  --primary-100: oklch(24.68% 0.033 97.74);
+  --primary-200: oklch(37.71% 0.055 98.79);
+  --primary-300: oklch(49.77% 0.077 98.34);
+  --primary-400: oklch(61.14% 0.097 98.09);
+  --primary: oklch(67.74% 0.108 98.2);
+  --primary-500: oklch(72% 0.116 97.93);
+  --primary-600: oklch(77.55% 0.097 98.29);
+  --primary-700: oklch(83.15% 0.074 98.36);
+  --primary-800: oklch(88.75% 0.05 98.42);
+  --primary-900: oklch(94.41% 0.025 97.12);
+  --primary-950: oklch(97.22% 0.012 96.42);
+
+  --secondary-50: oklch(18.17% 0.026 97.52);
+  --secondary-100: oklch(26.04% 0.043 96.76);
+  --secondary-200: oklch(40.18% 0.072 97.19);
+  --secondary-300: oklch(53.48% 0.099 97.52);
+  --secondary: oklch(59.61% 0.111 97.84);
+  --secondary-400: oklch(65.69% 0.123 97.5);
+  --secondary-500: oklch(77.44% 0.146 97.07);
+  --secondary-600: oklch(81.72% 0.129 98.31);
+  --secondary-700: oklch(86.23% 0.103 98.42);
+  --secondary-800: oklch(90.57% 0.07 97.74);
+  --secondary-900: oklch(95.28% 0.036 96.71);
+  --secondary-950: oklch(97.69% 0.019 100.12);
+
+  --accent-50: oklch(18.44% 0.029 102.49);
+  --accent-100: oklch(26.42% 0.045 97.53);
+  --accent-200: oklch(40.98% 0.076 96.95);
+  --accent-300: oklch(54.33% 0.103 96.65);
+  --accent: oklch(66.8% 0.128 96.97);
+  --accent-400: oklch(66.8% 0.128 96.97);
+  --accent-500: oklch(78.81% 0.152 96.76);
+  --accent-600: oklch(82.74% 0.136 98);
+  --accent-700: oklch(86.92% 0.11 97.94);
+  --accent-800: oklch(91.16% 0.076 97.81);
+  --accent-900: oklch(95.53% 0.039 97.44);
+  --accent-950: oklch(97.77% 0.019 96.86);
+}

app/assets/css/main.css

@@ -0,0 +1,6 @@
+@import '@nuxt/ui';
+@import './colors.css';
+@import './ui/index.css';
+@import './tailwind.css';
+
+@source "../../../content/**/*";

app/assets/css/tailwind.css

@@ -0,0 +1,85 @@
+@import 'tailwindcss';
+@theme {
+  --color-text-50: var(--text-50);
+  --color-text: var(--text);
+  --color-text-100: var(--text-100);
+  --color-text-200: var(--text-200);
+  --color-text-300: var(--text-300);
+  --color-text-400: var(--text-400);
+  --color-text-500: var(--text-500);
+  --color-text-600: var(--text-600);
+  --color-text-700: var(--text-700);
+  --color-text-800: var(--text-800);
+  --color-text-900: var(--text-900);
+  --color-text-950: var(--text-950);
+
+  --color-background-50: var(--background-50);
+  --color-background-100: var(--background-100);
+  --color-background-200: var(--background-200);
+  --color-background-300: var(--background-300);
+  --color-background-400: var(--background-400);
+  --color-background-500: var(--background-500);
+  --color-background-600: var(--background-600);
+  --color-background-700: var(--background-700);
+  --color-background-800: var(--background-800);
+  --color-background-900: var(--background-900);
+  --color-background-950: var(--background-950);
+  --color-background: var(--background);
+
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary: var(--primary);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+  --color-primary-950: var(--primary-950);
+
+  --color-secondary-50: var(--secondary-50);
+  --color-secondary-100: var(--secondary-100);
+  --color-secondary-200: var(--secondary-200);
+  --color-secondary-300: var(--secondary-300);
+  --color-secondary: var(--secondary);
+  --color-secondary-400: var(--secondary-400);
+  --color-secondary-500: var(--secondary-500);
+  --color-secondary-600: var(--secondary-600);
+  --color-secondary-700: var(--secondary-700);
+  --color-secondary-800: var(--secondary-800);
+  --color-secondary-900: var(--secondary-900);
+  --color-secondary-950: var(--secondary-950);
+
+  --color-accent-50: var(--accent-50);
+  --color-accent-100: var(--accent-100);
+  --color-accent-200: var(--accent-200);
+  --color-accent-300: var(--accent-300);
+  --color-accent: var(--accent);
+  --color-accent-400: var(--accent-400);
+  --color-accent-500: var(--accent-500);
+  --color-accent-600: var(--accent-600);
+  --color-accent-700: var(--accent-700);
+  --color-accent-800: var(--accent-800);
+  --color-accent-900: var(--accent-900);
+  --color-accent-950: var(--accent-950);
+
+  --text-sm: 0.75rem;
+  --text-base: 1rem;
+  --text-xl: 1.333rem;
+  --text-2xl: 1.777rem;
+  --text-3xl: 2.369rem;
+  --text-4xl: 3.158rem;
+  --text-5xl: 4.21rem;
+
+  --text-weight-normal: 400;
+  --text-weight-bold: 700;
+
+  --font-sans:
+    Noto Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --font-title:
+    Wittgenstein, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+}

app/assets/css/ui/background.css

@@ -0,0 +1,14 @@
+:root {
+  --ui-bg: var(--background);
+  --ui-bg-muted: var(--background-300);
+  --ui-bg-elevated: var(--background-100);
+  --ui-bg-accented: var(--backgsound-200);
+  --ui-bg-inverted: var(--background-900);
+}
+.dark {
+  --ui-bg: var(--background);
+  --ui-bg-muted: var(--background-100);
+  --ui-bg-elevated: var(--background-200);
+  --ui-bg-accented: var(--background-300);
+  --ui-bg-inverted: var(--background-900);
+}

app/assets/css/ui/border.css

@@ -0,0 +1,12 @@
+:root {
+  --ui-border: var(--background-200);
+  --ui-border-muted: var(--background-200);
+  --ui-border-accented: var(--background-300);
+  --ui-border-inverted: var(--background-900);
+}
+.dark {
+  --ui-border: var(--background-100);
+  --ui-border-muted: var(--background-200);
+  --ui-border-accented: var(--background-200);
+  --ui-border-inverted: var(--background-900);
+}

app/assets/css/ui/colors.css

@@ -0,0 +1,16 @@
+:root {
+  --ui-primary: var(--primary);
+  --ui-secondary: var(--secondary);
+  --ui-success: var(--accent);
+  --ui-info: var(--ui-color-info-500);
+  --ui-warning: var(--ui-color-warning-500);
+  --ui-error: var(--ui-color-error-500);
+}
+.dark {
+  --ui-primary: var(--primary);
+  --ui-secondary: var(--secondary);
+  --ui-success: var(--accent);
+  --ui-info: var(--ui-color-info-400);
+  --ui-warning: var(--ui-color-warning-400);
+  --ui-error: var(--ui-color-error-400);
+}

app/assets/css/ui/index.css

@@ -0,0 +1,4 @@
+@import './colors.css';
+@import './text.css';
+@import './background.css';
+@import './border.css';

app/assets/css/ui/text.css

@@ -0,0 +1,16 @@
+:root {
+  --ui-text-dimmed: var(--text-800);
+  --ui-text-muted: var(--text-700);
+  --ui-text-toned: var(--text-600);
+  --ui-text: var(--text);
+  --ui-text-highlighted: var(--text-900);
+  --ui-text-inverted: var(--text-50);
+}
+.dark {
+  --ui-text-dimmed: var(--text-800);
+  --ui-text-muted: var(--text-700);
+  --ui-text-toned: var(--text-600);
+  --ui-text: var(--text);
+  --ui-text-highlighted: var(--text);
+  --ui-text-inverted: var(--text-50);
+}