@frontpanel/css 0.0.0-stage → 0.2.0

package/tokens.css

@@ -0,0 +1,135 @@
+/* Generated by scripts/build.ts from src/. Do not edit; edit the source and run `pnpm build`. */
+@layer frontpanel {
+  :root, [data-fp-skin="silver"] {
+    --fp-scheme: light;
+    --fp-color-chrome-hi: #ffffff;
+    --fp-color-chrome-100: #e8ecf2;
+    --fp-color-chrome-300: #b9c2cf;
+    --fp-color-chrome-500: #7d8898;
+    --fp-color-chrome-800: #3a4250;
+    --fp-color-chrome-tint: #9fc6f0;
+    --fp-color-scroll-thumb: #5d6776;
+    --fp-color-shell: #bcc5d1;
+    --fp-color-shell-hi: #d3dae3;
+    --fp-color-shell-matte: #d6dae0;
+    --fp-color-well: #c7cfd9;
+    --fp-color-field: #f4f6f9;
+    --fp-color-ink: #1a1f29;
+    --fp-color-ink-soft: #3a4250;
+    --fp-color-ink-dim: #4d5664;
+    --fp-color-bevel-hi: rgb(255 255 255 / 0.6);
+    --fp-color-bevel-lo: rgb(0 0 0 / 0.16);
+    --fp-color-edge: rgb(20 26 36 / 0.38);
+    --fp-color-edge-strong: #3a4250;
+    --fp-color-cast: rgb(20 28 44 / 0.18);
+    --fp-color-grid: rgb(255 255 255 / 0.2);
+    --fp-color-lcd-bg: #a9c18a;
+    --fp-color-lcd-ink: #1e2b14;
+    --fp-color-lcd-ghost: #93ab76;
+    --fp-color-housing: #3a4250;
+    --fp-color-housing-ink: #e8ecf2;
+    --fp-color-led-on: #39ff6a;
+    --fp-color-led-amber: #ffb000;
+    --fp-color-led-red: #ff4a3d;
+    --fp-color-led-off: #1f252e;
+    --fp-color-cap: #f2f4f7;
+    --fp-color-cap-ink: #2a303b;
+    --fp-color-cap-blue: #2f6bc4;
+    --fp-color-cap-blue-ink: #ffffff;
+    --fp-color-cap-amber: #e8a33a;
+    --fp-color-cap-amber-ink: #1e2b14;
+    --fp-color-cap-graphite: #4a5262;
+    --fp-color-cap-graphite-ink: #ffffff;
+    --fp-color-cap-berry: #a93d5e;
+    --fp-color-cap-berry-ink: #ffffff;
+    --fp-color-gel: #1a56b0;
+    --fp-color-gel-hi: #5d97e6;
+    --fp-color-gel-lo: #113c80;
+    --fp-color-gel-ink: #ffffff;
+    --fp-color-focus: #4fd2ff;
+    --fp-color-focus-ring: #1a56b0;
+    --fp-color-select: #1a1f29;
+    --fp-color-error-text: #b3261e;
+    --fp-color-backdrop: #a3b0c3;
+    --fp-color-backdrop-hi: #e2e8f0;
+    --fp-font-display: "Michroma", "Arial Black", sans-serif;
+    --fp-font-lcd: "VT323", "Courier New", monospace;
+    --fp-font-ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-fp-skin="silver"]) {
+      --fp-scheme: dark;
+      --fp-color-chrome-hi: #a3adbc;
+      --fp-color-chrome-100: #4b5361;
+      --fp-color-chrome-300: #363c47;
+      --fp-color-chrome-500: #22262e;
+      --fp-color-chrome-800: #0e1115;
+      --fp-color-chrome-tint: #36506c;
+      --fp-color-scroll-thumb: #7a8491;
+      --fp-color-shell: #22262e;
+      --fp-color-shell-hi: #2a2f38;
+      --fp-color-shell-matte: #2c313a;
+      --fp-color-well: #1f232a;
+      --fp-color-field: #1a1e25;
+      --fp-color-ink: #e7eaf0;
+      --fp-color-ink-soft: #bac1cc;
+      --fp-color-ink-dim: #959daa;
+      --fp-color-bevel-hi: rgb(255 255 255 / 0.09);
+      --fp-color-bevel-lo: rgb(0 0 0 / 0.45);
+      --fp-color-edge: rgb(0 0 0 / 0.65);
+      --fp-color-edge-strong: #8e96a3;
+      --fp-color-cast: rgb(0 0 0 / 0.4);
+      --fp-color-grid: rgb(255 255 255 / 0.035);
+      --fp-color-lcd-bg: #2b1d0a;
+      --fp-color-lcd-ink: #ffb547;
+      --fp-color-lcd-ghost: #3d2b11;
+      --fp-color-housing: #0b0e12;
+      --fp-color-housing-ink: #e7eaf0;
+      --fp-color-cap: #d5dae1;
+      --fp-color-cap-graphite: #5a6373;
+      --fp-color-focus-ring: #4fd2ff;
+      --fp-color-select: #e7eaf0;
+      --fp-color-error-text: #ff8a80;
+      --fp-color-backdrop: #0d1016;
+      --fp-color-backdrop-hi: #1c2230;
+    }
+  }
+
+  [data-fp-skin="gunmetal"] {
+    --fp-scheme: dark;
+    --fp-color-chrome-hi: #a3adbc;
+    --fp-color-chrome-100: #4b5361;
+    --fp-color-chrome-300: #363c47;
+    --fp-color-chrome-500: #22262e;
+    --fp-color-chrome-800: #0e1115;
+    --fp-color-chrome-tint: #36506c;
+    --fp-color-scroll-thumb: #7a8491;
+    --fp-color-shell: #22262e;
+    --fp-color-shell-hi: #2a2f38;
+    --fp-color-shell-matte: #2c313a;
+    --fp-color-well: #1f232a;
+    --fp-color-field: #1a1e25;
+    --fp-color-ink: #e7eaf0;
+    --fp-color-ink-soft: #bac1cc;
+    --fp-color-ink-dim: #959daa;
+    --fp-color-bevel-hi: rgb(255 255 255 / 0.09);
+    --fp-color-bevel-lo: rgb(0 0 0 / 0.45);
+    --fp-color-edge: rgb(0 0 0 / 0.65);
+    --fp-color-edge-strong: #8e96a3;
+    --fp-color-cast: rgb(0 0 0 / 0.4);
+    --fp-color-grid: rgb(255 255 255 / 0.035);
+    --fp-color-lcd-bg: #2b1d0a;
+    --fp-color-lcd-ink: #ffb547;
+    --fp-color-lcd-ghost: #3d2b11;
+    --fp-color-housing: #0b0e12;
+    --fp-color-housing-ink: #e7eaf0;
+    --fp-color-cap: #d5dae1;
+    --fp-color-cap-graphite: #5a6373;
+    --fp-color-focus-ring: #4fd2ff;
+    --fp-color-select: #e7eaf0;
+    --fp-color-error-text: #ff8a80;
+    --fp-color-backdrop: #0d1016;
+    --fp-color-backdrop-hi: #1c2230;
+  }
+}