@triptease/stylesheet 1.4.9 → 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 +83 -145
  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 +85 -147
  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.9
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);
@@ -283,72 +283,6 @@ button {
283
283
  /* noinspection CssInvalidAtRule */
284
284
  @layer base{
285
285
 
286
- @property --button-height {
287
- syntax: '*';
288
- inherits: true;
289
- initial-value: max-content;
290
- }
291
-
292
- @property --button-vertical-spacing {
293
- syntax: '<length>';
294
- inherits: true;
295
- initial-value: 0.5rem;
296
- }
297
-
298
- @property --button-horizontal-spacing {
299
- syntax: '<length>';
300
- inherits: true;
301
- initial-value: 0.75rem;
302
- }
303
-
304
- @property --button-border {
305
- syntax: '*';
306
- inherits: true;
307
- initial-value: none;
308
- }
309
-
310
- @property --button-background-color {
311
- syntax: '<color>';
312
- inherits: true;
313
- initial-value: transparent;
314
- }
315
-
316
- @property --button-color {
317
- syntax: '<color>';
318
- inherits: true;
319
- initial-value: #0D0C0D;
320
- }
321
-
322
- @property --button-hover-background-color {
323
- syntax: '<color>';
324
- inherits: true;
325
- initial-value: transparent;
326
- }
327
-
328
- @property --button-hover-color {
329
- syntax: '<color>';
330
- inherits: true;
331
- initial-value: inherit;
332
- }
333
-
334
- @property --button-focus-outline-color {
335
- syntax: '<color>';
336
- inherits: true;
337
- initial-value: rgba(1, 150, 237, 0.24);
338
- }
339
-
340
- @property --spinner-color {
341
- syntax: '<color>';
342
- inherits: true;
343
- initial-value: #5E43C2;
344
- }
345
-
346
- @property --color-border {
347
- syntax: '<color>';
348
- inherits: true;
349
- initial-value: #C5C8CE;
350
- }
351
-
352
286
  button,
353
287
  .button {
354
288
  -webkit-appearance: none;
@@ -356,20 +290,20 @@ button,
356
290
  appearance: none;
357
291
  cursor: pointer;
358
292
  position: relative;
359
- height: var(--button-height, -moz-max-content);
360
- height: var(--button-height, max-content);
293
+ height: -moz-max-content;
294
+ height: max-content;
361
295
  font-size: var(--font-size-200);
362
296
  font-weight: var(--font-weight-semibold);
363
297
  line-height: var(--space-scale-3);
364
- padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
298
+ padding: var(--space-scale-1) var(--space-scale-1-5);
365
299
  border-radius: var(--border-radius-100);
366
- border: var(--button-border, none);
300
+ border: none;
367
301
  outline: none;
368
302
  transition:
369
303
  background-color 0.3s ease,
370
304
  box-shadow 0.3s ease;
371
- background-color: var(--button-background-color, transparent);
372
- color: var(--button-color, var(--color-text-500));
305
+ background-color: transparent;
306
+ color: var(--color-text-500);
373
307
  width: -moz-fit-content;
374
308
  width: fit-content;
375
309
  display: flex;
@@ -382,76 +316,72 @@ button,
382
316
  cursor: not-allowed;
383
317
  }
384
318
 
385
- &:hover:not(:disabled):not([aria-disabled='true']) {
386
- background-color: var(--button-hover-background-color, var(--button-background-color));
387
- color: var(--button-hover-color, var(--button-color));
388
- }
389
-
390
319
  &:focus {
391
320
  outline: none;
392
321
  }
393
322
 
394
323
  &:focus-visible {
395
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
324
+ outline: 4px solid rgba(1, 150, 237, 0.24);
396
325
  outline-offset: 0;
397
326
  }
398
327
 
399
328
  &[data-theme='primary'] {
400
- --color-border: var(--color-primary-500);
401
- --button-background-color: var(--color-primary-400);
402
- --button-color: var(--color-text-100);
403
- --button-hover-background-color: var(--color-primary-500);
404
- --button-border: 1px solid var(--color-border);
329
+ background-color: var(--color-primary-400);
330
+ color: var(--color-text-100);
331
+ border: 1px solid var(--color-primary-500);
405
332
  box-shadow:
406
333
  inset 0 -2px 2px 0 var(--color-primary-400),
407
334
  inset 0 0 0 1px rgba(255, 255, 255, 0.16),
408
335
  0 1px 2px rgba(94, 66, 194, 0.2);
409
336
 
337
+ &:hover:not(:disabled):not([aria-disabled='true']) {
338
+ background-color: var(--color-primary-500);
339
+ }
340
+
410
341
  &:disabled {
411
- --button-background-color: var(--color-primary-300);
342
+ background-color: var(--color-primary-300);
412
343
  box-shadow: none;
413
- --color-border: var(--color-primary-300);
344
+ border-color: var(--color-primary-300);
414
345
  }
415
346
 
416
347
  &[data-loading='true'] {
417
- --button-background-color: var(--color-primary-300);
348
+ background-color: var(--color-primary-300);
418
349
  box-shadow: none;
419
- --color-border: var(--color-primary-200);
350
+ border-color: var(--color-primary-200);
420
351
  }
421
352
  }
422
353
 
423
354
  &[data-theme='secondary'] {
424
- --color-border: var(--color-primary-400);
425
- --button-background-color: var(--color-surface-200);
426
- --button-color: var(--color-primary-400);
427
- --button-border: 1px solid var(--color-border);
428
- --button-hover-color: var(--color-primary-500);
355
+ background-color: var(--color-surface-200);
356
+ color: var(--color-primary-400);
357
+ border: 1px solid var(--color-primary-400);
429
358
  box-shadow:
430
359
  inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
431
360
  inset 0 0 0 2px rgba(255, 255, 255, 0.4),
432
361
  0 1px 2px 0 rgba(60, 66, 87, 0.08);
433
362
 
434
363
  &:hover:not(:disabled):not([aria-disabled='true']) {
435
- --button-border: 1px solid var(--color-primary-500);
364
+ color: var(--color-primary-500);
365
+ border: 1px solid var(--color-primary-500);
436
366
  }
437
367
 
438
368
  &:disabled {
439
369
  box-shadow: none;
440
- --color-border: var(--color-primary-300);
441
- --button-color: var(--color-primary-300);
370
+ border-color: var(--color-primary-300);
371
+ color: var(--color-primary-300);
442
372
  }
443
373
 
444
374
  &[data-loading='true'] {
445
- --color-border: var(--color-primary-300);
375
+ border-color: var(--color-primary-300);
446
376
  box-shadow: none;
447
377
  }
448
378
  }
449
379
 
450
380
  &[data-theme='suggestion'] {
451
- --button-horizontal-spacing: var(--space-scale-2);
452
- --button-background-color: var(--color-surface-200);
453
- --button-color: var(--color-primary-400);
454
- --button-border: 1px solid var(--color-primary-400);
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);
455
385
  line-height: var(--space-scale-2);
456
386
  font-weight: var(--font-weight-normal);
457
387
  font-size: var(--font-size-100);
@@ -462,21 +392,21 @@ button,
462
392
  0 1px 2px 0 rgba(60, 66, 87, 0.08);
463
393
 
464
394
  &:hover:not(:disabled):not([aria-disabled='true']) {
465
- --button-background-color: var(--color-surface-300);
395
+ background-color: var(--color-surface-300);
466
396
  }
467
397
  }
468
398
 
469
399
  &[data-theme='tertiary'] {
470
- --button-color: var(--color-primary-400);
471
- --button-hover-color: var(--color-primary-500);
400
+ color: var(--color-primary-400);
472
401
 
473
402
  &:disabled {
474
403
  box-shadow: none;
475
- --button-color: var(--color-primary-300);
404
+ color: var(--color-primary-300);
476
405
  }
477
406
 
478
407
  &:hover:not(:disabled):not([aria-disabled='true']) {
479
- --button-background-color: var(--color-primary-100);
408
+ background-color: var(--color-primary-100);
409
+ color: var(--color-primary-500);
480
410
  }
481
411
 
482
412
  &[data-loading='true'] {
@@ -485,85 +415,94 @@ button,
485
415
  }
486
416
 
487
417
  &[data-theme='destructive-primary'] {
488
- --color-border: var(--color-alert-500);
489
- --button-background-color: var(--color-alert-400);
490
- --button-color: var(--color-text-100);
491
- --button-hover-background-color: var(--color-alert-500);
492
- --button-border: 1px solid var(--color-border);
418
+ --color-disabled: #890000;
419
+
420
+ background-color: var(--color-alert-strong);
421
+ color: var(--color-text-100);
422
+ border: 1px solid var(--color-alert-strong);
493
423
  box-shadow:
494
424
  inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
495
425
  inset 0 0 0 1px rgba(255, 255, 255, 0.24),
496
426
  0 1px 2px rgba(60, 66, 87, 0.08);
497
427
 
428
+ &:hover:not(:disabled):not([aria-disabled='true']) {
429
+ background-color: --color-disabled;
430
+ }
431
+
498
432
  &:disabled {
499
- --button-background-color: var(--color-alert-200);
433
+ background-color: var(--color-alert-subtle);
500
434
  box-shadow: none;
501
- --color-border: var(--color-alert-200);
435
+ border-color: var(--color-alert-subtle);
502
436
  }
503
437
 
504
438
  &[data-loading='true'] {
505
- --button-background-color: var(--color-alert-200);
439
+ background-color: var(--color-alert-subtle);
506
440
  box-shadow: none;
507
- --color-border: var(--color-alert-100);
508
- --spinner-color: var(--color-surface-100);
441
+ border-color: var(--color-alert-subtle);
442
+
443
+ &::after {
444
+ background-color: var(--color-surface-100);
445
+ }
509
446
  }
510
447
  }
511
448
 
512
449
  &[data-theme='destructive-secondary'] {
513
- --button-background-color: var(--color-surface-200);
514
- --button-color: var(--color-alert-400);
515
- --color-border: var(--color-alert-400);
516
- --button-border: 1px solid var(--color-border);
450
+ background-color: var(--color-surface-200);
451
+ color: var(--color-alert-strong);
452
+ border: 1px solid var(--color-alert-strong);
517
453
  box-shadow:
518
454
  inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
519
455
  inset 0 0 0 2px rgba(255, 255, 255, 0.4),
520
456
  0 1px 2px 0 rgba(60, 66, 87, 0.08);
521
457
 
522
458
  &:hover:not(:disabled):not([aria-disabled='true']) {
523
- --color-border: var(--color-alert-500);
524
- --button-color: var(--color-alert-500);
459
+ border-color: --color-disabled;
460
+ color: --color-disabled;
525
461
  }
526
462
 
527
463
  &:disabled {
528
464
  box-shadow: none;
529
- --color-border: var(--color-alert-200);
530
- --button-color: var(--color-alert-200);
465
+ border-color: var(--color-alert-subtle);
466
+ color: var(--color-alert-subtle);
531
467
  }
532
468
 
533
469
  &[data-loading='true'] {
534
470
  box-shadow: none;
535
- --spinner-color: var(--color-alert-400);
471
+
472
+ &::after {
473
+ background-color: var(--color-alert-strong);
474
+ }
536
475
  }
537
476
  }
538
477
 
539
478
  &[data-theme='destructive-tertiary'] {
540
- --button-color: var(--color-alert-400);
541
- --button-hover-color: var(--color-alert-500);
479
+ color: var(--color-alert-strong);
542
480
 
543
481
  &:disabled {
544
482
  box-shadow: none;
545
- --color-border: var(--color-border-100);
546
- --button-color: var(--color-alert-200);
483
+ color: var(--color-alert-subtle);
547
484
  }
548
485
 
549
486
  &:hover:not(:disabled):not([aria-disabled='true']) {
550
- --button-background-color: var(--color-alert-100);
487
+ background-color: --color-disabled;
488
+ color: --color-disabled;
551
489
  }
552
490
 
553
491
  &[data-loading='true'] {
554
492
  box-shadow: none;
555
- --spinner-color: var(--color-alert-400);
493
+
494
+ &::after {
495
+ background-color: var(--color-alert-strong);
496
+ }
556
497
  }
557
498
  }
558
499
 
559
500
  &.small {
560
- --button-horizontal-spacing: var(--space-scale-1);
561
- --button-vertical-spacing: var(--space-scale-0-5);
501
+ padding: var(--space-scale-0-5) var(--space-scale-1);
562
502
  }
563
503
 
564
504
  &.large {
565
- --button-horizontal-spacing: var(--space-scale-2);
566
- --button-vertical-spacing: var(--space-scale-1-5);
505
+ padding: var(--space-scale-1-5) var(--space-scale-2);
567
506
  }
568
507
 
569
508
  &[data-loading='true'] {
@@ -574,7 +513,6 @@ button,
574
513
  -webkit-user-select: none;
575
514
  -moz-user-select: none;
576
515
  user-select: none;
577
- --spinner-color: var(--color-primary-400);
578
516
  }
579
517
 
580
518
  /*Spinner magic*/
@@ -591,7 +529,7 @@ button,
591
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");
592
530
  mask-size: contain;
593
531
  -webkit-mask-size: contain;
594
- background-color: var(--spinner-color);
532
+ background-color: var(--color-primary-400);
595
533
  animation: spin-animation 1s infinite linear;
596
534
  }
597
535
  }
