100 lines
9.1 KiB
JavaScript
100 lines
9.1 KiB
JavaScript
/**
|
|
* Every style declaration this package owns.
|
|
*
|
|
* Both surfaces are built out of the theme's own vocabulary and nothing else, so
|
|
* they follow the shell's light and dark modes without a branch of their own (the
|
|
* theme swaps every `--dsw-alias-*` under `body[data-ds-dark-theme]`):
|
|
*
|
|
* - The popup is a floating card, using the same recipe the shipped menus and
|
|
* modals use — `--dsw-alias-bg-layer-2` as the surface, the
|
|
* `--dsw-elevation-stroke-color` / `--dsw-elevation-prominent` pair for its
|
|
* hairline and shadow, `--dsw-alias-label-*` for text, and the shell's motion
|
|
* tokens. It deliberately does NOT use `--dsw-alias-toast-bg`, which is a fixed
|
|
* dark slate (#353638 in light mode) and would read as a black slab on a light
|
|
* page.
|
|
* - The popup's first line is ONE band, `--dsn-toast-line`: the state glyph and
|
|
* the title's line box are exactly that tall, and the two controls — 28px, so
|
|
* taller than the band — are centred on it instead of being top-aligned with
|
|
* the card. That is why `.dsn-toast-actions` carries a `height` smaller than its
|
|
* own buttons: with the row's own height the card's `align-items:flex-start`
|
|
* would line the controls' top edge up with the text's, and a 28px control
|
|
* against a 22px line box sits 3px low. Height here is a centre line, not a
|
|
* boundary, and the card's padding absorbs the overflow.
|
|
* - The settings page is a reading order, not a form dump: a lede that says how
|
|
* alerts travel, then one group per concern. Inside a group a title introduces
|
|
* a list whose rows put the subject on the left and the single control on the
|
|
* right, with hairlines only between rows; the status group is a two-column
|
|
* fact list, because four sentences stacked in one cell are not scannable.
|
|
*
|
|
* Class names are renamed under `dsn-`; only the popup glyphs carry their own
|
|
* artwork colors — and those are theme-aware state tokens too.
|
|
*
|
|
* A plugin must not import a Harness Client package, so the declarations are
|
|
* this package's own text. `tests/unit/styles.test.js` holds these invariants:
|
|
* tokens only, no theme-fixed color, and one centre line for the popup's first row.
|
|
*
|
|
* @module @dsh-plugin/session-notify/client/ui/styles
|
|
*/
|
|
|
|
export const CSS = `
|
|
.dsn-stack{position:fixed;top:40px;right:24px;z-index:1100;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
|
|
@media (max-width:520px){.dsn-stack{right:12px}}
|
|
.dsn-toast{--dsn-toast-line:22px;box-sizing:border-box;pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:min(420px,calc(100vw - 48px));padding:12px 12px 12px 16px;border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-bg-layer-2);--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);box-shadow:var(--dsw-elevation-prominent);color:var(--dsw-alias-label-primary);font-size:14px;line-height:var(--dsn-toast-line);animation:dsn-toast-in var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-out)}
|
|
@keyframes dsn-toast-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
|
|
@media (prefers-reduced-motion: reduce){.dsn-toast{animation:none}}
|
|
.dsn-toast-icon{display:grid;place-items:center;flex:none;height:var(--dsn-toast-line);color:var(--dsw-alias-state-warn-label)}
|
|
.dsn-toast-icon.is-completion{color:var(--dsw-alias-state-success-primary)}
|
|
.dsn-toast-icon.is-question{color:var(--dsw-alias-state-business-primary)}
|
|
.dsn-toast-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
|
|
.dsn-toast-title{color:var(--dsw-alias-label-primary);font-weight:500;font-size:14px;line-height:var(--dsn-toast-line)}
|
|
.dsn-toast-desc{color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px;overflow-wrap:break-word}
|
|
.dsn-toast-actions{display:flex;align-items:center;gap:2px;flex:none;height:var(--dsn-toast-line)}
|
|
.dsn-toast-action{display:inline-flex;align-items:center;height:28px;padding:0 8px;border:0;border-radius:var(--dsw-radius-sm);background:none;color:var(--dsw-alias-state-business-primary);font:inherit;font-size:13px;line-height:20px;cursor:pointer}
|
|
.dsn-toast-action:hover{background:var(--dsw-alias-interactive-bg-hover)}
|
|
.dsn-toast-action:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
|
|
.dsn-toast-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer}
|
|
.dsn-toast-close:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
|
|
.dsn-toast-close:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
|
|
.dsn-page{display:flex;flex-direction:column;gap:28px;max-width:560px}
|
|
.dsn-lede{margin:0;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px}
|
|
.dsn-group{display:flex;flex-direction:column;gap:2px}
|
|
.dsn-group-title{margin:0 0 8px;color:var(--dsw-alias-label-primary);font-size:13px;font-weight:600;line-height:20px}
|
|
.dsn-group-note{margin:8px 0 0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
|
|
.dsn-list{display:flex;flex-direction:column}
|
|
.dsn-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
|
|
.dsn-row+.dsn-row{border-top:.5px solid var(--dsw-alias-border-l2)}
|
|
.dsn-row.is-action{justify-content:flex-end;padding:12px 0 0}
|
|
.dsn-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
|
|
.dsn-row-title{color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
|
|
.dsn-chips{display:flex;align-items:center;gap:6px;flex:none}
|
|
.dsn-chip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:46px;padding:0 10px;border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12.5px;line-height:18px;cursor:pointer}
|
|
.dsn-chip:hover:not([aria-checked='true']){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
|
|
.dsn-chip[aria-checked='true']{border-color:transparent;background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-foreground);cursor:default}
|
|
.dsn-chip:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
|
|
.dsn-row-sub{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
|
|
.dsn-state{display:inline-flex;align-items:center;gap:8px;color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
|
|
.dsn-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-state-success-primary)}
|
|
.dsn-dot.is-warn{background:var(--dsw-alias-state-warn-label)}
|
|
.dsn-dot.is-error{background:var(--dsw-alias-state-error-primary)}
|
|
.dsn-dot.is-muted{background:var(--dsw-alias-border-l3)}
|
|
.dsn-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;margin:0;min-width:0}
|
|
.dsn-fact-key{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;white-space:nowrap}
|
|
.dsn-fact{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0}
|
|
.dsn-fact-value{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px;overflow-wrap:anywhere}
|
|
.dsn-fact-value.is-error{color:var(--dsw-alias-state-error-primary)}
|
|
.dsn-fact-title{margin:0;color:var(--dsw-alias-label-primary);font-size:12px;line-height:18px;overflow-wrap:anywhere}
|
|
.dsn-switch{box-sizing:border-box;position:relative;flex:0 0 auto;width:36px;height:20px;padding:2px;border:0;border-radius:999px;background:var(--dsw-alias-border-l3);cursor:pointer}
|
|
.dsn-switch[aria-checked='true']{background:var(--dsw-alias-brand-primary)}
|
|
.dsn-switch:disabled{cursor:default;opacity:.5}
|
|
.dsn-switch:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
|
|
.dsn-thumb{display:block;width:16px;height:16px;border-radius:50%;background:var(--dsw-alias-label-primary-foreground);transition:transform 120ms ease}
|
|
.dsn-switch[aria-checked='false'] .dsn-thumb{background:var(--dsw-alias-switch-thumb)}
|
|
.dsn-switch[aria-checked='true'] .dsn-thumb{transform:translateX(16px)}
|
|
.dsn-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 12px;border:.5px solid var(--dsw-alias-border-l3);border-radius:var(--dsw-radius-md);cursor:pointer;font-size:13px;line-height:20px;color:var(--dsw-alias-label-primary);background:transparent;flex:none}
|
|
.dsn-button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
|
|
.dsn-button:disabled{cursor:not-allowed;opacity:.4}
|
|
.dsn-button:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
|
|
.dsn-button.is-primary{border-color:transparent;background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary-foreground)}
|
|
.dsn-button.is-primary:hover:not(:disabled){background:var(--dsw-alias-brand-primary);opacity:.88}
|
|
`
|