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