@triptease/stylesheet 1.4.10 → 2.0.0

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 (9) hide show
  1. package/dist/_variables.css +0 -20
  2. package/dist/base.css +226 -240
  3. package/dist/blocks.css +3 -3
  4. package/dist/compositions.css +1 -1
  5. package/dist/exceptions.css +1 -1
  6. package/dist/triptease.css +227 -241
  7. package/dist/utilities.css +1 -1
  8. package/dist/web/tokens.json +65 -865
  9. package/package.json +1 -1
package/dist/_variables.css CHANGED
@@ -8,11 +8,6 @@
8
8
  --asset-font-noe-text-weight: 400;
9
9
  --asset-font-inter-name: Inter;
10
10
  --asset-font-inter-style: normal;
11
- --color-alert-100: #ffd6d6;
12
- --color-alert-200: #ff9999;
13
- --color-alert-300: #f93939;
14
- --color-alert-400: #da0707;
15
- --color-alert-500: #a80505;
16
11
  --color-alert-subtle: #ffd8eb;
17
12
  --color-alert-strong: #d02521;
18
13
  --color-border-100: #e8eaec;
@@ -30,11 +25,6 @@
30
25
  --color-text-inverted-300: #9d9cab;
31
26
  --color-text-inverted-400: #d3d3da;
32
27
  --color-text-inverted-500: #ffffff;
33
- --color-info-100: #e5f3ff;
34
- --color-info-200: #c2e3ff;
35
- --color-info-300: #8fcbff;
36
- --color-info-400: #0b99ff;
37
- --color-info-500: #007dd6;
38
28
  --color-info-subtle: #f0f8ff;
39
29
  --color-info-strong: #2475b9;
40
30
  --color-primary-100: #f3f0fa;
@@ -42,11 +32,6 @@
42
32
  --color-primary-300: #cfc6ed;
43
33
  --color-primary-400: #5e43c2;
44
34
  --color-primary-500: #4d35a1;
45
- --color-success-100: #e8f6e3;
46
- --color-success-200: #c8e9bb;
47
- --color-success-300: #a7db93;
48
- --color-success-400: #86d06d;
49
- --color-success-500: #65c345;
50
35
  --color-success-subtle: #def5d6;
51
36
  --color-success-strong: #227d02;
52
37
  --color-surface-100: #ffffff;
@@ -62,11 +47,6 @@
62
47
  --color-surface-inverted-300: #5b5974;
63
48
  --color-surface-inverted-400: #7f7d95;
64
49
  --color-surface-inverted-500: #acaabc;
65
- --color-warning-100: #ffedd6;
66
- --color-warning-200: #ffe0b8;
67
- --color-warning-300: #ffce8f;
68
- --color-warning-400: #ffb95e;
69
- --color-warning-500: #ff9d1f;
70
50
  --color-warning-subtle: #ffedd6;
71
51
  --color-warning-strong: #ac5500;
72
52
  --font-family-serif: 'Noe Text', 'PT Serif', serif;
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v2.0.0
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);
@@ -15,11 +15,6 @@
15
15
  --asset-font-noe-text-weight: 400;
16
16
  --asset-font-inter-name: Inter;
17
17
  --asset-font-inter-style: normal;
18
- --color-alert-100: #ffd6d6;
19
- --color-alert-200: #ff9999;
20
- --color-alert-300: #f93939;
21
- --color-alert-400: #da0707;
22
- --color-alert-500: #a80505;
23
18
  --color-alert-subtle: #ffd8eb;
24
19
  --color-alert-strong: #d02521;
25
20
  --color-border-100: #e8eaec;
@@ -37,11 +32,6 @@
37
32
  --color-text-inverted-300: #9d9cab;
38
33
  --color-text-inverted-400: #d3d3da;
39
34
  --color-text-inverted-500: #ffffff;
40
- --color-info-100: #e5f3ff;
41
- --color-info-200: #c2e3ff;
42
- --color-info-300: #8fcbff;
43
- --color-info-400: #0b99ff;
44
- --color-info-500: #007dd6;
45
35
  --color-info-subtle: #f0f8ff;
46
36
  --color-info-strong: #2475b9;
47
37
  --color-primary-100: #f3f0fa;
@@ -49,11 +39,6 @@
49
39
  --color-primary-300: #cfc6ed;
50
40
  --color-primary-400: #5e43c2;
51
41
  --color-primary-500: #4d35a1;
52
- --color-success-100: #e8f6e3;
53
- --color-success-200: #c8e9bb;
54
- --color-success-300: #a7db93;
55
- --color-success-400: #86d06d;
56
- --color-success-500: #65c345;
57
42
  --color-success-subtle: #def5d6;
