@triptease/stylesheet 1.4.9 → 1.4.10

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 +216 -284
  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 +215 -283
  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.10
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,326 +283,258 @@ 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
- -webkit-appearance: none;
355
- -moz-appearance: none;
356
- appearance: none;
357
- cursor: pointer;
358
- position: relative;
359
- height: var(--button-height, -moz-max-content);
360
- height: var(--button-height, max-content);
361
- font-size: var(--font-size-200);
362
- font-weight: var(--font-weight-semibold);
363
- 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));
365
- border-radius: var(--border-radius-100);
366
- border: var(--button-border, none);
367
- outline: none;
368
- transition:
369
- background-color 0.3s ease,
370
- box-shadow 0.3s ease;
371
- background-color: var(--button-background-color, transparent);
372
- color: var(--button-color, var(--color-text-500));
373
- width: -moz-fit-content;
374
- width: fit-content;
375
- display: flex;
376
- flex-direction: row;
377
- align-items: center;
378
- justify-content: center;
379
- gap: var(--space-scale-1);
380
-
381
- &:is([disabled], [aria-disabled='true']) {
382
- cursor: not-allowed;
383
- }
384
-
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
- &:focus {
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;
391
301
  outline: none;
392
- }
393
-
394
- &:focus-visible {
395
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
396
- outline-offset: 0;
397
- }
398
-
399
- &[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);
405
- box-shadow:
406
- inset 0 -2px 2px 0 var(--color-primary-400),
407
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
408
- 0 1px 2px rgba(94, 66, 194, 0.2);
409
-
410
- &:disabled {
411
- --button-background-color: var(--color-primary-300);
412
- box-shadow: none;
413
- --color-border: var(--color-primary-300);
302
+ transition: background-color 0.3s ease,
303
+ 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;
414
316
  }
415
317
 
416
- &[data-loading='true'] {
417
- --button-background-color: var(--color-primary-300);
418
- box-shadow: none;
419
- --color-border: var(--color-primary-200);
318
+ &:focus {
319
+ outline: none;
420
320
  }
421
- }
422
321
 
423
- &[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);
429
- box-shadow:
430
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
431
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
432
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
433
-
434
- &:hover:not(:disabled):not([aria-disabled='true']) {
435
- --button-border: 1px solid var(--color-primary-500);
322
+ &:focus-visible {
323
+ outline: 4px solid rgba(1, 150, 237, 0.24);
324
+ outline-offset: 0;
436
325
  }
437
326
 
438
- &:disabled {
439
- box-shadow: none;
440
- --color-border: var(--color-primary-300);
441
- --button-color: var(--color-primary-300);
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
+ }
442
350
  }
443
351
 
444
- &[data-loading='true'] {
445
- --color-border: var(--color-primary-300);
446
- box-shadow: none;
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
+ }
447
375
  }
448
- }
449
376
 
450
- &[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);
455
- line-height: var(--space-scale-2);
456
- font-weight: var(--font-weight-normal);
457
- font-size: var(--font-size-100);
458
- border-radius: var(--border-radius-200);
459
- box-shadow:
460
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
461
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
462
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
463
-
464
- &:hover:not(:disabled):not([aria-disabled='true']) {
465
- --button-background-color: var(--color-surface-300);
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
+ }
466
393
  }
467
- }
468
394
 
469
- &[data-theme='tertiary'] {
470
- --button-color: var(--color-primary-400);
471
- --button-hover-color: var(--color-primary-500);
395
+ &[data-theme='tertiary'] {
396
+ color: var(--color-primary-400);
472
397
 
473
- &:disabled {
474
- box-shadow: none;
475
- --button-color: var(--color-primary-300);
476
- }
398
+ &:disabled {
399
+ box-shadow: none;
400
+ color: var(--color-primary-300);
401
+ }
477
402
 
478
- &:hover:not(:disabled):not([aria-disabled='true']) {
479
- --button-background-color: var(--color-primary-100);
480
- }
403
+ &:hover:not(:disabled):not([aria-disabled='true']) {
404
+ background-color: var(--color-primary-100);
405
+ color: var(--color-primary-500);
406
+ }
481
407
 
482
- &[data-loading='true'] {
483
- box-shadow: none;
408
+ &[data-loading='true'] {
409
+ box-shadow: none;
410
+ }
484
411
  }
485
- }
486
412
 
487
- &[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);
493
- box-shadow:
494
- inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
495
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
496
- 0 1px 2px rgba(60, 66, 87, 0.08);
497
-
498
- &:disabled {
499
- --button-background-color: var(--color-alert-200);
500
- box-shadow: none;
501
- --color-border: var(--color-alert-200);
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
+ }
502
442
  }
