@triptease/stylesheet 1.1.0 → 1.1.1

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 +209 -214
  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 +208 -213
  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.1.0
2
+ * @triptease/stylesheet v1.1.1
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);
@@ -274,257 +274,252 @@ button {
274
274
 
275
275
  button,
276
276
  .button {
277
- -webkit-appearance: none;
278
- -moz-appearance: none;
279
- appearance: none;
280
- cursor: pointer;
281
- position: relative;
282
- height: var(--button-height, -moz-max-content);
283
- height: var(--button-height, max-content);
284
- font-size: var(--font-size-200);
285
- font-weight: var(--font-weight-semibold);
286
- line-height: var(--space-scale-3);
287
- padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
288
- border-radius: var(--border-radius-100);
289
- border: var(--button-border, none);
290
- outline: none;
291
- transition:
292
- background-color 0.3s ease,
293
- box-shadow 0.3s ease;
294
- background-color: var(--button-background-color, transparent);
295
- color: var(--button-color, var(--color-text-500));
296
- width: -moz-fit-content;
297
- width: fit-content;
298
- display: flex;
299
- flex-direction: row;
300
- align-items: center;
301
- justify-content: center;
302
- gap: var(--space-scale-1);
303
-
304
- &:is([disabled], [aria-disabled='true']) {
305
- cursor: not-allowed;
306
- }
307
-
308
- &:hover:not(:disabled):not([aria-disabled='true']) {
309
- background-color: var(--button-hover-background-color, var(--button-background-color));
310
- color: var(--button-hover-color, var(--button-color));
311
- }
312
-
313
- &:focus {
277
+ -webkit-appearance: none;
278
+ -moz-appearance: none;
279
+ appearance: none;
280
+ cursor: pointer;
281
+ position: relative;
282
+ height: var(--button-height, -moz-max-content);
283
+ height: var(--button-height, max-content);
284
+ font-size: var(--font-size-200);
285
+ font-weight: var(--font-weight-semibold);
286
+ line-height: var(--space-scale-3);
287
+ padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
288
+ border-radius: var(--border-radius-100);
289
+ border: var(--button-border, none);
314
290
  outline: none;
315
- }
316
-
317
- &:focus-visible {
318
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
319
- outline-offset: 0;
320
- }
321
-
322
- &[data-theme='primary'] {
323
- --color-border: var(--color-primary-500);
324
- --button-background-color: var(--color-primary-400);
325
- --button-color: var(--color-text-100);
326
- --button-hover-background-color: var(--color-primary-500);
327
- --button-border: 1px solid var(--color-border);
328
- box-shadow:
329
- inset 0 -2px 2px 0 var(--color-primary-400),
330
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
331
- 0 1px 2px rgba(94, 66, 194, 0.2);
332
-
333
- &:disabled {
334
- --button-background-color: var(--color-primary-300);
335
- box-shadow: none;
336
- --color-border: var(--color-primary-300);
291
+ transition: background-color 0.3s ease,
292
+ box-shadow 0.3s ease;
293
+ background-color: var(--button-background-color, transparent);
294
+ color: var(--button-color, var(--color-text-500));
295
+ width: -moz-fit-content;
296
+ width: fit-content;
297
+ display: flex;
298
+ flex-direction: row;
299
+ align-items: center;
300
+ justify-content: center;
301
+ gap: var(--space-scale-1);
302
+
303
+ &:is([disabled], [aria-disabled='true']) {
304
+ cursor: not-allowed;
337
305
  }
338
306
 
339
- &[data-loading='true'] {
340
- --button-background-color: var(--color-primary-300);
341
- box-shadow: none;
342
- --color-border: var(--color-primary-200);
307
+ &:hover:not(:disabled):not([aria-disabled='true']) {
308
+ background-color: var(--button-hover-background-color, var(--button-background-color));
309
+ color: var(--button-hover-color, var(--button-color));
343
310
  }
344
- }
345
311
 
346
- &[data-theme='secondary'] {
347
- --color-border: var(--color-primary-400);
348
- --button-background-color: var(--color-surface-200);
349
- --button-color: var(--color-primary-400);
350
- --button-border: 1px solid var(--color-border);
351
- box-shadow:
352
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
353
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
354
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
355
-
356
- &:hover:not(:disabled):not([aria-disabled='true']) {
357
- --button-border: 1px solid var(--color-primary-500);
358
- --button-color: var(--color-primary-500);
312
+ &:focus {
313
+ outline: none;
359
314
  }
360
315
 
361
- &:disabled {
362
- box-shadow: none;
363
- --color-border: var(--color-primary-300);
364
- --button-color: var(--color-primary-300);
316
+ &:focus-visible {
317
+ outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
318
+ outline-offset: 0;
365
319
  }
366
320
 
367
- &[data-loading='true'] {
368
- --color-border: var(--color-primary-300);
369
- box-shadow: none;
321
+ &[data-theme='primary'] {
322
+ --color-border: var(--color-primary-500);
323
+ --button-background-color: var(--color-primary-400);
324
+ --button-color: var(--color-text-100);
325
+ --button-hover-background-color: var(--color-primary-500);
326
+ --button-border: 1px solid var(--color-border);
327
+ box-shadow: inset 0 -2px 2px 0 var(--color-primary-400),
328
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
329
+ 0 1px 2px rgba(94, 66, 194, 0.2);
330
+
331
+ &:disabled {
332
+ --button-background-color: var(--color-primary-300);
333
+ box-shadow: none;
334
+ --color-border: var(--color-primary-300);
335
+ }
336
+
337
+ &[data-loading='true'] {
338
+ --button-background-color: var(--color-primary-300);
339
+ box-shadow: none;
340
+ --color-border: var(--color-primary-200);
341
+ }
370
342
  }
371
- }
372
343
 
373
- &[data-theme='suggestion'] {
374
- --button-horizontal-spacing: var(--space-scale-2);
375
- --button-background-color: var(--color-surface-200);
376
- --button-color: var(--color-primary-400);
377
- --button-border: 1px solid var(--color-primary-400);
378
- line-height: var(--space-scale-2);
379
- font-weight: var(--font-weight-normal);
380
- font-size: var(--font-size-100);
381
- border-radius: var(--border-radius-200);
382
- box-shadow:
383
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
384
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
385
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
344
+ &[data-theme='secondary'] {
345
+ --color-border: var(--color-primary-400);
346
+ --button-background-color: var(--color-surface-200);
347
+ --button-color: var(--color-primary-400);
348
+ --button-border: 1px solid var(--color-border);
349
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
350
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
351
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
352
+
353
+ &:hover:not(:disabled):not([aria-disabled='true']) {
354
+ --button-border: 1px solid var(--color-primary-500);
355
+ --button-color: var(--color-primary-500);
356
+ }
357
+
358
+ &:disabled {
359
+ box-shadow: none;
360
+ --color-border: var(--color-primary-300);
361
+ --button-color: var(--color-primary-300);
362
+ }
363
+
364
+ &[data-loading='true'] {
365
+ --color-border: var(--color-primary-300);
366
+ box-shadow: none;
367
+ }
368
+ }
386
369
 
387
- &:hover:not(:disabled):not([aria-disabled='true']) {
388
- --button-background-color: var(--color-surface-300);
370
+ &[data-theme='suggestion'] {
371
+ --button-horizontal-spacing: var(--space-scale-2);
372
+ --button-background-color: var(--color-surface-200);
373
+ --button-color: var(--color-primary-400);
374
+ --button-border: 1px solid var(--color-primary-400);
375
+ line-height: var(--space-scale-2);
376
+ font-weight: var(--font-weight-normal);
377
+ font-size: var(--font-size-100);
378
+ border-radius: var(--border-radius-200);
379
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
380
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
381
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
382
+
383
+ &:hover:not(:disabled):not([aria-disabled='true']) {
384
+ --button-background-color: var(--color-surface-300);
385
+ }
389
386
  }
390
- }
391
387
 
392
- &[data-theme='tertiary'] {
393
- --button-color: var(--color-primary-400);
394
- --button-hover-color: var(--color-primary-500);
388
+ &[data-theme='tertiary'] {
389
+ --button-color: var(--color-primary-400);
390
+ --button-hover-color: var(--color-primary-500);
395
391
 
396
- &:disabled {
397
- box-shadow: none;
398
- --button-color: var(--color-primary-300);
399
- }
392
+ &:disabled {
393
+ box-shadow: none;
394
+ --button-color: var(--color-primary-300);
395
+ }
400
396
 
401
- &:hover:not(:disabled):not([aria-disabled='true']) {
402
- --button-background-color: var(--color-primary-100);
403
- }
397
+ &:hover:not(:disabled):not([aria-disabled='true']) {
398
+ --button-background-color: var(--color-primary-100);
399
+ }
404
400
 
405
- &[data-loading='true'] {
406
- box-shadow: none;
401
+ &[data-loading='true'] {
402
+ box-shadow: none;
403
+ }
407
404
  }
408
- }
409
405
 
410
- &[data-theme='destructive-primary'] {
411
- --color-border: var(--color-alert-500);
412
- --button-background-color: var(--color-alert-400);
413
- --button-color: var(--color-text-100);
414
- --button-hover-background-color: var(--color-alert-500);
415
- --button-border: 1px solid var(--color-border);
416
- box-shadow:
417
- inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
418
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
419
- 0 1px 2px rgba(60, 66, 87, 0.08);
420
-
421
- &:disabled {
422
- --button-background-color: var(--color-alert-200);
423
- box-shadow: none;
424
- --color-border: var(--color-alert-200);
406
+ &[data-theme='destructive-primary'] {
407
+ --color-border: var(--color-alert-500);
408
+ --button-background-color: var(--color-alert-400);
409
+ --button-color: var(--color-text-100);
410
+ --button-hover-background-color: var(--color-alert-500);
411
+ --button-border: 1px solid var(--color-border);
412
+ box-shadow: inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
413
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
414
+ 0 1px 2px rgba(60, 66, 87, 0.08);
415
+
416
+ &:disabled {
417
+ --button-background-color: var(--color-alert-200);
418
+ box-shadow: none;
419
+ --color-border: var(--color-alert-200);
420
+ }
421
+
422
+ &[data-loading='true'] {
423
+ --button-background-color: var(--color-alert-200);
424
+ box-shadow: none;
425
+ --color-border: var(--color-alert-100);
426
+ --spinner-color: var(--color-surface-100);
427
+ }
425
428
  }
426
429
 
427
- &[data-loading='true'] {
428
- --button-background-color: var(--color-alert-200);
429
- box-shadow: none;
430
- --color-border: var(--color-alert-100);
431
- --spinner-color: var(--color-surface-100);
430
+ &[data-theme='destructive-secondary'] {
431
+ --button-background-color: var(--color-surface-200);
432
+ --button-color: var(--color-alert-400);
433
+ --color-border: var(--color-alert-400);
434
+ --button-border: 1px solid var(--color-border);
435
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
436
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
437
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
438
+
439
+ &:hover:not(:disabled):not([aria-disabled='true']) {
440
+ --color-border: var(--color-alert-500);
441
+ --button-color: var(--color-alert-500);
442
+ }
443
+
444
+ &:disabled {
445
+ box-shadow: none;
446
+ --color-border: var(--color-alert-200);
447
+ --button-color: var(--color-alert-200);
448
+ }
449
+
450
+ &[data-loading='true'] {
451
+ box-shadow: none;
452
+ --spinner-color: var(--color-alert-400);
453
+ }
432
454
  }
433
- }
434
455
 
435
- &[data-theme='destructive-secondary'] {
436
- --button-background-color: var(--color-surface-200);
437
- --button-color: var(--color-alert-400);
438
- --color-border: var(--color-alert-300);
439
- --button-border: 1px solid var(--color-border);
440
- box-shadow:
441
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
442
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
443
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
456
+ &[data-theme='destructive-tertiary'] {
457
+ --button-color: var(--color-alert-400);
458
+ --button-hover-color: var(--color-alert-500);
444
459
 
445
- &:hover:not(:disabled):not([aria-disabled='true']) {
446
- --color-border: var(--color-alert-500);
447
- --button-color: var(--color-alert-500);
448
- }
460
+ &:disabled {
461
+ box-shadow: none;
462
+ --color-border: var(--color-border-100);
463
+ --button-color: var(--color-alert-200);
464
+ }
449
465
 
450
- &:disabled {
451
- box-shadow: none;
452
- --color-border: var(--color-alert-200);
453
- --button-color: var(--color-alert-200);
454
- }
466
+ &:hover:not(:disabled):not([aria-disabled='true']) {
467
+ --button-background-color: var(--color-alert-100);
468
+ }
455
469
 
456
- &[data-loading='true'] {
457
- box-shadow: none;
458
- --spinner-color: var(--color-alert-400);
470
+ &[data-loading='true'] {
471
+ box-shadow: none;
472
+ --spinner-color: var(--color-alert-400);
473
+ }
459
474
  }
460
- }
461
475
 
462
- &[data-theme='destructive-tertiary'] {
463
- --button-color: var(--color-alert-400);
464
- --button-hover-color: var(--color-alert-500);
465
-
466
- &:disabled {
467
- box-shadow: none;
468
- --color-border: var(--color-border-100);
469
- --button-color: var(--color-alert-200);
476
+ &.small {
477
+ --button-horizontal-spacing: var(--space-scale-1);
478
+ --button-vertical-spacing: var(--space-scale-0-5);
470
479
  }
471
480
 
472
- &:hover:not(:disabled):not([aria-disabled='true']) {
473
- --button-background-color: var(--color-alert-100);
481
+ &.large {
482
+ --button-horizontal-spacing: var(--space-scale-2);
483
+ --button-vertical-spacing: var(--space-scale-1-5);
474
484
  }
475
485
 
476
486
  &[data-loading='true'] {
477
- box-shadow: none;
478
- --spinner-color: var(--color-alert-400);
487
+ position: relative;
488
+ color: transparent !important;
489
+ pointer-events: none;
490
+ cursor: not-allowed;
491
+ -webkit-user-select: none;
492
+ -moz-user-select: none;
493
+ user-select: none;
494
+ --spinner-color: var(--color-primary-400);
479
495
  }
480
- }
481
-
482
- &.small {
483
- --button-horizontal-spacing: var(--space-scale-1);
484
- --button-vertical-spacing: var(--space-scale-0-5);
485
- }
486
-
487
- &.large {
488
- --button-horizontal-spacing: 0.75rem;
489
- --button-vertical-spacing: var(--space-scale-1);
490
- }
491
-
492
- &[data-loading='true'] {
493
- position: relative;
494
- color: transparent !important;
495
- pointer-events: none;
496
- cursor: not-allowed;
497
- -webkit-user-select: none;
498
- -moz-user-select: none;
499
- user-select: none;
500
- --spinner-color: var(--color-primary-400);
501
- }
502
496
 
503
- /*Spinner magic*/
504
- &[data-loading='true']::after {
505
- content: '';
506
- position: absolute;
507
- top: calc(50% - 10px);
508
- left: calc(50% - 10px);
509
- width: 20px;
510
- height: 20px;
511
- transform: translate(-50%, -50%);
512
- 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");
513
- -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");
514
- mask-size: contain;
515
- -webkit-mask-size: contain;
516
- background-color: var(--spinner-color);
517
- animation: spin-animation 1s infinite linear;
518
- }
497
+ /*Spinner magic*/
498
+
499
+ &[data-loading='true']::after {
500
+ content: '';
501
+ position: absolute;
502
+ top: calc(50% - 10px);
503
+ left: calc(50% - 10px);
504
+ width: 20px;
505
+ height: 20px;
506
+ transform: translate(-50%, -50%);
507
+ 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");
508
+ -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");
509
+ mask-size: contain;
510
+ -webkit-mask-size: contain;
511
+ background-color: var(--spinner-color);
512
+ animation: spin-animation 1s infinite linear;
513
+ }
519
514
  }
520
515
 
521
516
  @keyframes spin-animation {
522
- from {
523
- transform: rotate(0turn);
524
- }
525
- to {
526
- transform: rotate(1turn);
527
- }
517
+ from {
518
+ transform: rotate(0turn);
519
+ }
520
+ to {
521
+ transform: rotate(1turn);
522
+ }
528
523
  }
529
524
  }
530
525
  @layer base{
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.1.0
2
+ * @triptease/stylesheet v1.1.1
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.1.0
2
+ * @triptease/stylesheet v1.1.1
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.1.0
2
+ * @triptease/stylesheet v1.1.1
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.1.0
2
+ * @triptease/stylesheet v1.1.1
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);
@@ -274,257 +274,252 @@ button {
274
274
 
275
275
  button,
276
276
  .button {
277
- -webkit-appearance: none;
278
- -moz-appearance: none;
279
- appearance: none;
280
- cursor: pointer;
281
- position: relative;
282
- height: var(--button-height, -moz-max-content);
283
- height: var(--button-height, max-content);
284
- font-size: var(--font-size-200);
285
- font-weight: var(--font-weight-semibold);
286
- line-height: var(--space-scale-3);
287
- padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
288
- border-radius: var(--border-radius-100);
289
- border: var(--button-border, none);
290
- outline: none;
291
- transition:
292
- background-color 0.3s ease,
293
- box-shadow 0.3s ease;
294
- background-color: var(--button-background-color, transparent);
295
- color: var(--button-color, var(--color-text-500));
296
- width: -moz-fit-content;
297
- width: fit-content;
298
- display: flex;
299
- flex-direction: row;
300
- align-items: center;
301
- justify-content: center;
302
- gap: var(--space-scale-1);
303
-
304
- &:is([disabled], [aria-disabled='true']) {
305
- cursor: not-allowed;
306
- }
307
-
308
- &:hover:not(:disabled):not([aria-disabled='true']) {
309
- background-color: var(--button-hover-background-color, var(--button-background-color));
310
- color: var(--button-hover-color, var(--button-color));
311
- }
312
-
313
- &:focus {
277
+ -webkit-appearance: none;
278
+ -moz-appearance: none;
279
+ appearance: none;
280
+ cursor: pointer;
281
+ position: relative;
282
+ height: var(--button-height, -moz-max-content);
283
+ height: var(--button-height, max-content);
284
+ font-size: var(--font-size-200);
285
+ font-weight: var(--font-weight-semibold);
286
+ line-height: var(--space-scale-3);
287
+ padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
288
+ border-radius: var(--border-radius-100);
289
+ border: var(--button-border, none);
314
290
  outline: none;
315
- }
316
-
317
- &:focus-visible {
318
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
319
- outline-offset: 0;
320
- }
291
+ transition: background-color 0.3s ease,
292
+ box-shadow 0.3s ease;
293
+ background-color: var(--button-background-color, transparent);
294
+ color: var(--button-color, var(--color-text-500));
295
+ width: -moz-fit-content;
296
+ width: fit-content;
297
+ display: flex;
298
+ flex-direction: row;
299
+ align-items: center;
300
+ justify-content: center;
301
+ gap: var(--space-scale-1);
321
302
 
322
- &[data-theme='primary'] {
323
- --color-border: var(--color-primary-500);
324
- --button-background-color: var(--color-primary-400);
325
- --button-color: var(--color-text-100);
326
- --button-hover-background-color: var(--color-primary-500);
327
- --button-border: 1px solid var(--color-border);
328
- box-shadow:
329
- inset 0 -2px 2px 0 var(--color-primary-400),
330
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
331
- 0 1px 2px rgba(94, 66, 194, 0.2);
332
-
333
- &:disabled {
334
- --button-background-color: var(--color-primary-300);
335
- box-shadow: none;
336
- --color-border: var(--color-primary-300);
303
+ &:is([disabled], [aria-disabled='true']) {
304
+ cursor: not-allowed;
337
305
  }
338
306
 
339
- &[data-loading='true'] {
340
- --button-background-color: var(--color-primary-300);
341
- box-shadow: none;
342
- --color-border: var(--color-primary-200);
307
+ &:hover:not(:disabled):not([aria-disabled='true']) {
308
+ background-color: var(--button-hover-background-color, var(--button-background-color));
309
+ color: var(--button-hover-color, var(--button-color));
343
310
  }
344
- }
345
-
346
- &[data-theme='secondary'] {
347
- --color-border: var(--color-primary-400);
348
- --button-background-color: var(--color-surface-200);
349
- --button-color: var(--color-primary-400);
350
- --button-border: 1px solid var(--color-border);
351
- box-shadow:
352
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
353
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
354
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
355
311
 
356
- &:hover:not(:disabled):not([aria-disabled='true']) {
357
- --button-border: 1px solid var(--color-primary-500);
358
- --button-color: var(--color-primary-500);
312
+ &:focus {
313
+ outline: none;
359
314
  }
360
315
 
361
- &:disabled {
362
- box-shadow: none;
363
- --color-border: var(--color-primary-300);
364
- --button-color: var(--color-primary-300);
316
+ &:focus-visible {
317
+ outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
318
+ outline-offset: 0;
365
319
  }
366
320
 
367
- &[data-loading='true'] {
368
- --color-border: var(--color-primary-300);
369
- box-shadow: none;
321
+ &[data-theme='primary'] {
322
+ --color-border: var(--color-primary-500);
323
+ --button-background-color: var(--color-primary-400);
324
+ --button-color: var(--color-text-100);
325
+ --button-hover-background-color: var(--color-primary-500);
326
+ --button-border: 1px solid var(--color-border);
327
+ box-shadow: inset 0 -2px 2px 0 var(--color-primary-400),
328
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
329
+ 0 1px 2px rgba(94, 66, 194, 0.2);
330
+
331
+ &:disabled {
332
+ --button-background-color: var(--color-primary-300);
333
+ box-shadow: none;
334
+ --color-border: var(--color-primary-300);
335
+ }
336
+
337
+ &[data-loading='true'] {
338
+ --button-background-color: var(--color-primary-300);
339
+ box-shadow: none;
340
+ --color-border: var(--color-primary-200);
341
+ }
370
342
  }
371
- }
372
343
 
373
- &[data-theme='suggestion'] {
374
- --button-horizontal-spacing: var(--space-scale-2);
375
- --button-background-color: var(--color-surface-200);
376
- --button-color: var(--color-primary-400);
377
- --button-border: 1px solid var(--color-primary-400);
378
- line-height: var(--space-scale-2);
379
- font-weight: var(--font-weight-normal);
380
- font-size: var(--font-size-100);
381
- border-radius: var(--border-radius-200);
382
- box-shadow:
383
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
384
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
385
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
344
+ &[data-theme='secondary'] {
345
+ --color-border: var(--color-primary-400);
346
+ --button-background-color: var(--color-surface-200);
347
+ --button-color: var(--color-primary-400);
348
+ --button-border: 1px solid var(--color-border);
349
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
350
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
351
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
352
+
353
+ &:hover:not(:disabled):not([aria-disabled='true']) {
354
+ --button-border: 1px solid var(--color-primary-500);
355
+ --button-color: var(--color-primary-500);
356
+ }
357
+
358
+ &:disabled {
359
+ box-shadow: none;
360
+ --color-border: var(--color-primary-300);
361
+ --button-color: var(--color-primary-300);
362
+ }
363
+
364
+ &[data-loading='true'] {
365
+ --color-border: var(--color-primary-300);
366
+ box-shadow: none;
367
+ }
368
+ }
386
369
 
387
- &:hover:not(:disabled):not([aria-disabled='true']) {
388
- --button-background-color: var(--color-surface-300);
370
+ &[data-theme='suggestion'] {
371
+ --button-horizontal-spacing: var(--space-scale-2);
372
+ --button-background-color: var(--color-surface-200);
373
+ --button-color: var(--color-primary-400);
374
+ --button-border: 1px solid var(--color-primary-400);
375
+ line-height: var(--space-scale-2);
376
+ font-weight: var(--font-weight-normal);
377
+ font-size: var(--font-size-100);
378
+ border-radius: var(--border-radius-200);
379
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
380
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
381
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
382
+
383
+ &:hover:not(:disabled):not([aria-disabled='true']) {
384
+ --button-background-color: var(--color-surface-300);
385
+ }
389
386
  }
390
- }
391
387
 
392
- &[data-theme='tertiary'] {
393
- --button-color: var(--color-primary-400);
394
- --button-hover-color: var(--color-primary-500);
388
+ &[data-theme='tertiary'] {
389
+ --button-color: var(--color-primary-400);
390
+ --button-hover-color: var(--color-primary-500);
395
391
 
396
- &:disabled {
397
- box-shadow: none;
398
- --button-color: var(--color-primary-300);
399
- }
392
+ &:disabled {
393
+ box-shadow: none;
394
+ --button-color: var(--color-primary-300);
395
+ }
400
396
 
401
- &:hover:not(:disabled):not([aria-disabled='true']) {
402
- --button-background-color: var(--color-primary-100);
403
- }
397
+ &:hover:not(:disabled):not([aria-disabled='true']) {
398
+ --button-background-color: var(--color-primary-100);
399
+ }
404
400
 
405
- &[data-loading='true'] {
406
- box-shadow: none;
401
+ &[data-loading='true'] {
402
+ box-shadow: none;
403
+ }
407
404
  }
408
- }
409
405
 
410
- &[data-theme='destructive-primary'] {
411
- --color-border: var(--color-alert-500);
412
- --button-background-color: var(--color-alert-400);
413
- --button-color: var(--color-text-100);
414
- --button-hover-background-color: var(--color-alert-500);
415
- --button-border: 1px solid var(--color-border);
416
- box-shadow:
417
- inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
418
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
419
- 0 1px 2px rgba(60, 66, 87, 0.08);
420
-
421
- &:disabled {
422
- --button-background-color: var(--color-alert-200);
423
- box-shadow: none;
424
- --color-border: var(--color-alert-200);
406
+ &[data-theme='destructive-primary'] {
407
+ --color-border: var(--color-alert-500);
408
+ --button-background-color: var(--color-alert-400);
409
+ --button-color: var(--color-text-100);
410
+ --button-hover-background-color: var(--color-alert-500);
411
+ --button-border: 1px solid var(--color-border);
412
+ box-shadow: inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
413
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
414
+ 0 1px 2px rgba(60, 66, 87, 0.08);
415
+
416
+ &:disabled {
417
+ --button-background-color: var(--color-alert-200);
418
+ box-shadow: none;
419
+ --color-border: var(--color-alert-200);
420
+ }
421
+
422
+ &[data-loading='true'] {
423
+ --button-background-color: var(--color-alert-200);
424
+ box-shadow: none;
425
+ --color-border: var(--color-alert-100);
426
+ --spinner-color: var(--color-surface-100);
427
+ }
425
428
  }
426
429
 
427
- &[data-loading='true'] {
428
- --button-background-color: var(--color-alert-200);
429
- box-shadow: none;
430
- --color-border: var(--color-alert-100);
431
- --spinner-color: var(--color-surface-100);
430
+ &[data-theme='destructive-secondary'] {
431
+ --button-background-color: var(--color-surface-200);
432
+ --button-color: var(--color-alert-400);
433
+ --color-border: var(--color-alert-400);
434
+ --button-border: 1px solid var(--color-border);
435
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
436
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
437
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
438
+
439
+ &:hover:not(:disabled):not([aria-disabled='true']) {
440
+ --color-border: var(--color-alert-500);
441
+ --button-color: var(--color-alert-500);
442
+ }
443
+
444
+ &:disabled {
445
+ box-shadow: none;
446
+ --color-border: var(--color-alert-200);
447
+ --button-color: var(--color-alert-200);
448
+ }
449
+
450
+ &[data-loading='true'] {
451
+ box-shadow: none;
452
+ --spinner-color: var(--color-alert-400);
453
+ }
432
454
  }
433
- }
434
455
 
435
- &[data-theme='destructive-secondary'] {
436
- --button-background-color: var(--color-surface-200);
437
- --button-color: var(--color-alert-400);
438
- --color-border: var(--color-alert-300);
439
- --button-border: 1px solid var(--color-border);
440
- box-shadow:
441
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
442
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
443
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
456
+ &[data-theme='destructive-tertiary'] {
457
+ --button-color: var(--color-alert-400);
458
+ --button-hover-color: var(--color-alert-500);
444
459
 
445
- &:hover:not(:disabled):not([aria-disabled='true']) {
446
- --color-border: var(--color-alert-500);
447
- --button-color: var(--color-alert-500);
448
- }
460
+ &:disabled {
461
+ box-shadow: none;
462
+ --color-border: var(--color-border-100);
463
+ --button-color: var(--color-alert-200);
464
+ }
449
465
 
450
- &:disabled {
451
- box-shadow: none;
452
- --color-border: var(--color-alert-200);
453
- --button-color: var(--color-alert-200);
454
- }
466
+ &:hover:not(:disabled):not([aria-disabled='true']) {
467
+ --button-background-color: var(--color-alert-100);
468
+ }
455
469
 
456
- &[data-loading='true'] {
457
- box-shadow: none;
458
- --spinner-color: var(--color-alert-400);
470
+ &[data-loading='true'] {
471
+ box-shadow: none;
472
+ --spinner-color: var(--color-alert-400);
473
+ }
459
474
  }
460
- }
461
475
 
462
- &[data-theme='destructive-tertiary'] {
463
- --button-color: var(--color-alert-400);
464
- --button-hover-color: var(--color-alert-500);
465
-
466
- &:disabled {
467
- box-shadow: none;
468
- --color-border: var(--color-border-100);
469
- --button-color: var(--color-alert-200);
476
+ &.small {
477
+ --button-horizontal-spacing: var(--space-scale-1);
478
+ --button-vertical-spacing: var(--space-scale-0-5);
470
479
  }
471
480
 
472
- &:hover:not(:disabled):not([aria-disabled='true']) {
473
- --button-background-color: var(--color-alert-100);
481
+ &.large {
482
+ --button-horizontal-spacing: var(--space-scale-2);
483
+ --button-vertical-spacing: var(--space-scale-1-5);
474
484
  }
475
485
 
476
486
  &[data-loading='true'] {
477
- box-shadow: none;
478
- --spinner-color: var(--color-alert-400);
487
+ position: relative;
488
+ color: transparent !important;
489
+ pointer-events: none;
490
+ cursor: not-allowed;
491
+ -webkit-user-select: none;
492
+ -moz-user-select: none;
493
+ user-select: none;
494
+ --spinner-color: var(--color-primary-400);
479
495
  }
480
- }
481
-
482
- &.small {
483
- --button-horizontal-spacing: var(--space-scale-1);
484
- --button-vertical-spacing: var(--space-scale-0-5);
485
- }
486
-
487
- &.large {
488
- --button-horizontal-spacing: 0.75rem;
489
- --button-vertical-spacing: var(--space-scale-1);
490
- }
491
-
492
- &[data-loading='true'] {
493
- position: relative;
494
- color: transparent !important;
495
- pointer-events: none;
496
- cursor: not-allowed;
497
- -webkit-user-select: none;
498
- -moz-user-select: none;
499
- user-select: none;
500
- --spinner-color: var(--color-primary-400);
501
- }
502
496
 
503
- /*Spinner magic*/
504
- &[data-loading='true']::after {
505
- content: '';
506
- position: absolute;
507
- top: calc(50% - 10px);
508
- left: calc(50% - 10px);
509
- width: 20px;
510
- height: 20px;
511
- transform: translate(-50%, -50%);
512
- 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");
513
- -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");
514
- mask-size: contain;
515
- -webkit-mask-size: contain;
516
- background-color: var(--spinner-color);
517
- animation: spin-animation 1s infinite linear;
518
- }
497
+ /*Spinner magic*/
498
+
499
+ &[data-loading='true']::after {
500
+ content: '';
501
+ position: absolute;
502
+ top: calc(50% - 10px);
503
+ left: calc(50% - 10px);
504
+ width: 20px;
505
+ height: 20px;
506
+ transform: translate(-50%, -50%);
507
+ 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");
508
+ -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");
509
+ mask-size: contain;
510
+ -webkit-mask-size: contain;
511
+ background-color: var(--spinner-color);
512
+ animation: spin-animation 1s infinite linear;
513
+ }
519
514
  }
520
515
 
521
516
  @keyframes spin-animation {
522
- from {
523
- transform: rotate(0turn);
524
- }
525
- to {
526
- transform: rotate(1turn);
527
- }
517
+ from {
518
+ transform: rotate(0turn);
519
+ }
520
+ to {
521
+ transform: rotate(1turn);
522
+ }
528
523
  }
529
524
  }
530
525
  @layer base{
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.1.0
2
+ * @triptease/stylesheet v1.1.1
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.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",