@kushagradhawan/kookie-ui 0.1.21 → 0.1.22

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 (15) hide show
  1. package/components.css +141 -5
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-button.css +15 -0
  4. package/src/components/_internal/base-tab-list.css +6 -1
  5. package/src/components/animations.css +4 -4
  6. package/src/components/avatar.css +10 -0
  7. package/src/components/card.css +92 -3
  8. package/src/components/select.css +10 -0
  9. package/src/components/text-area.css +20 -0
  10. package/src/components/text-field.css +20 -0
  11. package/src/styles/tokens/constants.css +12 -6
  12. package/src/styles/tokens/transition.css +8 -8
  13. package/styles.css +157 -17
  14. package/tokens/base.css +6 -6
  15. package/tokens.css +16 -12
package/components.css CHANGED
@@ -283,10 +283,10 @@
283
283
  }
284
284
  @media (prefers-reduced-motion: no-preference) {
285
285
  .rt-PopperContent {
286
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
286
+ animation-timing-function: var(--ease-3);
287
287
  }
288
288
  .rt-PopperContent:where([data-state='open']) {
289
- animation-duration: 160ms;
289
+ animation-duration: var(--duration-2);
290
290
  }
291
291
  .rt-PopperContent:where([data-state='open']):where([data-side='top']) {
292
292
  animation-name: rt-slide-from-top, rt-fade-in;
@@ -304,7 +304,7 @@
304
304
  animation-name: rt-slide-from-bottom, rt-fade-in;
305
305
  }
306
306
  .rt-PopperContent:where([data-state='closed']) {
307
- animation-duration: 100ms;
307
+ animation-duration: var(--duration-1);
308
308
  }
309
309
  .rt-PopperContent:where([data-state='closed']):where([data-side='top']) {
310
310
  animation-name: rt-slide-to-top, rt-fade-out;
@@ -322,7 +322,7 @@
322
322
  animation-name: rt-slide-to-bottom, rt-fade-out;
323
323
  }
324
324
  .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
325
- animation: rt-tab-indicator-appear var(--duration-3) var(--ease-3);
325
+ animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
326
326
  }
327
327
  }
328
328
  .rt-Box {
@@ -1354,6 +1354,10 @@
1354
1354
  -webkit-backdrop-filter: inherit;
1355
1355
  backdrop-filter: inherit;
1356
1356
  }
1357
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])) {
1358
+ -webkit-backdrop-filter: none !important;
1359
+ backdrop-filter: none !important;
1360
+ }
1357
1361
  }
1358
1362
  .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])) {
1359
1363
  background-color: var(--accent-3);
@@ -1368,6 +1372,10 @@
1368
1372
  -webkit-backdrop-filter: inherit;
1369
1373
  backdrop-filter: inherit;
1370
1374
  }
1375
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])) {
1376
+ -webkit-backdrop-filter: none !important;
1377
+ backdrop-filter: none !important;
1378
+ }
1371
1379
  .rt-AvatarImage {
1372
1380
  width: 100%;
1373
1381
  height: 100%;
@@ -2782,6 +2790,10 @@
2782
2790
  backdrop-filter: var(--backdrop-filter-components);
2783
2791
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
2784
2792
  }
2793
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where(:hover) {
2794
+ -webkit-backdrop-filter: none !important;
2795
+ backdrop-filter: none !important;
2796
+ }
2785
2797
  }
2786
2798
  .rt-BaseButton:where(.rt-variant-ghost):where(:focus-visible) {
2787
2799
  outline: 2px solid var(--focus-8);
@@ -2807,6 +2819,10 @@
2807
2819
  backdrop-filter: var(--backdrop-filter-components);
2808
2820
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
2809
2821
  }
2822
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']) {
2823
+ -webkit-backdrop-filter: none !important;
2824
+ backdrop-filter: none !important;
2825
+ }
2810
2826
  .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
2811
2827
  background-color: var(--accent-4);
2812
2828
  }
@@ -2827,6 +2843,10 @@
2827
2843
  backdrop-filter: var(--backdrop-filter-components);
2828
2844
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
2829
2845
  }
2846
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
2847
+ -webkit-backdrop-filter: none !important;
2848
+ backdrop-filter: none !important;
2849
+ }
2830
2850
  .rt-BaseButton:where(.rt-variant-ghost):where([data-disabled]) {
2831
2851
  color: var(--gray-a8);
2832
2852
  background-color: transparent;
@@ -4124,6 +4144,7 @@
4124
4144
  }
4125
4145
  .rt-Card:where(.rt-variant-ghost) {
4126
4146
  --card-border-width: 0px;
4147
+ transition: var(--transition-background-blur);
4127
4148
  }
4128
4149
  .rt-Card:where(.rt-variant-ghost):where([data-flush='true']) {
4129
4150
  --margin-top: 0px;
@@ -4147,20 +4168,83 @@
4147
4168
  }
4148
4169
  @media (hover: hover) {
4149
4170
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
4171
+ background-color: var(--gray-3);
4172
+ }
4173
+ :where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
4150
4174
  background-color: var(--gray-a3);
4175
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
4176
+ backdrop-filter: var(--backdrop-filter-components);
4177
+ }
4178
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where([data-panel-background='solid']) {
4179
+ background-color: var(--gray-3);
4180
+ -webkit-backdrop-filter: none;
4181
+ backdrop-filter: none;
4182
+ --backdrop-filter-components: none;
4183
+ }
4184
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where([data-panel-background='translucent']) {
4185
+ background-color: var(--gray-a3);
4186
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
4187
+ backdrop-filter: var(--backdrop-filter-components);
4188
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
4189
+ }
4190
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
4191
+ -webkit-backdrop-filter: none !important;
4192
+ backdrop-filter: none !important;
4151
4193
  }
4152
4194
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where(:focus-visible) {
4153
4195
  background-color: var(--focus-a2);
4154
4196
  }
4155
4197
  }
4156
4198
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
4199
+ background-color: var(--gray-3);
4200
+ }
4201
+ :where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
4157
4202
  background-color: var(--gray-a3);
4203
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
4204
+ backdrop-filter: var(--backdrop-filter-components);
4205
+ }
4206
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where([data-panel-background='solid']) {
4207
+ background-color: var(--gray-3);
4208
+ -webkit-backdrop-filter: none;
4209
+ backdrop-filter: none;
4210
+ --backdrop-filter-components: none;
4211
+ }
4212
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where([data-panel-background='translucent']) {
4213
+ background-color: var(--gray-a3);
4214
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
4215
+ backdrop-filter: var(--backdrop-filter-components);
4216
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
4217
+ }
4218
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
4219
+ -webkit-backdrop-filter: none !important;
4220
+ backdrop-filter: none !important;
4158
4221
  }
