@visns-studio/visns-components 6.20.1 → 6.23.0

package/src/components/styles/StatStrip.module.scss

@@ -0,0 +1,183 @@
+@use 'surface' as *;
+
+/**
+ * StatStrip — the row of labelled figures that sits above a list.
+ *
+ * Two shapes, because the screens it was lifted from genuinely draw two and
+ * neither is wrong:
+ *
+ *   `joined`  one card, cells separated by a hairline. The grid's `gap: 1px`
+ *             is the container's own background showing through, which is how
+ *             the rules stay exactly one device pixel at any zoom. Reads as a
+ *             single statement about the set below it.
+ *   `tiles`   separate bordered tiles with real space between them. Reads as
+ *             independent figures, which is what a dashboard wants — and is
+ *             the only one of the two that can carry a per-tile emphasis skin
+ *             without the tint bleeding across a shared border.
+ *
+ * The track width is a custom property rather than a fixed value so a page can
+ * reflow the strip from its own media query (`--vs-stat-min`), or replace the
+ * track list outright (`--vs-stat-columns`) for the cases auto-fit cannot
+ * express — "exactly two columns on a phone" being the one that keeps coming
+ * up.
+ */
+
+.strip {
+    @include surface-tokens;
+
+    display: grid;
+    grid-template-columns: var(
+        --vs-stat-columns,
+        repeat(auto-fit, minmax(var(--vs-stat-min, 10rem), 1fr))
+    );
+}
+
+/* One card, hairline-separated. */
+.joined {
+    gap: 1px;
+    overflow: hidden;
+    background: var(--pr-line);
+    border: 1px solid var(--pr-line);
+    border-radius: var(--pr-radius);
+    box-shadow: var(--pr-shadow);
+}
+
+/* Separate tiles. */
+.tiles {
+    gap: var(--spacing-md, 1rem);
+}
+
+/* -------------------------------------------------------------------------- */
+/* one figure                                                                 */
+/* -------------------------------------------------------------------------- */
+
+.stat {
+    @include surface-tokens;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 0;
+    padding: 0.85rem var(--spacing-md, 1rem);
+    background: var(--pr-surface);
+}
+
+.tiles .stat {
+    border: 1px solid var(--pr-line);
+    border-radius: var(--pr-radius);
+}
+
+/* A stat that navigates. It is a real <button>, so everything a button brings
+   with it — the browser's font, the centred text, the 2px agent border — has
+   to be unwound before it can pass for a cell. */
+.interactive {
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    text-decoration: none;
+    border: 0;
+    cursor: pointer;
+    transition: background var(--speed, 160ms) var(--ease, ease);
+
+    &:hover {
+        background: var(--pr-quiet);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--pr-accent);
+        outline-offset: -2px;
+    }
+}
+
+.tiles .interactive {
+    border: 1px solid var(--pr-line);
+}
+
+.label {
+    color: var(--pr-muted);
+    font-size: var(--font-size-xs, 0.75rem);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+/* The label carries a little more weight inside a hairline grid, where there is
+   no border to tell one cell from the next. */
+.joined .label {
+    font-weight: 600;
+}
+
+.value {
+    font-size: 1.35rem;
+    font-weight: var(--font-weight-bold, 700);
+    /* Tabular figures so a column of money lines up on the decimal point. */
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+}
+
+/* In a tile the figure is the tile's whole content, so it takes the heading
+   colour. In a hairline grid it sits in a run of cells and inherits the page's
+   ink instead, or the run reads as six headings. */
+.tiles .value {
+    color: var(--pr-heading);
+    line-height: 1.15;
+}
+
+/* `/mo`, `%`, `h` — the unit rides with the figure at small print rather than
+   being sized up with it. */
+.unit {
+    margin-left: 0.15rem;
+    color: var(--pr-muted);
+    font-size: 0.8rem;
+    font-weight: 400;
+}
+
+.note {
+    color: var(--pr-muted);
+    font-size: var(--font-size-xs, 0.75rem);
+}
+
+/* -------------------------------------------------------------------------- */
+/* tone and emphasis                                                          */
+/* -------------------------------------------------------------------------- */
+
+/* `tone` colours the FIGURE. Applied by the caller only when the figure is
+   non-zero — a tile that is permanently red is a tile nobody reads. */
+.toneAccent {
+    color: var(--pr-accent);
+}
+
+.toneHeading {
+    color: var(--pr-heading);
+}
+
+.toneWarn {
+    color: var(--pr-warn);
+}
+
+.toneDanger {
+    color: var(--pr-danger);
+}
+
+/* A note that has to carry the weight rather than the figure above it — "3
+   unpriced" hanging off a money total. */
+.noteWarn {
+    color: var(--pr-warn);
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+/* `emphasis` skins the whole TILE, and only in the `tiles` variant: a tint
+   inside a hairline grid would bleed to the cell edges and read as a broken
+   border rather than as a warning. */
+.tiles .emphasisWarn {
+    background: color-mix(in srgb, var(--pr-warn) 7%, var(--pr-surface));
+    border-color: color-mix(in srgb, var(--pr-warn) 42%, var(--pr-line));
+}
+
+.tiles .emphasisDanger {
+    background: color-mix(in srgb, var(--pr-danger) 5%, var(--pr-surface));
+    border-color: color-mix(in srgb, var(--pr-danger) 40%, var(--pr-line));
+
+    .value {
+        color: var(--pr-danger);
+    }
+}

package/src/components/styles/TabStrip.module.scss

@@ -0,0 +1,96 @@
+@use 'surface' as *;
+
+/**
+ * TabStrip — the underline tabs.
+ *
+ * The visual language GenericIndex draws, as a component that can be used on its
+ * own. Three bespoke screens had rebuilt it by hand, each with the note "the
+ * library's tabs are wired to their own state machine, so what is shared is the
+ * LOOK, not the code" — which was true, and is the reason this exists: the look
+ * belongs in the library even when the state machine does not.
+ *
+ * The full-width rule is on the STRIP rather than on each tab, and the active
+ * tab pulls itself down over it by a pixel, so its underline sits ON that line
+ * instead of floating above it.
+ */
+
+.strip {
+    @include surface-tokens;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-md, 1rem);
+    border-bottom: 1px solid var(--pr-line);
+}
+
+.tab {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    padding: 0.6rem 0.15rem;
+    /* Sits over the strip's own rule. */
+    margin-bottom: -1px;
+    color: var(--pr-muted);
+    font-family: inherit;
+    font-size: var(--font-size-sm, 0.8125rem);
+    font-weight: var(--font-weight-semibold, 600);
+    white-space: nowrap;
+    background: none;
+    border: 0;
+    /* Drawn transparent rather than added on activation, so a tab does not shift
+       by 2px the moment it is selected. */
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition:
+        color var(--speed, 160ms) var(--ease, ease),
+        border-color var(--speed, 160ms) var(--ease, ease);
+
+    &:hover:not(:disabled) {
+        color: var(--pr-heading);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--pr-accent);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.5;
+    }
+}
+
+.active {
+    color: var(--pr-heading);
+    border-bottom-color: var(--pr-accent);
+}
+
+/* -------------------------------------------------------------------------- */
+/* the count on a tab                                                         */
+/* -------------------------------------------------------------------------- */
+
+/* A count rides along where a tab has one worth pre-empting — it is the
+   difference between "go and look at Service health" and "go and look at Service
+   health, there are 21 things wrong".
+ *
+ * Two tones, and the distinction matters: `quiet` is HOW MANY (four tickets on
+ * this contact), `danger` is HOW MANY ARE WRONG (twenty-one devices offline). A
+ * red pill on a plain count is an alarm about nothing. */
+.badge {
+    padding: 0.05rem 0.35rem;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-variant-numeric: tabular-nums;
+    border-radius: var(--radius-pill, 999px);
+}
+
+.badgeQuiet {
+    color: var(--pr-muted);
+    background: var(--pr-quiet);
+    border: 1px solid var(--pr-line);
+}
+
+.badgeDanger {
+    color: #fff;
+    background: var(--pr-danger);
+    border: 1px solid transparent;
+}