58
43
  --color-success-strong: #227d02;
59
44
  --color-surface-100: #ffffff;
@@ -69,11 +54,6 @@
69
54
  --color-surface-inverted-300: #5b5974;
70
55
  --color-surface-inverted-400: #7f7d95;
71
56
  --color-surface-inverted-500: #acaabc;
72
- --color-warning-100: #ffedd6;
73
- --color-warning-200: #ffe0b8;
74
- --color-warning-300: #ffce8f;
75
- --color-warning-400: #ffb95e;
76
- --color-warning-500: #ff9d1f;
77
57
  --color-warning-subtle: #ffedd6;
78
58
  --color-warning-strong: #ac5500;
79
59
  --font-family-serif: 'Noe Text', 'PT Serif', serif;
@@ -285,256 +265,262 @@ button {
285
265
 
286
266
  button,
287
267
  .button {
288
- -webkit-appearance: none;
289
- -moz-appearance: none;
290
- appearance: none;
291
- cursor: pointer;
292
- position: relative;
293
- height: -moz-max-content;
294
- height: max-content;
295
- font-size: var(--font-size-200);
296
- font-weight: var(--font-weight-semibold);
297
- line-height: var(--space-scale-3);
298
- padding: var(--space-scale-1) var(--space-scale-1-5);
299
- border-radius: var(--border-radius-100);
300
- border: none;
301
- outline: none;
302
- transition: background-color 0.3s ease,
268
+ -webkit-appearance: none;
269
+ -moz-appearance: none;
270
+ appearance: none;
271
+ cursor: pointer;
272
+ position: relative;
273
+ height: -moz-max-content;
274
+ height: max-content;
275
+ font-size: var(--font-size-200);
276
+ font-weight: var(--font-weight-semibold);
277
+ line-height: var(--space-scale-3);
278
+ padding: var(--space-scale-1) var(--space-scale-1-5);
279
+ border-radius: var(--border-radius-100);
280
+ border: none;
281
+ outline: none;
282
+ transition:
283
+ background-color 0.3s ease,
303
284
  box-shadow 0.3s ease;
304
- background-color: transparent;
305
- color: var(--color-text-500);
306
- width: -moz-fit-content;
307
- width: fit-content;
308
- display: flex;
309
- flex-direction: row;
310
- align-items: center;
311
- justify-content: center;
312
- gap: var(--space-scale-1);
313
-
314
- &:is([disabled], [aria-disabled='true']) {
315
- cursor: not-allowed;
316
- }
285
+ background-color: transparent;
286
+ color: var(--color-text-500);
287
+ width: -moz-fit-content;
288
+ width: fit-content;
289
+ display: flex;
290
+ flex-direction: row;
291
+ align-items: center;
292
+ justify-content: center;
293
+ gap: var(--space-scale-1);
294
+
295
+ &:is([disabled], [aria-disabled='true']) {
296
+ cursor: not-allowed;
297
+ }
317
298
 
318
- &:focus {
319
- outline: none;
299
+ &:focus {
300
+ outline: none;
301
+ }
302
+
303
+ &:focus-visible {
304
+ outline: 4px solid rgba(1, 150, 237, 0.24);
305
+ outline-offset: 0;
306
+ }
307
+
308
+ &[data-theme='primary'] {
309
+ background-color: var(--color-primary-400);
310
+ color: var(--color-text-100);
311
+ border: 1px solid var(--color-primary-500);
312
+ box-shadow:
313
+ inset 0 -2px 2px 0 var(--color-primary-400),
314
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
315
+ 0 1px 2px rgba(94, 66, 194, 0.2);
316
+
317
+ &:hover:not(:disabled):not([aria-disabled='true']) {
318
+ background-color: var(--color-primary-500);
320
319
  }
321
320
 
322
- &:focus-visible {
323
- outline: 4px solid rgba(1, 150, 237, 0.24);
324
- outline-offset: 0;
321
+ &:disabled {
322
+ background-color: var(--color-primary-300);
323
+ box-shadow: none;
324
+ border-color: var(--color-primary-300);
325
325
  }
326
326
 
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
- }
327
+ &[data-loading='true'] {
328
+ background-color: var(--color-primary-300);
329
+ box-shadow: none;
330
+ border-color: var(--color-primary-200);
350
331
  }
332
+ }
351
333
 
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
- }
334
+ &[data-theme='secondary'] {
335
+ background-color: var(--color-surface-200);
336
+ color: var(--color-primary-400);
337
+ border: 1px solid var(--color-primary-400);
338
+ box-shadow:
339
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
340
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
341
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
342
+
343
+ &:hover:not(:disabled):not([aria-disabled='true']) {
344
+ color: var(--color-primary-500);
345
+ border: 1px solid var(--color-primary-500);
375
346
  }
376
347
 
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
- }
348
+ &:disabled {
349
+ box-shadow: none;
350
+ border-color: var(--color-primary-300);
351
+ color: var(--color-primary-300);
393
352
  }
394
353
 
395
- &[data-theme='tertiary'] {
396
- color: var(--color-primary-400);
354
+ &[data-loading='true'] {
355
+ border-color: var(--color-primary-300);
356
+ box-shadow: none;
357
+ }
358
+ }
397
359
 
398
- &:disabled {
399
- box-shadow: none;
400
- color: var(--color-primary-300);
401
- }
360
+ &[data-theme='suggestion'] {
361
+ padding: var(--space-scale-1) var(--space-scale-2);
362
+ background-color: var(--color-surface-200);
363
+ color: var(--color-primary-400);
364
+ border: 1px solid var(--color-primary-400);
365
+ line-height: var(--space-scale-2);
366
+ font-weight: var(--font-weight-normal);
367
+ font-size: var(--font-size-100);
368
+ border-radius: var(--border-radius-200);
369
+ box-shadow:
370
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
371
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
372
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
373
+
374
+ &:hover:not(:disabled):not([aria-disabled='true']) {
375
+ background-color: var(--color-surface-300);
376
+ }
377
+ }
402
378
 
403
- &:hover:not(:disabled):not([aria-disabled='true']) {
404
- background-color: var(--color-primary-100);
405
- color: var(--color-primary-500);
406
- }
379
+ &[data-theme='tertiary'] {
380
+ color: var(--color-primary-400);
407
381
 
408
- &[data-loading='true'] {
409
- box-shadow: none;
410
- }
382
+ &:disabled {
383
+ box-shadow: none;
384
+ color: var(--color-primary-300);
411
385
  }
412
386
 
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
- }
387
+ &:hover:not(:disabled):not([aria-disabled='true']) {
388
+ background-color: var(--color-primary-100);
389
+ color: var(--color-primary-500);
442
390
  }
443
391
 
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
- }
392
+ &[data-loading='true'] {
393
+ box-shadow: none;
470
394
  }
395
+ }
471
396
 