4159
4222
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where(:focus-visible) {
4160
4223
  background-color: var(--focus-a2);
4161
4224
  }
4162
4225
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
4226
+ background-color: var(--gray-4);
4227
+ }
4228
+ :where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
4229
+ background-color: var(--gray-a4);
4230
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
4231
+ backdrop-filter: var(--backdrop-filter-components);
4232
+ }
4233
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where([data-panel-background='solid']) {
4234
+ background-color: var(--gray-4);
4235
+ -webkit-backdrop-filter: none;
4236
+ backdrop-filter: none;
4237
+ --backdrop-filter-components: none;
4238
+ }
4239
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where([data-panel-background='translucent']) {
4163
4240
  background-color: var(--gray-a4);
4241
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
4242
+ backdrop-filter: var(--backdrop-filter-components);
4243
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
4244
+ }
4245
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
4246
+ -webkit-backdrop-filter: none !important;
4247
+ backdrop-filter: none !important;
4164
4248
  }
4165
4249
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where(:focus-visible) {
4166
4250
  background-color: var(--focus-a2);
@@ -4227,6 +4311,10 @@
4227
4311
  backdrop-filter: var(--backdrop-filter-panel);
4228
4312
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
4229
4313
  }
4314
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
4315
+ -webkit-backdrop-filter: none !important;
4316
+ backdrop-filter: none !important;
4317
+ }
4230
4318
  }
4231
4319
  .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
4232
4320
  background-color: var(--gray-3);
@@ -4248,6 +4336,10 @@
4248
4336
  backdrop-filter: var(--backdrop-filter-panel);
4249
4337
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
4250
4338
  }
4339
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
4340
+ -webkit-backdrop-filter: none !important;
4341
+ backdrop-filter: none !important;
4342
+ }
4251
4343
  .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
4252
4344
  background-color: var(--gray-4);
4253
4345
  }
@@ -11183,6 +11275,10 @@
11183
11275
  -webkit-backdrop-filter: var(--backdrop-filter-components);
11184
11276
  backdrop-filter: var(--backdrop-filter-components);
11185
11277
  }
11278
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SelectTrigger:where(.rt-variant-ghost):where(:hover:not(:focus-visible)) {
11279
+ -webkit-backdrop-filter: none !important;
11280
+ backdrop-filter: none !important;
11281
+ }
11186
11282
  }
11187
11283
  .rt-SelectTrigger:where(.rt-variant-ghost):where([data-state='open']) {
11188
11284
  background-color: var(--accent-2);
@@ -11192,6 +11288,10 @@
11192
11288
  -webkit-backdrop-filter: var(--backdrop-filter-components);
11193
11289
  backdrop-filter: var(--backdrop-filter-components);
11194
11290
  }
11291
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SelectTrigger:where(.rt-variant-ghost):where([data-state='open']) {
11292
+ -webkit-backdrop-filter: none !important;
11293
+ backdrop-filter: none !important;
11294
+ }
11195
11295
  .rt-SelectTrigger:where(.rt-variant-ghost):where(:focus-visible) {
11196
11296
  outline-color: var(--accent-8);
11197
11297
  }
@@ -13474,7 +13574,7 @@
13474
13574
  display: flex;
13475
13575
  align-items: center;
13476
13576
  justify-content: center;
13477
- transition: var(--transition-tabs);
13577
+ transition: var(--transition-tabs), var(--transition-background-blur);
13478
13578
  box-sizing: border-box;
13479
13579
  padding: var(--tab-inner-padding-y) var(--tab-inner-padding-x);
13480
13580
  border-radius: var(--tab-inner-border-radius);
@@ -13663,6 +13763,10 @@
13663
13763
  backdrop-filter: var(--backdrop-filter-components);
13664
13764
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
13665
13765
  }
13766
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
13767
+ -webkit-backdrop-filter: none !important;
13768
+ backdrop-filter: none !important;
13769
+ }
13666
13770
  .rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
13667
13771
  background-color: var(--accent-a3);
13668
13772
  }
@@ -14402,6 +14506,10 @@
14402
14506
  backdrop-filter: var(--backdrop-filter-components);
14403
14507
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
14404
14508
  }
14509
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-ghost):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
14510
+ -webkit-backdrop-filter: none !important;
14511
+ backdrop-filter: none !important;
14512
+ }
14405
14513
  }
14406
14514
  .rt-TextAreaRoot:where(.rt-variant-ghost):where(:focus-within) {
14407
14515
  background-color: var(--accent-2);
@@ -14421,6 +14529,10 @@
14421
14529
  -webkit-backdrop-filter: var(--backdrop-filter-components);
14422
14530
  backdrop-filter: var(--backdrop-filter-components);
14423
14531
  }
14532
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-ghost):where(:focus-within) {
14533
+ -webkit-backdrop-filter: none !important;
14534
+ backdrop-filter: none !important;
14535
+ }
14424
14536
  .rt-TextAreaRoot:where(.rt-variant-ghost):where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
14425
14537
  background-color: var(--accent-a2);
14426
14538
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -14471,6 +14583,10 @@
14471
14583
  backdrop-filter: var(--backdrop-filter-components);
14472
14584
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
14473
14585
  }
14586
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-surface):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
14587
+ -webkit-backdrop-filter: none !important;
14588
+ backdrop-filter: none !important;
14589
+ }
14474
14590
  }
14475
14591
  .rt-TextAreaRoot:where(.rt-variant-surface):where(:focus-within) {
14476
14592
  background-color: var(--accent-2);
@@ -14494,6 +14610,10 @@
14494
14610
  -webkit-backdrop-filter: var(--backdrop-filter-components);
14495
14611
  backdrop-filter: var(--backdrop-filter-components);
14496
14612
  }
14613
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-surface):where(:focus-within) {
14614
+ -webkit-backdrop-filter: none !important;
14615
+ backdrop-filter: none !important;
14616
+ }
14497
14617
  .rt-TextAreaRoot:where(.rt-variant-surface):where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
14498
14618
  background-color: var(--accent-a2);
14499
14619
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -15292,6 +15412,10 @@
15292
15412
  backdrop-filter: var(--backdrop-filter-components);
15293
15413
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
15294
15414
  }
15415
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-ghost):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
15416
+ -webkit-backdrop-filter: none !important;
15417
+ backdrop-filter: none !important;
15418
+ }
15295
15419
  }
