@frontpanel/css 0.1.0 → 0.3.0

package/tailwind.css

@@ -108,6 +108,7 @@
 
 /** The page behind the device: quiet blue-grey with a faint Y2K grid. */
 @utility fp-device-backdrop {
+  color-scheme: var(--fp-scheme);
   background-color: var(--fp-color-backdrop);
   background-image:
     linear-gradient(var(--fp-color-grid) 1px, transparent 1px),
@@ -123,6 +124,7 @@
 
 /** Liquid-chrome ring around the device body. Diagonal so the reflection band crosses the corners. */
 @utility fp-device-rim {
+  color-scheme: var(--fp-scheme);
   border-radius: 36px;
   padding: 10px;
   background-image: linear-gradient(
@@ -148,10 +150,16 @@
     overflow: clip;
     border-radius: 26px;
   }
+
+  /* Forced colours drop the chrome: an outline keeps the device's edge. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+  }
 }
 
 /** Molded body plastic the modules sit on. */
 @utility fp-device-body {
+  color-scheme: var(--fp-scheme);
   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),
@@ -251,6 +259,35 @@
   &:disabled {
     opacity: 0.45;
   }
+
+  /*
+   * Forced colours drop the chrome and its shadows: an outline keeps the button's edge, the system's
+   * selected colours show it pressed, and GrayText, not a fade, shows it disabled.
+   */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+
+    &[aria-pressed="true"],
+    &[aria-expanded="true"],
+    &[aria-current="page"] {
+      forced-color-adjust: none;
+      background: SelectedItem;
+      box-shadow: none;
+      color: SelectedItemText;
+
+      /* Opted out, its focus ring would keep the skin's colour: the system's text colour shows on any ground. */
+      &:focus-visible {
+        outline-color: CanvasText;
+      }
+    }
+
+    &:disabled {
+      opacity: 1;
+      color: GrayText;
+      outline-color: GrayText;
+    }
+  }
 }
 
 /**
@@ -314,6 +351,18 @@
   &:disabled {
     opacity: 0.45;
   }
+
+  /* Forced colours drop the gel and its shadows: an outline keeps its edge, and GrayText, not a fade, shows it disabled. */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+
+    &:disabled {
+      opacity: 1;
+      color: GrayText;
+      outline-color: GrayText;
+    }
+  }
 }
 
 /**
@@ -386,6 +435,34 @@
   &:disabled {
     opacity: 0.5;
   }
+
+  /*
+   * Forced colours drop the plastic and its ring: an outline keeps the cap's edge, the system's
+   * selected colours show it selected, and GrayText, not a fade, shows it disabled.
+   */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+
+    &[aria-pressed="true"],
+    &[aria-checked="true"] {
+      forced-color-adjust: none;
+      background: SelectedItem;
+      box-shadow: none;
+      color: SelectedItemText;
+
+      /* Opted out, its focus ring would keep the skin's colour: the system's text colour shows on any ground. */
+      &:focus-visible {
+        outline-color: CanvasText;
+      }
+    }
+
+    &:disabled {
+      opacity: 1;
+      color: GrayText;
+      outline-color: GrayText;
+    }
+  }
 }
 
 /** Blue plastic for an fp-cap, with its own label colour. */
@@ -412,8 +489,879 @@
   --fp-cap-ink: var(--fp-color-cap-berry-ink);
 }
 
