Init v1.0.0

2026-02-24 18:14:16 +01:00
commit 54d6ee553a
49 changed files with 10410 additions and 0 deletions
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,486 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* ===== DEFAULT LIGHT ===== */
+  :root,
+  [data-theme="light"] {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-tertiary: #f1f5f9;
+    --text-primary: #0f172a;
+    --text-secondary: #64748b;
+    --accent: #3b82f6;
+    --accent-hover: #2563eb;
+    --accent-text: #ffffff;
+    --border: #e2e8f0;
+    --card-bg: #ffffff;
+    --input-bg: #ffffff;
+    --input-border: #cbd5e1;
+    --nav-bg: #ffffff;
+    --sidebar-bg: #f8fafc;
+    --hover-bg: #f1f5f9;
+    --success: #22c55e;
+    --warning: #eab308;
+    --error: #ef4444;
+    --ring: #3b82f6;
+    --shadow-color: rgba(0, 0, 0, 0.08);
+    --gradient-start: #3b82f6;
+    --gradient-end: #8b5cf6;
+  }
+
+  /* ===== DEFAULT DARK ===== */
+  [data-theme="dark"] {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-tertiary: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --accent: #3b82f6;
+    --accent-hover: #60a5fa;
+    --accent-text: #ffffff;
+    --border: #334155;
+    --card-bg: #1e293b;
+    --input-bg: #1e293b;
+    --input-border: #475569;
+    --nav-bg: #1e293b;
+    --sidebar-bg: #0f172a;
+    --hover-bg: #334155;
+    --success: #22c55e;
+    --warning: #eab308;
+    --error: #ef4444;
+    --ring: #3b82f6;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --gradient-start: #3b82f6;
+    --gradient-end: #8b5cf6;
+  }
+
+  /* ===== DRACULA ===== */
+  [data-theme="dracula"] {
+    --bg-primary: #282a36;
+    --bg-secondary: #44475a;
+    --bg-tertiary: #383a4c;
+    --text-primary: #f8f8f2;
+    --text-secondary: #6272a4;
+    --accent: #bd93f9;
+    --accent-hover: #caa8fc;
+    --accent-text: #282a36;
+    --border: #44475a;
+    --card-bg: #383a4c;
+    --input-bg: #44475a;
+    --input-border: #6272a4;
+    --nav-bg: #21222c;
+    --sidebar-bg: #21222c;
+    --hover-bg: #44475a;
+    --success: #50fa7b;
+    --warning: #f1fa8c;
+    --error: #ff5555;
+    --ring: #bd93f9;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #bd93f9;
+    --gradient-end: #ff79c6;
+  }
+
+  /* ===== CATPPUCCIN MOCHA ===== */
+  [data-theme="mocha"] {
+    --bg-primary: #1e1e2e;
+    --bg-secondary: #313244;
+    --bg-tertiary: #45475a;
+    --text-primary: #cdd6f4;
+    --text-secondary: #a6adc8;
+    --accent: #89b4fa;
+    --accent-hover: #b4befe;
+    --accent-text: #1e1e2e;
+    --border: #45475a;
+    --card-bg: #313244;
+    --input-bg: #313244;
+    --input-border: #585b70;
+    --nav-bg: #181825;
+    --sidebar-bg: #181825;
+    --hover-bg: #45475a;
+    --success: #a6e3a1;
+    --warning: #f9e2af;
+    --error: #f38ba8;
+    --ring: #89b4fa;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #89b4fa;
+    --gradient-end: #cba6f7;
+  }
+
+  /* ===== CATPPUCCIN LATTE (Light) ===== */
+  [data-theme="latte"] {
+    --bg-primary: #eff1f5;
+    --bg-secondary: #e6e9ef;
+    --bg-tertiary: #dce0e8;
+    --text-primary: #4c4f69;
+    --text-secondary: #6c6f85;
+    --accent: #1e66f5;
+    --accent-hover: #2a6ef5;
+    --accent-text: #ffffff;
+    --border: #ccd0da;
+    --card-bg: #e6e9ef;
+    --input-bg: #eff1f5;
+    --input-border: #bcc0cc;
+    --nav-bg: #e6e9ef;
+    --sidebar-bg: #dce0e8;
+    --hover-bg: #dce0e8;
+    --success: #40a02b;
+    --warning: #df8e1d;
+    --error: #d20f39;
+    --ring: #1e66f5;
+    --shadow-color: rgba(76, 79, 105, 0.1);
+    --gradient-start: #1e66f5;
+    --gradient-end: #8839ef;
+  }
+
+  /* ===== NORD ===== */
+  [data-theme="nord"] {
+    --bg-primary: #2e3440;
+    --bg-secondary: #3b4252;
+    --bg-tertiary: #434c5e;
+    --text-primary: #eceff4;
+    --text-secondary: #d8dee9;
+    --accent: #88c0d0;
+    --accent-hover: #8fbcbb;
+    --accent-text: #2e3440;
+    --border: #4c566a;
+    --card-bg: #3b4252;
+    --input-bg: #3b4252;
+    --input-border: #4c566a;
+    --nav-bg: #2e3440;
+    --sidebar-bg: #2e3440;
+    --hover-bg: #434c5e;
+    --success: #a3be8c;
+    --warning: #ebcb8b;
+    --error: #bf616a;
+    --ring: #88c0d0;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --gradient-start: #88c0d0;
+    --gradient-end: #b48ead;
+  }
+
+  /* ===== TOKYO NIGHT ===== */
+  [data-theme="tokyo-night"] {
+    --bg-primary: #1a1b26;
+    --bg-secondary: #24283b;
+    --bg-tertiary: #2f3349;
+    --text-primary: #a9b1d6;
+    --text-secondary: #565f89;
+    --accent: #7aa2f7;
+    --accent-hover: #89b4fa;
+    --accent-text: #1a1b26;
+    --border: #3b4261;
+    --card-bg: #24283b;
+    --input-bg: #24283b;
+    --input-border: #3b4261;
+    --nav-bg: #16161e;
+    --sidebar-bg: #16161e;
+    --hover-bg: #2f3349;
+    --success: #9ece6a;
+    --warning: #e0af68;
+    --error: #f7768e;
+    --ring: #7aa2f7;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #7aa2f7;
+    --gradient-end: #bb9af7;
+  }
+
+  /* ===== GRUVBOX DARK ===== */
+  [data-theme="gruvbox-dark"] {
+    --bg-primary: #282828;
+    --bg-secondary: #3c3836;
+    --bg-tertiary: #504945;
+    --text-primary: #ebdbb2;
+    --text-secondary: #a89984;
+    --accent: #fe8019;
+    --accent-hover: #fabd2f;
+    --accent-text: #282828;
+    --border: #504945;
+    --card-bg: #3c3836;
+    --input-bg: #3c3836;
+    --input-border: #665c54;
+    --nav-bg: #1d2021;
+    --sidebar-bg: #1d2021;
+    --hover-bg: #504945;
+    --success: #b8bb26;
+    --warning: #fabd2f;
+    --error: #fb4934;
+    --ring: #fe8019;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #fe8019;
+    --gradient-end: #fabd2f;
+  }
+
+  /* ===== GRUVBOX LIGHT ===== */
+  [data-theme="gruvbox-light"] {
+    --bg-primary: #fbf1c7;
+    --bg-secondary: #ebdbb2;
+    --bg-tertiary: #d5c4a1;
+    --text-primary: #3c3836;
+    --text-secondary: #665c54;
+    --accent: #d65d0e;
+    --accent-hover: #af3a03;
+    --accent-text: #fbf1c7;
+    --border: #d5c4a1;
+    --card-bg: #ebdbb2;
+    --input-bg: #fbf1c7;
+    --input-border: #bdae93;
+    --nav-bg: #ebdbb2;
+    --sidebar-bg: #ebdbb2;
+    --hover-bg: #d5c4a1;
+    --success: #79740e;
+    --warning: #b57614;
+    --error: #cc241d;
+    --ring: #d65d0e;
+    --shadow-color: rgba(60, 56, 54, 0.1);
+    --gradient-start: #d65d0e;
+    --gradient-end: #b57614;
+  }
+
+  /* ===== ROSE PINE ===== */
+  [data-theme="rose-pine"] {
+    --bg-primary: #191724;
+    --bg-secondary: #1f1d2e;
+    --bg-tertiary: #26233a;
+    --text-primary: #e0def4;
+    --text-secondary: #908caa;
+    --accent: #c4a7e7;
+    --accent-hover: #ebbcba;
+    --accent-text: #191724;
+    --border: #393552;
+    --card-bg: #1f1d2e;
+    --input-bg: #1f1d2e;
+    --input-border: #393552;
+    --nav-bg: #191724;
+    --sidebar-bg: #191724;
+    --hover-bg: #26233a;
+    --success: #9ccfd8;
+    --warning: #f6c177;
+    --error: #eb6f92;
+    --ring: #c4a7e7;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #c4a7e7;
+    --gradient-end: #eb6f92;
+  }
+
+  /* ===== ROSE PINE DAWN (Light) ===== */
+  [data-theme="rose-pine-dawn"] {
+    --bg-primary: #faf4ed;
+    --bg-secondary: #fffaf3;
+    --bg-tertiary: #f2e9e1;
+    --text-primary: #575279;
+    --text-secondary: #797593;
+    --accent: #907aa9;
+    --accent-hover: #b4637a;
+    --accent-text: #faf4ed;
+    --border: #dfdad9;
+    --card-bg: #fffaf3;
+    --input-bg: #faf4ed;
+    --input-border: #dfdad9;
+    --nav-bg: #fffaf3;
+    --sidebar-bg: #f2e9e1;
+    --hover-bg: #f2e9e1;
+    --success: #56949f;
+    --warning: #ea9d34;
+    --error: #b4637a;
+    --ring: #907aa9;
+    --shadow-color: rgba(87, 82, 121, 0.08);
+    --gradient-start: #907aa9;
+    --gradient-end: #b4637a;
+  }
+
+  /* ===== SOLARIZED DARK ===== */
+  [data-theme="solarized-dark"] {
+    --bg-primary: #002b36;
+    --bg-secondary: #073642;
+    --bg-tertiary: #0a4050;
+    --text-primary: #839496;
+    --text-secondary: #657b83;
+    --accent: #268bd2;
+    --accent-hover: #2aa198;
+    --accent-text: #fdf6e3;
+    --border: #073642;
+    --card-bg: #073642;
+    --input-bg: #073642;
+    --input-border: #586e75;
+    --nav-bg: #002b36;
+    --sidebar-bg: #002b36;
+    --hover-bg: #0a4050;
+    --success: #859900;
+    --warning: #b58900;
+    --error: #dc322f;
+    --ring: #268bd2;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #268bd2;
+    --gradient-end: #2aa198;
+  }
+
+  /* ===== SOLARIZED LIGHT ===== */
+  [data-theme="solarized-light"] {
+    --bg-primary: #fdf6e3;
+    --bg-secondary: #eee8d5;
+    --bg-tertiary: #e4ddc8;
+    --text-primary: #657b83;
+    --text-secondary: #93a1a1;
+    --accent: #268bd2;
+    --accent-hover: #2aa198;
+    --accent-text: #fdf6e3;
+    --border: #eee8d5;
+    --card-bg: #eee8d5;
+    --input-bg: #fdf6e3;
+    --input-border: #d3cbb7;
+    --nav-bg: #eee8d5;
+    --sidebar-bg: #eee8d5;
+    --hover-bg: #e4ddc8;
+    --success: #859900;
+    --warning: #b58900;
+    --error: #dc322f;
+    --ring: #268bd2;
+    --shadow-color: rgba(101, 123, 131, 0.1);
+    --gradient-start: #268bd2;
+    --gradient-end: #2aa198;
+  }
+
+  /* ===== ONE DARK ===== */
+  [data-theme="one-dark"] {
+    --bg-primary: #282c34;
+    --bg-secondary: #2c313a;
+    --bg-tertiary: #353b45;
+    --text-primary: #abb2bf;
+    --text-secondary: #636d83;
+    --accent: #61afef;
+    --accent-hover: #79bcf5;
+    --accent-text: #282c34;
+    --border: #3e4452;
+    --card-bg: #2c313a;
+    --input-bg: #2c313a;
+    --input-border: #3e4452;
+    --nav-bg: #21252b;
+    --sidebar-bg: #21252b;
+    --hover-bg: #353b45;
+    --success: #98c379;
+    --warning: #e5c07b;
+    --error: #e06c75;
+    --ring: #61afef;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #61afef;
+    --gradient-end: #c678dd;
+  }
+
+  /* ===== GITHUB DARK ===== */
+  [data-theme="github-dark"] {
+    --bg-primary: #0d1117;
+    --bg-secondary: #161b22;
+    --bg-tertiary: #21262d;
+    --text-primary: #c9d1d9;
+    --text-secondary: #8b949e;
+    --accent: #58a6ff;
+    --accent-hover: #79c0ff;
+    --accent-text: #0d1117;
+    --border: #30363d;
+    --card-bg: #161b22;
+    --input-bg: #0d1117;
+    --input-border: #30363d;
+    --nav-bg: #161b22;
+    --sidebar-bg: #0d1117;
+    --hover-bg: #21262d;
+    --success: #3fb950;
+    --warning: #d29922;
+    --error: #f85149;
+    --ring: #58a6ff;
+    --shadow-color: rgba(0, 0, 0, 0.4);
+    --gradient-start: #58a6ff;
+    --gradient-end: #bc8cff;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: 3px;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
+    bg-th-accent text-th-accent-t hover:bg-th-accent-h
+    transition-all duration-200 ease-out
+    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed;
+    --tw-ring-offset-color: var(--bg-primary);
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
+    bg-th-bg-s text-th-text border border-th-border
+    hover:bg-th-hover transition-all duration-200 ease-out
+    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed;
+    --tw-ring-offset-color: var(--bg-primary);
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
+    bg-th-error text-white hover:opacity-90
+    transition-all duration-200 ease-out
+    focus:outline-none focus:ring-2 focus:ring-th-error focus:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed;
+    --tw-ring-offset-color: var(--bg-primary);
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
+    text-th-text-s hover:bg-th-hover hover:text-th-text
+    transition-all duration-200 ease-out
+    focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed;
+    --tw-ring-offset-color: var(--bg-primary);
+  }
+
+  .input-field {
+    @apply w-full px-4 py-2.5 rounded-lg
+    bg-th-input text-th-text placeholder-th-text-s
+    border border-th-input-b
+    focus:outline-none focus:ring-2 focus:ring-th-ring focus:border-transparent
+    transition-all duration-200;
+  }
+
+  .card {
+    @apply bg-th-card rounded-xl border border-th-border
+    shadow-th transition-all duration-200;
+  }
+
+  .card-hover {
+    @apply card hover:shadow-th-lg cursor-pointer;
+  }
+  .card-hover:hover {
+    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
+  }
+}
+
+@layer utilities {
+  .gradient-text {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gradient-bg {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+  }
+}