15296
15420
  .rt-TextFieldRoot:where(.rt-variant-ghost):where(:focus-within) {
15297
15421
  background-color: var(--accent-2);
@@ -15311,6 +15435,10 @@
15311
15435
  -webkit-backdrop-filter: var(--backdrop-filter-components);
15312
15436
  backdrop-filter: var(--backdrop-filter-components);
15313
15437
  }
15438
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-ghost):where(:focus-within) {
15439
+ -webkit-backdrop-filter: none !important;
15440
+ backdrop-filter: none !important;
15441
+ }
15314
15442
  .rt-TextFieldRoot:where(.rt-variant-ghost):where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
15315
15443
  background-color: var(--accent-a2);
15316
15444
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -15367,6 +15495,10 @@
15367
15495
  backdrop-filter: var(--backdrop-filter-components);
15368
15496
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
15369
15497
  }
15498
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-surface):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
15499
+ -webkit-backdrop-filter: none !important;
15500
+ backdrop-filter: none !important;
15501
+ }
15370
15502
  }
15371
15503
  .rt-TextFieldRoot:where(.rt-variant-surface):where(:focus-within) {
15372
15504
  background-color: var(--accent-2);
@@ -15390,6 +15522,10 @@
15390
15522
  -webkit-backdrop-filter: var(--backdrop-filter-components);
15391
15523
  backdrop-filter: var(--backdrop-filter-components);
15392
15524
  }
15525
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-surface):where(:focus-within) {
15526
+ -webkit-backdrop-filter: none !important;
15527
+ backdrop-filter: none !important;
15528
+ }
15393
15529
  .rt-TextFieldRoot:where(.rt-variant-surface):where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
15394
15530
  background-color: var(--accent-a2);
15395
15531
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.21",
3
+ "version": "0.1.22",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
5
5
  "keywords": [
6
6
  "react",
package/src/components/_internal/base-button.css CHANGED
@@ -438,6 +438,11 @@
438
438
  backdrop-filter: var(--backdrop-filter-components);
439
439
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
440
440
  }
441
+
442
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
443
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
444
+ backdrop-filter: none !important;
445
+ }
441
446
  }
442
447
  }
443
448
  &:where(:focus-visible) {
@@ -466,6 +471,11 @@
466
471
  backdrop-filter: var(--backdrop-filter-components);
467
472
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
468
473
  }
474
+
475
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
476
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
477
+ backdrop-filter: none !important;
478
+ }
469
479
  }
470
480
  &:where(:active:not([data-state='open'])) {
471
481
  /* Base state: solid accent for solid panels */
@@ -489,6 +499,11 @@
489
499
  backdrop-filter: var(--backdrop-filter-components);
490
500
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
491
501
  }
502
+
503
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
504
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
505
+ backdrop-filter: none !important;
506
+ }
492
507
  }
493
508
  &:where([data-disabled]) {
494
509
  color: var(--gray-a8);
package/src/components/_internal/base-tab-list.css CHANGED
@@ -28,7 +28,7 @@
28
28
  display: flex;
29
29
  align-items: center;
30
30
  justify-content: center;
31
- transition: var(--transition-tabs);
31
+ transition: var(--transition-tabs), var(--transition-background-blur);
32
32
  }
33
33
 
34
34
  .rt-BaseTabListTriggerInner {
@@ -139,6 +139,11 @@
139
139
  backdrop-filter: var(--backdrop-filter-components);
140
140
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
141
141
  }
142
+
143
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
144
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
145
+ backdrop-filter: none !important;
146
+ }
142
147
  }
143
148
  &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
144
149
  /* Base state: solid accent for solid panels */
package/src/components/animations.css CHANGED
@@ -104,10 +104,10 @@
104
104
 
105
105
  @media (prefers-reduced-motion: no-preference) {
106
106
  .rt-PopperContent {
107
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
107
+ animation-timing-function: var(--ease-3);
108
108
 
109
109
  &:where([data-state='open']) {
110
- animation-duration: 160ms;
110
+ animation-duration: var(--duration-2);
111
111
 
112
112
  /* Direction-aware animations (for dropdown menus with data-side) */
113
113
  &:where([data-side='top']) {
@@ -130,7 +130,7 @@
130
130
  }
131
131
 
132
132
  &:where([data-state='closed']) {
133
- animation-duration: 100ms;
133
+ animation-duration: var(--duration-1);
134
134
 
135
135
  /* Direction-aware animations (for dropdown menus with data-side) */
136
136
  &:where([data-side='top']) {
@@ -155,6 +155,6 @@
155
155
 
156
156
  /* Tab indicator animations - only when motion is preferred */
157
157
  .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
158
- animation: rt-tab-indicator-appear var(--duration-3) var(--ease-3);
158
+ animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
159
159
  }
160
160
  }
package/src/components/avatar.css CHANGED
@@ -211,6 +211,11 @@
211
211
  background-color: inherit;
212
212
  backdrop-filter: inherit;
213
213
  }
214
+
215
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
216
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
217
+ backdrop-filter: none !important;
218
+ }
214
219
  }
215
220
  }
216
221
  &:where(:active:not(:disabled, [data-disabled])) {
@@ -223,6 +228,11 @@
223
228
  background-color: inherit;
224
229
  backdrop-filter: inherit;
225
230
  }
231
+
232
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
233
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
234
+ backdrop-filter: none !important;
235
+ }
226
236
  }
227
237
  }
228
238
  }
package/src/components/card.css CHANGED
@@ -192,6 +192,7 @@
192
192
 