+/**
+ * A control with its silkscreen label under it: a knob, fader, meter or switch and then an fp-silk.
+ * With `data-label-placement="start"` the label sits level with the control, before it in the
+ * line. A length set here, such as `--fp-fader-length`, reaches the control inside.
+ */
+@utility fp-unit {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+
+  /* Reversed, so the markup stays control then label either way. */
+  &[data-label-placement="start"] {
+    flex-direction: row-reverse;
+    gap: 0.5rem;
+  }
+}
+
+/**
+ * Rotary knob: a knurled chrome skirt round a domed cap. The cap is lit from the top left and stays
+ * still; only its fp-knob-mark turns, by `rotate`, through 270 degrees. 48 px, 40 px with a mouse,
+ * trackpad or pen.
+ */
+@utility fp-knob {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background-image: repeating-conic-gradient(var(--fp-color-chrome-100) 0deg 5deg, var(--fp-color-chrome-300) 5deg 10deg);
+  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);
+  cursor: ns-resize;
+  touch-action: none;
+  user-select: none;
+
+  @media (pointer: fine) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 16%;
+    border-radius: 50%;
+    background-image: radial-gradient(
+      circle at 30% 25%,
+      color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+      var(--fp-color-chrome-100) 45%,
+      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 1px 2px var(--fp-color-cast);
+  }
+
+  /* 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));
+  }
+
+  &[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* Forced colours drop the knurling, the dome and their shadows: outlines draw the skirt and the cap. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+
+    &::before {
+      outline: 1px solid CanvasText;
+    }
+  }
+}
+
+/** The pointer line on a knob's cap. Turn it with `rotate`: -135deg at the minimum, 135deg at the maximum. */
+@utility fp-knob-mark {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 21%;
+    left: 50%;
+    width: 3px;
+    height: 24%;
+    translate: -50% 0;
+    border-radius: 2px;
+    background-color: var(--fp-color-ink);
+  }
+
+  /* Forced colours would paint the line in the page colour, on the page colour. */
+  @media (forced-colors: active) {
+    &::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+}
+
+/**
+ * Fader: a chrome cap on a recessed slot. It stands up by default and lies on its side with
+ * `data-orientation="horizontal"`; `--fp-fader-length` sets how far it travels (8rem). 44 px
+ * across, 36 px with a mouse, trackpad or pen. Pressing the slot moves the cap there.
+ */
+@utility fp-fader {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: var(--fp-fader-length, 8rem);
+  cursor: ns-resize;
+  touch-action: none;
+  user-select: none;
+
+  @media (pointer: fine) {
+    width: 2.25rem;
+  }
+
+  &[data-orientation="horizontal"] {
+    width: var(--fp-fader-length, 8rem);
+    height: 2.75rem;
+    cursor: ew-resize;
+
+    @media (pointer: fine) {
+      height: 2.25rem;
+    }
+  }
+
+  &[data-disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+
+/** The slot a fader's cap rides in, cut into the panel: shaded on its top and left inside edges. */
+@utility fp-fader-slot {
+  position: absolute;
+  inset: 0.5rem auto;
+  left: 50%;
+  width: 6px;
+  translate: -50% 0;
+  border-radius: 3px;
+  background-color: var(--fp-color-housing);
+  box-shadow:
+    inset 1px 1px 2px rgb(0 0 0 / 0.5),
+    1px 1px 0 var(--fp-color-bevel-hi);
+
+  &[data-orientation="horizontal"] {
+    inset: 50% 0.5rem auto;
+    width: auto;
+    height: 6px;
+    translate: 0 -50%;
+  }
+
+  /* Forced colours: the slot as a solid line, so the cap's travel shows. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+    box-shadow: none;
+  }
+}
+
+/**
+ * A fader's cap: brushed chrome lit from the top left, with an ink grip line that marks the value.
+ * Place it along the slot with `bottom` (or `left` on its side, with `data-orientation="horizontal"`
+ * on the slot and cap as well as the fader).
+ */
+@utility fp-fader-cap {
+  position: absolute;
+  inset-inline: 0;
+  height: 1.5rem;
+  border-radius: 4px;
+  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) 45%,
+    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);
+
+  @media (pointer: fine) {
+    height: 1.25rem;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 50% 20% auto;
+    height: 2px;
+    translate: 0 -50%;
+    border-radius: 1px;
+    background-color: var(--fp-color-ink);
+  }
+
+  &[data-orientation="horizontal"] {
+    inset-inline: auto;
+    inset-block: 0;
+    width: 1.5rem;
+    height: auto;
+
+    @media (pointer: fine) {
+      width: 1.25rem;
+    }
+
+    &::after {
+      inset: 20% auto 20% 50%;
+      width: 2px;
+      height: auto;
+      translate: -50% 0;
+    }
+  }
+
+  /* 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));
+  }
+
+  /* Forced colours: a cap in the page colour hides the slot under it; an outline and the grip draw it. */
+  @media (forced-colors: active) {
+    background-color: Canvas;
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+
+    &::after {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+}
+
+/**
+ * Illuminated rocker switch: a lamp-lit paddle in a dark bezel, marked I at the top and O at the
+ * bottom. Off, the O half is pressed in; on, the I half is, and the lamp behind the lens lights.
+ * Put it on a button with `role="switch"` and `aria-checked`, holding an fp-switch-rocker. The
+ * lamp is red; colour it with fp-led-green or fp-led-amber. 44 x 56 px, 36 x 46 px with a mouse,
+ * trackpad or pen. With `data-orientation="horizontal"` it lies on its side, 56 x 44 px (46 x 36),
+ * O on the left and I on the right. After an illuminated rocker pen by ykadosh (CodePen, MIT), rebuilt on the kit's
+ * tokens.
+ */
+@utility fp-switch {
+  --fp-switch-lamp: var(--fp-led, var(--fp-color-led-red));
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 3.5rem;
+  padding: 5px;
+  border: 0;
+  border-radius: 4px;
+  background-color: color-mix(in srgb, var(--fp-color-housing) 40%, black);
+  box-shadow:
+    0 0 0 1px var(--fp-color-edge),
+    inset 1px 1px 0 rgb(255 255 255 / 0.25),
+    inset 0 0 1px 3px var(--fp-color-housing),
+    inset 0 0 1px 5px color-mix(in srgb, var(--fp-color-housing) 40%, black),
+    1px 2px 0 var(--fp-color-cast);
+  perspective: 216px;
+  cursor: pointer;
+
+  @media (pointer: fine) {
+    width: 2.25rem;
+    height: 2.875rem;
+    padding: 4px;
+  }
+
+  /* On: the I half goes in, the shine comes up, the shading goes, and the lamp lights as it lands. */
+  &[aria-checked="true"] .fp-switch-rocker {
+    transform: translateZ(6px) rotateX(25deg);
+    box-shadow: 0 -3px 6px var(--fp-switch-lamp);
+  }
+
+  &[aria-checked="true"] .fp-switch-face::before {
+    opacity: 1;
+  }
+
+  &[aria-checked="true"] .fp-switch-face::after {
+    opacity: 0;
+  }
+
+  &[aria-checked="true"] .fp-switch-lamp {
+    opacity: 1;
+    transition-duration: 60ms;
+    transition-timing-function: linear;
+    transition-delay: 250ms;
+  }
+
+  /*
+   * On its side the paddle tips across instead, and the marks stay upright. With the light at the
+   * top left, the right end is now the one in shade that casts the shadow, and the left end is lit.
+   */
+  &[data-orientation="horizontal"] {
+    width: 3.5rem;
+    height: 2.75rem;
+
+    @media (pointer: fine) {
+      width: 2.875rem;
+      height: 2.25rem;
+    }
+
+    & .fp-switch-rocker {
+      transform: translateZ(6px) rotateY(-25deg);
+      background: linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 0%,
+        color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 30%,
+        color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 70%,
+        color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 100%
+      );
+    }
+
+    /* The right end, in shade, with the shadow the paddle casts into the bezel. */
+    & .fp-switch-rocker::before {
+      left: auto;
+      right: 0;
+      width: 15px;
+      height: 100%;
+      transform-origin: right;
+      transform: rotateY(-90deg);
+      background: linear-gradient(
+        270deg,
+        color-mix(in srgb, var(--fp-switch-lamp) 40%, black),
+        color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+      );
+      box-shadow:
+        -15px 0 3px 0 black,
+        -24px 0 6px 0 rgb(0 0 0 / 0.5);
+    }
+
+    /* The left end, lit from the left while it stands proud. */
+    & .fp-switch-rocker::after {
+      top: 0;
+      bottom: auto;
+      width: 15px;
+      height: 100%;
+      transform-origin: right;
+      transform: translateX(-15px) rotateY(-90deg);
+      background:
+        linear-gradient(
+            270deg,
+            rgb(255 255 255 / 0.8) 10%,
+            rgb(255 255 255 / 0.3) 30%,
+            color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 75%,
+            color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+          )
+          50% 50% / 97% 97% no-repeat,
+        color-mix(in srgb, var(--fp-switch-lamp) 70%, black);
+      box-shadow: none;
+    }
+
+    & .fp-switch-face {
+      background:
+        linear-gradient(#fff, #fff) 78% 50% / max(2px, 4%) 28% no-repeat,
+        radial-gradient(circle, transparent 50%, #fff 52%, #fff 70%, transparent 72%) 22% 50% / 25% 33% no-repeat,
+        radial-gradient(transparent 30%, color-mix(in srgb, color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 70%, transparent) 70%) 0 0 / 3px 3px;
+    }
+
+    & .fp-switch-face::before {
+      background:
+        linear-gradient(#fff, transparent 3%) 50% 50% / 97% 97% no-repeat,
+        linear-gradient(270deg, rgb(255 255 255 / 0.5), transparent 50%, transparent 80%, rgb(255 255 255 / 0.5)) 50% 50% / 97% 97% no-repeat;
+    }
+
+    & .fp-switch-face::after {
+      background-image: linear-gradient(270deg, transparent 70%, rgb(0 0 0 / 0.8));
+    }
+
+    &[aria-checked="true"] .fp-switch-rocker {
+      transform: translateZ(6px) rotateY(25deg);
+      box-shadow: 3px 0 6px var(--fp-switch-lamp);
+    }
+  }
+
+  /* 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));
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /*
+   * Forced colours drop the paddle's paint: an outline keeps the bezel's edge, and the rocker fills
+   * when on, as a lit LED does, so the state reads by shape as well as by the tilt.
+   */
+  @media (forced-colors: active) {
+    outline: 1px solid ButtonText;
+
+    &[data-orientation="horizontal"] .fp-switch-rocker {
+      background: Canvas;
+    }
+
+    &[aria-checked="true"] .fp-switch-rocker,
+    &[data-orientation="horizontal"][aria-checked="true"] .fp-switch-rocker {
+      background: CanvasText;
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      opacity: 1;
+      outline-color: GrayText;
+    }
+  }
+}
+
+/**
+ * The paddle of an fp-switch, tilted in 3D. It holds an fp-switch-lamp and then an fp-switch-face;
+ * its top and bottom ends show as it tips.
+ */
+@utility fp-switch-rocker {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50% -6px;
+  transform: translateZ(6px) rotateX(-25deg);
+  transform-style: preserve-3d;
+  background: linear-gradient(
+    color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 0%,
+    color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 30%,
+    color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 70%,
+    color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 100%
+  );
+
+  /* Snaps over at the end of its travel, as a rocker's spring does. */
+  transition: transform 300ms cubic-bezier(1, 0, 1, 1), box-shadow 300ms cubic-bezier(1, 0, 1, 1);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms;
+  }
+
+  /* The top end, lit from above while it stands proud. */
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    transform-origin: top;
+    transform: rotateX(-90deg);
+    background:
+      linear-gradient(
+          rgb(255 255 255 / 0.8) 10%,
+          rgb(255 255 255 / 0.3) 30%,
+          color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 75%,
+          color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+        )
+        50% 50% / 97% 97% no-repeat,
+      color-mix(in srgb, var(--fp-switch-lamp) 70%, black);
+  }
+
+  /* The bottom end, in shadow, with the shadow the paddle casts into the bezel. */
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    transform-origin: top;
+    transform: translateY(15px) rotateX(-90deg);
+    background-image: linear-gradient(
+      color-mix(in srgb, var(--fp-switch-lamp) 40%, black),
+      color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+    );
+    box-shadow:
+      0 15px 3px 0 black,
+      0 24px 6px 0 rgb(0 0 0 / 0.5);
+  }
+
+  /* Forced colours: a plain paddle in the system's colours; fp-switch fills it when on. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background: Canvas;
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+}
+
+/** The lamp behind an fp-switch's lens: lit when the switch is on, and slow to fade, like a filament cooling. */
+@utility fp-switch-lamp {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  background-image: radial-gradient(
+    color-mix(in srgb, var(--fp-switch-lamp) 35%, #fff2c8),
+    var(--fp-switch-lamp) 40%,
+    transparent 70%
+  );
+  transition: opacity 600ms ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms;
+  }
+
+  /* Forced colours: the rocker's fill shows the state instead. */
+  @media (forced-colors: active) {
+    display: none;
+  }
+}
+
+/**
+ * The front of an fp-switch's paddle: the dotted lens over the lamp, the I and O marks, and the
+ * shine that comes up on the pressed-in half. Decorative; the switch says its state.
+ */
+@utility fp-switch-face {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(#fff, #fff) 50% 20% / max(2px, 5%) 20% no-repeat,
+    radial-gradient(circle, transparent 50%, #fff 52%, #fff 70%, transparent 72%) 50% 80% / 33% 25% no-repeat,
+    radial-gradient(transparent 30%, color-mix(in srgb, color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 70%, transparent) 70%) 0 0 / 3px 3px;
+
+  /* The shine: faint while the I half stands out, full once it is pressed in. */
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transition: opacity 300ms cubic-bezier(1, 0, 1, 1);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+  }
+
+  &::before {
+    opacity: 0.3;
+    background:
+      linear-gradient(#fff, transparent 3%) 50% 50% / 97% 97% no-repeat,
+      linear-gradient(rgb(255 255 255 / 0.5), transparent 50%, transparent 80%, rgb(255 255 255 / 0.5)) 50% 50% / 97% 97% no-repeat;
+  }
+
+  /* The shading on the O half while it is pressed in. */
+  &::after {
+    opacity: 1;
+    background-image: linear-gradient(transparent 70%, rgb(0 0 0 / 0.8));
+  }
+
+  /* Forced colours: no lens or marks; the rocker's fill shows the state. */
+  @media (forced-colors: active) {
+    display: none;
+  }
+}
+
+/**
+ * Level meter: a strip of LED segments in a dark housing, lit green, then amber, then red. Set
+ * `--fp-meter-level` (0 to 1, in whole segments), `--fp-meter-segments` (12), and where amber and
+ * red begin, `--fp-meter-amber` (8/12) and `--fp-meter-red` (11/12), as shares of the strip on
+ * segment edges, or a segment lights in two colours. It stands
+ * up by default and lies on its side with `data-orientation="horizontal"`; `--fp-meter-length`
+ * sets how long it is (8rem). Give it `role="meter"` and its values, or `aria-hidden` beside a
+ * readout that says the same.
+ */
+@utility fp-meter {
+  --fp-meter-zones: linear-gradient(
+    to top,
+    var(--fp-color-led-on) 0 calc(var(--fp-meter-amber, calc(8 / 12)) * 100%),
+    var(--fp-color-led-amber) 0 calc(var(--fp-meter-red, calc(11 / 12)) * 100%),
+    var(--fp-color-led-red) 0
+  );
+  --fp-meter-gaps: repeating-linear-gradient(
+    to top,
+    #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+    transparent 0 calc(100% / var(--fp-meter-segments, 12))
+  );
+
+  /* Lit segments spill a little light into the gaps beside them: the lens's glow. */
+  --fp-meter-lit-gaps: repeating-linear-gradient(
+    to top,
+    #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+    rgb(0 0 0 / calc(0.18 * var(--fp-led-glow, 1))) 0 calc(100% / var(--fp-meter-segments, 12))
+  );
+  --fp-meter-cell: 100% calc(100% / var(--fp-meter-segments, 12));
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 0.75rem;
+  height: var(--fp-meter-length, 8rem);
+  border-radius: 3px;
+  background-color: var(--fp-color-housing);
+  box-shadow:
+    inset 1px 1px 2px rgb(0 0 0 / 0.5),
+    1px 1px 0 var(--fp-color-bevel-hi);
+
+  /* Each segment's gap sits at its far end, so the strip's own inset at that end is the gap. */
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0 2px 2px;
+    background-image: var(--fp-meter-zones);
+    mask-image: var(--fp-meter-gaps);
+  }
+
+  /* Unlit segments are the LED's off colour with a trace of their zone's, so the zones show. */
+  &::before {
+    background-image:
+      linear-gradient(color-mix(in srgb, var(--fp-color-led-off) 75%, transparent) 0 0),
+      var(--fp-meter-zones);
+  }
+
+  /*
+   * A lit segment is brightest over its chip, in the middle, by the lens. The cut sits 1 px into the
+   * gap below the next segment, so rounding never lights a sliver of it.
+   */
+  &::after {
+    background-image:
+      radial-gradient(closest-side, rgb(255 255 255 / var(--fp-led-core, 0.3)), transparent),
+      var(--fp-meter-zones);
+    background-position: left bottom;
+    background-size: var(--fp-meter-cell), auto;
+    mask-image: var(--fp-meter-lit-gaps);
+    clip-path: inset(calc((1 - var(--fp-meter-level, 0)) * 100% + 1px) 0 0 0);
+  }
+
+  /* Forced colours: the strip as an outline and the lit segments in CanvasText, so the level shows. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+
+    &::before {
+      content: none;
+    }
+
+    &::after {
+      forced-color-adjust: none;
+      background: CanvasText;
+      mask-image: var(--fp-meter-gaps);
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    --fp-meter-zones: linear-gradient(
+      to right,
+      var(--fp-color-led-on) 0 calc(var(--fp-meter-amber, calc(8 / 12)) * 100%),
+      var(--fp-color-led-amber) 0 calc(var(--fp-meter-red, calc(11 / 12)) * 100%),
+      var(--fp-color-led-red) 0
+    );
+    --fp-meter-gaps: repeating-linear-gradient(
+      to right,
+      #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+      transparent 0 calc(100% / var(--fp-meter-segments, 12))
+    );
+    --fp-meter-lit-gaps: repeating-linear-gradient(
+      to right,
+      #000 0 calc(100% / var(--fp-meter-segments, 12) - 2px),
+      rgb(0 0 0 / calc(0.18 * var(--fp-led-glow, 1))) 0 calc(100% / var(--fp-meter-segments, 12))
+    );
+    --fp-meter-cell: calc(100% / var(--fp-meter-segments, 12)) 100%;
+    width: var(--fp-meter-length, 8rem);
+    height: 0.75rem;
+
+    &::before,
+    &::after {
+      inset: 2px 0 2px 2px;
+    }
+
+    &::after {
+      clip-path: inset(0 calc((1 - var(--fp-meter-level, 0)) * 100% + 1px) 0 0);
+    }
+  }
+}
+
+/**
+ * Seven-segment readout: LED digits on a near-black face, set in the housing. Each character is an
+ * fp-readout-cell, and the value is said in an fp-readout-text inside. Green by default; colour it
+ * with fp-led-amber or fp-led-red. Lit digits pass as text on the face at any size.
+ */
+@utility fp-readout {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.1875rem;
+  padding: 0.3125rem 0.4375rem;
+  border: 3px solid var(--fp-color-housing);
+  border-radius: 5px;
+  background-color: color-mix(in srgb, var(--fp-color-led-off) 70%, black);
+  box-shadow:
+    inset 1px 1px 3px rgb(0 0 0 / 0.8),
+    0 1px 0 var(--fp-color-bevel-hi);
+}
+
+/**
+ * One character of an fp-readout, leaning a little like a real display. It shows its unlit
+ * segments itself, a figure eight and a point, faintly in the lit colour; put the lit ones in an
+ * fp-readout-lit inside. With `data-colon` it is a narrow colon cell. `--fp-readout-height` sets
+ * its height (2rem). Give it aria-hidden="true".
+ */
+@utility fp-readout-cell {
+  position: relative;
+  flex-shrink: 0;
+  height: var(--fp-readout-height, 2rem);
+  aspect-ratio: 15 / 22;
+  transform: skewX(-6deg);
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: color-mix(in srgb, var(--fp-color-led-off) 75%, var(--fp-led, var(--fp-color-led-on)));
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22'%3E%3Cpolygon points='1.5,1 2.5,0 9.5,0 10.5,1 9.5,2 2.5,2'/%3E%3Cpolygon points='11,1.5 12,2.5 12,9.5 11,10.5 10,9.5 10,2.5'/%3E%3Cpolygon points='11,11.5 12,12.5 12,19.5 11,20.5 10,19.5 10,12.5'/%3E%3Cpolygon points='1.5,21 2.5,20 9.5,20 10.5,21 9.5,22 2.5,22'/%3E%3Cpolygon points='1,11.5 2,12.5 2,19.5 1,20.5 0,19.5 0,12.5'/%3E%3Cpolygon points='1,1.5 2,2.5 2,9.5 1,10.5 0,9.5 0,2.5'/%3E%3Cpolygon points='1.5,11 2.5,10 9.5,10 10.5,11 9.5,12 2.5,12'/%3E%3Ccircle cx='13.5' cy='21' r='1.2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
+  }
+
+  &[data-colon] {
+    aspect-ratio: 5 / 22;
+
+    &::before {
+      content: none;
+    }
+  }
+
+  /* With forced colours, only the lit digits show: a ghost in a system colour blurs into them. */
+  @media (forced-colors: active) {
+    &::before {
+      content: none;
+    }
+  }
+}
+
+/**
+ * The lit segments of an fp-readout-cell: an element for each, named by `data-segment`, `a` to `g`
+ * (top, then clockwise, then the middle), `dp`, or a colon's `colon-upper` and `colon-lower`. Each
+ * is brightest over its chip, in the middle, and they glow onto the face, both by the lens.
+ */
+@utility fp-readout-lit {
+  position: absolute;
+  inset: 0;
+  filter: drop-shadow(
+    0 0 calc(var(--fp-readout-height, 2rem) * 0.06 * var(--fp-led-glow, 1))
+      color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) 70%, transparent)
+  );
+
+  & > [data-segment] {
+    position: absolute;
+    background-color: var(--fp-led, var(--fp-color-led-on));
+    background-image: radial-gradient(
+      closest-side,
+      color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) calc((1 - var(--fp-led-core, 0.3)) * 100%), white),
+      var(--fp-led, var(--fp-color-led-on))
+    );
+  }
+
+  /* The bars, on the cell's 15 x 22 grid: 9 long and 2 thick, pointed at both ends. */
+  & > [data-segment="a"],
+  & > [data-segment="d"],
+  & > [data-segment="g"] {
+    left: 10%;
+    width: 60%;
+    height: 9.0909%;
+    clip-path: polygon(0 50%, 11.1111% 0, 88.8889% 0, 100% 50%, 88.8889% 100%, 11.1111% 100%);
+  }
+
+  & > [data-segment="b"],
+  & > [data-segment="c"],
+  & > [data-segment="e"],
+  & > [data-segment="f"] {
+    width: 13.3333%;
+    height: 40.9091%;
+    clip-path: polygon(50% 0, 100% 11.1111%, 100% 88.8889%, 50% 100%, 0 88.8889%, 0 11.1111%);
+  }
+
+  & > [data-segment="a"] {
+    top: 0;
+  }
+
+  & > [data-segment="g"] {
+    top: 45.4545%;
+  }
+
+  & > [data-segment="d"] {
+    top: 90.9091%;
+  }
+
+  & > [data-segment="b"],
+  & > [data-segment="c"] {
+    left: 66.6667%;
+  }
+
+  & > [data-segment="e"],
+  & > [data-segment="f"] {
+    left: 0;
+  }
+
+  & > [data-segment="b"],
+  & > [data-segment="f"] {
+    top: 6.8182%;
+  }
+
+  & > [data-segment="c"],
+  & > [data-segment="e"] {
+    top: 52.2727%;
+  }
+
+  & > [data-segment="dp"],
+  & > [data-segment="colon-upper"],
+  & > [data-segment="colon-lower"] {
+    aspect-ratio: 1;
+    border-radius: 50%;
+  }
+
+  & > [data-segment="dp"] {
+    top: 90%;
+    left: 82%;
+    width: 16%;
+  }
+
+  & > [data-segment="colon-upper"],
+  & > [data-segment="colon-lower"] {
+    left: 26%;
+    width: 48%;
+  }
+
+  & > [data-segment="colon-upper"] {
+    top: 26.3636%;
+  }
+
+  & > [data-segment="colon-lower"] {
+    top: 62.7273%;
+  }
+
+  @media (forced-colors: active) {
+    filter: none;
+
+    & > [data-segment] {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
+}
+
+/** An fp-readout's value as text, for screen readers: hidden from view, read in place of the digits. */
+@utility fp-readout-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /** Matte content panel. This is where reading happens: no gloss, a 1 px bevel and a short hard shadow. */
 @utility fp-module {
+  color-scheme: var(--fp-scheme);
   border-radius: 10px;
   background-color: var(--fp-color-shell-matte);
   box-shadow:
@@ -421,6 +1369,11 @@
     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);
+
+  /* Forced colours drop the shadow that draws its edge: an outline keeps it. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+  }
 }
 
 /** A module's own little title bar, in brushed chrome. */
@@ -477,11 +1430,17 @@
 
 /** Recessed well inside a matte panel, for secondary content or an empty slot. */
 @utility fp-well {
+  color-scheme: var(--fp-scheme);
   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);
+
+  /* Forced colours drop the shading that recesses it: an outline keeps an empty well in view. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+  }
 }
 
 /** Silkscreened hardware label. */
@@ -504,6 +1463,11 @@
     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);
+
+  /* Forced colours drop the chrome bezel: an outline frames the glass. */
+  @media (forced-colors: active) {
+    outline: 2px solid CanvasText;
+  }
 }
 
 /** One line of LCD text. Cells of fp-lcd-ghost stacked behind it show the unlit segments, as on real glass. */
