vue (#1)

Port to Vue. Also implements plenty of new functionality.
2025-08-22 21:34:33 +00:00
parent e4c960b0ca
commit 86a06acccb
35 changed files with 4137 additions and 1717 deletions
@@ -0,0 +1,116 @@
+/* Color tokens */
+:root {
+  --panel: #ffffff;
+  --panel-alt: #f6f8fa;
+  --panel-accent: #eef4ff;
+  --today: #f83;
+  --ink: #222;
+  --strong: #000;
+  --muted: #6a6f76;
+  --muted-alt: #9aa2ad;
+  --accent: #2563eb; /* blue */
+  --accent-soft: #dbeafe;
+  --accent-hover: #1d4ed8;
+  --danger: #dc2626;
+  --danger-hover: #b91c1c;
+  --weekend: #888;
+  --firstday: #000;
+  --select: #aaf;
+  --shadow: #fff;
+  --label-bg: #fafbfe;
+  --label-bg-rgb: 250, 251, 254;
+
+  /* Input / recurrence tokens */
+  --input-border: var(--muted-alt);
+  --input-focus: var(--accent);
+  --pill-bg: var(--panel-alt);
+  --pill-active-bg: var(--accent);
+  --pill-active-ink: #fff;
+  --pill-hover-bg: var(--accent-soft);
+
+  /* Vue component color mappings */
+  --bg: var(--panel);
+  --border-color: #ddd;
+}
+
+/* Month tints (light) */
+.dec { background: hsl(220 50% 95%) }
+.jan { background: hsl(220 50% 92%) }
+.feb { background: hsl(220 50% 95%) }
+.mar { background: hsl(125 60% 92%) }
+.apr { background: hsl(125 60% 95%) }
+.may { background: hsl(125 60% 92%) }
+.jun { background: hsl(45 85% 95%) }
+.jul { background: hsl(45 85% 92%) }
+.aug { background: hsl(45 85% 95%) }
+.sep { background: hsl(18 78% 92%) }
+.oct { background: hsl(18 78% 95%) }
+.nov { background: hsl(18 78% 92%) }
+
+/* Light mode — gray shades and colors */
+.event-color-0 { background: hsl(0, 0%, 85%) }  /* lightest grey */
+.event-color-1 { background: hsl(0, 0%, 75%) }  /* light grey */
+.event-color-2 { background: hsl(0, 0%, 65%) }  /* medium grey */
+.event-color-3 { background: hsl(0, 0%, 55%) }  /* dark grey */
+.event-color-4 { background: hsl(0, 70%, 70%) }  /* red */
+.event-color-5 { background: hsl(90, 70%, 70%) }  /* green */
+.event-color-6 { background: hsl(230, 70%, 70%) } /* blue */
+.event-color-7 { background: hsl(280, 70%, 70%) } /* purple */
+
+/* Color tokens (dark) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --panel: #121417;
+    --panel-alt: #1d2228;
+    --panel-accent: #1a2634;
+    --today: #f83;
+    --ink: #e5e7eb;
+    --strong: #fff;
+    --muted: #7d8691;
+    --muted-alt: #5d646d;
+    --accent: #3b82f6;
+    --accent-soft: rgba(59,130,246,0.15);
+    --accent-hover: #2563eb;
+    --danger: #ef4444;
+    --danger-hover: #dc2626;
+    --workday: var(--ink);
+    --weekend: #999;
+    --firstday: #fff;
+    --select: #3355ff;
+    --shadow: #000;
+    --label-bg: #1a1d25;
+    --label-bg-rgb: 26, 29, 37;
+    --input-border: var(--muted-alt);
+    --input-focus: var(--accent);
+    --pill-bg: #222a32;
+    --pill-active-bg: var(--accent);
+    --pill-active-ink: #fff;
+    --pill-hover-bg: rgba(255,255,255,0.08);
+
+    /* Vue component color mappings (dark) */
+    --bg: var(--panel);
+    --border-color: #333;
+  }
+
+  .dec { background: hsl(220 50% 8%) }
+  .jan { background: hsl(220 50% 6%) }
+  .feb { background: hsl(220 50% 8%) }
+  .mar { background: hsl(125 60% 6%) }
+  .apr { background: hsl(125 60% 8%) }
+  .may { background: hsl(125 60% 6%) }
+  .jun { background: hsl(45 85% 8%) }
+  .jul { background: hsl(45 85% 6%) }
+  .aug { background: hsl(45 85% 8%) }
+  .sep { background: hsl(18 78% 6%) }
+  .oct { background: hsl(18 78% 8%) }
+  .nov { background: hsl(18 78% 6%) }
+
+  .event-color-0 { background: hsl(0, 0%, 50%) }  /* lightest grey */
+  .event-color-1 { background: hsl(0, 0%, 40%) }  /* light grey */
+  .event-color-2 { background: hsl(0, 0%, 30%) }  /* medium grey */
+  .event-color-3 { background: hsl(0, 0%, 20%) }  /* dark grey */
+  .event-color-4 { background: hsl(0, 70%, 40%) }  /* red */
+  .event-color-5 { background: hsl(90, 70%, 30%) }  /* green - darker for perceptional purposes */
+  .event-color-6 { background: hsl(230, 70%, 40%) } /* blue */
+  .event-color-7 { background: hsl(280, 70%, 40%) } /* purple */
+}