@kushagradhawan/kookie-ui 0.3.16 → 0.3.17

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 (11) hide show
  1. package/components.css +43 -148
  2. package/package.json +1 -1
  3. package/schemas/base-button.json +1 -1
  4. package/schemas/button.json +1 -1
  5. package/schemas/icon-button.json +1 -1
  6. package/schemas/index.json +6 -6
  7. package/schemas/toggle-button.json +1 -1
  8. package/schemas/toggle-icon-button.json +1 -1
  9. package/src/components/badge.css +27 -127
  10. package/src/components/callout.css +20 -78
  11. package/styles.css +43 -148
package/components.css CHANGED
@@ -3377,19 +3377,27 @@
3377
3377
  height: fit-content;
3378
3378
  background-clip: padding-box;
3379
3379
  will-change: border-radius;
3380
+ --material-blend: 100%;
3381
+ --material-alpha: 0;
3380
3382
  isolation: isolate;
3381
3383
  }
3382
3384
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge {
3385
+ --material-blend: 60%;
3386
+ --material-alpha: 1;
3383
3387
  -webkit-backdrop-filter: var(--backdrop-filter-components);
3384
3388
  backdrop-filter: var(--backdrop-filter-components);
3385
3389
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
3386
3390
  }
3387
3391
  .rt-Badge:where([data-panel-background='solid'],[data-material='solid']) {
3392
+ --material-blend: 100%;
3393
+ --material-alpha: 0;
3388
3394
  -webkit-backdrop-filter: none;
3389
3395
  backdrop-filter: none;
3390
3396
  --backdrop-filter-components: none;
3391
3397
  }
3392
3398
  .rt-Badge:where([data-panel-background='translucent'],[data-material='translucent']) {
3399
+ --material-blend: 60%;
3400
+ --material-alpha: 1;
3393
3401
  -webkit-backdrop-filter: var(--backdrop-filter-components);
3394
3402
  backdrop-filter: var(--backdrop-filter-components);
3395
3403
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -3706,31 +3714,14 @@
3706
3714
  }
3707
3715
  }
3708
3716
  .rt-Badge:where(.rt-variant-solid) {
3709
- background-color: var(--accent-9);
3717
+ --solid-blend: calc(100% - (var(--material-alpha) * 90%));
3718
+ background-color: color-mix(in srgb, var(--accent-a9) calc(var(--material-alpha) * 100%), var(--accent-9) var(--solid-blend));
3710
3719
  color: var(--accent-contrast);
3711
3720
  }
3712
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-solid) {
3713
- background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
3714
- }
3715
- .rt-Badge:where(.rt-variant-solid):where([data-panel-background='solid'],[data-material='solid']) {
3716
- background-color: var(--accent-9);
3717
- }
3718
- .rt-Badge:where(.rt-variant-solid):where([data-panel-background='translucent'],[data-material='translucent']) {
3719
- background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
3720
- }
3721
3721
  .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast) {
3722
- background-color: var(--accent-12);
3722
+ background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
3723
3723
  color: var(--gray-1);
3724
3724
  }
3725
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast) {
3726
- background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
3727
- }
3728
- .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast):where([data-panel-background='solid'],[data-material='solid']) {
3729
- background-color: var(--accent-12);
3730
- }
3731
- .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast):where([data-panel-background='translucent'],[data-material='translucent']) {
3732
- background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
3733
- }
3734
3725
  .rt-Badge:where(.rt-variant-solid):where([data-disabled]) {
3735
3726
  color: var(--gray-a8);
3736
3727
  background-color: var(--gray-a3);
@@ -3741,26 +3732,11 @@
3741
3732
  pointer-events: none;
3742
3733
  }
3743
3734
  .rt-Badge:where(.rt-variant-surface) {
3744
- background-color: var(--accent-2);
3745
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
3746
- box-shadow: inset 0 0 0 1px var(--accent-6);
3735
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
3736
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
3737
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
3747
3738
  color: var(--accent-a11);
3748
3739
  }
3749
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-surface) {
3750
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
3751
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
3752
- box-shadow: inset 0 0 0 1px var(--accent-a6);
3753
- }
3754
- .rt-Badge:where(.rt-variant-surface):where([data-panel-background='solid'],[data-material='solid']) {
3755
- background-color: var(--accent-2);
3756
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
3757
- box-shadow: inset 0 0 0 1px var(--accent-6);
3758
- }
3759
- .rt-Badge:where(.rt-variant-surface):where([data-panel-background='translucent'],[data-material='translucent']) {
3760
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
3761
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
3762
- box-shadow: inset 0 0 0 1px var(--accent-a6);
3763
- }
3764
3740
  .rt-Badge:where(.rt-variant-surface):where(.rt-high-contrast) {
3765
3741
  color: var(--accent-12);
3766
3742
  }
@@ -3777,24 +3753,7 @@
3777
3753
  pointer-events: none;
3778
3754
  }
3779
3755
  .rt-Badge:where(.rt-variant-soft) {
3780
- background-color: var(--accent-3);
3781
- }
3782
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-soft) {
3783
- background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
3784
- -webkit-backdrop-filter: var(--backdrop-filter-components);
3785
- backdrop-filter: var(--backdrop-filter-components);
3786
- }
3787
- .rt-Badge:where(.rt-variant-soft):where([data-panel-background='solid'],[data-material='solid']) {
3788
- background-color: var(--accent-3);
3789
- -webkit-backdrop-filter: none;
3790
- backdrop-filter: none;
3791
- --backdrop-filter-components: none;
3792
- }
3793
- .rt-Badge:where(.rt-variant-soft):where([data-panel-background='translucent'],[data-material='translucent']) {
3794
- background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
3795
- -webkit-backdrop-filter: var(--backdrop-filter-components);
3796
- backdrop-filter: var(--backdrop-filter-components);
3797
- --backdrop-filter-components: blur(var(--backdrop-blur-components));
3756
+ background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
3798
3757
  }
3799
3758
  .rt-Badge:where(.rt-variant-soft):where([data-disabled]) {
3800
3759
  color: var(--gray-a8);
@@ -3803,27 +3762,12 @@
3803
3762
  pointer-events: none;
3804
3763
  }
3805
3764
  .rt-Badge:where(.rt-variant-outline) {
3806
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
3807
- box-shadow: inset 0 0 0 1px var(--accent-6);
3808
- color: var(--accent-11);
3765
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
3766
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
3767
+ color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--material-blend));
3809
3768
  -webkit-transition: var(--transition-background-blur);
3810
3769
  transition: var(--transition-background-blur);