@@ -521,6 +1485,11 @@
 /** The unlit segments behind an LCD line. Decorative: give it aria-hidden="true". */
 @utility fp-lcd-ghost {
   color: var(--fp-color-lcd-ghost);
+
+  /* Forced colours would draw the unlit segments as solid as the text over them. */
+  @media (forced-colors: active) {
+    visibility: hidden;
+  }
 }
 
 /** Dark housing that LEDs and small readouts sit in. */
@@ -537,6 +1506,11 @@
   box-shadow:
     inset 1px 1px 2px rgb(0 0 0 / 0.5),
     0 1px 0 var(--fp-color-bevel-hi);
+
+  /* Forced colours turn the dark housing into the page colour: an outline keeps it in view. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+  }
 }
 
 /** An LED with its own dark bezel ring, so a lit one reads on light chrome too. Unlit by default. */
@@ -550,30 +1524,76 @@
   box-shadow:
     0 0 0 2px var(--fp-color-housing),
     inset 0 -1px 1px rgb(0 0 0 / 0.45);
+
+  /* Forced colours drop the fill and the ring: an outline keeps an unlit LED in view. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: 1px;
+  }
 }
 
-/** Green for an fp-led, the default. */
+/** Green for an fp-led or fp-readout, the default. */
 @utility fp-led-green {
   --fp-led: var(--fp-color-led-on);
 }
 
