@triptease/stylesheet 1.1.1 → 1.2.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 +415 -210
  2. package/dist/blocks.css +26 -1
  3. package/dist/compositions.css +8 -2
  4. package/dist/exceptions.css +1 -1
  5. package/dist/triptease.css +446 -210
  6. package/dist/utilities.css +1 -1
  7. package/package.json +2 -1
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.1.1
2
+ * @triptease/stylesheet v1.2.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);
@@ -272,254 +272,326 @@ button {
272
272
  /* noinspection CssInvalidAtRule */
273
273
  @layer base{
274
274
 
275
+ @property --button-height {
276
+ syntax: '*';
277
+ inherits: true;
278
+ initial-value: max-content;
279
+ }
280
+
281
+ @property --button-vertical-spacing {
282
+ syntax: '<length>';
283
+ inherits: true;
284
+ initial-value: 0.5rem;
285
+ }
286
+
287
+ @property --button-horizontal-spacing {
288
+ syntax: '<length>';
289
+ inherits: true;
290
+ initial-value: 0.75rem;
291
+ }
292
+
293
+ @property --button-border {
294
+ syntax: '*';
295
+ inherits: true;
296
+ initial-value: none;
297
+ }
298
+
299
+ @property --button-background-color {
300
+ syntax: '<color>';
301
+ inherits: true;
302
+ initial-value: transparent;
303
+ }
304
+
305
+ @property --button-color {
306
+ syntax: '<color>';
307
+ inherits: true;
308
+ initial-value: #0D0C0D;
309
+ }
310
+
311
+ @property --button-hover-background-color {
312
+ syntax: '<color>';
313
+ inherits: true;
314
+ initial-value: transparent;
315
+ }
316
+
317
+ @property --button-hover-color {
318
+ syntax: '<color>';
319
+ inherits: true;
320
+ initial-value: #0D0C0D;
321
+ }
322
+
323
+ @property --button-focus-outline-color {
324
+ syntax: '<color>';
325
+ inherits: true;
326
+ initial-value: rgba(1, 150, 237, 0.24);
327
+ }
328
+
329
+ @property --spinner-color {
330
+ syntax: '<color>';
331
+ inherits: true;
332
+ initial-value: #5E43C2;
333
+ }
334
+
335
+ @property --color-border {
336
+ syntax: '<color>';
337
+ inherits: true;
338
+ initial-value: #C5C8CE;
339
+ }
340
+
275
341
  button,
276
342
  .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: background-color 0.3s ease,
343
+ -webkit-appearance: none;
344
+ -moz-appearance: none;
345
+ appearance: none;
346
+ cursor: pointer;
347
+ position: relative;
348
+ height: var(--button-height, -moz-max-content);
349
+ height: var(--button-height, max-content);
350
+ font-size: var(--font-size-200);
351
+ font-weight: var(--font-weight-semibold);
352
+ line-height: var(--space-scale-3);
353
+ padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
354
+ border-radius: var(--border-radius-100);
355
+ border: var(--button-border, none);
356
+ outline: none;
357
+ transition:
358
+ background-color 0.3s ease,
292
359
  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;
305
- }
360
+ background-color: var(--button-background-color, transparent);
361
+ color: var(--button-color, var(--color-text-500));
362
+ width: -moz-fit-content;
363
+ width: fit-content;
364
+ display: flex;
365
+ flex-direction: row;
366
+ align-items: center;
367
+ justify-content: center;
368
+ gap: var(--space-scale-1);
369
+
370
+ &:is([disabled], [aria-disabled='true']) {
371
+ cursor: not-allowed;
372
+ }
306
373
 
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));
374
+ &:hover:not(:disabled):not([aria-disabled='true']) {
375
+ background-color: var(--button-hover-background-color, var(--button-background-color));
376
+ color: var(--button-hover-color, var(--button-color));
377
+ }
378
+
379
+ &:focus {
380
+ outline: none;
381
+ }
382
+
383
+ &:focus-visible {
384
+ outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
385
+ outline-offset: 0;
386
+ }
387
+
388
+ &[data-theme='primary'] {
389
+ --color-border: var(--color-primary-500);
390
+ --button-background-color: var(--color-primary-400);
391
+ --button-color: var(--color-text-100);
392
+ --button-hover-background-color: var(--color-primary-500);
393
+ --button-border: 1px solid var(--color-border);
394
+ box-shadow:
395
+ inset 0 -2px 2px 0 var(--color-primary-400),
396
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
397
+ 0 1px 2px rgba(94, 66, 194, 0.2);
398
+
399
+ &:disabled {
400
+ --button-background-color: var(--color-primary-300);
401
+ box-shadow: none;
402
+ --color-border: var(--color-primary-300);
310
403
  }
311
404
 
312
- &:focus {
313
- outline: none;
405
+ &[data-loading='true'] {
406
+ --button-background-color: var(--color-primary-300);
407
+ box-shadow: none;
408
+ --color-border: var(--color-primary-200);
314
409
  }
410
+ }
315
411
 
316
- &:focus-visible {
317
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
318
- outline-offset: 0;
412
+ &[data-theme='secondary'] {
413
+ --color-border: var(--color-primary-400);
414
+ --button-background-color: var(--color-surface-200);
415
+ --button-color: var(--color-primary-400);
416
+ --button-border: 1px solid var(--color-border);
417
+ box-shadow:
418
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
419
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
420
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
421
+
422
+ &:hover:not(:disabled):not([aria-disabled='true']) {
423
+ --button-border: 1px solid var(--color-primary-500);
424
+ --button-color: var(--color-primary-500);
319
425
  }
320
426
 
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
- }
427
+ &:disabled {
428
+ box-shadow: none;
429
+ --color-border: var(--color-primary-300);
430
+ --button-color: var(--color-primary-300);
342
431
  }
343
432
 
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
- }
433
+ &[data-loading='true'] {
434
+ --color-border: var(--color-primary-300);
435
+ box-shadow: none;
368
436
  }
437
+ }
369
438
 
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
- }
439
+ &[data-theme='suggestion'] {
440
+ --button-horizontal-spacing: var(--space-scale-2);
441
+ --button-background-color: var(--color-surface-200);
442
+ --button-color: var(--color-primary-400);
443
+ --button-border: 1px solid var(--color-primary-400);
444
+ line-height: var(--space-scale-2);
445
+ font-weight: var(--font-weight-normal);
446
+ font-size: var(--font-size-100);
447
+ border-radius: var(--border-radius-200);
448
+ box-shadow:
449
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
450
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
451
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
452
+
453
+ &:hover:not(:disabled):not([aria-disabled='true']) {
454
+ --button-background-color: var(--color-surface-300);
386
455
  }
456
+ }
387
457
 