3811
3770
  }
3812
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-outline) {
3813
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
3814
- box-shadow: inset 0 0 0 1px var(--accent-a6);
3815
- color: var(--accent-a11);
3816
- }
3817
- .rt-Badge:where(.rt-variant-outline):where([data-panel-background='solid'],[data-material='solid']) {
3818
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
3819
- box-shadow: inset 0 0 0 1px var(--accent-6);
3820
- color: var(--accent-11);
3821
- }
3822
- .rt-Badge:where(.rt-variant-outline):where([data-panel-background='translucent'],[data-material='translucent']) {
3823
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
3824
- box-shadow: inset 0 0 0 1px var(--accent-a6);
3825
- color: var(--accent-a11);
3826
- }
3827
3771
  .rt-Badge:where(.rt-variant-outline):where(.rt-high-contrast) {
3828
3772
  color: var(--accent-12);
3829
3773
  }
@@ -3838,33 +3782,24 @@
3838
3782
  position: relative;
3839
3783
  top: var(--classic-elevation-offset);
3840
3784
  color: var(--accent-a11);
3841
- background-color: var(--color-surface-solid);
3842
3785
  -webkit-box-shadow: var(--shadow-2);
3843
3786
  box-shadow: var(--shadow-2);
3844
3787
  -webkit-transition: var(--transition-text-field);
3845
3788
  transition: var(--transition-text-field);
3789
+ --classic-surface: var(--color-surface-solid);
3790
+ background-color: var(--classic-surface);
3846
3791
  }
3847
3792
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-classic) {
3848
- background-color: var(--color-surface-translucent);
3793
+ --classic-surface: var(--color-surface-translucent);
3849
3794
  }
3850
3795
  .rt-Badge:where(.rt-variant-classic):where([data-panel-background='solid'],[data-material='solid']) {
3851
- background-color: var(--color-surface-solid);
3796
+ --classic-surface: var(--color-surface-solid);
3852
3797
  }
3853
3798
  .rt-Badge:where(.rt-variant-classic):where([data-panel-background='translucent'],[data-material='translucent']) {
3854
- background-color: var(--color-surface-translucent);
3799
+ --classic-surface: var(--color-surface-translucent);
3855
3800
  }
3856
3801
  .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast) {
3857
3802
  color: var(--accent-12);
3858
- background-color: var(--color-surface-solid);
3859
- }
3860
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast) {
3861
- background-color: var(--color-surface-translucent);
3862
- }
3863
- .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='solid'],[data-material='solid']) {
3864
- background-color: var(--color-surface-solid);
3865
- }
3866
- .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='translucent'],[data-material='translucent']) {
3867
- background-color: var(--color-surface-translucent);
3868
3803
  }
3869
3804
  .rt-Blockquote {
3870
3805
  -webkit-box-sizing: border-box;
@@ -5052,19 +4987,27 @@
5052
4987
  -webkit-transition: var(--transition-card);
5053
4988
  transition: var(--transition-card);
5054
4989
  border-radius: var(--callout-border-radius);
4990
+ --material-blend: 100%;
4991
+ --material-alpha: 0;
5055
4992
  isolation: isolate;
5056
4993
  }
5057
4994
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot {
4995
+ --material-blend: 60%;
4996
+ --material-alpha: 1;
5058
4997
  -webkit-backdrop-filter: var(--backdrop-filter-components);
5059
4998
  backdrop-filter: var(--backdrop-filter-components);
5060
4999
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
5061
5000
  }
5062
5001
  .rt-CalloutRoot:where([data-panel-background='solid'],[data-material='solid']) {
5002
+ --material-blend: 100%;
5003
+ --material-alpha: 0;
5063
5004
  -webkit-backdrop-filter: none;
5064
5005
  backdrop-filter: none;
5065
5006
  --backdrop-filter-components: none;
5066
5007
  }
5067
5008
  .rt-CalloutRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
5009
+ --material-blend: 60%;
5010
+ --material-alpha: 1;
5068
5011
  -webkit-backdrop-filter: var(--backdrop-filter-components);
5069
5012
  backdrop-filter: var(--backdrop-filter-components);
5070
5013
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -5417,70 +5360,32 @@
5417
5360
  }
5418
5361
  }
5419
5362
  .rt-CalloutRoot:where(.rt-variant-soft) {
5420
- background-color: var(--accent-2);
5363
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
5421
5364
  color: var(--accent-a11);
5422
5365
  }
5423
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-soft) {
5424
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
5425
- }
5426
- .rt-CalloutRoot:where(.rt-variant-soft):where([data-panel-background='solid'],[data-material='solid']) {
5427
- background-color: var(--accent-2);
5428
- }
5429
- .rt-CalloutRoot:where(.rt-variant-soft):where([data-panel-background='translucent'],[data-material='translucent']) {
5430
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
5431
- }
5432
5366
  .rt-CalloutRoot:where(.rt-variant-soft):where(.rt-high-contrast) {
5433
5367
  color: var(--accent-12);
5434
5368
  }
5435
5369
  .rt-CalloutRoot:where(.rt-variant-surface) {
5436
- background-color: var(--accent-2);
5437
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
5438
- box-shadow: inset 0 0 0 1px var(--accent-6);
5370
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
5371
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
5372
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
5439
5373
  color: var(--accent-a11);
5440
5374
  }
5441
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-surface) {
5442
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
5443
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
5444
- box-shadow: inset 0 0 0 1px var(--accent-a6);
5445
- }
5446
- .rt-CalloutRoot:where(.rt-variant-surface):where([data-panel-background='solid'],[data-material='solid']) {
5447
- background-color: var(--accent-2);
5448
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
5449
- box-shadow: inset 0 0 0 1px var(--accent-6);
5450
- }
5451
- .rt-CalloutRoot:where(.rt-variant-surface):where([data-panel-background='translucent'],[data-material='translucent']) {
5452
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
5453
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
5454
- box-shadow: inset 0 0 0 1px var(--accent-a6);
5455
- }
5456
5375
  .rt-CalloutRoot:where(.rt-variant-surface):where(.rt-high-contrast) {
5457
5376
  color: var(--accent-12);
5458
5377
  }