-/** Amber for an fp-led. */
+/** Amber for an fp-led or fp-readout. */
 @utility fp-led-amber {
   --fp-led: var(--fp-color-led-amber);
 }
 
-/** Red for an fp-led. */
+/** Red for an fp-led or fp-readout. */
 @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. */
+/**
+ * Lights an fp-led in its colour, brightest over the chip in its middle, with a glow. The lens sets
+ * how strong both are. 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));
+  background-image: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) calc((1 - var(--fp-led-core, 0.3)) * 100%), white),
+    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),
+    0 0 calc(7px * var(--fp-led-glow, 1)) calc(2px * var(--fp-led-glow, 1))
+      color-mix(in srgb, var(--fp-led, var(--fp-color-led-on)) 65%, transparent),
     inset 0 -1px 1px rgb(0 0 0 / 0.2);
+
+  /* Lit is filled, so it reads apart from unlit by shape as well as colour. */
+  @media (forced-colors: active) {
+    forced-color-adjust: none;
+    background: CanvasText;
+    box-shadow: none;
+  }
+}
+
+/**
+ * LED lens, flat: an even fill with no hot spot. A lens class works on an fp-led, fp-meter or
+ * fp-readout, or on any element around them, such as a device body, to set every one inside.
+ */
+@utility fp-lens-flat {
+  --fp-led-core: 0;
+  --fp-led-glow: 1;
+}
+
+/**
+ * LED lens, diffused, the default: like most real displays, each LED is a little brighter over its
+ * chip, in the middle, with a soft glow.
+ */
+@utility fp-lens-diffused {
+  --fp-led-core: 0.3;
+  --fp-led-glow: 1;
+}
+
+/** LED lens, clear: a bright, pale core over each chip and a wider glow, like a water-clear lens. */
+@utility fp-lens-clear {
+  --fp-led-core: 0.5;
+  --fp-led-glow: 1.5;
 }
 
 /** Decorative screw head. Give it aria-hidden="true". */
@@ -591,6 +1611,7 @@
 
 /** A scrolling panel, such as a list window, with a thin scrollbar that never pushes the layout. */
 @utility fp-scroll-thin {
+  color-scheme: var(--fp-scheme);
   scrollbar-width: thin;
   scrollbar-color: var(--fp-color-scroll-thumb) transparent;
 }