193
193
  .rt-Card:where(.rt-variant-ghost) {
194
194
  --card-border-width: 0px;
195
+ transition: var(--transition-background-blur);
195
196
 
196
197
  &:where([data-flush='true']) {
197
198
  /* We reset the defined margin variables to avoid inheriting them from a higher component */
@@ -224,20 +225,98 @@
224
225
  &:where(:any-link, button, label) {
225
226
  @media (hover: hover) {
226
227
  &:where(:hover) {
227
- background-color: var(--gray-a3);
228
+ /* Base state: solid accent for solid panels */
229
+ background-color: var(--gray-3);
230
+
231
+ /* Theme-level translucent override for hover */
232
+ :where([data-panel-background='translucent']) & {
233
+ background-color: var(--gray-a3);
234
+ backdrop-filter: var(--backdrop-filter-components);
235
+ }
236
+
237
+ /* Component-level overrides for hover */
238
+ &:where([data-panel-background='solid']) {
239
+ background-color: var(--gray-3);
240
+ backdrop-filter: none;
241
+ --backdrop-filter-components: none;
242
+ }
243
+
244
+ &:where([data-panel-background='translucent']) {
245
+ background-color: var(--gray-a3);
246
+ backdrop-filter: var(--backdrop-filter-components);
247
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
248
+ }
249
+
250
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
251
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
252
+ backdrop-filter: none !important;
253
+ }
254
+
228
255
  &:where(:focus-visible) {
229
256
  background-color: var(--focus-a2);
230
257
  }
231
258
  }
232
259
  }
233
260
  &:where([data-state='open']) {
234
- background-color: var(--gray-a3);
261
+ /* Base state: solid accent for solid panels */
262
+ background-color: var(--gray-3);
263
+
264
+ /* Theme-level translucent override for open */
265
+ :where([data-panel-background='translucent']) & {
266
+ background-color: var(--gray-a3);
267
+ backdrop-filter: var(--backdrop-filter-components);
268
+ }
269
+
270
+ /* Component-level overrides for open */
271
+ &:where([data-panel-background='solid']) {
272
+ background-color: var(--gray-3);
273
+ backdrop-filter: none;
274
+ --backdrop-filter-components: none;
275
+ }
276
+
277
+ &:where([data-panel-background='translucent']) {
278
+ background-color: var(--gray-a3);
279
+ backdrop-filter: var(--backdrop-filter-components);
280
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
281
+ }
282
+
283
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
284
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
285
+ backdrop-filter: none !important;
286
+ }
287
+
235
288
  &:where(:focus-visible) {
236
289
  background-color: var(--focus-a2);
237
290
  }
238
291
  }
239
292
  &:where(:active:not([data-state='open'])) {
240
- background-color: var(--gray-a4);
293
+ /* Base state: solid accent for solid panels */
294
+ background-color: var(--gray-4);
295
+
296
+ /* Theme-level translucent override for active */
297
+ :where([data-panel-background='translucent']) & {
298
+ background-color: var(--gray-a4);
299
+ backdrop-filter: var(--backdrop-filter-components);
300
+ }
301
+
302
+ /* Component-level overrides for active */
303
+ &:where([data-panel-background='solid']) {
304
+ background-color: var(--gray-4);
305
+ backdrop-filter: none;
306
+ --backdrop-filter-components: none;
307
+ }
308
+
309
+ &:where([data-panel-background='translucent']) {
310
+ background-color: var(--gray-a4);
311
+ backdrop-filter: var(--backdrop-filter-components);
312
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
313
+ }
314
+
315
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
316
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
317
+ backdrop-filter: none !important;
318
+ }
319
+
241
320
  &:where(:focus-visible) {
242
321
  background-color: var(--focus-a2);
243
322
  }
@@ -330,6 +409,11 @@
330
409
  backdrop-filter: var(--backdrop-filter-panel);
331
410
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
332
411
  }
412
+
413
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
414
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
415
+ backdrop-filter: none !important;
416
+ }
333
417
  }
334
418
  }
335
419
  }
@@ -356,6 +440,11 @@
356
440
  backdrop-filter: var(--backdrop-filter-panel);
357
441
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
358
442
  }
443
+
444
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
445
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
446
+ backdrop-filter: none !important;
447
+ }
359
448
  }
360
449
  }
361
450
  &:where(:active:not([data-state='open'])) {
package/src/components/select.css CHANGED
@@ -635,6 +635,11 @@
635
635
  background-color: var(--accent-a2);
636
636
  backdrop-filter: var(--backdrop-filter-components);
637
637
  }
638
+
639
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
640
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
641
+ backdrop-filter: none !important;
642
+ }
638
643
  }
639
644
  }
640
645
  &:where([data-state='open']) {
@@ -644,6 +649,11 @@
644
649
  background-color: var(--accent-a2);
645
650
  backdrop-filter: var(--backdrop-filter-components);
646
651
  }
652
+
653
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
654
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
655
+ backdrop-filter: none !important;
656
+ }
647
657
  }
648
658
  &:where(:focus-visible) {
649
659
  outline-color: var(--accent-8);
package/src/components/text-area.css CHANGED
@@ -383,6 +383,11 @@
383
383
  backdrop-filter: var(--backdrop-filter-components);
384
384
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
385
385
  }
386
+
387
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
388
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
389
+ backdrop-filter: none !important;
390
+ }
386
391
  }
387
392
  }
388
393
 
@@ -407,6 +412,11 @@
407
412
  background-color: var(--accent-a2);
408
413
  backdrop-filter: var(--backdrop-filter-components);
409
414
  }
415
+
416
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
417
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
418
+ backdrop-filter: none !important;
419
+ }
410
420
  }
411
421
 
412
422
  /* prettier-ignore */
@@ -476,6 +486,11 @@
476
486
  backdrop-filter: var(--backdrop-filter-components);
477
487
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
478
488
  }
489
+
490
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
491
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
492
+ backdrop-filter: none !important;
493
+ }
479
494
  }
480
495
  }
481
496
 
@@ -504,6 +519,11 @@
504
519
  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--accent-a8);
505
520
  backdrop-filter: var(--backdrop-filter-components);
506
521
  }
522
+
523
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
524
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
525
+ backdrop-filter: none !important;
526
+ }
507
527
  }
508
528
 
509
529
  /* prettier-ignore */
package/src/components/text-field.css CHANGED
@@ -578,6 +578,11 @@
578
578
  backdrop-filter: var(--backdrop-filter-components);
579
579
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
580
580
  }
581
+
582
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
583
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
584
+ backdrop-filter: none !important;
585
+ }
581
586
  }
582
587
  }
583
588
 
@@ -602,6 +607,11 @@
602
607
  background-color: var(--accent-a2);
603
608
  backdrop-filter: var(--backdrop-filter-components);
604
609
  }
610
+
611
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
612
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
613
+ backdrop-filter: none !important;
614
+ }
605
615
  }
606
616
 
607
617
  /* prettier-ignore */
@@ -680,6 +690,11 @@
680
690
  backdrop-filter: var(--backdrop-filter-components);
681
691
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
682
692
  }
693
+
694
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
695
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
696
+ backdrop-filter: none !important;
697
+ }
683
698
  }
684
699
  }
685
700
 
@@ -708,6 +723,11 @@
708
723
  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--accent-a8);
709
724
  backdrop-filter: var(--backdrop-filter-components);
710
725
  }
726
+
727
+ /* Disable backdrop-filter when inside elements that already have backdrop-filter */
728
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
729
+ backdrop-filter: none !important;
730
+ }
711
731
  }
712
732
 
713
733
  /* prettier-ignore */
package/src/styles/tokens/constants.css CHANGED
@@ -6,14 +6,14 @@
6
6
 