@@ -686,8 +624,8 @@ input[type='checkbox'] {
686
624
  &[aria-invalid]:not([aria-invalid='false']),
687
625
  &:user-invalid,
688
626
  &[aria-invalid='true'] {
689
- accent-color: var(--color-alert-400);
690
- outline: 1px solid var(--color-alert-400);
627
+ accent-color: var(--color-alert-strong);
628
+ outline: 1px solid var(--color-alert-strong);
691
629
  outline-offset: -1px;
692
630
  }
693
631
  }
@@ -731,7 +669,7 @@ input[type='checkbox'][data-theme='toggle'],
731
669
  background-color: var(--color-success-strong);
732
670
 
733
671
  &:hover {
734
- color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
672
+ color: #004200;
735
673
  background-color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
736
674
  }
737
675
  }
@@ -795,7 +733,7 @@ input[type='checkbox'][data-theme='toggle'],
795
733
 
796
734
  &[aria-invalid]:not([aria-invalid='false']),
797
735
  &:user-invalid {
798
- accent-color: var(--color-alert-400);
736
+ accent-color: var(--color-alert-strong);
799
737
  }
800
738
  }
801
739
  }
@@ -1035,8 +973,8 @@ textarea {
1035
973
 
1036
974
  &[aria-invalid]:not([aria-invalid='false']),
1037
975
  &:user-invalid {
1038
- --input-border-color: var(--color-alert-400);
1039
- --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);
1040
978
  }
