@glimstone/core 4.0.0 → 4.1.0

package/tokens.css

@@ -594,6 +594,70 @@ body {
   background-color: var(--carbon-hover);
 }
 
+/* A drag on the square or the bar is the picker's, never a scroll of the
+   page. The handle shows the colour it stands on. */
+.glim-picker-sv,
+.glim-picker-hue { touch-action: none; }
+.glim-picker-dot { background-color: var(--glim-picker-colour, transparent); }
+
+/* The ColorPicker components: the widget, the preview with the name it
+   proposes and the hex field, and Apply. Without an anchor the panel sits in
+   the page on whatever surface holds it; with one it floats on the body, above
+   windows and below toasts, like a menu. */
+.glim-picker-panel {
+  --glim-picker-colour: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 18.5rem;
+  max-width: 100%;
+}
+.glim-picker-panel .glim-picker-sv { height: 10rem; }
+.glim-picker-panel .glim-picker-dot {
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: -0.55rem 0 0 -0.55rem;
+}
+.glim-picker-panel--float {
+  position: fixed;
+  z-index: 60;
+  padding: 0.8rem;
+  border-radius: var(--radius-card);
+  background-color: var(--carbon-surface);
+  box-shadow: var(--elevation), var(--hairline);
+}
+.glim-picker-foot {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+.glim-picker-swatch {
+  width: 1.6rem;
+  height: 1.6rem;
+  flex: none;
+  border-radius: var(--radius-pill);
+  background-color: var(--glim-picker-colour);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--glim-picker-colour) 30%, transparent), inset 0 0 0 1px var(--carbon-border);
+}
+.glim-picker-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.glim-picker-foot .glim-picker-hex {
+  width: 6.2rem;
+  height: var(--btn-h);
+  flex: none;
+  margin-inline-start: auto;
+}
+.glim-picker-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
 /* Rainbow, the accent in its plural form (docs/design-language.md; the JS side
    is hueVars and applyRainbow in packages/core/src/appearance.ts). An element that owns
    a palette position sets --item-hue and carries .glim-hue, and these rules
@@ -721,6 +785,9 @@ body {
   0%   { left: -35%; }
   100% { left: 100%; }
 }
+@keyframes glim-progress-sheen {
+  to { translate: 100% 0; }
+}
 /* Translation only. This runs on the route wrapper while the cards inside it
    animate their own transforms, and a scale or rotation on an ancestor makes
    the engine resample the whole subtree, so the page trembles before it
@@ -906,6 +973,10 @@ body {
     --motion-slosh-splash-tilt: 7deg;
     --motion-slosh-splash-run: 3.4;
     --motion-slosh-splash-ripple: 1.5;
+    /* A progress bar without a value: one sweep of its light across the
+       track. Its sheen: one pass over the filled part. */
+    --motion-indeterminate-dur: 1.4s;
+    --motion-progress-sheen-dur: 1.6s;
   }
   :root[data-motion='subtle'] {
     --motion-control-dur: 80ms;
@@ -950,6 +1021,8 @@ body {
     --motion-slosh-splash-tilt: 4deg;
     --motion-slosh-splash-run: 2.2;
     --motion-slosh-splash-ripple: 1;
+    --motion-indeterminate-dur: 2.2s;
+    --motion-progress-sheen-dur: 2.6s;
   }
   :root[data-motion='off'] {
     --motion-control-dur: 0s;
@@ -998,7 +1071,27 @@ body {
     --motion-slosh-splash-tilt: 0deg;
     --motion-slosh-splash-run: 0;
     --motion-slosh-splash-ripple: 0;
+    /* Long rather than 0; both stop outright at this level, below. */
+    --motion-indeterminate-dur: 60s;
+    --motion-progress-sheen-dur: 60s;
+  }
+  /* A progress bar without a value sends a short light across its track, and
+     a running one a sheen over its fill. A meter never moves: it shows a level
+     that stands, and a light on it would say something is under way. Both
+     stop at "off", where a bar without a value keeps its stripes, and under
+     reduced motion even for storm: wanting more movement is not wanting
+     something that never stops. */
+  :root:not([data-motion='off']) .glim-progress--busy > .glim-progress-fill {
+    width: 35%;
+    background: var(--accent);
+    opacity: 1;
+    animation: glim-indeterminate var(--motion-indeterminate-dur) ease-in-out infinite;
   }
+  :root:not([data-motion='off']) .glim-progress:not(.glim-progress--busy, .glim-progress--paused, .glim-progress--done, .glim-progress--failed) .glim-progress-fill::after {
+    animation: glim-progress-sheen var(--motion-progress-sheen-dur) ease-in-out infinite;
+  }
+  .glim-progress-fill { transition: width var(--motion-control-dur) linear; }
+
   :root[data-motion='off'] * { transition-duration: 0s !important; }
   :root[data-motion='subtle'] .transition,
   :root[data-motion='subtle'] .transition-colors,
@@ -1071,6 +1164,8 @@ body {
   --motion-slosh-splash-tilt: 10deg;
   --motion-slosh-splash-run: 4.8;
   --motion-slosh-splash-ripple: 2;
+  --motion-indeterminate-dur: 0.9s;
+  --motion-progress-sheen-dur: 1.1s;
 }
 :root[data-motion='storm'][dir="rtl"] { --glim-toast-slide: -44px; }
 
@@ -2718,7 +2813,7 @@ body {
   :where([class*="glim-"]) :where(*, ::before, ::after) {
     box-sizing: border-box;
   }
-  :where(.glim-btn, .glim-badge, .glim-readme-btn, .glim-toggle-track, .glim-toast-dismiss, .glim-window-button, .glim-give-network, .glim-give-coin, .glim-give-amount, .glim-sel-seg, .glim-num-field) {
+  :where(.glim-btn, .glim-badge, .glim-readme-btn, .glim-toggle-track, .glim-toast-dismiss, .glim-window-button, .glim-give-network, .glim-give-coin, .glim-give-amount, .glim-sel-seg, .glim-num-field, .glim-menu-item, .glim-menu-head-edit, .glim-menubar-item, .glim-checkbox, .glim-input, .glim-secret-eye) {
     margin: 0;
     padding: 0;
     border: 0 solid;
@@ -3815,4 +3910,438 @@ body {
   .glim-subcard .glim-sel--chip .glim-sel-seg:not(.glim-active):not(:disabled):hover {
     background-color: var(--carbon-hover-raised);
   }
+
+  /* The general window (Window): the confirm surface's frame, grown to hold a
+     form, a list or a whole tool at three widths. Its notch sits in the card's
+     padding, so the body starts far enough down to clear it, and the start of
+     the foot holds one quiet line, such as where the work carries on. */
+  .glim-window { max-width: 40rem; }
+  .glim-window--wide { max-width: 58rem; }
+  .glim-window--full {
+    max-width: 80rem;
+    height: calc(100vh - 2rem - var(--window-bar));
+    max-height: none;
+  }
+  .glim-window-title { margin: 0; }
+  .glim-window-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-top: 1.75rem;
+  }
+  .glim-window-start {
+    margin-inline-end: auto;
+    font-size: var(--text-meta);
+    color: var(--carbon-text-muted);
+  }
+
+  /* The context menu and the menus of the bar (ContextMenu, MenuBar). Both sit
+     on the body, so no card or scroll box clips them, and a submenu is a menu
+     of its own beside its row: inside the first one, that menu's scrolling
+     would cut it off. Above windows, below toasts and bubbles. */
+  .glim-menu {
+    position: fixed;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    min-width: 16rem;
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+    padding: 0.35rem;
+    border-radius: var(--radius-card);
+    background-color: var(--carbon-surface);
+    box-shadow: var(--elevation), var(--hairline);
+  }
+  .glim-menu-item {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 0.6rem;
+    height: 2rem;
+    padding-inline: 0.6rem;
+    border-radius: var(--radius-control);
+    font-size: var(--text-body);
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  /* A menu the pointer opened carries data-pointer until a key is pressed in
+     it, so the first row it focused stays unlit (focusFirstMenuRow). */
+  .glim-menu-item:hover,
+  .glim-menu:not([data-pointer]) .glim-menu-item:focus-visible,
+  .glim-menu-item[aria-expanded="true"] { background-color: var(--carbon-hover); }
+  .glim-menu-item:disabled {
+    opacity: 0.45;
+    cursor: default;
+  }
+  .glim-menu-item:disabled:hover { background-color: transparent; }
+  /* The current choice of a radio group, washed rather than filled, since the
+     tick at its end already says which. */
+  .glim-menu-item--current { background-color: var(--accent-soft); }
+  /* Also the empty room of a row without a glyph, so every label starts at one edge. */
+  .glim-menu-glyph {
+    display: inline-grid;
+    flex: none;
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--accent-glyph);
+  }
+  .glim-menu-glyph > svg {
+    width: 100%;
+    height: 100%;
+  }
+  .glim-menu-dot {
+    flex: none;
+    width: 0.95rem;
+    height: 0.95rem;
+    border-radius: var(--radius-pill);
+  }
+  .glim-menu-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .glim-menu-end {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin-inline-start: auto;
+  }
+  .glim-menu-tick { color: var(--accent-glyph); }
+  .glim-menu-count {
+    padding-inline-start: 1.2rem;
+    font-size: var(--text-meta);
+    color: var(--carbon-text-muted);
+  }
+  .glim-menu-caret { color: var(--carbon-text-muted); }
+  .glim-menu-caret svg {
+    width: 0.7rem;
+    height: 0.7rem;
+    rotate: -90deg;
+  }
+  .glim-menu-caret:dir(rtl) svg { rotate: 90deg; }
+  .glim-menu-sep {
+    flex: none;
+    height: 1px;
+    margin: 0.3rem 0.4rem;
+    background-color: color-mix(in srgb, var(--carbon-text) 9%, transparent);
+  }
+  .glim-menu-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 1.6rem;
+    padding-block: 0.35rem 0.2rem;
+    padding-inline: 0.6rem 0.3rem;
+    font-size: var(--text-meta);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--carbon-text-muted);
+  }
+  .glim-menu-head-edit {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-inline-start: auto;
+    border-radius: var(--radius-control);
+    color: var(--accent-glyph);
+    cursor: pointer;
+  }
+  .glim-menu-head-edit:hover,
+  .glim-menu:not([data-pointer]) .glim-menu-head-edit:focus-visible { background-color: var(--carbon-hover); }
+  .glim-menu-head-edit svg {
+    width: 0.85rem;
+    height: 0.85rem;
+  }
+
+  /* The menu bar of a desktop-style app's head row: bare words that take the
+     second surface under the pointer and while their menu is open. */
+  .glim-menubar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 2px;
+  }
+  .glim-menubar-item {
+    height: 2.2rem;
+    padding-inline: 0.7rem;
+    border-radius: var(--radius-pill);
+    font-weight: 500;
+    color: var(--carbon-text-sub);
+    cursor: pointer;
+  }
+  .glim-menubar-item:hover,
+  .glim-menubar-item[aria-expanded="true"] {
+    background-color: var(--carbon-surface2);
+    color: var(--carbon-text);
+  }
+
+  /* The checkbox (Checkbox, and the box of a menu's checkbox item): the one
+     place a box stands instead of a switch (rule 39). Drawn rather than the
+     system's, at the control radius held small enough to stay a box, and when
+     ticked the accent with the tick in its contrast ink. */
+  .glim-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    min-height: 2rem;
+    padding-inline: 0.4rem;
+    border-radius: var(--radius-control);
+    text-align: start;
+    cursor: pointer;
+  }
+  .glim-checkbox:hover { background-color: var(--carbon-hover); }
+  .glim-checkbox:disabled {
+    opacity: 0.55;
+    cursor: default;
+  }
+  .glim-checkbox:disabled:hover { background-color: transparent; }
+  .glim-checkbox-box {
+    display: grid;
+    flex: none;
+    place-items: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: min(var(--radius-control), 5px);
+    background-color: color-mix(in srgb, var(--carbon-surface3) 60%, transparent);
+    color: transparent;
+  }
+  .glim-checkbox-box > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  [aria-checked="true"] > .glim-checkbox-box {
+    background-color: var(--accent);
+    color: var(--accent-contrast);
+  }
+  /* The slim checkbox: the box alone, for a row or a cell of a dense list,
+     where the frame's padding and hover ground would crowd the row. The row
+     around it gives the hover, and the box only firms up. */
+  .glim-checkbox--slim {
+    min-height: 0;
+    padding: 0;
+    border-radius: min(var(--radius-control), 5px);
+  }
+  .glim-checkbox--slim:hover { background-color: transparent; }
+  .glim-checkbox--slim[aria-checked="false"]:not(:disabled):hover > .glim-checkbox-box {
+    background-color: var(--carbon-surface3);
+  }
+
+  /* A key cap (Kbd), in the app's own type rather than the browser's monospace. */
+  .glim-kbd {
+    display: inline-grid;
+    place-items: center;
+    height: 1.2rem;
+    padding-inline: 0.4rem;
+    border-radius: var(--radius-control);
+    background-color: var(--carbon-surface3);
+    font-family: inherit;
+    font-size: var(--text-meta);
+    color: var(--carbon-text-sub);
+    white-space: nowrap;
+  }
+
+  /* The data pill (Pill): one value of a row, quiet at rest. A state takes a
+     wash of its solid colour over the second surface, so the text keeps the
+     body ink and a column of pills still reads as one column. */
+  .glim-pill {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    height: 1.35rem;
+    padding-inline: 0.55rem;
+    border-radius: var(--radius-pill);
+    background-color: var(--carbon-surface2);
+    font-size: var(--text-meta);
+    color: var(--carbon-text-sub);
+    white-space: nowrap;
+  }
+  .glim-pill--state { background-color: var(--carbon-surface3); color: var(--carbon-text); }
+  .glim-pill--ok { background-color: color-mix(in srgb, var(--carbon-surface2), var(--status-ok-solid) 30%); color: var(--carbon-text); }
+  .glim-pill--warn { background-color: color-mix(in srgb, var(--carbon-surface2), var(--status-warn-solid) 35%); color: var(--carbon-text); }
+  .glim-pill--fail { background-color: color-mix(in srgb, var(--carbon-surface2), var(--status-fail-solid) 35%); color: var(--carbon-text); }
+
+  /* A text field (PasswordField, CopyField): borderless and filled (rule 14),
+     a step up the ramp on focus and inside a sub-card, like the number field.
+     It fills its column; a width belongs to the wrapper around it. */
+  .glim-input {
+    width: 100%;
+    min-width: 0;
+    height: var(--btn-h);
+    padding-inline: 0.75rem;
+    border-radius: var(--radius-control);
+    background-color: var(--carbon-surface2);
+    color: var(--carbon-text);
+    font-size: var(--text-body);
+    line-height: 1.25rem;
+  }
+  .glim-input:focus,
+  .glim-well .glim-input { background-color: var(--carbon-surface3); }
+  .glim-well .glim-input:focus { background-color: var(--carbon-hover-raised); }
+  .glim-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .glim-input::placeholder { color: var(--carbon-text-muted); }
+  .glim-input--mono {
+    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
+    font-size: var(--text-subline);
+    text-overflow: ellipsis;
+  }
+
+  /* The reveal eye ("The reveal eye" in the design language): a bare glyph in
+     the field's trailing padding, neutral, and the wrapper as wide as a plain
+     field. Edge draws an eye of its own into every password field, which
+     would stand beside this one. */
+  .glim-secret {
+    position: relative;
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+  .glim-secret > .glim-input { padding-inline-end: 2.4rem; }
+  .glim-secret > .glim-input::-ms-reveal { display: none; }
+  .glim-secret-eye {
+    position: absolute;
+    inset-inline-end: 0.35rem;
+    top: 50%;
+    translate: 0 -50%;
+    display: grid;
+    place-items: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: var(--radius-control);
+    color: var(--carbon-text-muted);
+    cursor: pointer;
+  }
+  .glim-secret-eye:hover { color: var(--carbon-text); }
+  .glim-secret-eye > svg {
+    width: 0.95rem;
+    height: 0.95rem;
+  }
+
+  /* A value to copy (CopyField): the value in monospace, read-only so it can
+     still be selected and scrolled, and its button beside it. */
+  .glim-copy {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+    min-width: 0;
+  }
+  .glim-copy > .glim-input { flex: 1; }
+
+  /* Words for a screen reader alone, such as the "Copied" a copy button
+     announces. */
+  .glim-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* The meter (Meter): a level on the third surface, thin beside a row's name
+     or as wide as its column. At its threshold the fill turns to the fault
+     colour. In the active row of a rail it takes the row's contrast ink, as
+     the row's count does. */
+  .glim-meter-track {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    background-color: var(--carbon-surface3);
+  }
+  .glim-meter-track--small {
+    display: inline-block;
+    flex: none;
+    width: 2.6rem;
+    height: 0.35rem;
+    vertical-align: middle;
+  }
+  .glim-meter-track--medium {
+    width: 100%;
+    height: 0.55rem;
+  }
+  .glim-meter-fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--accent);
+  }
+  /* The quiet meter: slim and grey, for a footer line or a dense list, where
+     an accent bar on every row would outshout the names beside it. Inside a
+     button it takes the accent when the button is reached, as the button's
+     own glyph does (rule 40). The threshold still turns it red. */
+  .glim-meter-track--quiet {
+    height: 0.35rem;
+    background-color: var(--carbon-surface2);
+  }
+  .glim-meter-track--quiet > .glim-meter-fill { background-color: var(--carbon-text-muted); }
+  :is(button, a):is(:hover, :focus-visible) .glim-meter-track--quiet:not(.glim-meter-track--full) > .glim-meter-fill {
+    background-color: var(--accent);
+  }
+  .glim-meter-track--full .glim-meter-fill { background-color: var(--status-fail-solid); }
+  .glim-active .glim-meter-track { background-color: color-mix(in srgb, var(--accent-contrast) 22%, transparent); }
+  .glim-active .glim-meter-fill { background-color: var(--accent-contrast); }
+
+  /* The progress bar (ProgressBar): a thicker track whose fill carries a
+     sheen while the work runs. Paused takes the waiting tone and a failure
+     the fault colour (rule 4). */
+  .glim-progress {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 0.6rem;
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    background-color: var(--carbon-surface3);
+  }
+  .glim-progress-fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    background-color: var(--accent);
+  }
+  .glim-progress-fill::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.45) 50%, transparent 80%);
+    translate: -100% 0;
+  }
+  .glim-progress--paused .glim-progress-fill { background-color: var(--status-neutral-solid); }
+  .glim-progress--failed .glim-progress-fill { background-color: var(--status-fail-solid); }
+
+  /* Without a value the track shows stripes, which no value could be
+     mistaken for. A progress bar swaps them for a light that crosses the
+     track, set up in the motion gate. */
+  :is(.glim-meter-track--busy, .glim-progress--busy) > :is(.glim-meter-fill, .glim-progress-fill) {
+    position: absolute;
+    inset-block: 0;
+    left: 0;
+    width: 100%;
+    background: repeating-linear-gradient(-45deg, var(--accent) 0 4px, transparent 4px 8px);
+    opacity: 0.5;
+  }
+  .glim-meter-track--quiet.glim-meter-track--busy > .glim-meter-fill {
+    background: repeating-linear-gradient(-45deg, var(--carbon-text-muted) 0 4px, transparent 4px 8px);
+  }
+}
+
+/* Outside the layer, or the house ring's offset would win: inside a menu the
+   ring is drawn on the row, where the menu's edge cannot clip it. */
+.glim-menu-item:focus-visible,
+.glim-menu-head-edit:focus-visible { outline-offset: -2px; }
+.glim-menu[data-pointer] :focus-visible { outline: none; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .glim-checkbox-box { transition: background-color var(--motion-control-dur) ease; }
 }