5459
5378
  .rt-CalloutRoot:where(.rt-variant-outline) {
5460
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
5461
- box-shadow: inset 0 0 0 1px var(--accent-6);
5462
- color: var(--accent-11);
5463
- }
5464
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-outline) {
5465
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
5466
- box-shadow: inset 0 0 0 1px var(--accent-a6);
5467
- color: var(--accent-a11);
5468
- }
5469
- .rt-CalloutRoot:where(.rt-variant-outline):where([data-panel-background='solid'],[data-material='solid']) {
5470
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
5471
- box-shadow: inset 0 0 0 1px var(--accent-6);
5472
- color: var(--accent-11);
5473
- }
5474
- .rt-CalloutRoot:where(.rt-variant-outline):where([data-panel-background='translucent'],[data-material='translucent']) {
5475
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
5476
- box-shadow: inset 0 0 0 1px var(--accent-a6);
5477
- color: var(--accent-a11);
5379
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
5380
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
5381
+ color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--material-blend));
5478
5382
  }
5479
5383
  .rt-CalloutRoot:where(.rt-variant-outline):where(.rt-high-contrast) {
5480
5384
  color: var(--accent-12);
5481
5385
  }
5482
5386
  .rt-CalloutRoot:where(.rt-variant-classic) {
5483
- background-color: var(--color-surface-solid);
5387
+ --classic-surface: var(--color-surface-solid);
5388
+ background-color: var(--classic-surface);
5484
5389
  -webkit-box-shadow: var(--shadow-2);
5485
5390
  box-shadow: var(--shadow-2);
5486
5391
  color: var(--accent-a11);
@@ -5488,26 +5393,16 @@
5488
5393
  transition: var(--transition-text-field);
5489
5394
  }
5490
5395
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-classic) {
5491
- background-color: var(--color-surface-translucent);
5396
+ --classic-surface: var(--color-surface-translucent);
5492
5397
  }
5493
5398
  .rt-CalloutRoot:where(.rt-variant-classic):where([data-panel-background='solid'],[data-material='solid']) {
5494
- background-color: var(--color-surface-solid);
5399
+ --classic-surface: var(--color-surface-solid);
5495
5400
  }
5496
5401
  .rt-CalloutRoot:where(.rt-variant-classic):where([data-panel-background='translucent'],[data-material='translucent']) {
5497
- background-color: var(--color-surface-translucent);
5402
+ --classic-surface: var(--color-surface-translucent);
5498
5403
  }
5499
5404
  .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast) {
5500
5405
  color: var(--accent-12);
5501
- background-color: var(--color-surface-solid);
5502
- }
5503
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast) {
5504
- background-color: var(--color-surface-translucent);
5505
- }
5506
- .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='solid'],[data-material='solid']) {
5507
- background-color: var(--color-surface-solid);
5508
- }
5509
- .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='translucent'],[data-material='translucent']) {
5510
- background-color: var(--color-surface-translucent);
5511
5406
  }
5512
5407
  .rt-BaseCard {
5513
5408
  --material-blend: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.3.16",
3
+ "version": "0.3.17",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
5
5
  "keywords": [
6
6
  "react",
package/schemas/base-button.json CHANGED
@@ -279,6 +279,6 @@
279
279
  "title": "Base-button Component Props",
280
280
  "description": "Props schema for the base-button component in Kookie UI",
281
281
  "version": "1.0.0",
282
- "generatedAt": "2026-02-21T17:00:50.471Z",
282
+ "generatedAt": "2026-02-26T18:01:07.574Z",
283
283
  "source": "Zod schema"
284
284
  }
package/schemas/button.json CHANGED
@@ -530,6 +530,6 @@
530
530
  "title": "Button Component Props",
531
531
  "description": "Props schema for the button component in Kookie UI",
532
532
  "version": "1.0.0",
533
- "generatedAt": "2026-02-21T17:00:50.477Z",
533
+ "generatedAt": "2026-02-26T18:01:07.581Z",
534
534
  "source": "Zod schema"
535
535
  }
package/schemas/icon-button.json CHANGED
@@ -313,6 +313,6 @@
313
313
  "title": "Icon-button Component Props",
314
314
  "description": "Props schema for the icon-button component in Kookie UI",
315
315
  "version": "1.0.0",
316
- "generatedAt": "2026-02-21T17:00:50.478Z",
316
+ "generatedAt": "2026-02-26T18:01:07.582Z",
317
317
  "source": "Zod schema"
318
318
  }
package/schemas/index.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "title": "Kookie UI Button Components",
4
4
  "description": "Complete JSON Schema collection for all button components in Kookie UI",
5
5
  "version": "1.0.0",
6
- "generatedAt": "2026-02-21T17:00:50.481Z",
6
+ "generatedAt": "2026-02-26T18:01:07.585Z",
7
7
  "source": "Zod schemas",
8
8
  "components": {
9
9
  "base-button": {
@@ -287,7 +287,7 @@
287
287
  "title": "Base-button Component Props",
288
288
  "description": "Props schema for the base-button component in Kookie UI",
289
289
  "version": "1.0.0",
290
- "generatedAt": "2026-02-21T17:00:50.471Z",
290
+ "generatedAt": "2026-02-26T18:01:07.574Z",
291
291
  "source": "Zod schema"
292
292
  },
293
293
  "button": {
@@ -822,7 +822,7 @@
822
822
  "title": "Button Component Props",
823
823
  "description": "Props schema for the button component in Kookie UI",
824
824
  "version": "1.0.0",
825
- "generatedAt": "2026-02-21T17:00:50.477Z",
825
+ "generatedAt": "2026-02-26T18:01:07.581Z",
826
826
  "source": "Zod schema"
827
827
  },
828
828
  "icon-button": {
@@ -1140,7 +1140,7 @@
1140
1140
  "title": "Icon-button Component Props",
1141
1141
  "description": "Props schema for the icon-button component in Kookie UI",
1142
1142
  "version": "1.0.0",
1143
- "generatedAt": "2026-02-21T17:00:50.478Z",
1143
+ "generatedAt": "2026-02-26T18:01:07.582Z",
1144
1144
  "source": "Zod schema"
1145
1145
  },
1146
1146
  "toggle-button": {
@@ -1683,7 +1683,7 @@
1683
1683
  "title": "Toggle-button Component Props",
1684
1684
  "description": "Props schema for the toggle-button component in Kookie UI",
1685
1685
  "version": "1.0.0",
1686
- "generatedAt": "2026-02-21T17:00:50.480Z",
1686
+ "generatedAt": "2026-02-26T18:01:07.584Z",
1687
1687
  "source": "Zod schema"
1688
1688
  },
1689
1689
  "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
2009
2009
  "title": "Toggle-icon-button Component Props",
2010
2010
  "description": "Props schema for the toggle-icon-button component in Kookie UI",
2011
2011
  "version": "1.0.0",
2012
- "generatedAt": "2026-02-21T17:00:50.481Z",
2012
+ "generatedAt": "2026-02-26T18:01:07.585Z",
2013
2013
  "source": "Zod schema"
2014
2014
  }