503
443
 
504
- &[data-loading='true'] {
505
- --button-background-color: var(--color-alert-200);
506
- box-shadow: none;
507
- --color-border: var(--color-alert-100);
508
- --spinner-color: var(--color-surface-100);
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
+ }
509
470
  }
510
- }
511
471
 
512
- &[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);
517
- box-shadow:
518
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
519
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
520
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
521
-
522
- &:hover:not(:disabled):not([aria-disabled='true']) {
523
- --color-border: var(--color-alert-500);
524
- --button-color: var(--color-alert-500);
525
- }
472
+ &[data-theme='destructive-tertiary'] {
473
+ color: var(--color-alert-strong);
526
474
 
527
- &:disabled {
528
- box-shadow: none;
529
- --color-border: var(--color-alert-200);
530
- --button-color: var(--color-alert-200);
531
- }
475
+ &:disabled {
476
+ box-shadow: none;
477
+ color: var(--color-alert-subtle);
478
+ }
532
479
 
533
- &[data-loading='true'] {
534
- box-shadow: none;
535
- --spinner-color: var(--color-alert-400);
536
- }
537
- }
480
+ &:hover:not(:disabled):not([aria-disabled='true']) {
481
+ background-color: --color-disabled;
482
+ color: --color-disabled;
483
+ }
538
484
 
539
- &[data-theme='destructive-tertiary'] {
540
- --button-color: var(--color-alert-400);
541
- --button-hover-color: var(--color-alert-500);
485
+ &[data-loading='true'] {
486
+ box-shadow: none;
542
487
 
543
- &:disabled {
544
- box-shadow: none;
545
- --color-border: var(--color-border-100);
546
- --button-color: var(--color-alert-200);
488
+ &::after {
489
+ background-color: var(--color-alert-strong);
490
+ }
491
+ }
547
492
  }
548
493
 
549
- &:hover:not(:disabled):not([aria-disabled='true']) {
550
- --button-background-color: var(--color-alert-100);
494
+ &.small {
495
+ padding: var(--space-scale-0-5) var(--space-scale-1);
551
496
  }
552
497
 
553
- &[data-loading='true'] {
554
- box-shadow: none;
555
- --spinner-color: var(--color-alert-400);
498
+ &.large {
499
+ padding: var(--space-scale-1-5) var(--space-scale-2);
556
500
  }
557
- }
558
-
559
- &.small {
560
- --button-horizontal-spacing: var(--space-scale-1);
561
- --button-vertical-spacing: var(--space-scale-0-5);
562
- }
563
-
564
- &.large {
565
- --button-horizontal-spacing: var(--space-scale-2);
566
- --button-vertical-spacing: var(--space-scale-1-5);
567
- }
568
-
569
- &[data-loading='true'] {
570
- position: relative;
571
- color: transparent !important;
572
- pointer-events: none;
573
- cursor: not-allowed;
574
- -webkit-user-select: none;
575
- -moz-user-select: none;
576
- user-select: none;
577
- --spinner-color: var(--color-primary-400);
578
- }
579
501
 
580
- /*Spinner magic*/
502
+ &[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;
510
+ }
581
511
 
582
- &[data-loading='true']::after {
583
- content: '';
584
- position: absolute;
585
- top: calc(50% - 10px);
586
- left: calc(50% - 10px);
587
- width: 20px;
588
- height: 20px;
589
- transform: translate(-50%, -50%);
590
- 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");
591
- -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
- mask-size: contain;
593
- -webkit-mask-size: contain;
594
- background-color: var(--spinner-color);
595
- animation: spin-animation 1s infinite linear;
596
- }
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;
528
+ }
597
529
  }
598
530
 
599
531
  @keyframes spin-animation {
600
- from {
601
- transform: rotate(0turn);
602
- }
603
- to {
604
- transform: rotate(1turn);
605
- }
532
+ from {
533
+ transform: rotate(0turn);
534
+ }
535
+ to {
536
+ transform: rotate(1turn);
537
+ }
606
538
  }
607
539
  }
