refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability

src/styles/devcm-tokens.scss

@@ -0,0 +1,80 @@
+:root,
+html[data-color-scheme="dark"] {
+  color-scheme: dark;
+  --devcm-bg: #070908;
+  --devcm-bg-deep: #040504;
+  --devcm-panel: rgba(12, 14, 11, 0.94);
+  --devcm-panel-soft: rgba(18, 20, 14, 0.88);
+  --devcm-panel-warm: rgba(22, 18, 10, 0.74);
+  --devcm-line: rgba(255, 176, 0, 0.22);
+  --devcm-line-strong: rgba(255, 176, 0, 0.48);
+  --devcm-text: #ddd6b9;
+  --devcm-muted: #a79c78;
+  --devcm-dim: #756b4d;
+  --devcm-amber: #ffb000;
+  --devcm-amber-soft: #d88900;
+  --devcm-green: #68f37f;
+  --devcm-green-soft: rgba(104, 243, 127, 0.15);
+  --devcm-cyan: #00e5ff;
+  --devcm-purple: #b58cff;
+  --devcm-red: #ff5d5d;
+  --devcm-radius: 12px;
+  --devcm-activity-width: 58px;
+  --devcm-sidebar-width: 284px;
+  --devcm-rightbar-width: 308px;
+  --devcm-topbar-height: 88px;
+  --devcm-status-height: 34px;
+  --devcm-mono: Hack, Monaco, Consolas, "Ubuntu Mono", PingHei, "PingFang SC", "Microsoft YaHei", monospace;
+  --devcm-shadow: 0 0 22px rgba(255, 176, 0, 0.08), inset 0 0 0 1px rgba(255, 176, 0, 0.16);
+  --devcm-green-glow: 0 0 18px rgba(104, 243, 127, 0.14);
+
+  --background: var(--devcm-bg);
+  --foreground: var(--devcm-text);
+  --selectionBackground: rgba(104, 243, 127, 0.24);
+  --blue: var(--devcm-cyan);
+  --green: var(--devcm-green);
+  --red: var(--devcm-red);
+  --yellow: var(--devcm-amber);
+  --brightBlue: var(--devcm-cyan);
+  --brightGreen: var(--devcm-green);
+  --brightRed: var(--devcm-red);
+}
+
+html[data-color-scheme="light"] {
+  color-scheme: light;
+  --devcm-bg: #fdf6e3;
+  --devcm-bg-deep: #eee8d5;
+  --devcm-panel: rgba(253, 246, 227, 0.94);
+  --devcm-panel-soft: rgba(238, 232, 213, 0.78);
+  --devcm-panel-warm: rgba(238, 232, 213, 0.62);
+  --devcm-line: rgba(101, 123, 131, 0.2);
+  --devcm-line-strong: rgba(181, 137, 0, 0.42);
+  --devcm-text: #586e75;
+  --devcm-muted: #657b83;
+  --devcm-dim: #93a1a1;
+  --devcm-amber: #b58900;
+  --devcm-amber-soft: #cb4b16;
+  --devcm-green: #859900;
+  --devcm-green-soft: rgba(133, 153, 0, 0.14);
+  --devcm-cyan: #2aa198;
+  --devcm-purple: #6c71c4;
+  --devcm-red: #dc322f;
+  --devcm-shadow: inset 0 0 0 1px rgba(181, 137, 0, 0.16);
+  --devcm-green-glow: 0 0 0 1px rgba(133, 153, 0, 0.12);
+
+  --background: var(--devcm-bg);
+  --foreground: var(--devcm-text);
+  --selectionBackground: rgba(42, 161, 152, 0.18);
+  --blue: var(--devcm-cyan);
+  --green: var(--devcm-green);
+  --red: var(--devcm-red);
+  --yellow: var(--devcm-amber);
+  --brightBlue: var(--devcm-cyan);
+  --brightGreen: var(--devcm-green);
+  --brightRed: var(--devcm-red);
+}
+
+::selection {
+  background: rgba(104, 243, 127, 0.26);
+  color: #fff6d4;
+}