2015
2015
  }
package/schemas/toggle-button.json CHANGED
@@ -538,6 +538,6 @@
538
538
  "title": "Toggle-button Component Props",
539
539
  "description": "Props schema for the toggle-button component in Kookie UI",
540
540
  "version": "1.0.0",
541
- "generatedAt": "2026-02-21T17:00:50.480Z",
541
+ "generatedAt": "2026-02-26T18:01:07.584Z",
542
542
  "source": "Zod schema"
543
543
  }
package/schemas/toggle-icon-button.json CHANGED
@@ -321,6 +321,6 @@
321
321
  "title": "Toggle-icon-button Component Props",
322
322
  "description": "Props schema for the toggle-icon-button component in Kookie UI",
323
323
  "version": "1.0.0",
324
- "generatedAt": "2026-02-21T17:00:50.481Z",
324
+ "generatedAt": "2026-02-26T18:01:07.585Z",
325
325
  "source": "Zod schema"
326
326
  }
package/src/components/badge.css CHANGED
@@ -18,8 +18,14 @@
18
18
  /* Force Chrome to recalculate styles when radius changes */
19
19
  will-change: border-radius;
20
20
 
21
+ /* Material system defaults (solid) */
22
+ --material-blend: 100%;
23
+ --material-alpha: 0;
24
+
21
25
  /* Theme-level translucent override */
22
26
  :where([data-panel-background='translucent'], [data-material='translucent']) & {
27
+ --material-blend: 60%;
28
+ --material-alpha: 1;
23
29
  backdrop-filter: var(--backdrop-filter-components);
24
30
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
25
31
  }
@@ -29,11 +35,15 @@
29
35
 
30
36
  /* Component-level overrides */
31
37
  &:where([data-panel-background='solid'], [data-material='solid']) {
38
+ --material-blend: 100%;
39
+ --material-alpha: 0;
32
40
  backdrop-filter: none;
33
41
  --backdrop-filter-components: none;
34
42
  }
35
43
 
36
44
  &:where([data-panel-background='translucent'], [data-material='translucent']) {
45
+ --material-blend: 60%;
46
+ --material-alpha: 1;
37
47
  backdrop-filter: var(--backdrop-filter-components);
38
48
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
39
49
  }
@@ -49,7 +59,6 @@
49
59
  color: CanvasText;
50
60
  background-color: Canvas;
51
61
  }
52
-
53
62
  }
54
63
 
55
64
  /***************************************************************************************************
@@ -68,7 +77,6 @@
68
77
  gap: calc(var(--space-1) * 1.5);
69
78
  border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
70
79
 
71
- /* Ghost variant gets reduced padding */
72
80
  &:where(.rt-variant-ghost) {
73
81
  padding: calc(var(--space-1) * 0.25) var(--space-1);
74
82
  gap: var(--space-1);
@@ -82,7 +90,6 @@
82
90
  gap: calc(var(--space-1) * 1.5);
83
91
  border-radius: max(var(--radius-1), var(--radius-full));
84
92
 
85
- /* Ghost variant gets reduced padding */
86
93
  &:where(.rt-variant-ghost) {
87
94
  padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.25);
88
95
  gap: var(--space-1);
@@ -96,7 +103,6 @@
96
103
  gap: var(--space-2);
97
104
  border-radius: max(var(--radius-2), var(--radius-full));
98
105
 
99
- /* Ghost variant gets reduced padding */
100
106
  &:where(.rt-variant-ghost) {
101
107
  padding: calc(var(--space-1) * 0.75) var(--space-2);
102
108
  gap: calc(var(--space-1) * 1.5);
@@ -110,7 +116,6 @@
110
116
  gap: calc(var(--space-2) * 1.25);
111
117
  border-radius: max(var(--radius-3), var(--radius-full));
112
118
 
113
- /* Ghost variant gets reduced padding */
114
119
  &:where(.rt-variant-ghost) {
115
120
  padding: var(--space-1) calc(var(--space-2) * 1.25);
116
121
  gap: var(--space-2);
@@ -128,45 +133,16 @@
128
133
  /* solid */
129
134
 
130
135
  .rt-Badge:where(.rt-variant-solid) {
131
- /* Base state: solid color for solid panels */
132
- background-color: var(--accent-9);
133
- color: var(--accent-contrast);
134
-
135
- /* Theme-level translucent override */
136
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
137
- background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
138
- }
139
-
140
- /* Component-level overrides (higher specificity) */
141
- &:where([data-panel-background='solid'], [data-material='solid']) {
142
- background-color: var(--accent-9);
143
- }
144
-
145
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
146
- background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
147
- }
136
+ --solid-blend: calc(100% - (var(--material-alpha) * 90%));
148
137
 
138
+ background-color: color-mix(in srgb, var(--accent-a9) calc(var(--material-alpha) * 100%), var(--accent-9) var(--solid-blend));
139
+ color: var(--accent-contrast);
149
140
 
150
141
  &:where(.rt-high-contrast) {
151
- background-color: var(--accent-12);
142
+ background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
152
143
  color: var(--gray-1);
153
-
154
- /* Theme-level translucent override for high contrast */
155
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
156
- background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
157
- }
158
-
159
- /* Component-level overrides for high contrast */
160
- &:where([data-panel-background='solid'], [data-material='solid']) {
161
- background-color: var(--accent-12);
162
- }
163
-
164
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
165
- background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
166
- }
167
-
168
-
169
144
  }
145
+
170
146
  &:where([data-disabled]) {
171
147
  color: var(--gray-a8);
172
148
  background-color: var(--gray-a3);
@@ -180,28 +156,10 @@
180
156
  /* surface */
181
157
 
182
158
  .rt-Badge:where(.rt-variant-surface) {
183
- /* Base state: solid accent for solid panels */
184
- background-color: var(--accent-2);
185
- box-shadow: inset 0 0 0 1px var(--accent-6);
159
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
160
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
186
161
  color: var(--accent-a11);
187
162
 
188
- /* Theme-level translucent override */
189
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
190
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
191
- box-shadow: inset 0 0 0 1px var(--accent-a6);
192
- }
193
-
194
- /* Component-level overrides (higher specificity) */
195
- &:where([data-panel-background='solid'], [data-material='solid']) {
196
- background-color: var(--accent-2);
197
- box-shadow: inset 0 0 0 1px var(--accent-6);
198
- }
199
-
200
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
201
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
202
- box-shadow: inset 0 0 0 1px var(--accent-a6);
203
- }
204
-
205
163
  &:where(.rt-high-contrast) {
206
164
  color: var(--accent-12);
207
165
  }