7
7
  :where(.radix-themes) {
8
8
  /* Backdrop blur constants */
9
- --backdrop-blur-panel: 40px;
10
- --backdrop-blur-components: 8px;
11
- --backdrop-blur-heavy: 16px;
12
- --backdrop-blur-light: 8px;
13
- --backdrop-blur-dialog: 16px;
9
+ --backdrop-blur-panel: 64px;
10
+ --backdrop-blur-components: 16px;
11
+ --backdrop-blur-heavy: 48px;
12
+ --backdrop-blur-light: 16px;
13
+ --backdrop-blur-dialog: 32px;
14
14
 
15
15
  /* Panel background opacity constants */
16
- --panel-opacity-light: 0.25;
16
+ --panel-opacity-light: 0.75;
17
17
  --panel-opacity-heavy: 0.75;
18
18
  --surface-opacity-light: 0.25;
19
19
  --surface-opacity-heavy: 0.75;
@@ -115,4 +115,10 @@
115
115
  --scale-active: 0.98;
116
116
  --scale-pressed: 0.96;
117
117
  --scale-normal: 1;
118
+
119
+ /* Nested backdrop-filter detection constants */
120
+ --backdrop-filter-nested-disabled: none;
121
+ --backdrop-filter-nested-enabled: var(--backdrop-filter-components);
122
+ --backdrop-filter-nested-panel: var(--backdrop-filter-panel);
123
+ --backdrop-filter-nested-dialog: var(--backdrop-filter-dialog);
118
124
  }
package/src/styles/tokens/transition.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .radix-themes {
2
2
  /* Duration tokens */
3
- --duration-1: 100ms; /* Micro interactions */
4
- --duration-2: 150ms; /* Fast transitions */
5
- --duration-3: 200ms; /* Standard transitions */
6
- --duration-4: 300ms; /* Slower transitions */
7
- --duration-5: 500ms; /* Slow animations */
3
+ --duration-1: 50ms; /* Micro interactions */
4
+ --duration-2: 100ms; /* Fast transitions */
5
+ --duration-3: 150ms; /* Standard transitions */
6
+ --duration-4: 200ms; /* Slower transitions */
7
+ --duration-5: 300ms; /* Slow animations */
8
8
 
9
9
  /* Easing tokens */
10
10
  --ease-1: ease-out; /* Fast start, slow end */
@@ -41,9 +41,9 @@
41
41
  backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
42
42
 
43
43
  --transition-tabs:
44
- color var(--duration-2) var(--ease-1), background-color var(--duration-2) var(--ease-1),
45
- font-weight var(--duration-3) var(--ease-2), letter-spacing var(--duration-3) var(--ease-2),
46
- word-spacing var(--duration-3) var(--ease-2), transform var(--duration-2) var(--ease-1);
44
+ color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1),
45
+ font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2),
46
+ word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
47
47
 
48
48
  --transition-menu:
49
49
  background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1),
package/styles.css CHANGED
@@ -3322,12 +3322,12 @@
3322
3322
  }
3323
3323
  }
3324
3324
  :where(.radix-themes) {
3325
- --backdrop-blur-panel: 40px;
3326
- --backdrop-blur-components: 8px;
3327
- --backdrop-blur-heavy: 16px;
3328
- --backdrop-blur-light: 8px;
3329
- --backdrop-blur-dialog: 16px;
3330
- --panel-opacity-light: 0.25;
3325
+ --backdrop-blur-panel: 64px;
3326
+ --backdrop-blur-components: 16px;
3327
+ --backdrop-blur-heavy: 48px;
3328
+ --backdrop-blur-light: 16px;
3329
+ --backdrop-blur-dialog: 32px;
3330
+ --panel-opacity-light: 0.75;
3331
3331
  --panel-opacity-heavy: 0.75;
3332
3332
  --surface-opacity-light: 0.25;
3333
3333
  --surface-opacity-heavy: 0.75;
@@ -3392,6 +3392,10 @@
3392
3392
  --scale-active: 0.98;
3393
3393
  --scale-pressed: 0.96;
3394
3394
  --scale-normal: 1;
3395
+ --backdrop-filter-nested-disabled: none;
3396
+ --backdrop-filter-nested-enabled: var(--backdrop-filter-components);
3397
+ --backdrop-filter-nested-panel: var(--backdrop-filter-panel);
3398
+ --backdrop-filter-nested-dialog: var(--backdrop-filter-dialog);
3395
3399
  --color-background: white;
3396
3400
  --color-overlay: var(--black-a6);
3397
3401
  --color-panel-solid: white;
@@ -4505,11 +4509,11 @@
4505
4509
  --space-7: calc(40px * var(--scaling));
4506
4510
  --space-8: calc(48px * var(--scaling));
4507
4511
  --space-9: calc(64px * var(--scaling));
4508
- --duration-1: 100ms;
4509
- --duration-2: 150ms;
4510
- --duration-3: 200ms;
4511
- --duration-4: 300ms;
4512
- --duration-5: 500ms;
4512
+ --duration-1: 50ms;
4513
+ --duration-2: 100ms;
4514
+ --duration-3: 150ms;
4515
+ --duration-4: 200ms;
4516
+ --duration-5: 300ms;
4513
4517
  --ease-1: ease-out;
4514
4518
  --ease-2: ease-in-out;
4515
4519
  --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4523,7 +4527,7 @@
4523
4527
  --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
4524
4528
  --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
4525
4529
  --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
4526
- --transition-tabs: color var(--duration-2) var(--ease-1), background-color var(--duration-2) var(--ease-1), font-weight var(--duration-3) var(--ease-2), letter-spacing var(--duration-3) var(--ease-2), word-spacing var(--duration-3) var(--ease-2), transform var(--duration-2) var(--ease-1);
4530
+ --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
4527
4531
  --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
4528
4532
  --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
4529
4533
  --font-size-0: calc(10px * var(--scaling));
@@ -5178,10 +5182,10 @@
5178
5182
  }
