@triptease/stylesheet 1.4.10 → 1.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/base.css +226 -220
  2. package/dist/blocks.css +3 -3
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/triptease.css +227 -221
  6. package/dist/utilities.css +1 -1
  7. package/package.json +1 -1
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v1.4.11
3
3
  */
4
4
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
5
5
  @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -285,256 +285,262 @@ button {
285
285
 
286
286
  button,
287
287
  .button {
288
- -webkit-appearance: none;
289
- -moz-appearance: none;
290
- appearance: none;
291
- cursor: pointer;
292
- position: relative;
293
- height: -moz-max-content;
294
- height: max-content;
295
- font-size: var(--font-size-200);
296
- font-weight: var(--font-weight-semibold);
297
- line-height: var(--space-scale-3);
298
- padding: var(--space-scale-1) var(--space-scale-1-5);
299
- border-radius: var(--border-radius-100);
300
- border: none;
301
- outline: none;
302
- transition: background-color 0.3s ease,
288
+ -webkit-appearance: none;
289
+ -moz-appearance: none;
290
+ appearance: none;
291
+ cursor: pointer;
292
+ position: relative;
293
+ height: -moz-max-content;
294
+ height: max-content;
295
+ font-size: var(--font-size-200);
296
+ font-weight: var(--font-weight-semibold);
297
+ line-height: var(--space-scale-3);
298
+ padding: var(--space-scale-1) var(--space-scale-1-5);
299
+ border-radius: var(--border-radius-100);
300
+ border: none;
301
+ outline: none;
302
+ transition:
303
+ background-color 0.3s ease,
303
304
  box-shadow 0.3s ease;
304
- background-color: transparent;
305
- color: var(--color-text-500);
306
- width: -moz-fit-content;
307
- width: fit-content;
308
- display: flex;
309
- flex-direction: row;
310
- align-items: center;
311
- justify-content: center;
312
- gap: var(--space-scale-1);
313
-
314
- &:is([disabled], [aria-disabled='true']) {
315
- cursor: not-allowed;
316
- }
305
+ background-color: transparent;
306
+ color: var(--color-text-500);
307
+ width: -moz-fit-content;
308
+ width: fit-content;
309
+ display: flex;
310
+ flex-direction: row;
311
+ align-items: center;
312
+ justify-content: center;
313
+ gap: var(--space-scale-1);
314
+
315
+ &:is([disabled], [aria-disabled='true']) {
316
+ cursor: not-allowed;
317
+ }
317
318
 
318
- &:focus {
319
- outline: none;
319
+ &:focus {
320
+ outline: none;
321
+ }
322
+
323
+ &:focus-visible {
324
+ outline: 4px solid rgba(1, 150, 237, 0.24);
325
+ outline-offset: 0;
326
+ }
327
+
328
+ &[data-theme='primary'] {
329
+ background-color: var(--color-primary-400);
330
+ color: var(--color-text-100);
331
+ border: 1px solid var(--color-primary-500);
332
+ box-shadow:
333
+ inset 0 -2px 2px 0 var(--color-primary-400),
334
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
335
+ 0 1px 2px rgba(94, 66, 194, 0.2);
336
+
337
+ &:hover:not(:disabled):not([aria-disabled='true']) {
338
+ background-color: var(--color-primary-500);
320
339
  }
321
340
 
322
- &:focus-visible {
323
- outline: 4px solid rgba(1, 150, 237, 0.24);
324
- outline-offset: 0;
341
+ &:disabled {
342
+ background-color: var(--color-primary-300);
343
+ box-shadow: none;
344
+ border-color: var(--color-primary-300);
325
345
  }
326
346
 
327
- &[data-theme='primary'] {
328
- background-color: var(--color-primary-400);
329
- color: var(--color-text-100);
330
- border: 1px solid var(--color-primary-500);
331
- box-shadow: inset 0 -2px 2px 0 var(--color-primary-400),
332
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
333
- 0 1px 2px rgba(94, 66, 194, 0.2);
334
-
335
- &:hover:not(:disabled):not([aria-disabled='true']) {
336
- background-color: var(--color-primary-500);
337
- }
338
-
339
- &:disabled {
340
- background-color: var(--color-primary-300);
341
- box-shadow: none;
342
- border-color: var(--color-primary-300);
343
- }
344
-
345
- &[data-loading='true'] {
346
- background-color: var(--color-primary-300);
347
- box-shadow: none;
348
- border-color: var(--color-primary-200);
349
- }
347
+ &[data-loading='true'] {
348
+ background-color: var(--color-primary-300);
349
+ box-shadow: none;
350
+ border-color: var(--color-primary-200);
350
351
  }
352
+ }
351
353
 
352
- &[data-theme='secondary'] {
353
- background-color: var(--color-surface-200);
354
- color: var(--color-primary-400);
355
- border: 1px solid var(--color-primary-400);
356
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
357
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
358
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
359
-
360
- &:hover:not(:disabled):not([aria-disabled='true']) {
361
- color: var(--color-primary-500);
362
- border: 1px solid var(--color-primary-500);
363
- }
364
-
365
- &:disabled {
366
- box-shadow: none;
367
- border-color: var(--color-primary-300);
368
- color: var(--color-primary-300);
369
- }
370
-
371
- &[data-loading='true'] {
372
- border-color: var(--color-primary-300);
373
- box-shadow: none;
374
- }
354
+ &[data-theme='secondary'] {
355
+ background-color: var(--color-surface-200);
356
+ color: var(--color-primary-400);
357
+ border: 1px solid var(--color-primary-400);
358
+ box-shadow:
359
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
360
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
361
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
362
+
363
+ &:hover:not(:disabled):not([aria-disabled='true']) {
364
+ color: var(--color-primary-500);
365
+ border: 1px solid var(--color-primary-500);
375
366
  }
376
367
 
377
- &[data-theme='suggestion'] {
378
- padding: var(--space-scale-1) var(--space-scale-2);
379
- background-color: var(--color-surface-200);
380
- color: var(--color-primary-400);
381
- border: 1px solid var(--color-primary-400);
382
- line-height: var(--space-scale-2);
383
- font-weight: var(--font-weight-normal);
384
- font-size: var(--font-size-100);
385
- border-radius: var(--border-radius-200);
386
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
387
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
388
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
389
-
390
- &:hover:not(:disabled):not([aria-disabled='true']) {
391
- background-color: var(--color-surface-300);
392
- }
368
+ &:disabled {
369
+ box-shadow: none;
370
+ border-color: var(--color-primary-300);
371
+ color: var(--color-primary-300);
393
372
  }
394
373
 
395
- &[data-theme='tertiary'] {
396
- color: var(--color-primary-400);
374
+ &[data-loading='true'] {
375
+ border-color: var(--color-primary-300);
376
+ box-shadow: none;
377
+ }
378
+ }
397
379
 
398
- &:disabled {
399
- box-shadow: none;
400
- color: var(--color-primary-300);
401
- }
380
+ &[data-theme='suggestion'] {
381
+ padding: var(--space-scale-1) var(--space-scale-2);
382
+ background-color: var(--color-surface-200);
383
+ color: var(--color-primary-400);
384
+ border: 1px solid var(--color-primary-400);
385
+ line-height: var(--space-scale-2);
386
+ font-weight: var(--font-weight-normal);
387
+ font-size: var(--font-size-100);
388
+ border-radius: var(--border-radius-200);
389
+ box-shadow:
390
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
391
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
392
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
393
+
394
+ &:hover:not(:disabled):not([aria-disabled='true']) {
395
+ background-color: var(--color-surface-300);
396
+ }
397
+ }
402
398
 
403
- &:hover:not(:disabled):not([aria-disabled='true']) {
404
- background-color: var(--color-primary-100);
405
- color: var(--color-primary-500);
406
- }
399
+ &[data-theme='tertiary'] {
400
+ color: var(--color-primary-400);
407
401
 
408
- &[data-loading='true'] {
409
- box-shadow: none;
410
- }
402
+ &:disabled {
403
+ box-shadow: none;
404
+ color: var(--color-primary-300);
411
405
  }
412
406
 
413
- &[data-theme='destructive-primary'] {
414
- --color-disabled: #890000;
415
-
416
- background-color: var(--color-alert-strong);
417
- color: var(--color-text-100);
418
- border: 1px solid var(--color-alert-strong);
419
- box-shadow: inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
420
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
421
- 0 1px 2px rgba(60, 66, 87, 0.08);
422
-
423
- &:hover:not(:disabled):not([aria-disabled='true']) {
424
- background-color: --color-disabled;
425
- }
426
-
427
- &:disabled {
428
- background-color: var(--color-alert-subtle);
429
- box-shadow: none;
430
- border-color: var(--color-alert-subtle);
431
- }
432
-
433
- &[data-loading='true'] {
434
- background-color: var(--color-alert-subtle);
435
- box-shadow: none;
436
- border-color: var(--color-alert-subtle);
437
-
438
- &::after {
439
- background-color: var(--color-surface-100);
440
- }
441
- }
407
+ &:hover:not(:disabled):not([aria-disabled='true']) {
408
+ background-color: var(--color-primary-100);
409
+ color: var(--color-primary-500);
442
410
  }
443
411
 
444
- &[data-theme='destructive-secondary'] {
445
- background-color: var(--color-surface-200);
446
- color: var(--color-alert-strong);
447
- border: 1px solid var(--color-alert-strong);
448
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
449
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
450
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
451
-
452
- &:hover:not(:disabled):not([aria-disabled='true']) {
453
- border-color: --color-disabled;
454
- color: --color-disabled;
455
- }
456
-
457
- &:disabled {
458
- box-shadow: none;
459
- border-color: var(--color-alert-subtle);
460
- color: var(--color-alert-subtle);
461
- }
462
-
463
- &[data-loading='true'] {
464
- box-shadow: none;
465
-
466
- &::after {
467
- background-color: var(--color-alert-strong);
468
- }
469
- }
412
+ &[data-loading='true'] {
413
+ box-shadow: none;
470
414
  }
415
+ }
471
416
 
472
- &[data-theme='destructive-tertiary'] {
473
- color: var(--color-alert-strong);
417
+ &[data-theme='destructive-primary'] {
418
+ --color-disabled: #890000;
474
419
 
475
- &:disabled {
476
- box-shadow: none;
477
- color: var(--color-alert-subtle);
478
- }
420
+ background-color: var(--color-alert-strong);
421
+ color: var(--color-text-100);
422
+ border: 1px solid var(--color-alert-strong);
423
+ box-shadow:
424
+ inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
425
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
426
+ 0 1px 2px rgba(60, 66, 87, 0.08);
479
427
 
480
- &:hover:not(:disabled):not([aria-disabled='true']) {
481
- background-color: --color-disabled;
482
- color: --color-disabled;
483
- }
428
+ &:hover:not(:disabled):not([aria-disabled='true']) {
429
+ background-color: --color-disabled;
430
+ }
431
+
432
+ &:disabled {
433
+ background-color: var(--color-alert-subtle);
434
+ box-shadow: none;
435
+ border-color: var(--color-alert-subtle);
436
+ }
484
437
 
485
- &[data-loading='true'] {
486
- box-shadow: none;
438
+ &[data-loading='true'] {
439
+ background-color: var(--color-alert-subtle);
440
+ box-shadow: none;
441
+ border-color: var(--color-alert-subtle);
487
442
 
488
- &::after {
489
- background-color: var(--color-alert-strong);
490
- }
491
- }
443
+ &::after {
444
+ background-color: var(--color-surface-100);
445
+ }
492
446
  }
447
+ }
493
448
 
494
- &.small {
495
- padding: var(--space-scale-0-5) var(--space-scale-1);
449
+ &[data-theme='destructive-secondary'] {
450
+ background-color: var(--color-surface-200);
451
+ color: var(--color-alert-strong);
452
+ border: 1px solid var(--color-alert-strong);
453
+ box-shadow:
454
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
455
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
456
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
457
+
458
+ &:hover:not(:disabled):not([aria-disabled='true']) {
459
+ border-color: --color-disabled;
460
+ color: --color-disabled;
496
461
  }
497
462
 
498
- &.large {
499
- padding: var(--space-scale-1-5) var(--space-scale-2);
463
+ &:disabled {
464
+ box-shadow: none;
465
+ border-color: var(--color-alert-subtle);
466
+ color: var(--color-alert-subtle);
500
467
  }
501
468
 
502
469
  &[data-loading='true'] {
503
- position: relative;
504
- color: transparent !important;
505
- pointer-events: none;
506
- cursor: not-allowed;
507
- -webkit-user-select: none;
508
- -moz-user-select: none;
509
- user-select: none;
470
+ box-shadow: none;
471
+
472
+ &::after {
473
+ background-color: var(--color-alert-strong);
474
+ }
510
475
  }
476
+ }
511
477
 
512
- /*Spinner magic*/
513
-
514
- &[data-loading='true']::after {
515
- content: '';
516
- position: absolute;
517
- top: calc(50% - 10px);
518
- left: calc(50% - 10px);
519
- width: 20px;
520
- height: 20px;
521
- transform: translate(-50%, -50%);
522
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
523
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
524
- mask-size: contain;
525
- -webkit-mask-size: contain;
526
- background-color: var(--color-primary-400);
527
- animation: spin-animation 1s infinite linear;
478
+ &[data-theme='destructive-tertiary'] {
479
+ color: var(--color-alert-strong);
480
+
481
+ &:disabled {
482
+ box-shadow: none;
483
+ color: var(--color-alert-subtle);
528
484
  }
529
- }
530
485
 
531
- @keyframes spin-animation {
532
- from {
533
- transform: rotate(0turn);
486
+ &:hover:not(:disabled):not([aria-disabled='true']) {
487
+ background-color: --color-disabled;
488
+ color: --color-disabled;
534
489
  }
535
- to {
536
- transform: rotate(1turn);
490
+
491
+ &[data-loading='true'] {
492
+ box-shadow: none;
493
+
494
+ &::after {
495
+ background-color: var(--color-alert-strong);
496
+ }
537
497
  }
498
+ }
499
+
500
+ &.small {
501
+ padding: var(--space-scale-0-5) var(--space-scale-1);
502
+ }
503
+
504
+ &.large {
505
+ padding: var(--space-scale-1-5) var(--space-scale-2);
506
+ }
507
+
508
+ &[data-loading='true'] {
509
+ position: relative;
510
+ color: transparent !important;
511
+ pointer-events: none;
512
+ cursor: not-allowed;
513
+ -webkit-user-select: none;
514
+ -moz-user-select: none;
515
+ user-select: none;
516
+ }
517
+
518
+ /*Spinner magic*/
519
+
520
+ &[data-loading='true']::after {
521
+ content: '';
522
+ position: absolute;
523
+ top: calc(50% - 10px);
524
+ left: calc(50% - 10px);
525
+ width: 20px;
526
+ height: 20px;
527
+ transform: translate(-50%, -50%);
528
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
529
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
530
+ mask-size: contain;
531
+ -webkit-mask-size: contain;
532
+ background-color: var(--color-primary-400);
533
+ animation: spin-animation 1s infinite linear;
534
+ }
535
+ }
536
+
537
+ @keyframes spin-animation {
538
+ from {
539
+ transform: rotate(0turn);
540
+ }
541
+ to {
542
+ transform: rotate(1turn);
543
+ }
538
544
  }
539
545
  }
540
546
  @layer base{
@@ -618,8 +624,8 @@ input[type='checkbox'] {
618
624
  &[aria-invalid]:not([aria-invalid='false']),
619
625
  &:user-invalid,
620
626
  &[aria-invalid='true'] {
621
- accent-color: var(--color-alert-400);
622
- outline: 1px solid var(--color-alert-400);
627
+ accent-color: var(--color-alert-strong);
628
+ outline: 1px solid var(--color-alert-strong);
623
629
  outline-offset: -1px;
624
630
  }
625
631
  }
@@ -727,7 +733,7 @@ input[type='checkbox'][data-theme='toggle'],
727
733
 
728
734
  &[aria-invalid]:not([aria-invalid='false']),
729
735
  &:user-invalid {
730
- accent-color: var(--color-alert-400);
736
+ accent-color: var(--color-alert-strong);
731
737
  }
732
738
  }
733
739
  }
@@ -967,8 +973,8 @@ textarea {
967
973
 
968
974
  &[aria-invalid]:not([aria-invalid='false']),
969
975
  &:user-invalid {
970
- --input-border-color: var(--color-alert-400);
971
- --input-focus-border-color: var(--color-alert-400);
976
+ --input-border-color: var(--color-alert-strong);
977
+ --input-focus-border-color: var(--color-alert-strong);
972
978
  }
973
979
  }
974
980
  }
@@ -1046,11 +1052,11 @@ a {
1046
1052
 
1047
1053
  .text-error,
1048
1054
  .text-danger {
1049
- color: var(--color-alert-400);
1055
+ color: var(--color-alert-strong);
1050
1056
  }
1051
1057
 
1052
1058
  .text-success {
1053
- color: var(--color-success-500);
1059
+ color: var(--color-success-strong);
1054
1060
  }
1055
1061
 
1056
1062
  body {
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v1.4.11
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -292,8 +292,8 @@ header[data-theme='top-nav'] {
292
292
  height: fit-content;
293
293
 
294
294
  &[data-status='warning'] {
295
- --tag-background-color: var(--color-warning-100);
296
- --tag-color: var(--color-warning-400);
295
+ --tag-background-color: var(--color-warning-subtle);
296
+ --tag-color: var(--color-warning-strong);
297
297
  }
298
298
  }
299
299
  }
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v1.4.11
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/exceptions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v1.4.11
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/triptease.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v1.4.11
3
3
  */
4
4
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
5
5
  @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -285,256 +285,262 @@ button {
285
285
 
286
286
  button,
287
287
  .button {
288
- -webkit-appearance: none;
289
- -moz-appearance: none;
290
- appearance: none;
291
- cursor: pointer;
292
- position: relative;
293
- height: -moz-max-content;
294
- height: max-content;
295
- font-size: var(--font-size-200);
296
- font-weight: var(--font-weight-semibold);
297
- line-height: var(--space-scale-3);
298
- padding: var(--space-scale-1) var(--space-scale-1-5);
299
- border-radius: var(--border-radius-100);
300
- border: none;
301
- outline: none;
302
- transition: background-color 0.3s ease,
288
+ -webkit-appearance: none;
289
+ -moz-appearance: none;
290
+ appearance: none;
291
+ cursor: pointer;
292
+ position: relative;
293
+ height: -moz-max-content;
294
+ height: max-content;
295
+ font-size: var(--font-size-200);
296
+ font-weight: var(--font-weight-semibold);
297
+ line-height: var(--space-scale-3);
298
+ padding: var(--space-scale-1) var(--space-scale-1-5);
299
+ border-radius: var(--border-radius-100);
300
+ border: none;
301
+ outline: none;
302
+ transition:
303
+ background-color 0.3s ease,
303
304
  box-shadow 0.3s ease;
304
- background-color: transparent;
305
- color: var(--color-text-500);
306
- width: -moz-fit-content;
307
- width: fit-content;
308
- display: flex;
309
- flex-direction: row;
310
- align-items: center;
311
- justify-content: center;
312
- gap: var(--space-scale-1);
305
+ background-color: transparent;
306
+ color: var(--color-text-500);
307
+ width: -moz-fit-content;
308
+ width: fit-content;
309
+ display: flex;
310
+ flex-direction: row;
311
+ align-items: center;
312
+ justify-content: center;
313
+ gap: var(--space-scale-1);
313
314
 
314
- &:is([disabled], [aria-disabled='true']) {
315
- cursor: not-allowed;
316
- }
315
+ &:is([disabled], [aria-disabled='true']) {
316
+ cursor: not-allowed;
317
+ }
318
+
319
+ &:focus {
320
+ outline: none;
321
+ }
317
322
 
318
- &:focus {
319
- outline: none;
323
+ &:focus-visible {
324
+ outline: 4px solid rgba(1, 150, 237, 0.24);
325
+ outline-offset: 0;
326
+ }
327
+
328
+ &[data-theme='primary'] {
329
+ background-color: var(--color-primary-400);
330
+ color: var(--color-text-100);
331
+ border: 1px solid var(--color-primary-500);
332
+ box-shadow:
333
+ inset 0 -2px 2px 0 var(--color-primary-400),
334
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
335
+ 0 1px 2px rgba(94, 66, 194, 0.2);
336
+
337
+ &:hover:not(:disabled):not([aria-disabled='true']) {
338
+ background-color: var(--color-primary-500);
320
339
  }
321
340
 
322
- &:focus-visible {
323
- outline: 4px solid rgba(1, 150, 237, 0.24);
324
- outline-offset: 0;
341
+ &:disabled {
342
+ background-color: var(--color-primary-300);
343
+ box-shadow: none;
344
+ border-color: var(--color-primary-300);
325
345
  }
326
346
 
327
- &[data-theme='primary'] {
328
- background-color: var(--color-primary-400);
329
- color: var(--color-text-100);
330
- border: 1px solid var(--color-primary-500);
331
- box-shadow: inset 0 -2px 2px 0 var(--color-primary-400),
332
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
333
- 0 1px 2px rgba(94, 66, 194, 0.2);
334
-
335
- &:hover:not(:disabled):not([aria-disabled='true']) {
336
- background-color: var(--color-primary-500);
337
- }
338
-
339
- &:disabled {
340
- background-color: var(--color-primary-300);
341
- box-shadow: none;
342
- border-color: var(--color-primary-300);
343
- }
344
-
345
- &[data-loading='true'] {
346
- background-color: var(--color-primary-300);
347
- box-shadow: none;
348
- border-color: var(--color-primary-200);
349
- }
347
+ &[data-loading='true'] {
348
+ background-color: var(--color-primary-300);
349
+ box-shadow: none;
350
+ border-color: var(--color-primary-200);
350
351
  }
352
+ }
351
353
 
352
- &[data-theme='secondary'] {
353
- background-color: var(--color-surface-200);
354
- color: var(--color-primary-400);
355
- border: 1px solid var(--color-primary-400);
356
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
357
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
358
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
359
-
360
- &:hover:not(:disabled):not([aria-disabled='true']) {
361
- color: var(--color-primary-500);
362
- border: 1px solid var(--color-primary-500);
363
- }
364
-
365
- &:disabled {
366
- box-shadow: none;
367
- border-color: var(--color-primary-300);
368
- color: var(--color-primary-300);
369
- }
370
-
371
- &[data-loading='true'] {
372
- border-color: var(--color-primary-300);
373
- box-shadow: none;
374
- }
354
+ &[data-theme='secondary'] {
355
+ background-color: var(--color-surface-200);
356
+ color: var(--color-primary-400);
357
+ border: 1px solid var(--color-primary-400);
358
+ box-shadow:
359
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
360
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
361
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
362
+
363
+ &:hover:not(:disabled):not([aria-disabled='true']) {
364
+ color: var(--color-primary-500);
365
+ border: 1px solid var(--color-primary-500);
375
366
  }
376
367
 
377
- &[data-theme='suggestion'] {
378
- padding: var(--space-scale-1) var(--space-scale-2);
379
- background-color: var(--color-surface-200);
380
- color: var(--color-primary-400);
381
- border: 1px solid var(--color-primary-400);
382
- line-height: var(--space-scale-2);
383
- font-weight: var(--font-weight-normal);
384
- font-size: var(--font-size-100);
385
- border-radius: var(--border-radius-200);
386
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
387
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
388
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
389
-
390
- &:hover:not(:disabled):not([aria-disabled='true']) {
391
- background-color: var(--color-surface-300);
392
- }
368
+ &:disabled {
369
+ box-shadow: none;
370
+ border-color: var(--color-primary-300);
371
+ color: var(--color-primary-300);
393
372
  }
394
373
 
395
- &[data-theme='tertiary'] {
396
- color: var(--color-primary-400);
374
+ &[data-loading='true'] {
375
+ border-color: var(--color-primary-300);
376
+ box-shadow: none;
377
+ }
378
+ }
397
379
 
398
- &:disabled {
399
- box-shadow: none;
400
- color: var(--color-primary-300);
401
- }
380
+ &[data-theme='suggestion'] {
381
+ padding: var(--space-scale-1) var(--space-scale-2);
382
+ background-color: var(--color-surface-200);
383
+ color: var(--color-primary-400);
384
+ border: 1px solid var(--color-primary-400);
385
+ line-height: var(--space-scale-2);
386
+ font-weight: var(--font-weight-normal);
387
+ font-size: var(--font-size-100);
388
+ border-radius: var(--border-radius-200);
389
+ box-shadow:
390
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
391
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
392
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
393
+
394
+ &:hover:not(:disabled):not([aria-disabled='true']) {
395
+ background-color: var(--color-surface-300);
396
+ }
397
+ }
402
398
 
403
- &:hover:not(:disabled):not([aria-disabled='true']) {
404
- background-color: var(--color-primary-100);
405
- color: var(--color-primary-500);
406
- }
399
+ &[data-theme='tertiary'] {
400
+ color: var(--color-primary-400);
407
401
 
408
- &[data-loading='true'] {
409
- box-shadow: none;
410
- }
402
+ &:disabled {
403
+ box-shadow: none;
404
+ color: var(--color-primary-300);
411
405
  }
412
406
 
413
- &[data-theme='destructive-primary'] {
414
- --color-disabled: #890000;
415
-
416
- background-color: var(--color-alert-strong);
417
- color: var(--color-text-100);
418
- border: 1px solid var(--color-alert-strong);
419
- box-shadow: inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
420
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
421
- 0 1px 2px rgba(60, 66, 87, 0.08);
422
-
423
- &:hover:not(:disabled):not([aria-disabled='true']) {
424
- background-color: --color-disabled;
425
- }
426
-
427
- &:disabled {
428
- background-color: var(--color-alert-subtle);
429
- box-shadow: none;
430
- border-color: var(--color-alert-subtle);
431
- }
432
-
433
- &[data-loading='true'] {
434
- background-color: var(--color-alert-subtle);
435
- box-shadow: none;
436
- border-color: var(--color-alert-subtle);
437
-
438
- &::after {
439
- background-color: var(--color-surface-100);
440
- }
441
- }
407
+ &:hover:not(:disabled):not([aria-disabled='true']) {
408
+ background-color: var(--color-primary-100);
409
+ color: var(--color-primary-500);
442
410
  }
443
411
 
444
- &[data-theme='destructive-secondary'] {
445
- background-color: var(--color-surface-200);
446
- color: var(--color-alert-strong);
447
- border: 1px solid var(--color-alert-strong);
448
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
449
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
450
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
451
-
452
- &:hover:not(:disabled):not([aria-disabled='true']) {
453
- border-color: --color-disabled;
454
- color: --color-disabled;
455
- }
456
-
457
- &:disabled {
458
- box-shadow: none;
459
- border-color: var(--color-alert-subtle);
460
- color: var(--color-alert-subtle);
461
- }
462
-
463
- &[data-loading='true'] {
464
- box-shadow: none;
465
-
466
- &::after {
467
- background-color: var(--color-alert-strong);
468
- }
469
- }
412
+ &[data-loading='true'] {
413
+ box-shadow: none;
470
414
  }
415
+ }
416
+
417
+ &[data-theme='destructive-primary'] {
418
+ --color-disabled: #890000;
471
419
 
472
- &[data-theme='destructive-tertiary'] {
473
- color: var(--color-alert-strong);
420
+ background-color: var(--color-alert-strong);
421
+ color: var(--color-text-100);
422
+ border: 1px solid var(--color-alert-strong);
423
+ box-shadow:
424
+ inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
425
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
426
+ 0 1px 2px rgba(60, 66, 87, 0.08);
474
427
 
475
- &:disabled {
476
- box-shadow: none;
477
- color: var(--color-alert-subtle);
478
- }
428
+ &:hover:not(:disabled):not([aria-disabled='true']) {
429
+ background-color: --color-disabled;
430
+ }
479
431
 
480
- &:hover:not(:disabled):not([aria-disabled='true']) {
481
- background-color: --color-disabled;
482
- color: --color-disabled;
483
- }
432
+ &:disabled {
433
+ background-color: var(--color-alert-subtle);
434
+ box-shadow: none;
435
+ border-color: var(--color-alert-subtle);
436
+ }
484
437
 
485
- &[data-loading='true'] {
486
- box-shadow: none;
438
+ &[data-loading='true'] {
439
+ background-color: var(--color-alert-subtle);
440
+ box-shadow: none;
441
+ border-color: var(--color-alert-subtle);
487
442
 
488
- &::after {
489
- background-color: var(--color-alert-strong);
490
- }
491
- }
443
+ &::after {
444
+ background-color: var(--color-surface-100);
445
+ }
492
446
  }
447
+ }
493
448
 
494
- &.small {
495
- padding: var(--space-scale-0-5) var(--space-scale-1);
449
+ &[data-theme='destructive-secondary'] {
450
+ background-color: var(--color-surface-200);
451
+ color: var(--color-alert-strong);
452
+ border: 1px solid var(--color-alert-strong);
453
+ box-shadow:
454
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
455
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
456
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
457
+
458
+ &:hover:not(:disabled):not([aria-disabled='true']) {
459
+ border-color: --color-disabled;
460
+ color: --color-disabled;
496
461
  }
497
462
 
498
- &.large {
499
- padding: var(--space-scale-1-5) var(--space-scale-2);
463
+ &:disabled {
464
+ box-shadow: none;
465
+ border-color: var(--color-alert-subtle);
466
+ color: var(--color-alert-subtle);
500
467
  }
501
468
 
502
469
  &[data-loading='true'] {
503
- position: relative;
504
- color: transparent !important;
505
- pointer-events: none;
506
- cursor: not-allowed;
507
- -webkit-user-select: none;
508
- -moz-user-select: none;
509
- user-select: none;
470
+ box-shadow: none;
471
+
472
+ &::after {
473
+ background-color: var(--color-alert-strong);
474
+ }
510
475
  }
476
+ }
477
+
478
+ &[data-theme='destructive-tertiary'] {
479
+ color: var(--color-alert-strong);
511
480
 
512
- /*Spinner magic*/
513
-
514
- &[data-loading='true']::after {
515
- content: '';
516
- position: absolute;
517
- top: calc(50% - 10px);
518
- left: calc(50% - 10px);
519
- width: 20px;
520
- height: 20px;
521
- transform: translate(-50%, -50%);
522
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
523
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
524
- mask-size: contain;
525
- -webkit-mask-size: contain;
526
- background-color: var(--color-primary-400);
527
- animation: spin-animation 1s infinite linear;
481
+ &:disabled {
482
+ box-shadow: none;
483
+ color: var(--color-alert-subtle);
528
484
  }
529
- }
530
485
 
531
- @keyframes spin-animation {
532
- from {
533
- transform: rotate(0turn);
486
+ &:hover:not(:disabled):not([aria-disabled='true']) {
487
+ background-color: --color-disabled;
488
+ color: --color-disabled;
534
489
  }
535
- to {
536
- transform: rotate(1turn);
490
+
491
+ &[data-loading='true'] {
492
+ box-shadow: none;
493
+
494
+ &::after {
495
+ background-color: var(--color-alert-strong);
496
+ }
537
497
  }
498
+ }
499
+
500
+ &.small {
501
+ padding: var(--space-scale-0-5) var(--space-scale-1);
502
+ }
503
+
504
+ &.large {
505
+ padding: var(--space-scale-1-5) var(--space-scale-2);
506
+ }
507
+
508
+ &[data-loading='true'] {
509
+ position: relative;
510
+ color: transparent !important;
511
+ pointer-events: none;
512
+ cursor: not-allowed;
513
+ -webkit-user-select: none;
514
+ -moz-user-select: none;
515
+ user-select: none;
516
+ }
517
+
518
+ /*Spinner magic*/
519
+
520
+ &[data-loading='true']::after {
521
+ content: '';
522
+ position: absolute;
523
+ top: calc(50% - 10px);
524
+ left: calc(50% - 10px);
525
+ width: 20px;
526
+ height: 20px;
527
+ transform: translate(-50%, -50%);
528
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
529
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
530
+ mask-size: contain;
531
+ -webkit-mask-size: contain;
532
+ background-color: var(--color-primary-400);
533
+ animation: spin-animation 1s infinite linear;
534
+ }
535
+ }
536
+
537
+ @keyframes spin-animation {
538
+ from {
539
+ transform: rotate(0turn);
540
+ }
541
+ to {
542
+ transform: rotate(1turn);
543
+ }
538
544
  }
539
545
  }
540
546
  @layer base{
@@ -618,8 +624,8 @@ input[type='checkbox'] {
618
624
  &[aria-invalid]:not([aria-invalid='false']),
619
625
  &:user-invalid,
620
626
  &[aria-invalid='true'] {
621
- accent-color: var(--color-alert-400);
622
- outline: 1px solid var(--color-alert-400);
627
+ accent-color: var(--color-alert-strong);
628
+ outline: 1px solid var(--color-alert-strong);
623
629
  outline-offset: -1px;
624
630
  }
625
631
  }
@@ -727,7 +733,7 @@ input[type='checkbox'][data-theme='toggle'],
727
733
 
728
734
  &[aria-invalid]:not([aria-invalid='false']),
729
735
  &:user-invalid {
730
- accent-color: var(--color-alert-400);
736
+ accent-color: var(--color-alert-strong);
731
737
  }
732
738
  }
733
739
  }
@@ -967,8 +973,8 @@ textarea {
967
973
 
968
974
  &[aria-invalid]:not([aria-invalid='false']),
969
975
  &:user-invalid {
970
- --input-border-color: var(--color-alert-400);
971
- --input-focus-border-color: var(--color-alert-400);
976
+ --input-border-color: var(--color-alert-strong);
977
+ --input-focus-border-color: var(--color-alert-strong);
972
978
  }
973
979
  }
974
980
  }
@@ -1046,11 +1052,11 @@ a {
1046
1052
 
1047
1053
  .text-error,
1048
1054
  .text-danger {
1049
- color: var(--color-alert-400);
1055
+ color: var(--color-alert-strong);
1050
1056
  }
1051
1057
 
1052
1058
  .text-success {
1053
- color: var(--color-success-500);
1059
+ color: var(--color-success-strong);
1054
1060
  }
1055
1061
 
1056
1062
  body {
@@ -1339,8 +1345,8 @@ header[data-theme='top-nav'] {
1339
1345
  height: fit-content;
1340
1346
 
1341
1347
  &[data-status='warning'] {
1342
- --tag-background-color: var(--color-warning-100);
1343
- --tag-color: var(--color-warning-400);
1348
+ --tag-background-color: var(--color-warning-subtle);
1349
+ --tag-color: var(--color-warning-strong);
1344
1350
  }
1345
1351
  }
1346
1352
  }
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v1.4.11
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@triptease/stylesheet",
3
- "version": "1.4.10",
3
+ "version": "1.4.11",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",