@@ -215,6 +173,7 @@
215
173
  &:where(.rt-high-contrast) {
216
174
  color: var(--accent-12);
217
175
  }
176
+
218
177
  &:where([data-disabled]) {
219
178
  color: var(--gray-a8);
220
179
  background-color: var(--gray-a3);
@@ -224,28 +183,7 @@
224
183
  }
225
184
 
226
185
  .rt-Badge:where(.rt-variant-soft) {
227
- /* Base state: solid color for solid panels */
228
- background-color: var(--accent-3);
229
-
230
- /* Theme-level translucent override */
231
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
232
- background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
233
- backdrop-filter: var(--backdrop-filter-components);
234
- }
235
-
236
- /* Component-level overrides (higher specificity) */
237
- &:where([data-panel-background='solid'], [data-material='solid']) {
238
- background-color: var(--accent-3);
239
- backdrop-filter: none;
240
- --backdrop-filter-components: none;
241
- }
242
-
243
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
244
- background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
245
- backdrop-filter: var(--backdrop-filter-components);
246
- --backdrop-filter-components: blur(var(--backdrop-blur-components));
247
- }
248
-
186
+ background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
249
187
 
250
188
  &:where([data-disabled]) {
251
189
  color: var(--gray-a8);
@@ -258,28 +196,10 @@
258
196
  /* outline */
259
197
 
260
198
  .rt-Badge:where(.rt-variant-outline) {
261
- /* Base state: solid colors for solid panels */
262
- box-shadow: inset 0 0 0 1px var(--accent-6);
263
- color: var(--accent-11);
199
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
200
+ color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--material-blend));
264
201
  transition: var(--transition-background-blur);
265
202
 
266
- /* Theme-level translucent override */
267
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
268
- box-shadow: inset 0 0 0 1px var(--accent-a6);
269
- color: var(--accent-a11);
270
- }
271
-
272
- /* Component-level overrides (higher specificity) */
273
- &:where([data-panel-background='solid'], [data-material='solid']) {
274
- box-shadow: inset 0 0 0 1px var(--accent-6);
275
- color: var(--accent-11);
276
- }
277
-
278
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
279
- box-shadow: inset 0 0 0 1px var(--accent-a6);
280
- color: var(--accent-a11);
281
- }
282
-
283
203
  &:where(.rt-high-contrast) {
284
204
  color: var(--accent-12);
285
205
  }
@@ -288,7 +208,6 @@
288
208
  /* ghost */
289
209
 
290
210
  .rt-Badge:where(.rt-variant-ghost) {
291
- /* Transparent by default */
292
211
  background-color: transparent;
293
212
  color: var(--accent-a11);
294
213
 
@@ -303,44 +222,25 @@
303
222
  position: relative;
304
223
  top: var(--classic-elevation-offset);
305
224
  color: var(--accent-a11);
306
- background-color: var(--color-surface-solid);
307
225
  box-shadow: var(--shadow-2);
308
226
  transition: var(--transition-text-field);
309
227
 
310
- /* Theme-level translucent override */
228
+ --classic-surface: var(--color-surface-solid);
229
+ background-color: var(--classic-surface);
230
+
311
231
  :where([data-panel-background='translucent'], [data-material='translucent']) & {
312
- background-color: var(--color-surface-translucent);
232
+ --classic-surface: var(--color-surface-translucent);
313
233
  }
314
234
 
315
- /* Component-level overrides (higher specificity) */
316
235
  &:where([data-panel-background='solid'], [data-material='solid']) {
317
- background-color: var(--color-surface-solid);
236
+ --classic-surface: var(--color-surface-solid);
318
237
  }
319
238
 
320
239
  &:where([data-panel-background='translucent'], [data-material='translucent']) {
321
- background-color: var(--color-surface-translucent);
240
+ --classic-surface: var(--color-surface-translucent);
322
241
  }
323
242
 
324
- /* Dark mode uses same styling as light mode for simplicity */
325
-
326
243
  &:where(.rt-high-contrast) {
327
244
  color: var(--accent-12);
328
- background-color: var(--color-surface-solid);
329
-
330
- /* Theme-level translucent override for high contrast */
331
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
332
- background-color: var(--color-surface-translucent);
333
- }
334
-
335
- /* Component-level overrides for high contrast */
336
- &:where([data-panel-background='solid'], [data-material='solid']) {
337
- background-color: var(--color-surface-solid);
338
- }
339
-
340
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
341
- background-color: var(--color-surface-translucent);
342
- }
343
245
  }
344
-
345
-
346
246
  }
package/src/components/callout.css CHANGED
@@ -8,8 +8,14 @@
8
8
  transition: var(--transition-card);
9
9
  border-radius: var(--callout-border-radius);
10
10
 
11
+ /* Material system defaults (solid) */
12
+ --material-blend: 100%;
13
+ --material-alpha: 0;
14
+
11
15
  /* Theme-level translucent override */
12
16
  :where([data-panel-background='translucent'], [data-material='translucent']) & {
17
+ --material-blend: 60%;
18
+ --material-alpha: 1;
13
19
  backdrop-filter: var(--backdrop-filter-components);
14
20
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
15
21
  }
@@ -19,11 +25,15 @@
19
25
 
20
26
  /* Component-level overrides */
21
27
  &:where([data-panel-background='solid'], [data-material='solid']) {
28
+ --material-blend: 100%;
29
+ --material-alpha: 0;
22
30
  backdrop-filter: none;
23
31
  --backdrop-filter-components: none;
24
32
  }
25
33
 
26
34
  &:where([data-panel-background='translucent'], [data-material='translucent']) {
35
+ --material-blend: 60%;
36
+ --material-alpha: 1;
27
37
  backdrop-filter: var(--backdrop-filter-components);
28
38
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
29
39
  }
@@ -128,24 +138,9 @@
128
138
  /* soft */
129
139
 
130
140
  .rt-CalloutRoot:where(.rt-variant-soft) {
131
- /* Base state: solid color for solid panels */
132
- background-color: var(--accent-2);
141
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
133
142
  color: var(--accent-a11);
134
143
 
135
- /* Theme-level translucent override */
136
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
137
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
138
- }
139
-
140
- /* Component-level overrides (higher specificity) */
141
- &:where([data-panel-background='solid'], [data-material='solid']) {
142
- background-color: var(--accent-2);
143
- }
144
-
145
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
146
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
147
- }
148
-
149
144
  &:where(.rt-high-contrast) {
150
145
  color: var(--accent-12);
151
146
  }