5179
5183
  @media (prefers-reduced-motion: no-preference) {
5180
5184
  .rt-PopperContent {
5181
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
5185
+ animation-timing-function: var(--ease-3);
5182
5186
  }
5183
5187
  .rt-PopperContent:where([data-state='open']) {
5184
- animation-duration: 160ms;
5188
+ animation-duration: var(--duration-2);
5185
5189
  }
5186
5190
  .rt-PopperContent:where([data-state='open']):where([data-side='top']) {
5187
5191
  animation-name: rt-slide-from-top, rt-fade-in;
@@ -5199,7 +5203,7 @@
5199
5203
  animation-name: rt-slide-from-bottom, rt-fade-in;
5200
5204
  }
5201
5205
  .rt-PopperContent:where([data-state='closed']) {
5202
- animation-duration: 100ms;
5206
+ animation-duration: var(--duration-1);
5203
5207
  }
5204
5208
  .rt-PopperContent:where([data-state='closed']):where([data-side='top']) {
5205
5209
  animation-name: rt-slide-to-top, rt-fade-out;
@@ -5217,7 +5221,7 @@
5217
5221
  animation-name: rt-slide-to-bottom, rt-fade-out;
5218
5222
  }
5219
5223
  .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
5220
- animation: rt-tab-indicator-appear var(--duration-3) var(--ease-3);
5224
+ animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
5221
5225
  }
5222
5226
  }
5223
5227
  .rt-Box {
@@ -6232,6 +6236,10 @@
6232
6236
  -webkit-backdrop-filter: inherit;
6233
6237
  backdrop-filter: inherit;
6234
6238
  }
6239
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:hover:not(:disabled, [data-disabled])) {
6240
+ -webkit-backdrop-filter: none !important;
6241
+ backdrop-filter: none !important;
6242
+ }
6235
6243
  }
6236
6244
  .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])) {
6237
6245
  background-color: var(--accent-3);
@@ -6246,6 +6254,10 @@
6246
6254
  -webkit-backdrop-filter: inherit;
6247
6255
  backdrop-filter: inherit;
6248
6256
  }
6257
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(button):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where(a):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])), :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-AvatarRoot:where([role="button"]):where(.rt-variant-outline):where(:active:not(:disabled, [data-disabled])) {
6258
+ -webkit-backdrop-filter: none !important;
6259
+ backdrop-filter: none !important;
6260
+ }
6249
6261
  .rt-AvatarImage {
6250
6262
  width: 100%;
6251
6263
  height: 100%;
@@ -7618,6 +7630,10 @@
7618
7630
  backdrop-filter: var(--backdrop-filter-components);
7619
7631
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
7620
7632
  }
7633
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where(:hover) {
7634
+ -webkit-backdrop-filter: none !important;
7635
+ backdrop-filter: none !important;
7636
+ }
7621
7637
  }
7622
7638
  .rt-BaseButton:where(.rt-variant-ghost):where(:focus-visible) {
7623
7639
  outline: 2px solid var(--focus-8);
@@ -7643,6 +7659,10 @@
7643
7659
  backdrop-filter: var(--backdrop-filter-components);
7644
7660
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
7645
7661
  }
7662
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where([data-state='open']) {
7663
+ -webkit-backdrop-filter: none !important;
7664
+ backdrop-filter: none !important;
7665
+ }
7646
7666
  .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
7647
7667
  background-color: var(--accent-4);
7648
7668
  }
@@ -7663,6 +7683,10 @@
7663
7683
  backdrop-filter: var(--backdrop-filter-components);
7664
7684
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
7665
7685
  }
7686
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-BaseButton:where(.rt-variant-ghost):where(:active:not([data-state='open'])) {
7687
+ -webkit-backdrop-filter: none !important;
7688
+ backdrop-filter: none !important;
7689
+ }
7666
7690
  .rt-BaseButton:where(.rt-variant-ghost):where([data-disabled]) {
7667
7691
  color: var(--gray-a8);
7668
7692
  background-color: transparent;
@@ -8950,6 +8974,7 @@
8950
8974
  }
8951
8975
  .rt-Card:where(.rt-variant-ghost) {
8952
8976
  --card-border-width: 0px;
8977
+ transition: var(--transition-background-blur);
8953
8978
  }
8954
8979
  .rt-Card:where(.rt-variant-ghost):where([data-flush='true']) {
8955
8980
  --margin-top: 0px;
@@ -8973,20 +8998,83 @@
8973
8998
  }
8974
8999
  @media (hover: hover) {
8975
9000
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
9001
+ background-color: var(--gray-3);
9002
+ }
9003
+ :where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
8976
9004
  background-color: var(--gray-a3);
9005
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
9006
+ backdrop-filter: var(--backdrop-filter-components);
9007
+ }
9008
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where([data-panel-background='solid']) {
9009
+ background-color: var(--gray-3);
9010
+ -webkit-backdrop-filter: none;
9011
+ backdrop-filter: none;
9012
+ --backdrop-filter-components: none;
9013
+ }
9014
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where([data-panel-background='translucent']) {
9015
+ background-color: var(--gray-a3);
9016
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
9017
+ backdrop-filter: var(--backdrop-filter-components);
9018
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
9019
+ }
9020
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover) {
9021
+ -webkit-backdrop-filter: none !important;
9022
+ backdrop-filter: none !important;
8977
9023
  }
8978
9024
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:hover):where(:focus-visible) {
8979
9025
  background-color: var(--focus-a2);
8980
9026
  }
8981
9027
  }
8982
9028
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
9029
+ background-color: var(--gray-3);
9030
+ }
9031
+ :where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
8983
9032
  background-color: var(--gray-a3);
9033
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
9034
+ backdrop-filter: var(--backdrop-filter-components);
9035
+ }
9036
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where([data-panel-background='solid']) {
9037
+ background-color: var(--gray-3);
9038
+ -webkit-backdrop-filter: none;
9039
+ backdrop-filter: none;
9040
+ --backdrop-filter-components: none;
9041
+ }
9042
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where([data-panel-background='translucent']) {
9043
+ background-color: var(--gray-a3);
9044
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
9045
+ backdrop-filter: var(--backdrop-filter-components);
9046
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
9047
+ }
9048
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']) {
9049
+ -webkit-backdrop-filter: none !important;
9050
+ backdrop-filter: none !important;
8984
9051
  }
8985
9052
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where([data-state='open']):where(:focus-visible) {
8986
9053
  background-color: var(--focus-a2);
8987
9054
  }
8988
9055
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
9056
+ background-color: var(--gray-4);
9057
+ }
9058
+ :where([data-panel-background='translucent']) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
9059
+ background-color: var(--gray-a4);
9060
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
9061
+ backdrop-filter: var(--backdrop-filter-components);
9062
+ }
9063
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where([data-panel-background='solid']) {
9064
+ background-color: var(--gray-4);
9065
+ -webkit-backdrop-filter: none;
9066
+ backdrop-filter: none;
9067
+ --backdrop-filter-components: none;
9068
+ }
9069
+ .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where([data-panel-background='translucent']) {
8989
9070
  background-color: var(--gray-a4);
9071
+ -webkit-backdrop-filter: var(--backdrop-filter-components);
9072
+ backdrop-filter: var(--backdrop-filter-components);
9073
+ --backdrop-filter-components: blur(var(--backdrop-blur-components));
9074
+ }
9075
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])) {
9076
+ -webkit-backdrop-filter: none !important;
9077
+ backdrop-filter: none !important;
8990
9078
  }