472
- &[data-theme='destructive-tertiary'] {
473
- color: var(--color-alert-strong);
397
+ &[data-theme='destructive-primary'] {
398
+ --color-disabled: #890000;
474
399
 
475
- &:disabled {
476
- box-shadow: none;
477
- color: var(--color-alert-subtle);
478
- }
400
+ background-color: var(--color-alert-strong);
401
+ color: var(--color-text-100);
402
+ border: 1px solid var(--color-alert-strong);
403
+ box-shadow:
404
+ inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
405
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
406
+ 0 1px 2px rgba(60, 66, 87, 0.08);
479
407
 
480
- &:hover:not(:disabled):not([aria-disabled='true']) {
481
- background-color: --color-disabled;
482
- color: --color-disabled;
483
- }
408
+ &:hover:not(:disabled):not([aria-disabled='true']) {
409
+ background-color: --color-disabled;
410
+ }
411
+
412
+ &:disabled {
413
+ background-color: var(--color-alert-subtle);
414
+ box-shadow: none;
415
+ border-color: var(--color-alert-subtle);
416
+ }
484
417
 
485
- &[data-loading='true'] {
486
- box-shadow: none;
418
+ &[data-loading='true'] {
419
+ background-color: var(--color-alert-subtle);
420
+ box-shadow: none;
421
+ border-color: var(--color-alert-subtle);
487
422
 
488
- &::after {
489
- background-color: var(--color-alert-strong);
490
- }
491
- }
423
+ &::after {
424
+ background-color: var(--color-surface-100);
425
+ }
492
426
  }
427
+ }
493
428
 
494
- &.small {
495
- padding: var(--space-scale-0-5) var(--space-scale-1);
429
+ &[data-theme='destructive-secondary'] {
430
+ background-color: var(--color-surface-200);
431
+ color: var(--color-alert-strong);
432
+ border: 1px solid var(--color-alert-strong);
433
+ box-shadow:
434
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
435
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
436
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
437
+
438
+ &:hover:not(:disabled):not([aria-disabled='true']) {
439
+ border-color: --color-disabled;
440
+ color: --color-disabled;
496
441
  }
497
442
 
498
- &.large {
499
- padding: var(--space-scale-1-5) var(--space-scale-2);
443
+ &:disabled {
444
+ box-shadow: none;
445
+ border-color: var(--color-alert-subtle);
446
+ color: var(--color-alert-subtle);
500
447
  }
501
448
 
502
449
  &[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;
450
+ box-shadow: none;
451
+
452
+ &::after {
453
+ background-color: var(--color-alert-strong);
454
+ }
510
455
  }
456
+ }
511
457
 
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;
458
+ &[data-theme='destructive-tertiary'] {
459
+ color: var(--color-alert-strong);
460
+
461
+ &:disabled {
462
+ box-shadow: none;
463
+ color: var(--color-alert-subtle);
528
464
  }
529
- }
530
465
 
531
- @keyframes spin-animation {
532
- from {
533
- transform: rotate(0turn);
466
+ &:hover:not(:disabled):not([aria-disabled='true']) {
467
+ background-color: --color-disabled;
468
+ color: --color-disabled;
534
469
  }
535
- to {
536
- transform: rotate(1turn);
470
+
471
+ &[data-loading='true'] {
472
+ box-shadow: none;
473
+
474
+ &::after {
475
+ background-color: var(--color-alert-strong);
476
+ }
537
477
  }
478
+ }
479
+
480
+ &.small {
481
+ padding: var(--space-scale-0-5) var(--space-scale-1);
482
+ }
483
+
484
+ &.large {
485
+ padding: var(--space-scale-1-5) var(--space-scale-2);
486
+ }
487
+
488
+ &[data-loading='true'] {
489
+ position: relative;
490
+ color: transparent !important;
491
+ pointer-events: none;
492
+ cursor: not-allowed;
493
+ -webkit-user-select: none;
494
+ -moz-user-select: none;
495
+ user-select: none;
496
+ }
497
+
498
+ /*Spinner magic*/
499
+
500
+ &[data-loading='true']::after {
501
+ content: '';
502
+ position: absolute;
503
+ top: calc(50% - 10px);
504
+ left: calc(50% - 10px);
505
+ width: 20px;
506
+ height: 20px;
507
+ transform: translate(-50%, -50%);
508
+ 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");
509
+ -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");
510
+ mask-size: contain;
511
+ -webkit-mask-size: contain;
512
+ background-color: var(--color-primary-400);
513
+ animation: spin-animation 1s infinite linear;
514
+ }
515
+ }
516
+
517
+ @keyframes spin-animation {
518
+ from {
519
+ transform: rotate(0turn);
520
+ }
521
+ to {
522
+ transform: rotate(1turn);
523
+ }
538
524
  }
539
525
  }
540
526
  @layer base{
@@ -618,8 +604,8 @@ input[type='checkbox'] {
618
604
  &[aria-invalid]:not([aria-invalid='false']),
619
605
  &:user-invalid,
620
606
  &[aria-invalid='true'] {
621
- accent-color: var(--color-alert-400);
622
- outline: 1px solid var(--color-alert-400);
607
+ accent-color: var(--color-alert-strong);
608
+ outline: 1px solid var(--color-alert-strong);
623
609
  outline-offset: -1px;
624
610
  }
625
611
  }
@@ -727,7 +713,7 @@ input[type='checkbox'][data-theme='toggle'],
727
713
 
728
714
  &[aria-invalid]:not([aria-invalid='false']),
729
715
  &:user-invalid {
730
- accent-color: var(--color-alert-400);
716
+ accent-color: var(--color-alert-strong);
731
717
  }
732
718
  }
733
719
  }
@@ -967,8 +953,8 @@ textarea {
967
953
 
968
954
  &[aria-invalid]:not([aria-invalid='false']),
969
955
  &:user-invalid {
970
- --input-border-color: var(--color-alert-400);
971
- --input-focus-border-color: var(--color-alert-400);
956
+ --input-border-color: var(--color-alert-strong);
957
+ --input-focus-border-color: var(--color-alert-strong);
972
958
  }
973
959
  }
974
960
  }
@@ -1046,11 +1032,11 @@ a {
1046
1032
 
1047
1033
  .text-error,
1048
1034
  .text-danger {
1049
- color: var(--color-alert-400);
1035
+ color: var(--color-alert-strong);
1050
1036
  }
1051
1037
 
1052
1038
  .text-success {
1053
- color: var(--color-success-500);
1039
+ color: var(--color-success-strong);
1054
1040
  }
1055
1041
 
1056
1042
  body {
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v2.0.0
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -292,8 +292,8 @@ header[data-theme='top-nav'] {
292
292
  height: fit-content;
293
293
 
294
294
  &[data-status='warning'] {
295
- --tag-background-color: var(--color-warning-100);
296
- --tag-color: var(--color-warning-400);
295
+ --tag-background-color: var(--color-warning-subtle);
296
+ --tag-color: var(--color-warning-strong);
297
297
  }
298
298
  }
299
299
  }
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v2.0.0
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/exceptions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.10
2
+ * @triptease/stylesheet v2.0.0
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature