@frontpanel/css 0.0.0-stage → 0.1.0

package/components.css

@@ -0,0 +1,547 @@
+/* Generated by scripts/build.ts from src/. Do not edit; edit the source and run `pnpm build`. */
+@layer frontpanel {
+  /* 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. */
+  .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. */
+  .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. */
+  .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. */
+  .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. */
+  .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. */
+  .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. */
+  .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. */
+  .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).
+   */
+  .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.
+   */
+  .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. */
+  .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. */
+  .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. */
+  .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. */
+  .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. */
+  .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. */
+  .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.
+   */
+  .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. */
+  .fp-window-title {
+    margin: 0;
+    margin-inline-end: auto;
+    font-weight: 400;
+  }
+
+  /** The padded body under a window's title bar. */
+  .fp-window-body {
+    padding: 0.75rem;
+  }
+
+  /** Recessed well inside a matte panel, for secondary content or an empty slot. */
+  .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. */
+  .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`. */
+  .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. */
+  .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". */
+  .fp-lcd-ghost {
+    color: var(--fp-color-lcd-ghost);
+  }
+
+  /** Dark housing that LEDs and small readouts sit in. */
+  .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. */
+  .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. */
+  .fp-led-green {
+    --fp-led: var(--fp-color-led-on);
+  }
+
+  /** Amber for an fp-led. */
+  .fp-led-amber {
+    --fp-led: var(--fp-color-led-amber);
+  }
+
+  /** Red for an fp-led. */
+  .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. */
+  .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". */
+  .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. */
+  .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. */
+  .fp-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+    shape-rendering: crispEdges;
+  }
+}

package/fonts/OFL-michroma.txt

@@ -0,0 +1,93 @@
+Copyright 2011 The Michroma Project Authors (https://github.com/googlefonts/Michroma-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.