8991
9079
  .rt-Card:where(.rt-variant-ghost):where(:any-link, button, label):where(:active:not([data-state='open'])):where(:focus-visible) {
8992
9080
  background-color: var(--focus-a2);
@@ -9053,6 +9141,10 @@
9053
9141
  backdrop-filter: var(--backdrop-filter-panel);
9054
9142
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
9055
9143
  }
9144
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:hover)::before {
9145
+ -webkit-backdrop-filter: none !important;
9146
+ backdrop-filter: none !important;
9147
+ }
9056
9148
  }
9057
9149
  .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
9058
9150
  background-color: var(--gray-3);
@@ -9074,6 +9166,10 @@
9074
9166
  backdrop-filter: var(--backdrop-filter-panel);
9075
9167
  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
9076
9168
  }
9169
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where([data-state='open'])::before {
9170
+ -webkit-backdrop-filter: none !important;
9171
+ backdrop-filter: none !important;
9172
+ }
9077
9173
  .rt-Card:where(.rt-variant-soft):where(:any-link, button, label):where(:active:not([data-state='open']))::before {
9078
9174
  background-color: var(--gray-4);
9079
9175
  }
@@ -16009,6 +16105,10 @@
16009
16105
  -webkit-backdrop-filter: var(--backdrop-filter-components);
16010
16106
  backdrop-filter: var(--backdrop-filter-components);
16011
16107
  }
16108
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SelectTrigger:where(.rt-variant-ghost):where(:hover:not(:focus-visible)) {
16109
+ -webkit-backdrop-filter: none !important;
16110
+ backdrop-filter: none !important;
16111
+ }
16012
16112
  }
16013
16113
  .rt-SelectTrigger:where(.rt-variant-ghost):where([data-state='open']) {
16014
16114
  background-color: var(--accent-2);
@@ -16018,6 +16118,10 @@
16018
16118
  -webkit-backdrop-filter: var(--backdrop-filter-components);
16019
16119
  backdrop-filter: var(--backdrop-filter-components);
16020
16120
  }
16121
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-SelectTrigger:where(.rt-variant-ghost):where([data-state='open']) {
16122
+ -webkit-backdrop-filter: none !important;
16123
+ backdrop-filter: none !important;
16124
+ }
16021
16125
  .rt-SelectTrigger:where(.rt-variant-ghost):where(:focus-visible) {
16022
16126
  outline-color: var(--accent-8);
16023
16127
  }
@@ -18300,7 +18404,7 @@
18300
18404
  display: flex;
18301
18405
  align-items: center;
18302
18406
  justify-content: center;
18303
- transition: var(--transition-tabs);
18407
+ transition: var(--transition-tabs), var(--transition-background-blur);
18304
18408
  box-sizing: border-box;
18305
18409
  padding: var(--tab-inner-padding-y) var(--tab-inner-padding-x);
18306
18410
  border-radius: var(--tab-inner-border-radius);
@@ -18489,6 +18593,10 @@
18489
18593
  backdrop-filter: var(--backdrop-filter-components);
18490
18594
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
18491
18595
  }
18596
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
18597
+ -webkit-backdrop-filter: none !important;
18598
+ backdrop-filter: none !important;
18599
+ }
18492
18600
  .rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
18493
18601
  background-color: var(--accent-a3);
18494
18602
  }
@@ -19228,6 +19336,10 @@
19228
19336
  backdrop-filter: var(--backdrop-filter-components);
19229
19337
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
19230
19338
  }
19339
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-ghost):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
19340
+ -webkit-backdrop-filter: none !important;
19341
+ backdrop-filter: none !important;
19342
+ }
19231
19343
  }
19232
19344
  .rt-TextAreaRoot:where(.rt-variant-ghost):where(:focus-within) {
19233
19345
  background-color: var(--accent-2);
@@ -19247,6 +19359,10 @@
19247
19359
  -webkit-backdrop-filter: var(--backdrop-filter-components);
19248
19360
  backdrop-filter: var(--backdrop-filter-components);
19249
19361
  }
19362
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-ghost):where(:focus-within) {
19363
+ -webkit-backdrop-filter: none !important;
19364
+ backdrop-filter: none !important;
19365
+ }
19250
19366
  .rt-TextAreaRoot:where(.rt-variant-ghost):where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
19251
19367
  background-color: var(--accent-a2);
19252
19368
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -19297,6 +19413,10 @@
19297
19413
  backdrop-filter: var(--backdrop-filter-components);
19298
19414
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
19299
19415
  }
19416
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-surface):where(:hover:not(:has(.rt-TextAreaInput:focus))) {
19417
+ -webkit-backdrop-filter: none !important;
19418
+ backdrop-filter: none !important;
19419
+ }
19300
19420
  }
19301
19421
  .rt-TextAreaRoot:where(.rt-variant-surface):where(:focus-within) {
19302
19422
  background-color: var(--accent-2);
@@ -19320,6 +19440,10 @@
19320
19440
  -webkit-backdrop-filter: var(--backdrop-filter-components);
19321
19441
  backdrop-filter: var(--backdrop-filter-components);
19322
19442
  }
19443
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextAreaRoot:where(.rt-variant-surface):where(:focus-within) {
19444
+ -webkit-backdrop-filter: none !important;
19445
+ backdrop-filter: none !important;
19446
+ }
19323
19447
  .rt-TextAreaRoot:where(.rt-variant-surface):where(:has(.rt-TextAreaInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
19324
19448
  background-color: var(--accent-a2);
19325
19449
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -20118,6 +20242,10 @@
20118
20242
  backdrop-filter: var(--backdrop-filter-components);
20119
20243
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
20120
20244
  }
20245
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-ghost):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
20246
+ -webkit-backdrop-filter: none !important;
20247
+ backdrop-filter: none !important;
20248
+ }
20121
20249
  }
20122
20250
  .rt-TextFieldRoot:where(.rt-variant-ghost):where(:focus-within) {
20123
20251
  background-color: var(--accent-2);
@@ -20137,6 +20265,10 @@
20137
20265
  -webkit-backdrop-filter: var(--backdrop-filter-components);
20138
20266
  backdrop-filter: var(--backdrop-filter-components);
20139
20267
  }
