@frontpanel/css 0.3.0 → 0.4.0

package/components.css

@@ -29,6 +29,19 @@
     }
   }
 
+  /* A menu dropping open from its button: a short slide down as it fades in. */
+  @keyframes fp-menu-drop {
+    from {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
   /** 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);
@@ -306,6 +319,34 @@
     }
   }
 
+  /**
+   * Chrome buttons joined side by side into one bezel, as on a transport row: fp-chrome-btn children
+   * share their seams, and only the outer corners stay round. Give it `role="group"` and a name.
+   */
+  .fp-button-group {
+    display: inline-flex;
+    align-items: stretch;
+
+    /* The 1 px edge round each button falls in the gap, so neighbours share one seam. */
+    gap: 1px;
+
+    & > .fp-chrome-btn:not(:first-child) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    & > .fp-chrome-btn:not(:last-child) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    /* A focused button's ring goes over its neighbours, not under them. */
+    & > .fp-chrome-btn:focus-visible {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
   /**
    * 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
@@ -1369,6 +1410,130 @@
     padding: 0.75rem;
   }
 
+  /**
+   * Faceplate menu: a small brushed-chrome plate that drops from the button that opens it, holding
+   * fp-menu-item rows and fp-menu-separator grooves. Placing it is up to you, or to Reka's
+   * DropdownMenu, which also sets the `data-state="open"` it drops in on.
+   */
+  .fp-menu {
+    color-scheme: var(--fp-scheme);
+    z-index: 50;
+    box-sizing: border-box;
+    min-width: 10rem;
+    overflow-y: auto;
+    padding: 0.25rem;
+    border-radius: 6px;
+    color: var(--fp-color-ink);
+    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),
+      2px 3px 0 var(--fp-color-cast),
+      0 12px 18px -8px var(--fp-color-cast);
+
+    /* The plate takes focus when a pointer opens it; its rows show where the keys are. */
+    outline: none;
+
+    &[data-state="open"] {
+      animation: fp-menu-drop 90ms ease-out;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &[data-state="open"] {
+        animation: none;
+      }
+    }
+
+    /* Forced colours drop the chrome and its shadows: an outline keeps the plate's edge. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+    }
+  }
+
+  /**
+   * A row on an fp-menu: a silkscreened label, with an fp-icon before it if you like. The highlighted
+   * row presses into the plate; Reka sets `data-highlighted` on the row under the pointer or the
+   * arrow keys, and `data-disabled` on one that can't be chosen. 44 px tall, 36 px with a mouse,
+   * trackpad or pen.
+   */
+  .fp-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 2.75rem;
+    padding-inline: 0.625rem;
+    border-radius: 4px;
+    color: var(--fp-color-ink);
+    font-family: var(--fp-font-display);
+    font-size: 11px;
+    line-height: 1.3;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
+    outline: none;
+
+    @media (pointer: fine) {
+      min-height: 2.25rem;
+    }
+
+    &[data-highlighted] {
+      background-color: var(--fp-color-chrome-300);
+      box-shadow:
+        inset 1px 1px 3px var(--fp-color-bevel-lo),
+        inset -1px -1px 0 var(--fp-color-bevel-hi);
+    }
+
+    /* The keyboard's row also gets the ring every focused control has, inside the row. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: -2px;
+    }
+
+    &[data-disabled] {
+      opacity: 0.45;
+    }
+
+    /*
+     * Forced colours drop the pressed-in shading: the system's highlight colours show the highlighted
+     * row, and GrayText, not a fade, shows a disabled one.
+     */
+    @media (forced-colors: active) {
+      &[data-highlighted] {
+        forced-color-adjust: none;
+        background: Highlight;
+        box-shadow: none;
+        color: HighlightText;
+
+        /* Opted out, its focus ring would keep the skin's colour: the system's text colour shows on any ground. */
+        &:focus-visible {
+          outline-color: HighlightText;
+        }
+      }
+
+      &[data-disabled] {
+        opacity: 1;
+        color: GrayText;
+      }
+    }
+  }
+
+  /** A groove between groups of rows on an fp-menu, cut into the plate: shaded above, lit below. */
+  .fp-menu-separator {
+    height: 0;
+    margin: 0.25rem 0.375rem;
+    border-top: 1px solid var(--fp-color-bevel-lo);
+    border-bottom: 1px solid var(--fp-color-bevel-hi);
+  }
+
   /** Recessed well inside a matte panel, for secondary content or an empty slot. */
   .fp-well {
     color-scheme: var(--fp-scheme);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontpanel/css",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Early-2000s hardware skin as plain CSS: liquid-chrome bezels, gel buttons, LCDs and LEDs. Tokens, classes and an optional Tailwind 4 entry.",
   "author": "Dulan Katukurundage",
   "license": "MIT",

package/tailwind.css

@@ -86,6 +86,19 @@
       opacity: 1;
     }
   }
+
+  /* A menu dropping open from its button: a short slide down as it fades in. */
+  @keyframes fp-menu-drop {
+    from {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
 }
 
 /** Redraws an LCD line left to right in four steps, as when its value changes. */
@@ -365,6 +378,34 @@
   }
 }
 
+/**
+ * Chrome buttons joined side by side into one bezel, as on a transport row: fp-chrome-btn children
+ * share their seams, and only the outer corners stay round. Give it `role="group"` and a name.
+ */
+@utility fp-button-group {
+  display: inline-flex;
+  align-items: stretch;
+
+  /* The 1 px edge round each button falls in the gap, so neighbours share one seam. */
+  gap: 1px;
+
+  & > .fp-chrome-btn:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  & > .fp-chrome-btn:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* A focused button's ring goes over its neighbours, not under them. */
+  & > .fp-chrome-btn:focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+}
+
 /**
  * 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
@@ -1428,6 +1469,130 @@
   padding: 0.75rem;
 }
 
+/**
+ * Faceplate menu: a small brushed-chrome plate that drops from the button that opens it, holding
+ * fp-menu-item rows and fp-menu-separator grooves. Placing it is up to you, or to Reka's
+ * DropdownMenu, which also sets the `data-state="open"` it drops in on.
+ */
+@utility fp-menu {
+  color-scheme: var(--fp-scheme);
+  z-index: 50;
+  box-sizing: border-box;
+  min-width: 10rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+  border-radius: 6px;
+  color: var(--fp-color-ink);
+  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),
+    2px 3px 0 var(--fp-color-cast),
+    0 12px 18px -8px var(--fp-color-cast);
+
+  /* The plate takes focus when a pointer opens it; its rows show where the keys are. */
+  outline: none;
+
+  &[data-state="open"] {
+    animation: fp-menu-drop 90ms ease-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[data-state="open"] {
+      animation: none;
+    }
+  }
+
+  /* Forced colours drop the chrome and its shadows: an outline keeps the plate's edge. */
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+  }
+}
+
+/**
+ * A row on an fp-menu: a silkscreened label, with an fp-icon before it if you like. The highlighted
+ * row presses into the plate; Reka sets `data-highlighted` on the row under the pointer or the
+ * arrow keys, and `data-disabled` on one that can't be chosen. 44 px tall, 36 px with a mouse,
+ * trackpad or pen.
+ */
+@utility fp-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding-inline: 0.625rem;
+  border-radius: 4px;
+  color: var(--fp-color-ink);
+  font-family: var(--fp-font-display);
+  font-size: 11px;
+  line-height: 1.3;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+  outline: none;
+
+  @media (pointer: fine) {
+    min-height: 2.25rem;
+  }
+
+  &[data-highlighted] {
+    background-color: var(--fp-color-chrome-300);
+    box-shadow:
+      inset 1px 1px 3px var(--fp-color-bevel-lo),
+      inset -1px -1px 0 var(--fp-color-bevel-hi);
+  }
+
+  /* The keyboard's row also gets the ring every focused control has, inside the row. */
+  &:focus-visible {
+    outline: 2px solid var(--fp-color-focus-ring);
+    outline-offset: -2px;
+  }
+
+  &[data-disabled] {
+    opacity: 0.45;
+  }
+
+  /*
+   * Forced colours drop the pressed-in shading: the system's highlight colours show the highlighted
+   * row, and GrayText, not a fade, shows a disabled one.
+   */
+  @media (forced-colors: active) {
+    &[data-highlighted] {
+      forced-color-adjust: none;
+      background: Highlight;
+      box-shadow: none;
+      color: HighlightText;
+
+      /* Opted out, its focus ring would keep the skin's colour: the system's text colour shows on any ground. */
+      &:focus-visible {
+        outline-color: HighlightText;
+      }
+    }
+
+    &[data-disabled] {
+      opacity: 1;
+      color: GrayText;
+    }
+  }
+}
+
+/** A groove between groups of rows on an fp-menu, cut into the plate: shaded above, lit below. */
+@utility fp-menu-separator {
+  height: 0;
+  margin: 0.25rem 0.375rem;
+  border-top: 1px solid var(--fp-color-bevel-lo);
+  border-bottom: 1px solid var(--fp-color-bevel-hi);
+}
+
 /** Recessed well inside a matte panel, for secondary content or an empty slot. */
 @utility fp-well {
   color-scheme: var(--fp-scheme);