@@ -154,28 +149,10 @@
154
149
  /* surface */
155
150
 
156
151
  .rt-CalloutRoot:where(.rt-variant-surface) {
157
- /* Base state: solid accent for solid panels */
158
- background-color: var(--accent-2);
159
- box-shadow: inset 0 0 0 1px var(--accent-6);
152
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
153
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
160
154
  color: var(--accent-a11);
161
155
 
162
- /* Theme-level translucent override */
163
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
164
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
165
- box-shadow: inset 0 0 0 1px var(--accent-a6);
166
- }
167
-
168
- /* Component-level overrides (higher specificity) */
169
- &:where([data-panel-background='solid'], [data-material='solid']) {
170
- background-color: var(--accent-2);
171
- box-shadow: inset 0 0 0 1px var(--accent-6);
172
- }
173
-
174
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
175
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
176
- box-shadow: inset 0 0 0 1px var(--accent-a6);
177
- }
178
-
179
156
  &:where(.rt-high-contrast) {
180
157
  color: var(--accent-12);
181
158
  }
@@ -184,26 +161,8 @@
184
161
  /* outline */
185
162
 
186
163
  .rt-CalloutRoot:where(.rt-variant-outline) {
187
- /* Base state: solid colors for solid panels */
188
- box-shadow: inset 0 0 0 1px var(--accent-6);
189
- color: var(--accent-11);
190
-
191
- /* Theme-level translucent override */
192
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
193
- box-shadow: inset 0 0 0 1px var(--accent-a6);
194
- color: var(--accent-a11);
195
- }
196
-
197
- /* Component-level overrides (higher specificity) */
198
- &:where([data-panel-background='solid'], [data-material='solid']) {
199
- box-shadow: inset 0 0 0 1px var(--accent-6);
200
- color: var(--accent-11);
201
- }
202
-
203
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
204
- box-shadow: inset 0 0 0 1px var(--accent-a6);
205
- color: var(--accent-a11);
206
- }
164
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
165
+ color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--material-blend));
207
166
 
208
167
  &:where(.rt-high-contrast) {
209
168
  color: var(--accent-12);
@@ -213,42 +172,25 @@
213
172
  /* classic */
214
173
 
215
174
  .rt-CalloutRoot:where(.rt-variant-classic) {
216
- /* Base state: solid surface for solid panels */
217
- background-color: var(--color-surface-solid);
175
+ --classic-surface: var(--color-surface-solid);
176
+ background-color: var(--classic-surface);
218
177
  box-shadow: var(--shadow-2);
219
178
  color: var(--accent-a11);
220
179
  transition: var(--transition-text-field);
221
180
 
222
- /* Theme-level translucent override */
223
181
  :where([data-panel-background='translucent'], [data-material='translucent']) & {
224
- background-color: var(--color-surface-translucent);
182
+ --classic-surface: var(--color-surface-translucent);
225
183
  }
226
184
 
227
- /* Component-level overrides (higher specificity) */
228
185
  &:where([data-panel-background='solid'], [data-material='solid']) {
229
- background-color: var(--color-surface-solid);
186
+ --classic-surface: var(--color-surface-solid);
230
187
  }
231
188
 
232
189
  &:where([data-panel-background='translucent'], [data-material='translucent']) {
233
- background-color: var(--color-surface-translucent);
190
+ --classic-surface: var(--color-surface-translucent);
234
191
  }
235
192
 
236
193
  &:where(.rt-high-contrast) {
237
194
  color: var(--accent-12);
238
- background-color: var(--color-surface-solid);
239
-
240
- /* Theme-level translucent override for high contrast */
241
- :where([data-panel-background='translucent'], [data-material='translucent']) & {
242
- background-color: var(--color-surface-translucent);
243
- }
244
-
245
- /* Component-level overrides for high contrast */
246
- &:where([data-panel-background='solid'], [data-material='solid']) {
247
- background-color: var(--color-surface-solid);
248
- }
249
-
250
- &:where([data-panel-background='translucent'], [data-material='translucent']) {
251
- background-color: var(--color-surface-translucent);
252
- }
253
195
  }
254
196
  }
package/styles.css CHANGED
@@ -8420,19 +8420,27 @@
8420
8420
  height: fit-content;
8421
8421
  background-clip: padding-box;
8422
8422
  will-change: border-radius;
8423
+ --material-blend: 100%;
8424
+ --material-alpha: 0;
8423
8425
  isolation: isolate;
8424
8426
  }
8425
8427
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge{
8428
+ --material-blend: 60%;
8429
+ --material-alpha: 1;
8426
8430
  -webkit-backdrop-filter: var(--backdrop-filter-components);
8427
8431
  backdrop-filter: var(--backdrop-filter-components);
8428
8432
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
8429
8433
  }
8430
8434
  .rt-Badge:where([data-panel-background='solid'],[data-material='solid']){
8435
+ --material-blend: 100%;
8436
+ --material-alpha: 0;
8431
8437
  -webkit-backdrop-filter: none;
8432
8438
  backdrop-filter: none;
8433
8439
  --backdrop-filter-components: none;
8434
8440
  }
8435
8441
  .rt-Badge:where([data-panel-background='translucent'],[data-material='translucent']){
8442
+ --material-blend: 60%;
8443
+ --material-alpha: 1;
8436
8444
  -webkit-backdrop-filter: var(--backdrop-filter-components);
8437
8445
  backdrop-filter: var(--backdrop-filter-components);
8438
8446
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -8749,31 +8757,14 @@
8749
8757
  }
8750
8758
  }
8751
8759
  .rt-Badge:where(.rt-variant-solid){
8752
- background-color: var(--accent-9);
8760
+ --solid-blend: calc(100% - (var(--material-alpha) * 90%));
8761
+ background-color: color-mix(in srgb, var(--accent-a9) calc(var(--material-alpha) * 100%), var(--accent-9) var(--solid-blend));
8753
8762
  color: var(--accent-contrast);
8754
8763
  }
8755
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-solid){
8756
- background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
8757
- }
8758
- .rt-Badge:where(.rt-variant-solid):where([data-panel-background='solid'],[data-material='solid']){
8759
- background-color: var(--accent-9);
8760
- }
8761
- .rt-Badge:where(.rt-variant-solid):where([data-panel-background='translucent'],[data-material='translucent']){
8762
- background-color: color-mix(in srgb, var(--accent-a9), var(--accent-9) 10%);
8763
- }
8764
8764
  .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast){
8765
- background-color: var(--accent-12);
8765
+ background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
8766
8766
  color: var(--gray-1);
8767
8767
  }