20268
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-ghost):where(:focus-within) {
20269
+ -webkit-backdrop-filter: none !important;
20270
+ backdrop-filter: none !important;
20271
+ }
20140
20272
  .rt-TextFieldRoot:where(.rt-variant-ghost):where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
20141
20273
  background-color: var(--accent-a2);
20142
20274
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
@@ -20193,6 +20325,10 @@
20193
20325
  backdrop-filter: var(--backdrop-filter-components);
20194
20326
  --backdrop-filter-components: blur(var(--backdrop-blur-components));
20195
20327
  }
20328
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-surface):where(:hover:not(:has(.rt-TextFieldInput:focus))) {
20329
+ -webkit-backdrop-filter: none !important;
20330
+ backdrop-filter: none !important;
20331
+ }
20196
20332
  }
20197
20333
  .rt-TextFieldRoot:where(.rt-variant-surface):where(:focus-within) {
20198
20334
  background-color: var(--accent-2);
@@ -20216,6 +20352,10 @@
20216
20352
  -webkit-backdrop-filter: var(--backdrop-filter-components);
20217
20353
  backdrop-filter: var(--backdrop-filter-components);
20218
20354
  }
20355
+ :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) .rt-TextFieldRoot:where(.rt-variant-surface):where(:focus-within) {
20356
+ -webkit-backdrop-filter: none !important;
20357
+ backdrop-filter: none !important;
20358
+ }
20219
20359
  .rt-TextFieldRoot:where(.rt-variant-surface):where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
20220
20360
  background-color: var(--accent-a2);
20221
20361
  box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
package/tokens/base.css CHANGED
@@ -1101,11 +1101,11 @@
1101
1101
  --space-7: calc(40px * var(--scaling));
1102
1102
  --space-8: calc(48px * var(--scaling));
1103
1103
  --space-9: calc(64px * var(--scaling));
1104
- --duration-1: 100ms;
1105
- --duration-2: 150ms;
1106
- --duration-3: 200ms;
1107
- --duration-4: 300ms;
1108
- --duration-5: 500ms;
1104
+ --duration-1: 50ms;
1105
+ --duration-2: 100ms;
1106
+ --duration-3: 150ms;
1107
+ --duration-4: 200ms;
1108
+ --duration-5: 300ms;
1109
1109
  --ease-1: ease-out;
1110
1110
  --ease-2: ease-in-out;
1111
1111
  --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1119,7 +1119,7 @@
1119
1119
  --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
1120
1120
  --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
1121
1121
  --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
1122
- --transition-tabs: color var(--duration-2) var(--ease-1), background-color var(--duration-2) var(--ease-1), font-weight var(--duration-3) var(--ease-2), letter-spacing var(--duration-3) var(--ease-2), word-spacing var(--duration-3) var(--ease-2), transform var(--duration-2) var(--ease-1);
1122
+ --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
1123
1123
  --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
1124
1124
  --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
1125
1125
  --font-size-0: calc(10px * var(--scaling));
package/tokens.css CHANGED
@@ -3306,12 +3306,12 @@
3306
3306
  }
3307
3307
  }
3308
3308
  :where(.radix-themes) {
3309
- --backdrop-blur-panel: 40px;
3310
- --backdrop-blur-components: 8px;
3311
- --backdrop-blur-heavy: 16px;
3312
- --backdrop-blur-light: 8px;
3313
- --backdrop-blur-dialog: 16px;
3314
- --panel-opacity-light: 0.25;
3309
+ --backdrop-blur-panel: 64px;
3310
+ --backdrop-blur-components: 16px;
3311
+ --backdrop-blur-heavy: 48px;
3312
+ --backdrop-blur-light: 16px;
3313
+ --backdrop-blur-dialog: 32px;
3314
+ --panel-opacity-light: 0.75;
3315
3315
  --panel-opacity-heavy: 0.75;
3316
3316
  --surface-opacity-light: 0.25;
3317
3317
  --surface-opacity-heavy: 0.75;
@@ -3376,6 +3376,10 @@
3376
3376
  --scale-active: 0.98;
3377
3377
  --scale-pressed: 0.96;
3378
3378
  --scale-normal: 1;
3379
+ --backdrop-filter-nested-disabled: none;
3380
+ --backdrop-filter-nested-enabled: var(--backdrop-filter-components);
3381
+ --backdrop-filter-nested-panel: var(--backdrop-filter-panel);
3382
+ --backdrop-filter-nested-dialog: var(--backdrop-filter-dialog);
3379
3383
  --color-background: white;
3380
3384
  --color-overlay: var(--black-a6);
3381
3385
  --color-panel-solid: white;
@@ -4452,11 +4456,11 @@
4452
4456
  --space-7: calc(40px * var(--scaling));
4453
4457
  --space-8: calc(48px * var(--scaling));
4454
4458
  --space-9: calc(64px * var(--scaling));
4455
- --duration-1: 100ms;
4456
- --duration-2: 150ms;
4457
- --duration-3: 200ms;
4458
- --duration-4: 300ms;
4459
- --duration-5: 500ms;
4459
+ --duration-1: 50ms;
4460
+ --duration-2: 100ms;
4461
+ --duration-3: 150ms;
4462
+ --duration-4: 200ms;
4463
+ --duration-5: 300ms;
4460
4464
  --ease-1: ease-out;
4461
4465
  --ease-2: ease-in-out;
4462
4466
  --ease-3: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4470,7 +4474,7 @@
4470
4474
  --transition-select: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
4471
4475
  --transition-badge: background var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), padding var(--duration-1) var(--ease-1);
4472
4476
  --transition-card: background-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1), top var(--duration-2) var(--ease-1);
4473
- --transition-tabs: color var(--duration-2) var(--ease-1), background-color var(--duration-2) var(--ease-1), font-weight var(--duration-3) var(--ease-2), letter-spacing var(--duration-3) var(--ease-2), word-spacing var(--duration-3) var(--ease-2), transform var(--duration-2) var(--ease-1);
4477
+ --transition-tabs: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), font-weight var(--duration-2) var(--ease-2), letter-spacing var(--duration-2) var(--ease-2), word-spacing var(--duration-2) var(--ease-2), transform var(--duration-1) var(--ease-1);
4474
4478
  --transition-menu: background var(--duration-1) var(--ease-1), color var(--duration-2) var(--ease-1), backdrop-filter var(--duration-2) var(--ease-1);
4475
4479
  --transition-focus: outline var(--duration-2) var(--ease-1), outline-offset var(--duration-2) var(--ease-1);
4476
4480
  --font-size-0: calc(10px * var(--scaling));