feat:themes, tactilea codec

src/lib/components/SignalChart.svelte

@@ -162,16 +162,16 @@
     aspect-ratio: 1.44 / 1;
     min-block-size: 11.8rem;
     justify-self: start;
-    border: 1px solid rgb(130 174 202 / 0.42);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
     border-radius: 0.92rem;
     padding: 0.56rem 0.62rem 0.58rem;
     background:
-      linear-gradient(160deg, rgb(10 18 26 / 0.76) 0%, rgb(3 8 12 / 0.62) 48%, rgb(1 2 4 / 0.76) 100%),
-      radial-gradient(circle at 12% 0, rgb(62 232 255 / 0.1), transparent 40%);
+      linear-gradient(160deg, rgb(var(--hud-surface-alt-rgb) / 0.76) 0%, rgb(var(--hud-surface-rgb) / 0.62) 48%, rgb(var(--hud-surface-deep-rgb) / 0.76) 100%),
+      radial-gradient(circle at 12% 0, rgb(var(--hud-glow-rgb) / 0.1), transparent 40%);
     box-shadow:
-      inset 0 0 0 1px rgb(165 224 255 / 0.08),
+      inset 0 0 0 1px rgb(var(--hud-border-strong-rgb) / 0.08),
       inset 0 -24px 32px rgb(0 0 0 / 0.48),
-      0 0 14px rgb(62 232 255 / 0.14);
+      0 0 14px rgb(var(--hud-glow-rgb) / 0.14);
     opacity: 1;
     transform: translateX(0) scale(1) rotate(0);
     transition:
@@ -215,7 +215,7 @@
   .panel-code {
     margin: 0;
     font-size: 0.63rem;
-    color: rgb(153 188 211 / 0.88);
+    color: rgb(var(--hud-text-dim-rgb) / 0.88);
     letter-spacing: 0.12em;
     text-transform: uppercase;
   }
@@ -223,7 +223,7 @@
   .panel-title {
     margin: 0.12rem 0 0;
     font-size: 0.75rem;
-    color: rgb(225 243 255 / 0.96);
+    color: rgb(var(--hud-text-main-rgb) / 0.96);
     letter-spacing: 0.05em;
   }
 
@@ -236,25 +236,25 @@
   }
 
   .icon-chip {
-    border: 1px solid rgb(138 178 204 / 0.44);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.44);
     border-radius: 999px;
     padding: 0.08rem 0.36rem;
     font-size: 0.58rem;
     letter-spacing: 0.08em;
-    color: rgb(209 237 255 / 0.94);
-    background: rgb(5 13 20 / 0.66);
+    color: rgb(var(--hud-text-main-rgb) / 0.94);
+    background: rgb(var(--hud-surface-rgb) / 0.66);
   }
 
   .icon-chip.tone-cyan {
-    border-color: rgb(62 232 255 / 0.54);
+    border-color: rgb(var(--hud-cyan-rgb) / 0.54);
   }
 
   .icon-chip.tone-lime {
-    border-color: rgb(133 255 68 / 0.56);
+    border-color: rgb(var(--hud-lime-rgb) / 0.56);
   }
 
   .icon-chip.tone-orange {
-    border-color: rgb(255 91 63 / 0.58);
+    border-color: rgb(var(--hud-orange-rgb) / 0.58);
   }
 
   .icon-chip.tone-violet {
@@ -272,12 +272,12 @@
   .chart-stage {
     position: relative;
     block-size: clamp(6.4rem, 9vw, 8.2rem);
-    border: 1px solid rgb(132 174 200 / 0.32);
+    border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.32);
     border-radius: 0.62rem;
     overflow: hidden;
     background:
-      linear-gradient(180deg, rgb(8 17 26 / 0.68), rgb(1 6 10 / 0.78)),
-      radial-gradient(circle at 50% 0, rgb(62 232 255 / 0.09), transparent 45%);
+      linear-gradient(180deg, rgb(var(--hud-surface-alt-rgb) / 0.68), rgb(var(--hud-surface-deep-rgb) / 0.78)),
+      radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.09), transparent 45%);
   }
 
   svg {
@@ -287,7 +287,7 @@
   }
 
   .grid-line-group line {
-    stroke: rgb(138 184 210 / 0.16);
+    stroke: rgb(var(--hud-border-strong-rgb) / 0.16);
     stroke-width: 0.45;
   }
 
@@ -300,15 +300,15 @@
   }
 
   .series-line.tone-cyan {
-    stroke: rgb(62 232 255 / 0.95);
+    stroke: rgb(var(--hud-cyan-rgb) / 0.95);
   }
 
   .series-line.tone-lime {
-    stroke: rgb(133 255 68 / 0.94);
+    stroke: rgb(var(--hud-lime-rgb) / 0.94);
   }
 
   .series-line.tone-orange {
-    stroke: rgb(255 91 63 / 0.94);
+    stroke: rgb(var(--hud-orange-rgb) / 0.94);
   }
 
   .series-line.tone-violet {
@@ -329,12 +329,12 @@
     background:
       repeating-linear-gradient(
         180deg,
-        rgb(146 191 214 / 0.04) 0,
-        rgb(146 191 214 / 0.04) 1px,
+        rgb(var(--hud-border-strong-rgb) / 0.04) 0,
+        rgb(var(--hud-border-strong-rgb) / 0.04) 1px,
         transparent 1px,
         transparent 3px
       ),
-      linear-gradient(180deg, transparent 0%, rgb(62 232 255 / 0.06) 50%, transparent 100%);
+      linear-gradient(180deg, transparent 0%, rgb(var(--hud-glow-rgb) / 0.06) 50%, transparent 100%);
     background-size: 100% 100%, 100% 100%;
     mix-blend-mode: screen;
     pointer-events: none;
@@ -353,7 +353,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.3rem;
-    color: rgb(173 206 227 / 0.9);
+    color: rgb(var(--hud-text-main-rgb) / 0.9);
     font-size: 0.62rem;
     letter-spacing: 0.04em;
   }
@@ -365,19 +365,19 @@
   }
 
   .dot.tone-cyan {
-    background: rgb(62 232 255);
+    background: rgb(var(--hud-cyan-rgb));
   }
 
   .dot.tone-lime {
-    background: rgb(133 255 68);
+    background: rgb(var(--hud-lime-rgb));
   }
 
   .dot.tone-orange {
-    background: rgb(255 91 63);
+    background: rgb(var(--hud-orange-rgb));
   }
 
   .metric-label {
-    color: rgb(144 172 191 / 0.82);
+    color: rgb(var(--hud-text-dim-rgb) / 0.82);
     text-transform: uppercase;
     letter-spacing: 0.08em;
   }