Mercurial

comparison design_system/src/styles/components.css @ 252:7a7581f040e8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add scoped notification component Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 11:57:16 -0700
parents 117c4d53c9a4
children fdf3816959cb
comparison
equal deleted inserted replaced
251:117c4d53c9a4 252:7a7581f040e8
1 :where(zen-button, zen-card, zen-alert, zen-field, zen-stack) { 1 :where(
2 zen-button,
3 zen-card,
4 zen-alert,
5 zen-field,
6 zen-stack,
7 zen-notifications
8 ) {
2 box-sizing: border-box; 9 box-sizing: border-box;
3 font-family: var(--zen-font-sans); 10 font-family: var(--zen-font-sans);
4 color: var(--zen-color-text); 11 color: var(--zen-color-text);
5 } 12 }
6 13
196 } 203 }
197 204
198 zen-stack[gap="tight"] { --zen-stack-gap: var(--zen-space-2); } 205 zen-stack[gap="tight"] { --zen-stack-gap: var(--zen-space-2); }
199 zen-stack[gap="loose"] { --zen-stack-gap: var(--zen-space-6); } 206 zen-stack[gap="loose"] { --zen-stack-gap: var(--zen-space-6); }
200 207
208 zen-notifications > [data-zen-notification-stack] {
209 position: fixed;
210 z-index: var(--zen-notification-z-index, 1000);
211 inset-inline-end: var(--zen-notification-inset, var(--zen-space-4));
212 inset-block-end: var(
213 --zen-notification-bottom-inset,
214 var(--zen-space-4)
215 );
216 display: grid;
217 inline-size: min(24rem, calc(100vi - 2rem));
218 gap: var(--zen-space-3);
219 pointer-events: none;
220 }
221
222 zen-notifications > [data-zen-notification-stack] > article {
223 display: grid;
224 grid-template-columns: 1.75rem minmax(0, 1fr) 2rem;
225 align-items: start;
226 gap: var(--zen-space-3);
227 padding: var(--zen-space-4);
228 border: var(--zen-border-width) solid var(--zen-color-border);
229 border-radius: var(--zen-radius-lg);
230 box-shadow: var(--zen-shadow-md);
231 background: var(--zen-color-surface-raised);
232 color: var(--zen-color-text);
233 pointer-events: auto;
234 animation: zen-notification-enter 160ms ease-out;
235 }
236
237 .zen-notification-tone {
238 display: grid;
239 width: 1.75rem;
240 height: 1.75rem;
241 place-items: center;
242 border-radius: 50%;
243 background: var(--zen-color-info);
244 color: var(--zen-color-on-info);
245 font-weight: 900;
246 }
247
248 [data-tone="success"] > .zen-notification-tone {
249 background: var(--zen-color-success);
250 color: var(--zen-color-on-success);
251 }
252
253 [data-tone="warning"] > .zen-notification-tone {
254 background: var(--zen-color-warning);
255 color: var(--zen-color-on-warning);
256 }
257
258 [data-tone="error"] > .zen-notification-tone {
259 background: var(--zen-color-danger);
260 color: var(--zen-color-on-danger);
261 }
262
263 .zen-notification-content {
264 display: grid;
265 gap: var(--zen-space-1);
266 }
267
268 .zen-notification-message,
269 .zen-notification-description {
270 margin: 0;
271 }
272
273 .zen-notification-message {
274 font-weight: 800;
275 }
276
277 .zen-notification-description {
278 color: var(--zen-color-text-muted);
279 font-size: var(--zen-font-size-sm);
280 }
281
282 .zen-notification-action,
283 .zen-notification-dismiss {
284 border: 0;
285 background: transparent;
286 color: inherit;
287 cursor: pointer;
288 }
289
290 .zen-notification-action {
291 justify-self: start;
292 margin-top: var(--zen-space-2);
293 padding: 0;
294 color: var(--zen-color-info);
295 font-weight: 800;
296 text-decoration: underline;
297 text-underline-offset: 0.2em;
298 }
299
300 .zen-notification-dismiss {
301 width: 2rem;
302 height: 2rem;
303 padding: 0;
304 border-radius: 50%;
305 font-size: 1.25rem;
306 }
307
308 .zen-notification-action:focus-visible,
309 .zen-notification-dismiss:focus-visible {
310 outline: 3px solid var(--zen-color-focus);
311 outline-offset: 2px;
312 }
313
314 .zen-visually-hidden {
315 position: absolute;
316 width: 1px;
317 height: 1px;
318 overflow: hidden;
319 clip: rect(0 0 0 0);
320 clip-path: inset(50%);
321 white-space: nowrap;
322 }
323
324 @keyframes zen-notification-enter {
325 from {
326 opacity: 0;
327 transform: translateY(0.75rem);
328 }
329 }
330
331 @media (forced-colors: active) {
332 zen-notifications > [data-zen-notification-stack] > article,
333 .zen-notification-tone {
334 border: 1px solid CanvasText;
335 }
336 }
337
201 @media (prefers-reduced-motion: reduce) { 338 @media (prefers-reduced-motion: reduce) {
202 zen-button > :where(button, a), 339 zen-button > :where(button, a),
203 zen-card > :where(article, section) { 340 zen-card > :where(article, section) {
204 transition: none; 341 transition: none;
205 } 342 }
206 343
207 zen-button[loading] > :where(button, a)::before { 344 zen-button[loading] > :where(button, a)::before {
208 animation-duration: 1400ms; 345 animation-duration: 1400ms;
209 } 346 }
210 } 347
348 zen-notifications > [data-zen-notification-stack] > article {
349 animation: none;
350 }
351 }