1041
979
  }
1042
980
  }
@@ -1114,11 +1052,11 @@ a {
1114
1052
 
1115
1053
  .text-error,
1116
1054
  .text-danger {
1117
- color: var(--color-alert-400);
1055
+ color: var(--color-alert-strong);
1118
1056
  }
1119
1057
 
1120
1058
  .text-success {
1121
- color: var(--color-success-500);
1059
+ color: var(--color-success-strong);
1122
1060
  }
1123
1061
 
1124
1062
  body {
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.9
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.9
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.9
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.9
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);
@@ -283,72 +283,6 @@ button {
283
283
  /* noinspection CssInvalidAtRule */
284
284
  @layer base{
285
285
 
286
- @property --button-height {
287
- syntax: '*';
288
- inherits: true;
289
- initial-value: max-content;
290
- }
291
-
292
- @property --button-vertical-spacing {
293
- syntax: '<length>';
294
- inherits: true;
295
- initial-value: 0.5rem;
296
- }
297
-
298
- @property --button-horizontal-spacing {
299
- syntax: '<length>';
300
- inherits: true;
301
- initial-value: 0.75rem;
302
- }
303
-
304
- @property --button-border {
305
- syntax: '*';
306
- inherits: true;
307
- initial-value: none;
308
- }
309
-
310
- @property --button-background-color {
311
- syntax: '<color>';
312
- inherits: true;
313
- initial-value: transparent;
314
- }
315
-
316
- @property --button-color {
317
- syntax: '<color>';
318
- inherits: true;
319
- initial-value: #0D0C0D;
320
- }
321
-
322
- @property --button-hover-background-color {
323
- syntax: '<color>';
324
- inherits: true;
325
- initial-value: transparent;
326
- }
327
-
328
- @property --button-hover-color {
329
- syntax: '<color>';
330
- inherits: true;
331
- initial-value: inherit;
332
- }
333
-
334
- @property --button-focus-outline-color {
335
- syntax: '<color>';
336
- inherits: true;
337
- initial-value: rgba(1, 150, 237, 0.24);
338
- }
339
-
340
- @property --spinner-color {
341
- syntax: '<color>';
342
- inherits: true;
343
- initial-value: #5E43C2;
344
- }
345
-
346
- @property --color-border {
347
- syntax: '<color>';
348
- inherits: true;
349
- initial-value: #C5C8CE;
350
- }
351
-
352
286
  button,
353
287
  .button {
354
288
  -webkit-appearance: none;
@@ -356,20 +290,20 @@ button,
356
290
  appearance: none;
357
291
  cursor: pointer;
358
292
  position: relative;
359
- height: var(--button-height, -moz-max-content);
360
- height: var(--button-height, max-content);
293
+ height: -moz-max-content;
294
+ height: max-content;
361
295
  font-size: var(--font-size-200);
362
296
  font-weight: var(--font-weight-semibold);
363
297
  line-height: var(--space-scale-3);
364
- padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
298
+ padding: var(--space-scale-1) var(--space-scale-1-5);
365
299
  border-radius: var(--border-radius-100);
366
- border: var(--button-border, none);
300
+ border: none;
367
301
  outline: none;
368
302
  transition:
369
303
  background-color 0.3s ease,
370
304
  box-shadow 0.3s ease;
371
- background-color: var(--button-background-color, transparent);
372
- color: var(--button-color, var(--color-text-500));
305
+ background-color: transparent;
306
+ color: var(--color-text-500);
373
307
  width: -moz-fit-content;
374
308
  width: fit-content;
375
309
  display: flex;
@@ -382,76 +316,72 @@ button,
382
316
  cursor: not-allowed;
383
317
  }
384
318
 
385
- &:hover:not(:disabled):not([aria-disabled='true']) {
386
- background-color: var(--button-hover-background-color, var(--button-background-color));
387
- color: var(--button-hover-color, var(--button-color));
388
- }
389
-
390
319
  &:focus {
391
320
  outline: none;
392
321
  }
393
322
 
394
323
  &:focus-visible {
395
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
324
+ outline: 4px solid rgba(1, 150, 237, 0.24);
396
325
  outline-offset: 0;
397
326
  }
398
327
 
399
328
  &[data-theme='primary'] {
400
- --color-border: var(--color-primary-500);
401
- --button-background-color: var(--color-primary-400);
402
- --button-color: var(--color-text-100);
403
- --button-hover-background-color: var(--color-primary-500);
404
- --button-border: 1px solid var(--color-border);
329
+ background-color: var(--color-primary-400);
330
+ color: var(--color-text-100);
331
+ border: 1px solid var(--color-primary-500);
405
332
  box-shadow:
406
333
  inset 0 -2px 2px 0 var(--color-primary-400),
407
334
  inset 0 0 0 1px rgba(255, 255, 255, 0.16),
408
335
  0 1px 2px rgba(94, 66, 194, 0.2);
409
336
 
337
+ &:hover:not(:disabled):not([aria-disabled='true']) {
338
+ background-color: var(--color-primary-500);
339
+ }
340
+
410
341
  &:disabled {
411
- --button-background-color: var(--color-primary-300);
342
+ background-color: var(--color-primary-300);
412
343
  box-shadow: none;
413
- --color-border: var(--color-primary-300);
344
+ border-color: var(--color-primary-300);
414
345
  }
415
346
 
416
347
  &[data-loading='true'] {
417
- --button-background-color: var(--color-primary-300);
348
+ background-color: var(--color-primary-300);
418
349
  box-shadow: none;
419
- --color-border: var(--color-primary-200);
350
+ border-color: var(--color-primary-200);
420
351
  }
421
352
  }
422
353
 
423
354
  &[data-theme='secondary'] {
424
- --color-border: var(--color-primary-400);
425
- --button-background-color: var(--color-surface-200);
426
- --button-color: var(--color-primary-400);
427
- --button-border: 1px solid var(--color-border);
428
- --button-hover-color: var(--color-primary-500);
355
+ background-color: var(--color-surface-200);
356
+ color: var(--color-primary-400);
357
+ border: 1px solid var(--color-primary-400);
429
358
  box-shadow:
430
359
  inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
431
360
  inset 0 0 0 2px rgba(255, 255, 255, 0.4),
432
361
  0 1px 2px 0 rgba(60, 66, 87, 0.08);
433
362
 
434
363
  &:hover:not(:disabled):not([aria-disabled='true']) {
435
- --button-border: 1px solid var(--color-primary-500);
364
+ color: var(--color-primary-500);
365
+ border: 1px solid var(--color-primary-500);
436
366
  }
437
367
 
438
368
  &:disabled {
439
369
  box-shadow: none;
440
- --color-border: var(--color-primary-300);
441
- --button-color: var(--color-primary-300);
370
+ border-color: var(--color-primary-300);
371
+ color: var(--color-primary-300);
442
372
  }
443
373
 
444
374
  &[data-loading='true'] {
445
- --color-border: var(--color-primary-300);
375
+ border-color: var(--color-primary-300);
446
376
  box-shadow: none;
447
377
  }
448
378
  }
449
379
 
450
380
  &[data-theme='suggestion'] {
451
- --button-horizontal-spacing: var(--space-scale-2);
452
- --button-background-color: var(--color-surface-200);
453
- --button-color: var(--color-primary-400);
454
- --button-border: 1px solid var(--color-primary-400);
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);
455
385
  line-height: var(--space-scale-2);
456
386
  font-weight: var(--font-weight-normal);
457
387
  font-size: var(--font-size-100);
@@ -462,21 +392,21 @@ button,
462
392
  0 1px 2px 0 rgba(60, 66, 87, 0.08);
463
393
 
464
394
  &:hover:not(:disabled):not([aria-disabled='true']) {
465
- --button-background-color: var(--color-surface-300);
395
+ background-color: var(--color-surface-300);
466
396
  }
467
397
  }
468
398
 
469
399
  &[data-theme='tertiary'] {
470
- --button-color: var(--color-primary-400);
471
- --button-hover-color: var(--color-primary-500);
400
+ color: var(--color-primary-400);
472
401
 
473
402
  &:disabled {
474
403
  box-shadow: none;
475
- --button-color: var(--color-primary-300);
404
+ color: var(--color-primary-300);
476
405
  }
477
406
 
478
407
  &:hover:not(:disabled):not([aria-disabled='true']) {
479
- --button-background-color: var(--color-primary-100);
408
+ background-color: var(--color-primary-100);
409
+ color: var(--color-primary-500);
480
410
  }
481
411
 
482
412
  &[data-loading='true'] {
@@ -485,85 +415,94 @@ button,
485
415
  }
486
416
 
487
417
  &[data-theme='destructive-primary'] {
488
- --color-border: var(--color-alert-500);
489
- --button-background-color: var(--color-alert-400);
490
- --button-color: var(--color-text-100);
491
- --button-hover-background-color: var(--color-alert-500);
492
- --button-border: 1px solid var(--color-border);
418
+ --color-disabled: #890000;
419
+
420
+ background-color: var(--color-alert-strong);
421
+ color: var(--color-text-100);
422
+ border: 1px solid var(--color-alert-strong);
493
423
  box-shadow:
494
424
  inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
495
425
  inset 0 0 0 1px rgba(255, 255, 255, 0.24),
496
426
  0 1px 2px rgba(60, 66, 87, 0.08);
497
427
 
428
+ &:hover:not(:disabled):not([aria-disabled='true']) {
429
+ background-color: --color-disabled;
430
+ }
431
+
498
432
  &:disabled {
499
- --button-background-color: var(--color-alert-200);
433
+ background-color: var(--color-alert-subtle);
500
434
  box-shadow: none;
501
- --color-border: var(--color-alert-200);
435
+ border-color: var(--color-alert-subtle);
502
436
  }
503
437
 
504
438
  &[data-loading='true'] {
505
- --button-background-color: var(--color-alert-200);
439
+ background-color: var(--color-alert-subtle);
506
440
  box-shadow: none;
507
- --color-border: var(--color-alert-100);
508
- --spinner-color: var(--color-surface-100);
441
+ border-color: var(--color-alert-subtle);
442
+
443
+ &::after {
444
+ background-color: var(--color-surface-100);
445
+ }
509
446
  }
510
447
  }
511
448
 
512
449
  &[data-theme='destructive-secondary'] {
513
- --button-background-color: var(--color-surface-200);
514
- --button-color: var(--color-alert-400);
515
- --color-border: var(--color-alert-400);
516
- --button-border: 1px solid var(--color-border);
450
+ background-color: var(--color-surface-200);
451
+ color: var(--color-alert-strong);
452
+ border: 1px solid var(--color-alert-strong);
517
453
  box-shadow:
518
454
  inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
519
455
  inset 0 0 0 2px rgba(255, 255, 255, 0.4),
520
456
  0 1px 2px 0 rgba(60, 66, 87, 0.08);
521
457
 
522
458
  &:hover:not(:disabled):not([aria-disabled='true']) {
523
- --color-border: var(--color-alert-500);
524
- --button-color: var(--color-alert-500);
459
+ border-color: --color-disabled;
460
+ color: --color-disabled;
525
461
  }
526
462
 
527
463
  &:disabled {
528
464
  box-shadow: none;
529
- --color-border: var(--color-alert-200);
530
- --button-color: var(--color-alert-200);
465
+ border-color: var(--color-alert-subtle);
466
+ color: var(--color-alert-subtle);
531
467
  }
532
468
 
533
469
  &[data-loading='true'] {
534
470
  box-shadow: none;
535
- --spinner-color: var(--color-alert-400);
471
+
472
+ &::after {
473
+ background-color: var(--color-alert-strong);
474
+ }
536
475
  }
537
476
  }
538
477
 
539
478
  &[data-theme='destructive-tertiary'] {
540
- --button-color: var(--color-alert-400);
541
- --button-hover-color: var(--color-alert-500);
479
+ color: var(--color-alert-strong);
542
480
 
543
481
  &:disabled {
544
482
  box-shadow: none;
545
- --color-border: var(--color-border-100);
546
- --button-color: var(--color-alert-200);
483
+ color: var(--color-alert-subtle);
547
484
  }
548
485
 
549
486
  &:hover:not(:disabled):not([aria-disabled='true']) {
550
- --button-background-color: var(--color-alert-100);
487
+ background-color: --color-disabled;
488
+ color: --color-disabled;
551
489
  }
552
490
 
553
491
  &[data-loading='true'] {
554
492
  box-shadow: none;
555
- --spinner-color: var(--color-alert-400);
493
+
494
+ &::after {
495
+ background-color: var(--color-alert-strong);
496
+ }
556
497
  }
557
498
  }
558
499
 
559
500
  &.small {
560
- --button-horizontal-spacing: var(--space-scale-1);
561
- --button-vertical-spacing: var(--space-scale-0-5);
501
+ padding: var(--space-scale-0-5) var(--space-scale-1);
562
502
  }
563
503
 
564
504
  &.large {
565
- --button-horizontal-spacing: var(--space-scale-2);
566
- --button-vertical-spacing: var(--space-scale-1-5);
505
+ padding: var(--space-scale-1-5) var(--space-scale-2);
567
506
  }
568
507
 
569
508
  &[data-loading='true'] {
@@ -574,7 +513,6 @@ button,
574
513
  -webkit-user-select: none;
575
514
  -moz-user-select: none;
576
515
  user-select: none;
577
- --spinner-color: var(--color-primary-400);
578
516
  }
579
517
 
580
518
  /*Spinner magic*/
@@ -591,7 +529,7 @@ button,
591
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");
592
530
  mask-size: contain;
593
531
  -webkit-mask-size: contain;
594
- background-color: var(--spinner-color);
532
+ background-color: var(--color-primary-400);
595
533
  animation: spin-animation 1s infinite linear;
596
534
  }
597
535
  }
@@ -686,8 +624,8 @@ input[type='checkbox'] {
686
624
  &[aria-invalid]:not([aria-invalid='false']),
687
625
  &:user-invalid,
688
626
  &[aria-invalid='true'] {
689
- accent-color: var(--color-alert-400);
690
- outline: 1px solid var(--color-alert-400);
627
+ accent-color: var(--color-alert-strong);
628
+ outline: 1px solid var(--color-alert-strong);
691
629
  outline-offset: -1px;
692
630
  }
693
631
  }
@@ -731,7 +669,7 @@ input[type='checkbox'][data-theme='toggle'],
731
669
  background-color: var(--color-success-strong);
732
670
 
733
671
  &:hover {
734
- color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
672
+ color: #004200;
735
673
  background-color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
736
674
  }
737
675
  }