package/src/components/styles/Vault.module.scss

@@ -41,6 +41,11 @@ $vault-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
     --v-tint: color-mix(in srgb, var(--v-primary) 12%, var(--v-background));
     --v-ok: rgb(31, 122, 71);
     --v-bad: rgb(190, 62, 62);
+    // Between the two: something did not happen, and nothing is broken or at
+    // risk because of it. Its one user is "the link could not be emailed" —
+    // the link itself is fine and on screen right above the line, so painting
+    // that in --v-bad would read as "your credential is in trouble".
+    --v-warn: rgb(176, 106, 20);
 }
 
 // Undo anything a host may have imposed on a generic element. Applied to every
@@ -2312,6 +2317,47 @@ input.checkControl {
     }
 }
 
+// "Also emailed to dana@acme.example." Quiet, and under the URL rather than
+// instead of it: the copy-the-link flow is what actually happened, the email is
+// a convenience on top of it.
+.shareEmailed {
+    display: flex;
+    gap: 0.35rem;
+    align-items: flex-start;
+    margin: 0;
+    color: var(--v-ok);
+    font-size: 0.78rem;
+    line-height: 1.45;
+
+    svg {
+        flex-shrink: 0;
+        margin-top: 0.15rem;
+    }
+}
+
+// The send failed. Louder than the line above, because the sender is about to
+// close a dialog believing the recipient has the link — but not red: the link
+// is on screen and copyable, and nothing about the credential is at risk.
+.shareEmailFailed {
+    display: flex;
+    gap: 0.35rem;
+    align-items: flex-start;
+    margin: 0;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid color-mix(in srgb, var(--v-warn) 40%, transparent);
+    border-radius: var(--v-btn-br);
+    background: color-mix(in srgb, var(--v-warn) 10%, var(--v-background));
+    color: var(--v-warn);
+    font-size: 0.78rem;
+    font-weight: 500;
+    line-height: 1.45;
+
+    svg {
+        flex-shrink: 0;
+        margin-top: 0.15rem;
+    }
+}
+
 .shareList {
     display: flex;
     flex-direction: column;