diff --git a/client.js b/client.js index 2fcf058..dc44cb8 100644 --- a/client.js +++ b/client.js @@ -943,16 +943,16 @@ function seatTranslator(props, fallback) { var 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{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:22px;animation:dsn-toast-in var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-out)} +.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:22px;color:var(--dsw-alias-state-warn-label)} +.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:22px} +.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} +.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} diff --git a/src/client/ui/styles.js b/src/client/ui/styles.js index c041398..6ed8001 100644 --- a/src/client/ui/styles.js +++ b/src/client/ui/styles.js @@ -12,6 +12,14 @@ * 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 @@ -22,8 +30,8 @@ * 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 both invariants: - * tokens only, and no theme-fixed color. + * 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 */ @@ -31,16 +39,16 @@ 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{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:22px;animation:dsn-toast-in var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-out)} +.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:22px;color:var(--dsw-alias-state-warn-label)} +.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:22px} +.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} +.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}