@@ -795,7 +733,7 @@ input[type='checkbox'][data-theme='toggle'],
795
733
 
796
734
  &[aria-invalid]:not([aria-invalid='false']),
797
735
  &:user-invalid {
798
- accent-color: var(--color-alert-400);
736
+ accent-color: var(--color-alert-strong);
799
737
  }
800
738
  }
801
739
  }
@@ -1035,8 +973,8 @@ textarea {
1035
973
 
1036
974
  &[aria-invalid]:not([aria-invalid='false']),
1037
975
  &:user-invalid {
1038
- --input-border-color: var(--color-alert-400);
1039
- --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);
1040
978
  }
1041
979
  }
1042
980
  }
@@ -1114,11 +1052,11 @@ a {
1114
1052
 
1115
1053
  .text-error,
1116
1054
  .text-danger {
1117
- color: var(--color-alert-400);
1055
+ color: var(--color-alert-strong);
1118
1056
  }
1119
1057
 
1120
1058
  .text-success {
1121
- color: var(--color-success-500);
1059
+ color: var(--color-success-strong);
1122
1060
  }
1123
1061
 
1124
1062
  body {
@@ -1407,8 +1345,8 @@ header[data-theme='top-nav'] {
1407
1345
  height: fit-content;
1408
1346
 
1409
1347
  &[data-status='warning'] {
1410
- --tag-background-color: var(--color-warning-100);
1411
- --tag-color: var(--color-warning-400);
1348
+ --tag-background-color: var(--color-warning-subtle);
1349
+ --tag-color: var(--color-warning-strong);
1412
1350
  }
1413
1351
  }
1414
1352
  }
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.9
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.9",
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",