@frontpanel/css 0.0.0-stage → 0.1.0

package/tailwind.css

@@ -0,0 +1,605 @@
+/* Generated by scripts/build.ts from src/. Do not edit; edit the source and run `pnpm build`. */
+@import "./tokens.css" layer(theme);
+
+@theme inline {
+  --color-fp-chrome-hi: var(--fp-color-chrome-hi);
+  --color-fp-chrome-100: var(--fp-color-chrome-100);
+  --color-fp-chrome-300: var(--fp-color-chrome-300);
+  --color-fp-chrome-500: var(--fp-color-chrome-500);
+  --color-fp-chrome-800: var(--fp-color-chrome-800);
+  --color-fp-chrome-tint: var(--fp-color-chrome-tint);
+  --color-fp-scroll-thumb: var(--fp-color-scroll-thumb);
+  --color-fp-shell: var(--fp-color-shell);
+  --color-fp-shell-hi: var(--fp-color-shell-hi);
+  --color-fp-shell-matte: var(--fp-color-shell-matte);
+  --color-fp-well: var(--fp-color-well);
+  --color-fp-field: var(--fp-color-field);
+  --color-fp-ink: var(--fp-color-ink);
+  --color-fp-ink-soft: var(--fp-color-ink-soft);
+  --color-fp-ink-dim: var(--fp-color-ink-dim);
+  --color-fp-bevel-hi: var(--fp-color-bevel-hi);
+  --color-fp-bevel-lo: var(--fp-color-bevel-lo);
+  --color-fp-edge: var(--fp-color-edge);
+  --color-fp-edge-strong: var(--fp-color-edge-strong);
+  --color-fp-cast: var(--fp-color-cast);
+  --color-fp-grid: var(--fp-color-grid);
+  --color-fp-lcd-bg: var(--fp-color-lcd-bg);
+  --color-fp-lcd-ink: var(--fp-color-lcd-ink);
+  --color-fp-lcd-ghost: var(--fp-color-lcd-ghost);
+  --color-fp-housing: var(--fp-color-housing);
+  --color-fp-housing-ink: var(--fp-color-housing-ink);
+  --color-fp-led-on: var(--fp-color-led-on);
+  --color-fp-led-amber: var(--fp-color-led-amber);
+  --color-fp-led-red: var(--fp-color-led-red);
+  --color-fp-led-off: var(--fp-color-led-off);
+  --color-fp-cap: var(--fp-color-cap);
+  --color-fp-cap-ink: var(--fp-color-cap-ink);
+  --color-fp-cap-blue: var(--fp-color-cap-blue);
+  --color-fp-cap-blue-ink: var(--fp-color-cap-blue-ink);
+  --color-fp-cap-amber: var(--fp-color-cap-amber);
+  --color-fp-cap-amber-ink: var(--fp-color-cap-amber-ink);
+  --color-fp-cap-graphite: var(--fp-color-cap-graphite);
+  --color-fp-cap-graphite-ink: var(--fp-color-cap-graphite-ink);
+  --color-fp-cap-berry: var(--fp-color-cap-berry);
+  --color-fp-cap-berry-ink: var(--fp-color-cap-berry-ink);
+  --color-fp-gel: var(--fp-color-gel);
+  --color-fp-gel-hi: var(--fp-color-gel-hi);
+  --color-fp-gel-lo: var(--fp-color-gel-lo);
+  --color-fp-gel-ink: var(--fp-color-gel-ink);
+  --color-fp-focus: var(--fp-color-focus);
+  --color-fp-focus-ring: var(--fp-color-focus-ring);
+  --color-fp-select: var(--fp-color-select);
+  --color-fp-error-text: var(--fp-color-error-text);
+  --color-fp-backdrop: var(--fp-color-backdrop);
+  --color-fp-backdrop-hi: var(--fp-color-backdrop-hi);
+  --font-fp-display: var(--fp-font-display);
+  --font-fp-lcd: var(--fp-font-lcd);
+  --font-fp-ui: var(--fp-font-ui);
+}
+
+@layer components {
+  /* An LCD line redrawing left to right; the fp-lcd-redraw class steps through it. */
+  @keyframes fp-lcd-redraw {
+    from {
+      clip-path: inset(0 100% 0 0);
+    }
+
+    to {
+      clip-path: inset(0 0 0 0);
+    }
+  }
+
+  /* Two blinks 400 ms apart, then steady. Nothing on the device blinks for longer. */
+  @keyframes fp-blink-twice {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    12.5%,
+    37.5% {
+      opacity: 0;
+    }
+
+    25%,
+    50% {
+      opacity: 1;
+    }
+  }
+}
+
+/** Redraws an LCD line left to right in four steps, as when its value changes. */
+@utility fp-lcd-redraw {
+  animation: fp-lcd-redraw 160ms steps(4, end);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+/** Blinks twice, then holds: an LED confirming an action. */
+@utility fp-blink-twice {
+  animation: fp-blink-twice 1.6s steps(1, end) 1;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+/** The page behind the device: quiet blue-grey with a faint Y2K grid. */
+@utility fp-device-backdrop {
+  background-color: var(--fp-color-backdrop);
+  background-image:
+    linear-gradient(var(--fp-color-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--fp-color-grid) 1px, transparent 1px),
+    radial-gradient(ellipse 80% 60% at 20% 0%, var(--fp-color-backdrop-hi), transparent 70%),
+    linear-gradient(180deg, var(--fp-color-backdrop-hi), var(--fp-color-backdrop));
+  background-size:
+    32px 32px,
+    32px 32px,
+    auto,
+    auto;
+}
+
+/** Liquid-chrome ring around the device body. Diagonal so the reflection band crosses the corners. */
+@utility fp-device-rim {
+  border-radius: 36px;
+  padding: 10px;
+  background-image: linear-gradient(
+    160deg,
+    var(--fp-color-chrome-hi) 0%,
+    var(--fp-color-chrome-100) 14%,
+    var(--fp-color-chrome-tint) 38%,
+    var(--fp-color-chrome-500) 50%,
+    var(--fp-color-chrome-300) 70%,
+    var(--fp-color-chrome-100) 100%
+  );
+  box-shadow:
+    0 0 0 1px var(--fp-color-chrome-800),
+    inset 0 1px 0 var(--fp-color-chrome-hi),
+    0 4px 0 var(--fp-color-cast),
+    0 14px 18px -10px var(--fp-color-cast);
+
+  /*
+   * A body set in the rim follows its curve (the rim's radius less its padding) and clips to it.
+   * No specificity, so a rim sized another way can give its body a matching radius with a class.
+   */
+  :where(& > .fp-device-body) {
+    overflow: clip;
+    border-radius: 26px;
+  }
+}
+
+/** Molded body plastic the modules sit on. */
+@utility fp-device-body {
+  background-image: linear-gradient(180deg, var(--fp-color-shell-hi), var(--fp-color-shell) 240px);
+  box-shadow:
+    inset 1px 1px 0 var(--fp-color-bevel-hi),
+    inset -1px -1px 0 var(--fp-color-bevel-lo);
+}
+
+/** Liquid chrome with a hard horizon, for title bars and other frames. Never behind text. */
+@utility fp-chrome {
+  background-image: linear-gradient(
+    180deg,
+    var(--fp-color-chrome-hi) 0%,
+    var(--fp-color-chrome-100) 18%,
+    var(--fp-color-chrome-tint) 45%,
+    var(--fp-color-chrome-500) 52%,
+    var(--fp-color-chrome-300) 75%,
+    var(--fp-color-chrome-100) 100%
+  );
+  box-shadow:
+    inset 0 1px 0 var(--fp-color-chrome-hi),
+    inset 0 -1px 0 var(--fp-color-edge);
+}
+
+/** Brushed chrome without the horizon, calm enough to print a label in the middle of it. */
+@utility fp-chrome-soft {
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+    var(--fp-color-chrome-100) 40%,
+    var(--fp-color-chrome-300) 100%
+  );
+}
+
+/** Small hardware push button in brushed chrome. 44 px tall, 36 px with a mouse, trackpad or pen. */
+@utility fp-chrome-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-height: 2.75rem;
+  min-width: 2.75rem;
+  padding-inline: 0.625rem;
+  border-radius: 6px;
+  color: var(--fp-color-ink);
+  font-size: 13px;
+  font-weight: 700;
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+    var(--fp-color-chrome-100) 40%,
+    var(--fp-color-chrome-300) 100%
+  );
+  box-shadow:
+    0 0 0 1px var(--fp-color-edge),
+    inset 1px 1px 0 var(--fp-color-bevel-hi),
+    inset -1px -1px 0 var(--fp-color-bevel-lo),
+    1px 2px 0 var(--fp-color-cast);
+  transition-property: translate, box-shadow, filter;
+  transition-duration: 70ms;
+  transition-timing-function: linear;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms;
+  }
+
+  @media (pointer: fine) {
+    min-height: 2.25rem;
+    min-width: 2.25rem;
+  }
+
+  &:hover:not(:disabled) {
+    filter: brightness(1.05);
+  }
+
+  &:active:not(:disabled),
+  &[aria-pressed="true"],
+  &[aria-expanded="true"],
+  &[aria-current="page"] {
+    translate: 0 1px;
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 1px 1px 3px var(--fp-color-bevel-lo),
+      inset -1px -1px 0 var(--fp-color-bevel-hi);
+  }
+
+  /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+  &:focus-visible {
+    outline: 2px solid var(--fp-color-focus-ring);
+    outline-offset: 2px;
+    filter: drop-shadow(0 0 3px var(--fp-color-focus));
+  }
+
+  /* The hover filter outranks the focus rule, so a hovered control keeps its glow here. */
+  &:focus-visible:hover:not(:disabled) {
+    filter: brightness(1.05) drop-shadow(0 0 3px var(--fp-color-focus));
+  }
+
+  &:disabled {
+    opacity: 0.45;
+  }
+}
+
+/**
+ * Glossy gel pill for primary actions. Its white label sits on the base colour at mid-height,
+ * where the highlight ellipse has already faded out (7:1).
+ */
+@utility fp-gel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding-inline: 1rem;
+  border-radius: 9999px;
+  color: var(--fp-color-gel-ink);
+  font-size: 14px;
+  font-weight: 700;
+  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.35);
+  background-image:
+    radial-gradient(ellipse 80% 45% at 50% 0%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.08) 90%, transparent 100%),
+    linear-gradient(180deg, var(--fp-color-gel-hi) 0%, var(--fp-color-gel) 48%, var(--fp-color-gel-lo) 100%);
+  box-shadow:
+    0 0 0 1px var(--fp-color-gel-lo),
+    inset 0 -3px 5px rgb(140 200 255 / 0.4),
+    1px 2px 0 var(--fp-color-cast);
+  transition-property: translate, box-shadow, filter;
+  transition-duration: 70ms;
+  transition-timing-function: linear;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms;
+  }
+
+  @media (pointer: fine) {
+    min-height: 2.5rem;
+  }
+
+  &:hover:not(:disabled) {
+    filter: brightness(1.08);
+  }
+
+  &:active:not(:disabled) {
+    translate: 0 1px;
+    box-shadow:
+      0 0 0 1px var(--fp-color-gel-lo),
+      inset 0 2px 4px rgb(0 0 0 / 0.35);
+  }
+
+  /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+  &:focus-visible {
+    outline: 2px solid var(--fp-color-focus-ring);
+    outline-offset: 2px;
+    filter: drop-shadow(0 0 3px var(--fp-color-focus));
+  }
+
+  /* The hover filter outranks the focus rule, so a hovered control keeps its glow here. */
+  &:focus-visible:hover:not(:disabled) {
+    filter: brightness(1.08) drop-shadow(0 0 3px var(--fp-color-focus));
+  }
+
+  &:disabled {
+    opacity: 0.45;
+  }
+}
+
+/**
+ * Molded-plastic cap. The cap colour and its label colour come from the fp-cap-* classes
+ * (`--fp-cap`, `--fp-cap-ink`); a bare `fp-cap` is white plastic with a dark label. Selected caps
+ * stay pressed in and get a ring, so selection never depends on colour.
+ */
+@utility fp-cap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding-inline: 0.5rem;
+  border-radius: 6px;
+  color: var(--fp-cap-ink, var(--fp-color-cap-ink));
+  font-weight: 700;
+  background-color: var(--fp-cap, var(--fp-color-cap));
+  background-image: radial-gradient(ellipse 110% 80% at 30% 10%, rgb(255 255 255 / 0.28), transparent 65%);
+  box-shadow:
+    0 0 0 1px var(--fp-color-edge),
+    inset 0 2px 0 rgb(255 255 255 / 0.45),
+    inset 0 -2px 0 rgb(0 0 0 / 0.25),
+    1px 2px 1px var(--fp-color-cast);
+  transition-property: translate, box-shadow, filter;
+  transition-duration: 70ms;
+  transition-timing-function: linear;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms;
+  }
+
+  @media (pointer: fine) {
+    min-height: 2.25rem;
+  }
+
+  &:hover:not(:disabled) {
+    filter: brightness(1.05);
+  }
+
+  &:active:not(:disabled) {
+    translate: 0 1px;
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 0 2px 3px rgb(0 0 0 / 0.35),
+      inset 0 -1px 0 rgb(255 255 255 / 0.3);
+  }
+
+  &[aria-pressed="true"],
+  &[aria-checked="true"] {
+    translate: 0 1px;
+    box-shadow:
+      0 0 0 2px var(--fp-color-select),
+      inset 0 2px 3px rgb(0 0 0 / 0.35),
+      inset 0 -1px 0 rgb(255 255 255 / 0.3);
+  }
+
+  /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+  &:focus-visible {
+    outline: 2px solid var(--fp-color-focus-ring);
+    outline-offset: 2px;
+    filter: drop-shadow(0 0 3px var(--fp-color-focus));
+  }
+
+  /* The hover filter outranks the focus rule, so a hovered control keeps its glow here. */
+  &:focus-visible:hover:not(:disabled) {
+    filter: brightness(1.05) drop-shadow(0 0 3px var(--fp-color-focus));
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+/** Blue plastic for an fp-cap, with its own label colour. */
+@utility fp-cap-blue {
+  --fp-cap: var(--fp-color-cap-blue);
+  --fp-cap-ink: var(--fp-color-cap-blue-ink);
+}
+
+/** Amber plastic for an fp-cap, with its own label colour. */
+@utility fp-cap-amber {
+  --fp-cap: var(--fp-color-cap-amber);
+  --fp-cap-ink: var(--fp-color-cap-amber-ink);
+}
+
+/** Graphite plastic for an fp-cap, with its own label colour. */
+@utility fp-cap-graphite {
+  --fp-cap: var(--fp-color-cap-graphite);
+  --fp-cap-ink: var(--fp-color-cap-graphite-ink);
+}
+
+/** Berry plastic for an fp-cap, with its own label colour. */
+@utility fp-cap-berry {
+  --fp-cap: var(--fp-color-cap-berry);
+  --fp-cap-ink: var(--fp-color-cap-berry-ink);
+}
+
+/** Matte content panel. This is where reading happens: no gloss, a 1 px bevel and a short hard shadow. */
+@utility fp-module {
+  border-radius: 10px;
+  background-color: var(--fp-color-shell-matte);
+  box-shadow:
+    0 0 0 1px var(--fp-color-edge),
+    inset 1px 1px 0 var(--fp-color-bevel-hi),
+    inset -1px -1px 0 var(--fp-color-bevel-lo),
+    2px 3px 0 var(--fp-color-cast);
+}
+
+/** A module's own little title bar, in brushed chrome. */
+@utility fp-module-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.875rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 10px 10px 0 0;
+  border-bottom: 1px solid var(--fp-color-edge);
+  background-image: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+    var(--fp-color-chrome-100) 40%,
+    var(--fp-color-chrome-300) 100%
+  );
+}
+
+/**
+ * A window: a module (or, in the page extra, a sheet panel) whose fp-module-title stays in view
+ * while its body scrolls under it.
+ */
+@utility fp-window {
+  /* Its top corners follow the window's, which differ between a module and a sheet. */
+  & > .fp-module-title {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  /* Title-bar buttons stay small with a precise pointer; touch keeps the 44 px target. */
+  @media (pointer: fine) {
+    & > .fp-module-title .fp-chrome-btn {
+      min-height: 1.75rem;
+      min-width: 1.75rem;
+    }
+  }
+}
+
+/** A window's name in its title bar. Pair it with fp-silk; it pushes the title-bar buttons to the far end. */
+@utility fp-window-title {
+  margin: 0;
+  margin-inline-end: auto;
+  font-weight: 400;
+}
+
+/** The padded body under a window's title bar. */
+@utility fp-window-body {
+  padding: 0.75rem;
+}
+
+/** Recessed well inside a matte panel, for secondary content or an empty slot. */
+@utility fp-well {
+  border-radius: 6px;
+  background-color: var(--fp-color-well);
+  box-shadow:
+    inset 1px 1px 2px var(--fp-color-bevel-lo),
+    inset -1px -1px 0 var(--fp-color-bevel-hi);
+}
+
+/** Silkscreened hardware label. */
+@utility fp-silk {
+  font-family: var(--fp-font-display);
+  font-size: 11px;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fp-color-ink-soft);
+}
+
+/** LCD glass, recessed into the chrome. Text on it uses `--fp-font-lcd`; drawings use `--fp-color-lcd-ink`. */
+@utility fp-lcd {
+  border-radius: 8px;
+  color: var(--fp-color-lcd-ink);
+  background-color: var(--fp-color-lcd-bg);
+  background-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.04) 0 1px, transparent 1px 3px);
+  box-shadow:
+    0 0 0 2px var(--fp-color-chrome-800),
+    inset 2px 2px 4px rgb(0 0 0 / 0.35),
+    inset -1px -1px 0 rgb(255 255 255 / 0.2);
+}
+
+/** One line of LCD text. Cells of fp-lcd-ghost stacked behind it show the unlit segments, as on real glass. */
+@utility fp-lcd-line {
+  display: grid;
+  margin: 0;
+  font-family: var(--fp-font-lcd);
+  white-space: pre;
+
+  & > * {
+    grid-area: 1 / 1;
+  }
+}
+
+/** The unlit segments behind an LCD line. Decorative: give it aria-hidden="true". */
+@utility fp-lcd-ghost {
+  color: var(--fp-color-lcd-ghost);
+}
+
+/** Dark housing that LEDs and small readouts sit in. */
+@utility fp-housing {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  padding: 0.125rem 0.5rem;
+  color: var(--fp-color-housing-ink);
+  font-size: 12px;
+  font-weight: 700;
+  background-color: var(--fp-color-housing);
+  box-shadow:
+    inset 1px 1px 2px rgb(0 0 0 / 0.5),
+    0 1px 0 var(--fp-color-bevel-hi);
+}
+
+/** An LED with its own dark bezel ring, so a lit one reads on light chrome too. Unlit by default. */
+@utility fp-led {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background-color: var(--fp-color-led-off);
+  box-shadow:
+    0 0 0 2px var(--fp-color-housing),
+    inset 0 -1px 1px rgb(0 0 0 / 0.45);
+}
+
+/** Green for an fp-led, the default. */
+@utility fp-led-green {
+  --fp-led: var(--fp-color-led-on);
+}
+
+/** Amber for an fp-led. */
+@utility fp-led-amber {
+  --fp-led: var(--fp-color-led-amber);
+}
+
+/** Red for an fp-led. */
+@utility fp-led-red {
+  --fp-led: var(--fp-color-led-red);
+}
+
+/** Lights an fp-led in its colour, with a glow. Say what it means in text nearby, never by colour alone. */
+@utility fp-led-lit {
+  background-color: var(--fp-led, var(--fp-color-led-on));
+  box-shadow:
+    0 0 0 2px var(--fp-color-housing),
+    0 0 7px 2px color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) 65%, transparent),
+    inset 0 -1px 1px rgb(0 0 0 / 0.2);
+}
+
+/** Decorative screw head. Give it aria-hidden="true". */
+@utility fp-screw {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  background-image:
+    linear-gradient(135deg, transparent 44%, var(--fp-color-chrome-800) 44% 56%, transparent 56%),
+    radial-gradient(circle at 35% 30%, var(--fp-color-chrome-hi), var(--fp-color-chrome-300) 60%, var(--fp-color-chrome-500));
+  box-shadow: 0 0 0 1px var(--fp-color-edge);
+}
+
+/** A scrolling panel, such as a list window, with a thin scrollbar that never pushes the layout. */
+@utility fp-scroll-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--fp-color-scroll-thumb) transparent;
+}
+
+/** A 16 px pixel icon. Size it in whole multiples of 16 px so its pixels stay crisp. */
+@utility fp-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  shape-rendering: crispEdges;
+}