8768
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast){
8769
- background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
8770
- }
8771
- .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast):where([data-panel-background='solid'],[data-material='solid']){
8772
- background-color: var(--accent-12);
8773
- }
8774
- .rt-Badge:where(.rt-variant-solid):where(.rt-high-contrast):where([data-panel-background='translucent'],[data-material='translucent']){
8775
- background-color: color-mix(in srgb, var(--accent-a12), var(--accent-12) 10%);
8776
- }
8777
8768
  .rt-Badge:where(.rt-variant-solid):where([data-disabled]){
8778
8769
  color: var(--gray-a8);
8779
8770
  background-color: var(--gray-a3);
@@ -8784,26 +8775,11 @@
8784
8775
  pointer-events: none;
8785
8776
  }
8786
8777
  .rt-Badge:where(.rt-variant-surface){
8787
- background-color: var(--accent-2);
8788
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
8789
- box-shadow: inset 0 0 0 1px var(--accent-6);
8778
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
8779
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
8780
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
8790
8781
  color: var(--accent-a11);
8791
8782
  }
8792
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-surface){
8793
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
8794
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
8795
- box-shadow: inset 0 0 0 1px var(--accent-a6);
8796
- }
8797
- .rt-Badge:where(.rt-variant-surface):where([data-panel-background='solid'],[data-material='solid']){
8798
- background-color: var(--accent-2);
8799
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
8800
- box-shadow: inset 0 0 0 1px var(--accent-6);
8801
- }
8802
- .rt-Badge:where(.rt-variant-surface):where([data-panel-background='translucent'],[data-material='translucent']){
8803
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
8804
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
8805
- box-shadow: inset 0 0 0 1px var(--accent-a6);
8806
- }
8807
8783
  .rt-Badge:where(.rt-variant-surface):where(.rt-high-contrast){
8808
8784
  color: var(--accent-12);
8809
8785
  }
@@ -8820,24 +8796,7 @@
8820
8796
  pointer-events: none;
8821
8797
  }
8822
8798
  .rt-Badge:where(.rt-variant-soft){
8823
- background-color: var(--accent-3);
8824
- }
8825
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-soft){
8826
- background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
8827
- -webkit-backdrop-filter: var(--backdrop-filter-components);
8828
- backdrop-filter: var(--backdrop-filter-components);
8829
- }
8830
- .rt-Badge:where(.rt-variant-soft):where([data-panel-background='solid'],[data-material='solid']){
8831
- background-color: var(--accent-3);
8832
- -webkit-backdrop-filter: none;
8833
- backdrop-filter: none;
8834
- --backdrop-filter-components: none;
8835
- }
8836
- .rt-Badge:where(.rt-variant-soft):where([data-panel-background='translucent'],[data-material='translucent']){
8837
- background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
8838
- -webkit-backdrop-filter: var(--backdrop-filter-components);
8839
- backdrop-filter: var(--backdrop-filter-components);
8840
- --backdrop-filter-components: blur(var(--backdrop-blur-components));
8799
+ background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
8841
8800
  }
8842
8801
  .rt-Badge:where(.rt-variant-soft):where([data-disabled]){
8843
8802
  color: var(--gray-a8);
@@ -8846,27 +8805,12 @@
8846
8805
  pointer-events: none;
8847
8806
  }
8848
8807
  .rt-Badge:where(.rt-variant-outline){
8849
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
8850
- box-shadow: inset 0 0 0 1px var(--accent-6);
8851
- color: var(--accent-11);
8808
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
8809
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
8810
+ color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--material-blend));
8852
8811
  -webkit-transition: var(--transition-background-blur);
8853
8812
  transition: var(--transition-background-blur);
8854
8813
  }
8855
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-outline){
8856
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
8857
- box-shadow: inset 0 0 0 1px var(--accent-a6);
8858
- color: var(--accent-a11);
8859
- }
8860
- .rt-Badge:where(.rt-variant-outline):where([data-panel-background='solid'],[data-material='solid']){
8861
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
8862
- box-shadow: inset 0 0 0 1px var(--accent-6);
8863
- color: var(--accent-11);
8864
- }
8865
- .rt-Badge:where(.rt-variant-outline):where([data-panel-background='translucent'],[data-material='translucent']){
8866
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
8867
- box-shadow: inset 0 0 0 1px var(--accent-a6);
8868
- color: var(--accent-a11);
8869
- }
8870
8814
  .rt-Badge:where(.rt-variant-outline):where(.rt-high-contrast){
8871
8815
  color: var(--accent-12);
8872
8816
  }
@@ -8881,33 +8825,24 @@
8881
8825
  position: relative;
8882
8826
  top: var(--classic-elevation-offset);
8883
8827
  color: var(--accent-a11);
8884
- background-color: var(--color-surface-solid);
8885
8828
  -webkit-box-shadow: var(--shadow-2);
8886
8829
  box-shadow: var(--shadow-2);
8887
8830
  -webkit-transition: var(--transition-text-field);
8888
8831
  transition: var(--transition-text-field);
8832
+ --classic-surface: var(--color-surface-solid);
8833
+ background-color: var(--classic-surface);
8889
8834
  }
8890
8835
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-classic){
8891
- background-color: var(--color-surface-translucent);
8836
+ --classic-surface: var(--color-surface-translucent);
8892
8837
  }
8893
8838
  .rt-Badge:where(.rt-variant-classic):where([data-panel-background='solid'],[data-material='solid']){
8894
- background-color: var(--color-surface-solid);
8839
+ --classic-surface: var(--color-surface-solid);
8895
8840
  }
8896
8841
  .rt-Badge:where(.rt-variant-classic):where([data-panel-background='translucent'],[data-material='translucent']){
8897
- background-color: var(--color-surface-translucent);
8842
+ --classic-surface: var(--color-surface-translucent);
8898
8843
  }
8899
8844
  .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast){
8900
8845
  color: var(--accent-12);
8901
- background-color: var(--color-surface-solid);
8902
- }
8903
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast){
8904
- background-color: var(--color-surface-translucent);
8905
- }
8906
- .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='solid'],[data-material='solid']){
8907
- background-color: var(--color-surface-solid);
8908
- }
8909
- .rt-Badge:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='translucent'],[data-material='translucent']){
8910
- background-color: var(--color-surface-translucent);
8911
8846
  }