608
540
  @layer base{
@@ -731,7 +663,7 @@ input[type='checkbox'][data-theme='toggle'],
731
663
  background-color: var(--color-success-strong);
732
664
 
733
665
  &:hover {
734
- color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
666
+ color: #004200;
735
667
  background-color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
736
668
  }
737
669
  }
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.9
2
+ * @triptease/stylesheet v1.4.10
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.4.9
2
+ * @triptease/stylesheet v1.4.10
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.10
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.10
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,326 +283,258 @@ 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
- -webkit-appearance: none;
355
- -moz-appearance: none;
356
- appearance: none;
357
- cursor: pointer;
358
- position: relative;
359
- height: var(--button-height, -moz-max-content);
360
- height: var(--button-height, max-content);
361
- font-size: var(--font-size-200);
362
- font-weight: var(--font-weight-semibold);
363
- 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));
365
- border-radius: var(--border-radius-100);
366
- border: var(--button-border, none);
367
- outline: none;
368
- transition:
369
- background-color 0.3s ease,
370
- box-shadow 0.3s ease;
371
- background-color: var(--button-background-color, transparent);
372
- color: var(--button-color, var(--color-text-500));
373
- width: -moz-fit-content;
374
- width: fit-content;
375
- display: flex;
376
- flex-direction: row;
377
- align-items: center;
378
- justify-content: center;
379
- gap: var(--space-scale-1);
380
-
381
- &:is([disabled], [aria-disabled='true']) {
382
- cursor: not-allowed;
383
- }
384
-
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
- &:focus {
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;
391
301
  outline: none;
392
- }
393
-
394
- &:focus-visible {
395
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
396
- outline-offset: 0;
397
- }
302
+ transition: background-color 0.3s ease,
303
+ 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);
398
313
 
399
- &[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);
405
- box-shadow:
406
- inset 0 -2px 2px 0 var(--color-primary-400),
407
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
408
- 0 1px 2px rgba(94, 66, 194, 0.2);
409
-
410
- &:disabled {
411
- --button-background-color: var(--color-primary-300);
412
- box-shadow: none;
413
- --color-border: var(--color-primary-300);
314
+ &:is([disabled], [aria-disabled='true']) {
315
+ cursor: not-allowed;
414
316
  }
415
317
 
416
- &[data-loading='true'] {
417
- --button-background-color: var(--color-primary-300);
418
- box-shadow: none;
419
- --color-border: var(--color-primary-200);
318
+ &:focus {
319
+ outline: none;
420
320
  }
421
- }
422
321
 
423
- &[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);
429
- box-shadow:
430
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
431
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
432
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
433
-
434
- &:hover:not(:disabled):not([aria-disabled='true']) {
435
- --button-border: 1px solid var(--color-primary-500);
322
+ &:focus-visible {
323
+ outline: 4px solid rgba(1, 150, 237, 0.24);
324
+ outline-offset: 0;
436
325
  }
437
326
 
438
- &:disabled {
439
- box-shadow: none;
440
- --color-border: var(--color-primary-300);
441
- --button-color: var(--color-primary-300);
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
+ }
442
350
  }
443
351
 
444
- &[data-loading='true'] {
445
- --color-border: var(--color-primary-300);
446
- box-shadow: none;
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
+ }
447
375
  }
448
- }
449
376
 
450
- &[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);
455
- line-height: var(--space-scale-2);
456
- font-weight: var(--font-weight-normal);
457
- font-size: var(--font-size-100);
458
- border-radius: var(--border-radius-200);
459
- box-shadow:
460
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
461
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
462
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
463
-
464
- &:hover:not(:disabled):not([aria-disabled='true']) {
465
- --button-background-color: var(--color-surface-300);
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
+ }
466
393
  }
467
- }
468
394
 
469
- &[data-theme='tertiary'] {
470
- --button-color: var(--color-primary-400);
471
- --button-hover-color: var(--color-primary-500);
395
+ &[data-theme='tertiary'] {
396
+ color: var(--color-primary-400);
472
397
 
473
- &:disabled {
474
- box-shadow: none;
475
- --button-color: var(--color-primary-300);
476
- }
398
+ &:disabled {
399
+ box-shadow: none;
400
+ color: var(--color-primary-300);
401
+ }
477
402
 
478
- &:hover:not(:disabled):not([aria-disabled='true']) {
479
- --button-background-color: var(--color-primary-100);
480
- }
403
+ &:hover:not(:disabled):not([aria-disabled='true']) {
404
+ background-color: var(--color-primary-100);
405
+ color: var(--color-primary-500);
406
+ }
481
407
 
482
- &[data-loading='true'] {
483
- box-shadow: none;
408
+ &[data-loading='true'] {
409
+ box-shadow: none;
410
+ }
484
411
  }
485
- }
486
412
 
487
- &[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);
493
- box-shadow:
494
- inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
495
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
496
- 0 1px 2px rgba(60, 66, 87, 0.08);
497
-
498
- &:disabled {
499
- --button-background-color: var(--color-alert-200);
500
- box-shadow: none;
501
- --color-border: var(--color-alert-200);
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
+ }
502
442
  }