388
- &[data-theme='tertiary'] {
389
- --button-color: var(--color-primary-400);
390
- --button-hover-color: var(--color-primary-500);
458
+ &[data-theme='tertiary'] {
459
+ --button-color: var(--color-primary-400);
460
+ --button-hover-color: var(--color-primary-500);
391
461
 
392
- &:disabled {
393
- box-shadow: none;
394
- --button-color: var(--color-primary-300);
395
- }
462
+ &:disabled {
463
+ box-shadow: none;
464
+ --button-color: var(--color-primary-300);
465
+ }
396
466
 
397
- &:hover:not(:disabled):not([aria-disabled='true']) {
398
- --button-background-color: var(--color-primary-100);
399
- }
467
+ &:hover:not(:disabled):not([aria-disabled='true']) {
468
+ --button-background-color: var(--color-primary-100);
469
+ }
400
470
 
401
- &[data-loading='true'] {
402
- box-shadow: none;
403
- }
471
+ &[data-loading='true'] {
472
+ box-shadow: none;
404
473
  }
474
+ }
405
475
 
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
- }
476
+ &[data-theme='destructive-primary'] {
477
+ --color-border: var(--color-alert-500);
478
+ --button-background-color: var(--color-alert-400);
479
+ --button-color: var(--color-text-100);
480
+ --button-hover-background-color: var(--color-alert-500);
481
+ --button-border: 1px solid var(--color-border);
482
+ box-shadow:
483
+ inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
484
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
485
+ 0 1px 2px rgba(60, 66, 87, 0.08);
486
+
487
+ &:disabled {
488
+ --button-background-color: var(--color-alert-200);
489
+ box-shadow: none;
490
+ --color-border: var(--color-alert-200);
428
491
  }
429
492
 
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
- }
493
+ &[data-loading='true'] {
494
+ --button-background-color: var(--color-alert-200);
495
+ box-shadow: none;
496
+ --color-border: var(--color-alert-100);
497
+ --spinner-color: var(--color-surface-100);
454
498
  }
499
+ }
455
500
 