8912
8847
  .rt-Blockquote{
8913
8848
  -webkit-box-sizing: border-box;
@@ -10095,19 +10030,27 @@
10095
10030
  -webkit-transition: var(--transition-card);
10096
10031
  transition: var(--transition-card);
10097
10032
  border-radius: var(--callout-border-radius);
10033
+ --material-blend: 100%;
10034
+ --material-alpha: 0;
10098
10035
  isolation: isolate;
10099
10036
  }
10100
10037
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot{
10038
+ --material-blend: 60%;
10039
+ --material-alpha: 1;
10101
10040
  -webkit-backdrop-filter: var(--backdrop-filter-components);
10102
10041
  backdrop-filter: var(--backdrop-filter-components);
10103
10042
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
10104
10043
  }
10105
10044
  .rt-CalloutRoot:where([data-panel-background='solid'],[data-material='solid']){
10045
+ --material-blend: 100%;
10046
+ --material-alpha: 0;
10106
10047
  -webkit-backdrop-filter: none;
10107
10048
  backdrop-filter: none;
10108
10049
  --backdrop-filter-components: none;
10109
10050
  }
10110
10051
  .rt-CalloutRoot:where([data-panel-background='translucent'],[data-material='translucent']){
10052
+ --material-blend: 60%;
10053
+ --material-alpha: 1;
10111
10054
  -webkit-backdrop-filter: var(--backdrop-filter-components);
10112
10055
  backdrop-filter: var(--backdrop-filter-components);
10113
10056
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
@@ -10460,70 +10403,32 @@
10460
10403
  }
10461
10404
  }
10462
10405
  .rt-CalloutRoot:where(.rt-variant-soft){
10463
- background-color: var(--accent-2);
10406
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
10464
10407
  color: var(--accent-a11);
10465
10408
  }
10466
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-soft){
10467
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
10468
- }
10469
- .rt-CalloutRoot:where(.rt-variant-soft):where([data-panel-background='solid'],[data-material='solid']){
10470
- background-color: var(--accent-2);
10471
- }
10472
- .rt-CalloutRoot:where(.rt-variant-soft):where([data-panel-background='translucent'],[data-material='translucent']){
10473
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
10474
- }
10475
10409
  .rt-CalloutRoot:where(.rt-variant-soft):where(.rt-high-contrast){
10476
10410
  color: var(--accent-12);
10477
10411
  }
10478
10412
  .rt-CalloutRoot:where(.rt-variant-surface){
10479
- background-color: var(--accent-2);
10480
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
10481
- box-shadow: inset 0 0 0 1px var(--accent-6);
10413
+ background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
10414
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
10415
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
10482
10416
  color: var(--accent-a11);
10483
10417
  }
10484
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-surface){
10485
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
10486
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
10487
- box-shadow: inset 0 0 0 1px var(--accent-a6);
10488
- }
10489
- .rt-CalloutRoot:where(.rt-variant-surface):where([data-panel-background='solid'],[data-material='solid']){
10490
- background-color: var(--accent-2);
10491
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
10492
- box-shadow: inset 0 0 0 1px var(--accent-6);
10493
- }
10494
- .rt-CalloutRoot:where(.rt-variant-surface):where([data-panel-background='translucent'],[data-material='translucent']){
10495
- background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
10496
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
10497
- box-shadow: inset 0 0 0 1px var(--accent-a6);
10498
- }
10499
10418
  .rt-CalloutRoot:where(.rt-variant-surface):where(.rt-high-contrast){
10500
10419
  color: var(--accent-12);
10501
10420
  }
10502
10421
  .rt-CalloutRoot:where(.rt-variant-outline){
10503
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
10504
- box-shadow: inset 0 0 0 1px var(--accent-6);
10505
- color: var(--accent-11);
10506
- }
10507
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-outline){
10508
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
10509
- box-shadow: inset 0 0 0 1px var(--accent-a6);
10510
- color: var(--accent-a11);
10511
- }
10512
- .rt-CalloutRoot:where(.rt-variant-outline):where([data-panel-background='solid'],[data-material='solid']){
10513
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
10514
- box-shadow: inset 0 0 0 1px var(--accent-6);
10515
- color: var(--accent-11);
10516
- }
10517
- .rt-CalloutRoot:where(.rt-variant-outline):where([data-panel-background='translucent'],[data-material='translucent']){
10518
- -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
10519
- box-shadow: inset 0 0 0 1px var(--accent-a6);
10520
- color: var(--accent-a11);
10422
+ -webkit-box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
10423
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
10424
+ color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--material-blend));
10521
10425
  }
10522
10426
  .rt-CalloutRoot:where(.rt-variant-outline):where(.rt-high-contrast){
10523
10427
  color: var(--accent-12);
10524
10428
  }
10525
10429
  .rt-CalloutRoot:where(.rt-variant-classic){
10526
- background-color: var(--color-surface-solid);
10430
+ --classic-surface: var(--color-surface-solid);
10431
+ background-color: var(--classic-surface);
10527
10432
  -webkit-box-shadow: var(--shadow-2);
10528
10433
  box-shadow: var(--shadow-2);
10529
10434
  color: var(--accent-a11);
@@ -10531,26 +10436,16 @@
10531
10436
  transition: var(--transition-text-field);
10532
10437
  }
10533
10438
  :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-classic){
10534
- background-color: var(--color-surface-translucent);
10439
+ --classic-surface: var(--color-surface-translucent);
10535
10440
  }
10536
10441
  .rt-CalloutRoot:where(.rt-variant-classic):where([data-panel-background='solid'],[data-material='solid']){
10537
- background-color: var(--color-surface-solid);
10442
+ --classic-surface: var(--color-surface-solid);
10538
10443
  }
10539
10444
  .rt-CalloutRoot:where(.rt-variant-classic):where([data-panel-background='translucent'],[data-material='translucent']){
10540
- background-color: var(--color-surface-translucent);
10445
+ --classic-surface: var(--color-surface-translucent);
10541
10446
  }
10542
10447
  .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast){
10543
10448
  color: var(--accent-12);
10544
- background-color: var(--color-surface-solid);
10545
- }
10546
- :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast){
10547
- background-color: var(--color-surface-translucent);
10548
- }
10549
- .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='solid'],[data-material='solid']){
10550
- background-color: var(--color-surface-solid);
10551
- }
10552
- .rt-CalloutRoot:where(.rt-variant-classic):where(.rt-high-contrast):where([data-panel-background='translucent'],[data-material='translucent']){
10553
- background-color: var(--color-surface-translucent);
10554
10449
  }
10555
10450
  .rt-BaseCard{
10556
10451
  --material-blend: 100%;