@triptease/stylesheet 1.2.0 → 1.2.2

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 +228 -210
  2. package/dist/blocks.css +1 -1
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/triptease.css +227 -209
  6. package/dist/utilities.css +1 -1
  7. package/package.json +2 -1
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.0
2
+ * @triptease/stylesheet v1.2.2
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);
@@ -317,7 +317,7 @@ button {
317
317
  @property --button-hover-color {
318
318
  syntax: '<color>';
319
319
  inherits: true;
320
- initial-value: #0D0C0D;
320
+ initial-value: inherit;
321
321
  }
322
322
 
323
323
  @property --button-focus-outline-color {
@@ -340,252 +340,258 @@ button {
340
340
 
341
341
  button,
342
342
  .button {
343
- -webkit-appearance: none;
344
- -moz-appearance: none;
345
- appearance: none;
346
- cursor: pointer;
347
- position: relative;
348
- height: var(--button-height, -moz-max-content);
349
- height: var(--button-height, max-content);
350
- font-size: var(--font-size-200);
351
- font-weight: var(--font-weight-semibold);
352
- line-height: var(--space-scale-3);
353
- padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
354
- border-radius: var(--border-radius-100);
355
- border: var(--button-border, none);
356
- outline: none;
357
- transition: background-color 0.3s ease,
343
+ -webkit-appearance: none;
344
+ -moz-appearance: none;
345
+ appearance: none;
346
+ cursor: pointer;
347
+ position: relative;
348
+ height: var(--button-height, -moz-max-content);
349
+ height: var(--button-height, max-content);
350
+ font-size: var(--font-size-200);
351
+ font-weight: var(--font-weight-semibold);
352
+ line-height: var(--space-scale-3);
353
+ padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
354
+ border-radius: var(--border-radius-100);
355
+ border: var(--button-border, none);
356
+ outline: none;
357
+ transition:
358
+ background-color 0.3s ease,
358
359
  box-shadow 0.3s ease;
359
- background-color: var(--button-background-color, transparent);
360
- color: var(--button-color, var(--color-text-500));
361
- width: -moz-fit-content;
362
- width: fit-content;
363
- display: flex;
364
- flex-direction: row;
365
- align-items: center;
366
- justify-content: center;
367
- gap: var(--space-scale-1);
368
-
369
- &:is([disabled], [aria-disabled='true']) {
370
- cursor: not-allowed;
371
- }
360
+ background-color: var(--button-background-color, transparent);
361
+ color: var(--button-color, var(--color-text-500));
362
+ width: -moz-fit-content;
363
+ width: fit-content;
364
+ display: flex;
365
+ flex-direction: row;
366
+ align-items: center;
367
+ justify-content: center;
368
+ gap: var(--space-scale-1);
369
+
370
+ &:is([disabled], [aria-disabled='true']) {
371
+ cursor: not-allowed;
372
+ }
372
373
 
373
- &:hover:not(:disabled):not([aria-disabled='true']) {
374
- background-color: var(--button-hover-background-color, var(--button-background-color));
375
- color: var(--button-hover-color, var(--button-color));
374
+ &:hover:not(:disabled):not([aria-disabled='true']) {
375
+ background-color: var(--button-hover-background-color, var(--button-background-color));
376
+ color: var(--button-hover-color, var(--button-color));
377
+ }
378
+
379
+ &:focus {
380
+ outline: none;
381
+ }
382
+
383
+ &:focus-visible {
384
+ outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
385
+ outline-offset: 0;
386
+ }
387
+
388
+ &[data-theme='primary'] {
389
+ --color-border: var(--color-primary-500);
390
+ --button-background-color: var(--color-primary-400);
391
+ --button-color: var(--color-text-100);
392
+ --button-hover-background-color: var(--color-primary-500);
393
+ --button-border: 1px solid var(--color-border);
394
+ box-shadow:
395
+ inset 0 -2px 2px 0 var(--color-primary-400),
396
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
397
+ 0 1px 2px rgba(94, 66, 194, 0.2);
398
+
399
+ &:disabled {
400
+ --button-background-color: var(--color-primary-300);
401
+ box-shadow: none;
402
+ --color-border: var(--color-primary-300);
376
403
  }
377
404
 
378
- &:focus {
379
- outline: none;
405
+ &[data-loading='true'] {
406
+ --button-background-color: var(--color-primary-300);
407
+ box-shadow: none;
408
+ --color-border: var(--color-primary-200);
380
409
  }
410
+ }
411
+
412
+ &[data-theme='secondary'] {
413
+ --color-border: var(--color-primary-400);
414
+ --button-background-color: var(--color-surface-200);
415
+ --button-color: var(--color-primary-400);
416
+ --button-border: 1px solid var(--color-border);
417
+ --button-hover-color: var(--color-primary-500);
418
+ box-shadow:
419
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
420
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
421
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
381
422
 
382
- &:focus-visible {
383
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
384
- outline-offset: 0;
423
+ &:hover:not(:disabled):not([aria-disabled='true']) {
424
+ --button-border: 1px solid var(--color-primary-500);
385
425
  }
386
426
 
387
- &[data-theme='primary'] {
388
- --color-border: var(--color-primary-500);
389
- --button-background-color: var(--color-primary-400);
390
- --button-color: var(--color-text-100);
391
- --button-hover-background-color: var(--color-primary-500);
392
- --button-border: 1px solid var(--color-border);
393
- box-shadow: inset 0 -2px 2px 0 var(--color-primary-400),
394
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
395
- 0 1px 2px rgba(94, 66, 194, 0.2);
396
-
397
- &:disabled {
398
- --button-background-color: var(--color-primary-300);
399
- box-shadow: none;
400
- --color-border: var(--color-primary-300);
401
- }
402
-
403
- &[data-loading='true'] {
404
- --button-background-color: var(--color-primary-300);
405
- box-shadow: none;
406
- --color-border: var(--color-primary-200);
407
- }
427
+ &:disabled {
428
+ box-shadow: none;
429
+ --color-border: var(--color-primary-300);
430
+ --button-color: var(--color-primary-300);
408
431
  }
409
432
 
410
- &[data-theme='secondary'] {
411
- --color-border: var(--color-primary-400);
412
- --button-background-color: var(--color-surface-200);
413
- --button-color: var(--color-primary-400);
414
- --button-border: 1px solid var(--color-border);
415
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
416
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
417
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
418
-
419
- &:hover:not(:disabled):not([aria-disabled='true']) {
420
- --button-border: 1px solid var(--color-primary-500);
421
- --button-color: var(--color-primary-500);
422
- }
423
-
424
- &:disabled {
425
- box-shadow: none;
426
- --color-border: var(--color-primary-300);
427
- --button-color: var(--color-primary-300);
428
- }
429
-
430
- &[data-loading='true'] {
431
- --color-border: var(--color-primary-300);
432
- box-shadow: none;
433
- }
433
+ &[data-loading='true'] {
434
+ --color-border: var(--color-primary-300);
435
+ box-shadow: none;
434
436
  }
437
+ }
438
+
439
+ &[data-theme='suggestion'] {
440
+ --button-horizontal-spacing: var(--space-scale-2);
441
+ --button-background-color: var(--color-surface-200);
442
+ --button-color: var(--color-primary-400);
443
+ --button-border: 1px solid var(--color-primary-400);
444
+ line-height: var(--space-scale-2);
445
+ font-weight: var(--font-weight-normal);
446
+ font-size: var(--font-size-100);
447
+ border-radius: var(--border-radius-200);
448
+ box-shadow:
449
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
450
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
451
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
435
452
 
436
- &[data-theme='suggestion'] {
437
- --button-horizontal-spacing: var(--space-scale-2);
438
- --button-background-color: var(--color-surface-200);
439
- --button-color: var(--color-primary-400);
440
- --button-border: 1px solid var(--color-primary-400);
441
- line-height: var(--space-scale-2);
442
- font-weight: var(--font-weight-normal);
443
- font-size: var(--font-size-100);
444
- border-radius: var(--border-radius-200);
445
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
446
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
447
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
448
-
449
- &:hover:not(:disabled):not([aria-disabled='true']) {
450
- --button-background-color: var(--color-surface-300);
451
- }
453
+ &:hover:not(:disabled):not([aria-disabled='true']) {
454
+ --button-background-color: var(--color-surface-300);
452
455
  }
456
+ }
453
457
 
454
- &[data-theme='tertiary'] {
455
- --button-color: var(--color-primary-400);
456
- --button-hover-color: var(--color-primary-500);
458
+ &[data-theme='tertiary'] {
459
+ --button-color: var(--color-primary-400);
460
+ --button-hover-color: var(--color-primary-500);
457
461
 
458
- &:disabled {
459
- box-shadow: none;
460
- --button-color: var(--color-primary-300);
461
- }
462
+ &:disabled {
463
+ box-shadow: none;
464
+ --button-color: var(--color-primary-300);
465
+ }
462
466
 
463
- &:hover:not(:disabled):not([aria-disabled='true']) {
464
- --button-background-color: var(--color-primary-100);
465
- }
467
+ &:hover:not(:disabled):not([aria-disabled='true']) {
468
+ --button-background-color: var(--color-primary-100);
469
+ }
466
470
 
467
- &[data-loading='true'] {
468
- box-shadow: none;
469
- }
471
+ &[data-loading='true'] {
472
+ box-shadow: none;
470
473
  }
474
+ }
471
475
 
472
- &[data-theme='destructive-primary'] {
473
- --color-border: var(--color-alert-500);
474
- --button-background-color: var(--color-alert-400);
475
- --button-color: var(--color-text-100);
476
- --button-hover-background-color: var(--color-alert-500);
477
- --button-border: 1px solid var(--color-border);
478
- box-shadow: inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
479
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
480
- 0 1px 2px rgba(60, 66, 87, 0.08);
481
-
482
- &:disabled {
483
- --button-background-color: var(--color-alert-200);
484
- box-shadow: none;
485
- --color-border: var(--color-alert-200);
486
- }
487
-
488
- &[data-loading='true'] {
489
- --button-background-color: var(--color-alert-200);
490
- box-shadow: none;
491
- --color-border: var(--color-alert-100);
492
- --spinner-color: var(--color-surface-100);
493
- }
476
+ &[data-theme='destructive-primary'] {
477
+ --color-border: var(--color-alert-500);
478
+ --button-background-color: var(--color-alert-400);
479
+ --button-color: var(--color-text-100);
480
+ --button-hover-background-color: var(--color-alert-500);
481
+ --button-border: 1px solid var(--color-border);
482
+ box-shadow:
483
+ inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
484
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
485
+ 0 1px 2px rgba(60, 66, 87, 0.08);
486
+
487
+ &:disabled {
488
+ --button-background-color: var(--color-alert-200);
489
+ box-shadow: none;
490
+ --color-border: var(--color-alert-200);
494
491
  }
495
492
 
496
- &[data-theme='destructive-secondary'] {
497
- --button-background-color: var(--color-surface-200);
498
- --button-color: var(--color-alert-400);
499
- --color-border: var(--color-alert-400);
500
- --button-border: 1px solid var(--color-border);
501
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
502
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
503
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
504
-
505
- &:hover:not(:disabled):not([aria-disabled='true']) {
506
- --color-border: var(--color-alert-500);
507
- --button-color: var(--color-alert-500);
508
- }
509
-
510
- &:disabled {
511
- box-shadow: none;
512
- --color-border: var(--color-alert-200);
513
- --button-color: var(--color-alert-200);
514
- }
515
-
516
- &[data-loading='true'] {
517
- box-shadow: none;
518
- --spinner-color: var(--color-alert-400);
519
- }
493
+ &[data-loading='true'] {
494
+ --button-background-color: var(--color-alert-200);
495
+ box-shadow: none;
496
+ --color-border: var(--color-alert-100);
497
+ --spinner-color: var(--color-surface-100);
520
498
  }
499
+ }
521
500
 
522
- &[data-theme='destructive-tertiary'] {
523
- --button-color: var(--color-alert-400);
524
- --button-hover-color: var(--color-alert-500);
501
+ &[data-theme='destructive-secondary'] {
502
+ --button-background-color: var(--color-surface-200);
503
+ --button-color: var(--color-alert-400);
504
+ --color-border: var(--color-alert-400);
505
+ --button-border: 1px solid var(--color-border);
506
+ box-shadow:
507
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
508
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
509
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
525
510
 
526
- &:disabled {
527
- box-shadow: none;
528
- --color-border: var(--color-border-100);
529
- --button-color: var(--color-alert-200);
530
- }
511
+ &:hover:not(:disabled):not([aria-disabled='true']) {
512
+ --color-border: var(--color-alert-500);
513
+ --button-color: var(--color-alert-500);
514
+ }
531
515
 
532
- &:hover:not(:disabled):not([aria-disabled='true']) {
533
- --button-background-color: var(--color-alert-100);
534
- }
516
+ &:disabled {
517
+ box-shadow: none;
518
+ --color-border: var(--color-alert-200);
519
+ --button-color: var(--color-alert-200);
520
+ }
535
521
 
536
- &[data-loading='true'] {
537
- box-shadow: none;
538
- --spinner-color: var(--color-alert-400);
539
- }
522
+ &[data-loading='true'] {
523
+ box-shadow: none;
524
+ --spinner-color: var(--color-alert-400);
540
525
  }
526
+ }
541
527
 
542
- &.small {
543
- --button-horizontal-spacing: var(--space-scale-1);
544
- --button-vertical-spacing: var(--space-scale-0-5);
528
+ &[data-theme='destructive-tertiary'] {
529
+ --button-color: var(--color-alert-400);
530
+ --button-hover-color: var(--color-alert-500);
531
+
532
+ &:disabled {
533
+ box-shadow: none;
534
+ --color-border: var(--color-border-100);
535
+ --button-color: var(--color-alert-200);
545
536
  }
546
537
 
547
- &.large {
548
- --button-horizontal-spacing: var(--space-scale-2);
549
- --button-vertical-spacing: var(--space-scale-1-5);
538
+ &:hover:not(:disabled):not([aria-disabled='true']) {
539
+ --button-background-color: var(--color-alert-100);
550
540
  }
551
541
 
552
542
  &[data-loading='true'] {
553
- position: relative;
554
- color: transparent !important;
555
- pointer-events: none;
556
- cursor: not-allowed;
557
- -webkit-user-select: none;
558
- -moz-user-select: none;
559
- user-select: none;
560
- --spinner-color: var(--color-primary-400);
543
+ box-shadow: none;
544
+ --spinner-color: var(--color-alert-400);
561
545
  }
546
+ }
562
547
 
563
- /*Spinner magic*/
564
-
565
- &[data-loading='true']::after {
566
- content: '';
567
- position: absolute;
568
- top: calc(50% - 10px);
569
- left: calc(50% - 10px);
570
- width: 20px;
571
- height: 20px;
572
- transform: translate(-50%, -50%);
573
- 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");
574
- -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");
575
- mask-size: contain;
576
- -webkit-mask-size: contain;
577
- background-color: var(--spinner-color);
578
- animation: spin-animation 1s infinite linear;
579
- }
548
+ &.small {
549
+ --button-horizontal-spacing: var(--space-scale-1);
550
+ --button-vertical-spacing: var(--space-scale-0-5);
551
+ }
552
+
553
+ &.large {
554
+ --button-horizontal-spacing: var(--space-scale-2);
555
+ --button-vertical-spacing: var(--space-scale-1-5);
556
+ }
557
+
558
+ &[data-loading='true'] {
559
+ position: relative;
560
+ color: transparent !important;
561
+ pointer-events: none;
562
+ cursor: not-allowed;
563
+ -webkit-user-select: none;
564
+ -moz-user-select: none;
565
+ user-select: none;
566
+ --spinner-color: var(--color-primary-400);
567
+ }
568
+
569
+ /*Spinner magic*/
570
+
571
+ &[data-loading='true']::after {
572
+ content: '';
573
+ position: absolute;
574
+ top: calc(50% - 10px);
575
+ left: calc(50% - 10px);
576
+ width: 20px;
577
+ height: 20px;
578
+ transform: translate(-50%, -50%);
579
+ 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");
580
+ -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");
581
+ mask-size: contain;
582
+ -webkit-mask-size: contain;
583
+ background-color: var(--spinner-color);
584
+ animation: spin-animation 1s infinite linear;
585
+ }
580
586
  }
581
587
 
582
588
  @keyframes spin-animation {
583
- from {
584
- transform: rotate(0turn);
585
- }
586
- to {
587
- transform: rotate(1turn);
588
- }
589
+ from {
590
+ transform: rotate(0turn);
591
+ }
592
+ to {
593
+ transform: rotate(1turn);
594
+ }
589
595
  }
590
596
  }
591
597
  @layer base{
@@ -670,6 +676,14 @@ input[type='checkbox'] {
670
676
  accent-color: var(--color-primary-400);
671
677
  width: var(--checkbox-size, var(--space-scale-2));
672
678
  aspect-ratio: 1;
679
+
680
+ &[aria-invalid]:not([aria-invalid='false']),
681
+ &:user-invalid,
682
+ &[aria-invalid='true'] {
683
+ accent-color: var(--color-alert-400);
684
+ outline: 1px solid var(--color-alert-400);
685
+ outline-offset: -1px;
686
+ }
673
687
  }
674
688
 
675
689
  input[type='checkbox'][data-theme='toggle'],
@@ -1044,6 +1058,10 @@ a {
1044
1058
  line-height: 1.4;
1045
1059
  }
1046
1060
 
1061
+ .text-error {
1062
+ color: var(--color-alert-400);
1063
+ }
1064
+
1047
1065
  body {
1048
1066
  color: var(--color-text-500);
1049
1067
  font-weight: var(--font-weight-normal);
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.0
2
+ * @triptease/stylesheet v1.2.2
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.0
2
+ * @triptease/stylesheet v1.2.2
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.2.0
2
+ * @triptease/stylesheet v1.2.2
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.2.0
2
+ * @triptease/stylesheet v1.2.2
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);
@@ -317,7 +317,7 @@ button {
317
317
  @property --button-hover-color {
318
318
  syntax: '<color>';
319
319
  inherits: true;
320
- initial-value: #0D0C0D;
320
+ initial-value: inherit;
321
321
  }
322
322
 
323
323
  @property --button-focus-outline-color {
@@ -340,252 +340,258 @@ button {
340
340
 
341
341
  button,
342
342
  .button {
343
- -webkit-appearance: none;
344
- -moz-appearance: none;
345
- appearance: none;
346
- cursor: pointer;
347
- position: relative;
348
- height: var(--button-height, -moz-max-content);
349
- height: var(--button-height, max-content);
350
- font-size: var(--font-size-200);
351
- font-weight: var(--font-weight-semibold);
352
- line-height: var(--space-scale-3);
353
- padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
354
- border-radius: var(--border-radius-100);
355
- border: var(--button-border, none);
356
- outline: none;
357
- transition: background-color 0.3s ease,
343
+ -webkit-appearance: none;
344
+ -moz-appearance: none;
345
+ appearance: none;
346
+ cursor: pointer;
347
+ position: relative;
348
+ height: var(--button-height, -moz-max-content);
349
+ height: var(--button-height, max-content);
350
+ font-size: var(--font-size-200);
351
+ font-weight: var(--font-weight-semibold);
352
+ line-height: var(--space-scale-3);
353
+ padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
354
+ border-radius: var(--border-radius-100);
355
+ border: var(--button-border, none);
356
+ outline: none;
357
+ transition:
358
+ background-color 0.3s ease,
358
359
  box-shadow 0.3s ease;
359
- background-color: var(--button-background-color, transparent);
360
- color: var(--button-color, var(--color-text-500));
361
- width: -moz-fit-content;
362
- width: fit-content;
363
- display: flex;
364
- flex-direction: row;
365
- align-items: center;
366
- justify-content: center;
367
- gap: var(--space-scale-1);
360
+ background-color: var(--button-background-color, transparent);
361
+ color: var(--button-color, var(--color-text-500));
362
+ width: -moz-fit-content;
363
+ width: fit-content;
364
+ display: flex;
365
+ flex-direction: row;
366
+ align-items: center;
367
+ justify-content: center;
368
+ gap: var(--space-scale-1);
368
369
 
369
- &:is([disabled], [aria-disabled='true']) {
370
- cursor: not-allowed;
371
- }
370
+ &:is([disabled], [aria-disabled='true']) {
371
+ cursor: not-allowed;
372
+ }
372
373
 
373
- &:hover:not(:disabled):not([aria-disabled='true']) {
374
- background-color: var(--button-hover-background-color, var(--button-background-color));
375
- color: var(--button-hover-color, var(--button-color));
374
+ &:hover:not(:disabled):not([aria-disabled='true']) {
375
+ background-color: var(--button-hover-background-color, var(--button-background-color));
376
+ color: var(--button-hover-color, var(--button-color));
377
+ }
378
+
379
+ &:focus {
380
+ outline: none;
381
+ }
382
+
383
+ &:focus-visible {
384
+ outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
385
+ outline-offset: 0;
386
+ }
387
+
388
+ &[data-theme='primary'] {
389
+ --color-border: var(--color-primary-500);
390
+ --button-background-color: var(--color-primary-400);
391
+ --button-color: var(--color-text-100);
392
+ --button-hover-background-color: var(--color-primary-500);
393
+ --button-border: 1px solid var(--color-border);
394
+ box-shadow:
395
+ inset 0 -2px 2px 0 var(--color-primary-400),
396
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
397
+ 0 1px 2px rgba(94, 66, 194, 0.2);
398
+
399
+ &:disabled {
400
+ --button-background-color: var(--color-primary-300);
401
+ box-shadow: none;
402
+ --color-border: var(--color-primary-300);
376
403
  }
377
404
 
378
- &:focus {
379
- outline: none;
405
+ &[data-loading='true'] {
406
+ --button-background-color: var(--color-primary-300);
407
+ box-shadow: none;
408
+ --color-border: var(--color-primary-200);
380
409
  }
410
+ }
381
411
 
382
- &:focus-visible {
383
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
384
- outline-offset: 0;
412
+ &[data-theme='secondary'] {
413
+ --color-border: var(--color-primary-400);
414
+ --button-background-color: var(--color-surface-200);
415
+ --button-color: var(--color-primary-400);
416
+ --button-border: 1px solid var(--color-border);
417
+ --button-hover-color: var(--color-primary-500);
418
+ box-shadow:
419
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
420
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
421
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
422
+
423
+ &:hover:not(:disabled):not([aria-disabled='true']) {
424
+ --button-border: 1px solid var(--color-primary-500);
385
425
  }
386
426
 
387
- &[data-theme='primary'] {
388
- --color-border: var(--color-primary-500);
389
- --button-background-color: var(--color-primary-400);
390
- --button-color: var(--color-text-100);
391
- --button-hover-background-color: var(--color-primary-500);
392
- --button-border: 1px solid var(--color-border);
393
- box-shadow: inset 0 -2px 2px 0 var(--color-primary-400),
394
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
395
- 0 1px 2px rgba(94, 66, 194, 0.2);
396
-
397
- &:disabled {
398
- --button-background-color: var(--color-primary-300);
399
- box-shadow: none;
400
- --color-border: var(--color-primary-300);
401
- }
402
-
403
- &[data-loading='true'] {
404
- --button-background-color: var(--color-primary-300);
405
- box-shadow: none;
406
- --color-border: var(--color-primary-200);
407
- }
427
+ &:disabled {
428
+ box-shadow: none;
429
+ --color-border: var(--color-primary-300);
430
+ --button-color: var(--color-primary-300);
408
431
  }
409
432
 
410
- &[data-theme='secondary'] {
411
- --color-border: var(--color-primary-400);
412
- --button-background-color: var(--color-surface-200);
413
- --button-color: var(--color-primary-400);
414
- --button-border: 1px solid var(--color-border);
415
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
416
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
417
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
418
-
419
- &:hover:not(:disabled):not([aria-disabled='true']) {
420
- --button-border: 1px solid var(--color-primary-500);
421
- --button-color: var(--color-primary-500);
422
- }
423
-
424
- &:disabled {
425
- box-shadow: none;
426
- --color-border: var(--color-primary-300);
427
- --button-color: var(--color-primary-300);
428
- }
429
-
430
- &[data-loading='true'] {
431
- --color-border: var(--color-primary-300);
432
- box-shadow: none;
433
- }
433
+ &[data-loading='true'] {
434
+ --color-border: var(--color-primary-300);
435
+ box-shadow: none;
434
436
  }
437
+ }
438
+
439
+ &[data-theme='suggestion'] {
440
+ --button-horizontal-spacing: var(--space-scale-2);
441
+ --button-background-color: var(--color-surface-200);
442
+ --button-color: var(--color-primary-400);
443
+ --button-border: 1px solid var(--color-primary-400);
444
+ line-height: var(--space-scale-2);
445
+ font-weight: var(--font-weight-normal);
446
+ font-size: var(--font-size-100);
447
+ border-radius: var(--border-radius-200);
448
+ box-shadow:
449
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
450
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
451
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
435
452
 
436
- &[data-theme='suggestion'] {
437
- --button-horizontal-spacing: var(--space-scale-2);
438
- --button-background-color: var(--color-surface-200);
439
- --button-color: var(--color-primary-400);
440
- --button-border: 1px solid var(--color-primary-400);
441
- line-height: var(--space-scale-2);
442
- font-weight: var(--font-weight-normal);
443
- font-size: var(--font-size-100);
444
- border-radius: var(--border-radius-200);
445
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
446
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
447
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
448
-
449
- &:hover:not(:disabled):not([aria-disabled='true']) {
450
- --button-background-color: var(--color-surface-300);
451
- }
453
+ &:hover:not(:disabled):not([aria-disabled='true']) {
454
+ --button-background-color: var(--color-surface-300);
452
455
  }
456
+ }
453
457
 
454
- &[data-theme='tertiary'] {
455
- --button-color: var(--color-primary-400);
456
- --button-hover-color: var(--color-primary-500);
458
+ &[data-theme='tertiary'] {
459
+ --button-color: var(--color-primary-400);
460
+ --button-hover-color: var(--color-primary-500);
457
461
 
458
- &:disabled {
459
- box-shadow: none;
460
- --button-color: var(--color-primary-300);
461
- }
462
+ &:disabled {
463
+ box-shadow: none;
464
+ --button-color: var(--color-primary-300);
465
+ }
462
466
 
463
- &:hover:not(:disabled):not([aria-disabled='true']) {
464
- --button-background-color: var(--color-primary-100);
465
- }
467
+ &:hover:not(:disabled):not([aria-disabled='true']) {
468
+ --button-background-color: var(--color-primary-100);
469
+ }
466
470
 
467
- &[data-loading='true'] {
468
- box-shadow: none;
469
- }
471
+ &[data-loading='true'] {
472
+ box-shadow: none;
470
473
  }
474
+ }
471
475
 
472
- &[data-theme='destructive-primary'] {
473
- --color-border: var(--color-alert-500);
474
- --button-background-color: var(--color-alert-400);
475
- --button-color: var(--color-text-100);
476
- --button-hover-background-color: var(--color-alert-500);
477
- --button-border: 1px solid var(--color-border);
478
- box-shadow: inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
479
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
480
- 0 1px 2px rgba(60, 66, 87, 0.08);
481
-
482
- &:disabled {
483
- --button-background-color: var(--color-alert-200);
484
- box-shadow: none;
485
- --color-border: var(--color-alert-200);
486
- }
487
-
488
- &[data-loading='true'] {
489
- --button-background-color: var(--color-alert-200);
490
- box-shadow: none;
491
- --color-border: var(--color-alert-100);
492
- --spinner-color: var(--color-surface-100);
493
- }
476
+ &[data-theme='destructive-primary'] {
477
+ --color-border: var(--color-alert-500);
478
+ --button-background-color: var(--color-alert-400);
479
+ --button-color: var(--color-text-100);
480
+ --button-hover-background-color: var(--color-alert-500);
481
+ --button-border: 1px solid var(--color-border);
482
+ box-shadow:
483
+ inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
484
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
485
+ 0 1px 2px rgba(60, 66, 87, 0.08);
486
+
487
+ &:disabled {
488
+ --button-background-color: var(--color-alert-200);
489
+ box-shadow: none;
490
+ --color-border: var(--color-alert-200);
494
491
  }
495
492
 
496
- &[data-theme='destructive-secondary'] {
497
- --button-background-color: var(--color-surface-200);
498
- --button-color: var(--color-alert-400);
499
- --color-border: var(--color-alert-400);
500
- --button-border: 1px solid var(--color-border);
501
- box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
502
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
503
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
504
-
505
- &:hover:not(:disabled):not([aria-disabled='true']) {
506
- --color-border: var(--color-alert-500);
507
- --button-color: var(--color-alert-500);
508
- }
509
-
510
- &:disabled {
511
- box-shadow: none;
512
- --color-border: var(--color-alert-200);
513
- --button-color: var(--color-alert-200);
514
- }
515
-
516
- &[data-loading='true'] {
517
- box-shadow: none;
518
- --spinner-color: var(--color-alert-400);
519
- }
493
+ &[data-loading='true'] {
494
+ --button-background-color: var(--color-alert-200);
495
+ box-shadow: none;
496
+ --color-border: var(--color-alert-100);
497
+ --spinner-color: var(--color-surface-100);
520
498
  }
499
+ }
521
500
 
522
- &[data-theme='destructive-tertiary'] {
523
- --button-color: var(--color-alert-400);
524
- --button-hover-color: var(--color-alert-500);
501
+ &[data-theme='destructive-secondary'] {
502
+ --button-background-color: var(--color-surface-200);
503
+ --button-color: var(--color-alert-400);
504
+ --color-border: var(--color-alert-400);
505
+ --button-border: 1px solid var(--color-border);
506
+ box-shadow:
507
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
508
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
509
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
525
510
 
526
- &:disabled {
527
- box-shadow: none;
528
- --color-border: var(--color-border-100);
529
- --button-color: var(--color-alert-200);
530
- }
511
+ &:hover:not(:disabled):not([aria-disabled='true']) {
512
+ --color-border: var(--color-alert-500);
513
+ --button-color: var(--color-alert-500);
514
+ }
531
515
 
532
- &:hover:not(:disabled):not([aria-disabled='true']) {
533
- --button-background-color: var(--color-alert-100);
534
- }
516
+ &:disabled {
517
+ box-shadow: none;
518
+ --color-border: var(--color-alert-200);
519
+ --button-color: var(--color-alert-200);
520
+ }
535
521
 
536
- &[data-loading='true'] {
537
- box-shadow: none;
538
- --spinner-color: var(--color-alert-400);
539
- }
522
+ &[data-loading='true'] {
523
+ box-shadow: none;
524
+ --spinner-color: var(--color-alert-400);
540
525
  }
526
+ }
541
527
 
542
- &.small {
543
- --button-horizontal-spacing: var(--space-scale-1);
544
- --button-vertical-spacing: var(--space-scale-0-5);
528
+ &[data-theme='destructive-tertiary'] {
529
+ --button-color: var(--color-alert-400);
530
+ --button-hover-color: var(--color-alert-500);
531
+
532
+ &:disabled {
533
+ box-shadow: none;
534
+ --color-border: var(--color-border-100);
535
+ --button-color: var(--color-alert-200);
545
536
  }
546
537
 
547
- &.large {
548
- --button-horizontal-spacing: var(--space-scale-2);
549
- --button-vertical-spacing: var(--space-scale-1-5);
538
+ &:hover:not(:disabled):not([aria-disabled='true']) {
539
+ --button-background-color: var(--color-alert-100);
550
540
  }
551
541
 
552
542
  &[data-loading='true'] {
553
- position: relative;
554
- color: transparent !important;
555
- pointer-events: none;
556
- cursor: not-allowed;
557
- -webkit-user-select: none;
558
- -moz-user-select: none;
559
- user-select: none;
560
- --spinner-color: var(--color-primary-400);
543
+ box-shadow: none;
544
+ --spinner-color: var(--color-alert-400);
561
545
  }
546
+ }
562
547
 
563
- /*Spinner magic*/
564
-
565
- &[data-loading='true']::after {
566
- content: '';
567
- position: absolute;
568
- top: calc(50% - 10px);
569
- left: calc(50% - 10px);
570
- width: 20px;
571
- height: 20px;
572
- transform: translate(-50%, -50%);
573
- 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");
574
- -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");
575
- mask-size: contain;
576
- -webkit-mask-size: contain;
577
- background-color: var(--spinner-color);
578
- animation: spin-animation 1s infinite linear;
579
- }
548
+ &.small {
549
+ --button-horizontal-spacing: var(--space-scale-1);
550
+ --button-vertical-spacing: var(--space-scale-0-5);
551
+ }
552
+
553
+ &.large {
554
+ --button-horizontal-spacing: var(--space-scale-2);
555
+ --button-vertical-spacing: var(--space-scale-1-5);
556
+ }
557
+
558
+ &[data-loading='true'] {
559
+ position: relative;
560
+ color: transparent !important;
561
+ pointer-events: none;
562
+ cursor: not-allowed;
563
+ -webkit-user-select: none;
564
+ -moz-user-select: none;
565
+ user-select: none;
566
+ --spinner-color: var(--color-primary-400);
567
+ }
568
+
569
+ /*Spinner magic*/
570
+
571
+ &[data-loading='true']::after {
572
+ content: '';
573
+ position: absolute;
574
+ top: calc(50% - 10px);
575
+ left: calc(50% - 10px);
576
+ width: 20px;
577
+ height: 20px;
578
+ transform: translate(-50%, -50%);
579
+ 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");
580
+ -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");
581
+ mask-size: contain;
582
+ -webkit-mask-size: contain;
583
+ background-color: var(--spinner-color);
584
+ animation: spin-animation 1s infinite linear;
585
+ }
580
586
  }
581
587
 
582
588
  @keyframes spin-animation {
583
- from {
584
- transform: rotate(0turn);
585
- }
586
- to {
587
- transform: rotate(1turn);
588
- }
589
+ from {
590
+ transform: rotate(0turn);
591
+ }
592
+ to {
593
+ transform: rotate(1turn);
594
+ }
589
595
  }
590
596
  }
591
597
  @layer base{
@@ -670,6 +676,14 @@ input[type='checkbox'] {
670
676
  accent-color: var(--color-primary-400);
671
677
  width: var(--checkbox-size, var(--space-scale-2));
672
678
  aspect-ratio: 1;
679
+
680
+ &[aria-invalid]:not([aria-invalid='false']),
681
+ &:user-invalid,
682
+ &[aria-invalid='true'] {
683
+ accent-color: var(--color-alert-400);
684
+ outline: 1px solid var(--color-alert-400);
685
+ outline-offset: -1px;
686
+ }
673
687
  }
674
688
 
675
689
  input[type='checkbox'][data-theme='toggle'],
@@ -1044,6 +1058,10 @@ a {
1044
1058
  line-height: 1.4;
1045
1059
  }
1046
1060
 
1061
+ .text-error {
1062
+ color: var(--color-alert-400);
1063
+ }
1064
+
1047
1065
  body {
1048
1066
  color: var(--color-text-500);
1049
1067
  font-weight: var(--font-weight-normal);
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.2.0
2
+ * @triptease/stylesheet v1.2.2
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.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",
@@ -15,6 +15,7 @@
15
15
  "@csstools/postcss-design-tokens": "^4.0.5",
16
16
  "autoprefixer": "^10.4.20",
17
17
  "concurrently": "^9.1.0",
18
+ "http-server": "^14.1.1",
18
19
  "lit": "^3.3.0",
19
20
  "postcss": "^8.4.49",
20
21
  "postcss-banner": "^4.0.1",