456
- &[data-theme='destructive-tertiary'] {
457
- --button-color: var(--color-alert-400);
458
- --button-hover-color: var(--color-alert-500);
501
+ &[data-theme='destructive-secondary'] {
502
+ --button-background-color: var(--color-surface-200);
503
+ --button-color: var(--color-alert-400);
504
+ --color-border: var(--color-alert-400);
505
+ --button-border: 1px solid var(--color-border);
506
+ box-shadow:
507
+ inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
508
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
509
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
459
510
 
460
- &:disabled {
461
- box-shadow: none;
462
- --color-border: var(--color-border-100);
463
- --button-color: var(--color-alert-200);
464
- }
511
+ &:hover:not(:disabled):not([aria-disabled='true']) {
512
+ --color-border: var(--color-alert-500);
513
+ --button-color: var(--color-alert-500);
514
+ }
465
515
 
466
- &:hover:not(:disabled):not([aria-disabled='true']) {
467
- --button-background-color: var(--color-alert-100);
468
- }
516
+ &:disabled {
517
+ box-shadow: none;
518
+ --color-border: var(--color-alert-200);
519
+ --button-color: var(--color-alert-200);
520
+ }
469
521
 
470
- &[data-loading='true'] {
471
- box-shadow: none;
472
- --spinner-color: var(--color-alert-400);
473
- }
522
+ &[data-loading='true'] {
523
+ box-shadow: none;
524
+ --spinner-color: var(--color-alert-400);
474
525
  }
526
+ }
527
+
528
+ &[data-theme='destructive-tertiary'] {
529
+ --button-color: var(--color-alert-400);
530
+ --button-hover-color: var(--color-alert-500);
475
531
 
476
- &.small {
477
- --button-horizontal-spacing: var(--space-scale-1);
478
- --button-vertical-spacing: var(--space-scale-0-5);
532
+ &:disabled {
533
+ box-shadow: none;
534
+ --color-border: var(--color-border-100);
535
+ --button-color: var(--color-alert-200);
479
536
  }
480
537
 
481
- &.large {
482
- --button-horizontal-spacing: var(--space-scale-2);
483
- --button-vertical-spacing: var(--space-scale-1-5);
538
+ &:hover:not(:disabled):not([aria-disabled='true']) {
539
+ --button-background-color: var(--color-alert-100);
484
540
  }
485
541
 
486
542
  &[data-loading='true'] {
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);
543
+ box-shadow: none;
544
+ --spinner-color: var(--color-alert-400);
495
545
  }
546
+ }
496
547
 
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
- }
548
+ &.small {
549
+ --button-horizontal-spacing: var(--space-scale-1);
550
+ --button-vertical-spacing: var(--space-scale-0-5);
551
+ }
552
+
553
+ &.large {
554
+ --button-horizontal-spacing: var(--space-scale-2);
555
+ --button-vertical-spacing: var(--space-scale-1-5);
556
+ }
557
+
558
+ &[data-loading='true'] {
559
+ position: relative;
560
+ color: transparent !important;
561
+ pointer-events: none;
562
+ cursor: not-allowed;
563
+ -webkit-user-select: none;
564
+ -moz-user-select: none;
565
+ user-select: none;
566
+ --spinner-color: var(--color-primary-400);
567
+ }
568
+
569
+ /*Spinner magic*/
570
+
571
+ &[data-loading='true']::after {
572
+ content: '';
573
+ position: absolute;
574
+ top: calc(50% - 10px);
575
+ left: calc(50% - 10px);
576
+ width: 20px;
577
+ height: 20px;
578
+ transform: translate(-50%, -50%);
579
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
580
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
581
+ mask-size: contain;
582
+ -webkit-mask-size: contain;
583
+ background-color: var(--spinner-color);
584
+ animation: spin-animation 1s infinite linear;
585
+ }
514
586
  }
515
587
 
516
588
  @keyframes spin-animation {
517
- from {
518
- transform: rotate(0turn);
519
- }
520
- to {
521
- transform: rotate(1turn);
522
- }
589
+ from {
590
+ transform: rotate(0turn);
591
+ }
592
+ to {
593
+ transform: rotate(1turn);
594
+ }
523
595
  }
524
596
  }
525
597
  @layer base{
@@ -540,10 +612,78 @@ button,
540
612
  }