503
443
 
504
- &[data-loading='true'] {
505
- --button-background-color: var(--color-alert-200);
506
- box-shadow: none;
507
- --color-border: var(--color-alert-100);
508
- --spinner-color: var(--color-surface-100);
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
+ }
509
470
  }
510
- }
511
471
 
512
- &[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);
517
- box-shadow:
518
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
519
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
520
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
521
-
522
- &:hover:not(:disabled):not([aria-disabled='true']) {
523
- --color-border: var(--color-alert-500);
524
- --button-color: var(--color-alert-500);
525
- }
472
+ &[data-theme='destructive-tertiary'] {
473
+ color: var(--color-alert-strong);
526
474
 
527
- &:disabled {
528
- box-shadow: none;
529
- --color-border: var(--color-alert-200);
530
- --button-color: var(--color-alert-200);
531
- }
475
+ &:disabled {
476
+ box-shadow: none;
477
+ color: var(--color-alert-subtle);
478
+ }
532
479
 
533
- &[data-loading='true'] {
534
- box-shadow: none;
535
- --spinner-color: var(--color-alert-400);
536
- }
537
- }
480
+ &:hover:not(:disabled):not([aria-disabled='true']) {
481
+ background-color: --color-disabled;
482
+ color: --color-disabled;
483
+ }
538
484
 
539
- &[data-theme='destructive-tertiary'] {
540
- --button-color: var(--color-alert-400);
541
- --button-hover-color: var(--color-alert-500);
485
+ &[data-loading='true'] {
486
+ box-shadow: none;
542
487
 
543
- &:disabled {
544
- box-shadow: none;
545
- --color-border: var(--color-border-100);
546
- --button-color: var(--color-alert-200);
488
+ &::after {
489
+ background-color: var(--color-alert-strong);
490
+ }
491
+ }
547
492
  }
548
493
 
549
- &:hover:not(:disabled):not([aria-disabled='true']) {
550
- --button-background-color: var(--color-alert-100);
494
+ &.small {
495
+ padding: var(--space-scale-0-5) var(--space-scale-1);
551
496
  }
552
497
 
553
- &[data-loading='true'] {
554
- box-shadow: none;
555
- --spinner-color: var(--color-alert-400);
498
+ &.large {
499
+ padding: var(--space-scale-1-5) var(--space-scale-2);
556
500
  }
557
- }
558
-
559
- &.small {
560
- --button-horizontal-spacing: var(--space-scale-1);
561
- --button-vertical-spacing: var(--space-scale-0-5);
562
- }
563
-
564
- &.large {
565
- --button-horizontal-spacing: var(--space-scale-2);
566
- --button-vertical-spacing: var(--space-scale-1-5);
567
- }
568
501
 
569
- &[data-loading='true'] {
570
- position: relative;
571
- color: transparent !important;
572
- pointer-events: none;
573
- cursor: not-allowed;
574
- -webkit-user-select: none;
575
- -moz-user-select: none;
576
- user-select: none;
577
- --spinner-color: var(--color-primary-400);
578
- }
579
-
580
- /*Spinner magic*/
502
+ &[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;
510
+ }
581
511
 
582
- &[data-loading='true']::after {
583
- content: '';
584
- position: absolute;
585
- top: calc(50% - 10px);
586
- left: calc(50% - 10px);
587
- width: 20px;
588
- height: 20px;
589
- transform: translate(-50%, -50%);
590
- 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");
591
- -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
- mask-size: contain;
593
- -webkit-mask-size: contain;
594
- background-color: var(--spinner-color);
595
- animation: spin-animation 1s infinite linear;
596
- }
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;
528
+ }
597
529
  }
598
530
 
599
531
  @keyframes spin-animation {
600
- from {
601
- transform: rotate(0turn);
602
- }
603
- to {
604
- transform: rotate(1turn);
605
- }
532
+ from {
533
+ transform: rotate(0turn);
534
+ }
535
+ to {
536
+ transform: rotate(1turn);
537
+ }
606
538
  }
607
539
  }
608
540
  @layer base{
@@ -731,7 +663,7 @@ input[type='checkbox'][data-theme='toggle'],
731
663
  background-color: var(--color-success-strong);
732
664
 
733
665
  &:hover {
734
- color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
666
+ color: #004200;
735
667
  background-color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
736
668
  }
737
669
  }
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.9
2
+ * @triptease/stylesheet v1.4.10
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.10",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",