541
613
  @layer base{
542
614
 
615
+ @property --checkbox-size {
616
+ syntax: '<length>';
617
+ inherits: true;
618
+ initial-value: 1rem;
619
+ }
620
+
621
+ @property --toggle-width {
622
+ syntax: '<length>';
623
+ inherits: true;
624
+ initial-value: 3.5rem;
625
+ }
626
+
627
+ @property --toggle-height {
628
+ syntax: '<length>';
629
+ inherits: true;
630
+ initial-value: 1.75rem;
631
+ }
632
+
633
+ @property --toggle-background-color {
634
+ syntax: '<color>';
635
+ inherits: true;
636
+ initial-value: #75767E;
637
+ }
638
+
639
+ @property --toggle-color {
640
+ syntax: '<color>';
641
+ inherits: true;
642
+ initial-value: #B5B0B5;
643
+ }
644
+
645
+ @property --toggle-transition-speed {
646
+ syntax: '<time>';
647
+ inherits: true;
648
+ initial-value: 0.25s;
649
+ }
650
+
651
+ @property --toggle-border-color {
652
+ syntax: '<color>';
653
+ inherits: true;
654
+ initial-value: transparent;
655
+ }
656
+
657
+ @property --toggle-border-width {
658
+ syntax: '<length>';
659
+ inherits: true;
660
+ initial-value: 0px;
661
+ }
662
+
663
+ @property --toggle-hover-color {
664
+ syntax: '<color>';
665
+ inherits: true;
666
+ initial-value: #575157;
667
+ }
668
+
669
+ @property --toggle-hover-background-color {
670
+ syntax: '<color>';
671
+ inherits: true;
672
+ initial-value: #1C1B27;
673
+ }
674
+
543
675
  input[type='checkbox'] {
544
676
  accent-color: var(--color-primary-400);
545
677
  width: var(--checkbox-size, var(--space-scale-2));
546
678
  aspect-ratio: 1;
679
+
680
+ &[aria-invalid]:not([aria-invalid='false']),
681
+ &:user-invalid,
682
+ &[aria-invalid='true'] {
683
+ accent-color: var(--color-alert-400);
684
+ outline: 1px solid var(--color-alert-400);
685
+ outline-offset: -1px;
686
+ }
547
687
  }
548
688
 
549
689
  input[type='checkbox'][data-theme='toggle'],
@@ -677,6 +817,19 @@ input[type='number']::-webkit-inner-spin-button {
677
817
  }
678
818
  }
679
819
  @layer base{
820
+
821
+ @property --radio-size {
822
+ syntax: '<length>';
823
+ inherits: true;
824
+ initial-value: 1rem;
825
+ }
826
+
827
+ @property --radio-accent-color {
828
+ syntax: '<color>';
829
+ inherits: true;
830
+ initial-value: #5E43C2;
831
+ }
832
+
680
833
  input[type='radio'] {
681
834
  --radio-size: var(--space-scale-2);
682
835
  --radio-accent-color: var(--color-primary-400);
@@ -724,11 +877,59 @@ input[type='radio'] {
724
877
  @layer base{
725
878
 
726
879
  @property --input-horizontal-spacing {
727
- syntax: '*';
880
+ syntax: '<length>';
728
881
  inherits: true;
729
882
  initial-value: 1rem;
730
883
  }
731
884
 
885
+ @property --input-background-color {
886
+ syntax: '<color>';
887
+ inherits: true;
888
+ initial-value: #FFFFFF;
889
+ }
890
+
891
+ @property --input-border-color {
892
+ syntax: '<color>';
893
+ inherits: true;
894
+ initial-value: #C5C8CE;
895
+ }
896
+
897
+ @property --input-border-width {
898
+ syntax: '<length>';
899
+ inherits: true;
900
+ initial-value: 1px;
901
+ }
902
+
903
+ @property --input-color {
904
+ syntax: '*';
905
+ inherits: true;
906
+ initial-value: inherit;
907
+ }
908
+
909
+ @property --input-height {
910
+ syntax: '<length>';
911
+ inherits: true;
912
+ initial-value: 2.5rem;
913
+ }
914
+
915
+ @property --input-vertical-spacing {
916
+ syntax: '<length>';
917
+ inherits: true;
918
+ initial-value: 0;
919
+ }
920
+
921
+ @property --placeholder-color {
922
+ syntax: '<color>';
923
+ inherits: true;
924
+ initial-value: #575157;
925
+ }
926
+
927
+ @property --input-focus-border-color {
928
+ syntax: '<color>';
929
+ inherits: true;
930
+ initial-value: #5E43C2;
931
+ }
932
+
732
933
  input:not([type='checkbox'], [type='radio']),
733
934
  textarea {
734
935
  -webkit-appearance: none;
@@ -857,6 +1058,10 @@ a {
857
1058
  line-height: 1.4;
858
1059
  }
859
1060
 
1061
+ .text-error {
1062
+ color: var(--color-alert-400);
1063
+ }
1064
+
860
1065
  body {
861
1066
  color: var(--color-text-500);
862
1067
  font-weight: var(--font-weight-normal);