@kushagradhawan/kookie-ui 0.1.9 → 0.1.11

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 (6) hide show
  1. package/components.css +198 -98
  2. package/package.json +1 -1
  3. package/src/components/_internal/base-menu.css +60 -2
  4. package/src/components/button.css +8 -8
  5. package/src/components/icon-button.css +8 -8
  6. package/styles.css +198 -98
package/components.css CHANGED
@@ -2337,8 +2337,8 @@
2337
2337
  letter-spacing: var(--letter-spacing-1);
2338
2338
  }
2339
2339
  .rt-Button:where(.rt-r-size-1) :where(svg) {
2340
- width: 13px;
2341
- height: 13px;
2340
+ width: var(--space-4);
2341
+ height: var(--space-4);
2342
2342
  }
2343
2343
  .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
2344
2344
  padding-left: var(--space-2);
@@ -2356,8 +2356,8 @@
2356
2356
  letter-spacing: var(--letter-spacing-2);
2357
2357
  }
2358
2358
  .rt-Button:where(.rt-r-size-2) :where(svg) {
2359
- width: 15px;
2360
- height: 15px;
2359
+ width: var(--space-4);
2360
+ height: var(--space-4);
2361
2361
  }
2362
2362
  .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
2363
2363
  padding-left: var(--space-3);
@@ -2375,8 +2375,8 @@
2375
2375
  letter-spacing: var(--letter-spacing-3);
2376
2376
  }
2377
2377
  .rt-Button:where(.rt-r-size-3) :where(svg) {
2378
- width: 17px;
2379
- height: 17px;
2378
+ width: var(--space-5);
2379
+ height: var(--space-5);
2380
2380
  }
2381
2381
  .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
2382
2382
  padding-left: var(--space-4);
@@ -2394,8 +2394,8 @@
2394
2394
  letter-spacing: var(--letter-spacing-4);
2395
2395
  }
2396
2396
  .rt-Button:where(.rt-r-size-4) :where(svg) {
2397
- width: 19px;
2398
- height: 19px;
2397
+ width: var(--space-5);
2398
+ height: var(--space-5);
2399
2399
  }
2400
2400
  .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
2401
2401
  padding-left: var(--space-5);
@@ -2414,8 +2414,8 @@
2414
2414
  letter-spacing: var(--letter-spacing-1);
2415
2415
  }
2416
2416
  .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
2417
- width: 13px;
2418
- height: 13px;
2417
+ width: var(--space-4);
2418
+ height: var(--space-4);
2419
2419
  }
2420
2420
  .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
2421
2421
  padding-left: var(--space-2);
@@ -2433,8 +2433,8 @@
2433
2433
  letter-spacing: var(--letter-spacing-2);
2434
2434
  }
2435
2435
  .rt-Button:where(.xs\:rt-r-size-2) :where(svg) {
2436
- width: 15px;
2437
- height: 15px;
2436
+ width: var(--space-4);
2437
+ height: var(--space-4);
2438
2438
  }
2439
2439
  .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
2440
2440
  padding-left: var(--space-3);
@@ -2452,8 +2452,8 @@
2452
2452
  letter-spacing: var(--letter-spacing-3);
2453
2453
  }
2454
2454
  .rt-Button:where(.xs\:rt-r-size-3) :where(svg) {
2455
- width: 17px;
2456
- height: 17px;
2455
+ width: var(--space-5);
2456
+ height: var(--space-5);
2457
2457
  }
2458
2458
  .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
2459
2459
  padding-left: var(--space-4);
@@ -2471,8 +2471,8 @@
2471
2471
  letter-spacing: var(--letter-spacing-4);
2472
2472
  }
2473
2473
  .rt-Button:where(.xs\:rt-r-size-4) :where(svg) {
2474
- width: 19px;
2475
- height: 19px;
2474
+ width: var(--space-5);
2475
+ height: var(--space-5);
2476
2476
  }
2477
2477
  .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
2478
2478
  padding-left: var(--space-5);
@@ -2492,8 +2492,8 @@
2492
2492
  letter-spacing: var(--letter-spacing-1);
2493
2493
  }
2494
2494
  .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
2495
- width: 13px;
2496
- height: 13px;
2495
+ width: var(--space-4);
2496
+ height: var(--space-4);
2497
2497
  }
2498
2498
  .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
2499
2499
  padding-left: var(--space-2);
@@ -2511,8 +2511,8 @@
2511
2511
  letter-spacing: var(--letter-spacing-2);
2512
2512
  }
2513
2513
  .rt-Button:where(.sm\:rt-r-size-2) :where(svg) {
2514
- width: 15px;
2515
- height: 15px;
2514
+ width: var(--space-4);
2515
+ height: var(--space-4);
2516
2516
  }
2517
2517
  .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
2518
2518
  padding-left: var(--space-3);
@@ -2530,8 +2530,8 @@
2530
2530
  letter-spacing: var(--letter-spacing-3);
2531
2531
  }
2532
2532
  .rt-Button:where(.sm\:rt-r-size-3) :where(svg) {
2533
- width: 17px;
2534
- height: 17px;
2533
+ width: var(--space-5);
2534
+ height: var(--space-5);
2535
2535
  }
2536
2536
  .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
2537
2537
  padding-left: var(--space-4);
@@ -2549,8 +2549,8 @@
2549
2549
  letter-spacing: var(--letter-spacing-4);
2550
2550
  }
2551
2551
  .rt-Button:where(.sm\:rt-r-size-4) :where(svg) {
2552
- width: 19px;
2553
- height: 19px;
2552
+ width: var(--space-5);
2553
+ height: var(--space-5);
2554
2554
  }
2555
2555
  .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
2556
2556
  padding-left: var(--space-5);
@@ -2570,8 +2570,8 @@
2570
2570
  letter-spacing: var(--letter-spacing-1);
2571
2571
  }
2572
2572
  .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
2573
- width: 13px;
2574
- height: 13px;
2573
+ width: var(--space-4);
2574
+ height: var(--space-4);
2575
2575
  }
2576
2576
  .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
2577
2577
  padding-left: var(--space-2);
@@ -2589,8 +2589,8 @@
2589
2589
  letter-spacing: var(--letter-spacing-2);
2590
2590
  }
2591
2591
  .rt-Button:where(.md\:rt-r-size-2) :where(svg) {
2592
- width: 15px;
2593
- height: 15px;
2592
+ width: var(--space-4);
2593
+ height: var(--space-4);
2594
2594
  }
2595
2595
  .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
2596
2596
  padding-left: var(--space-3);
@@ -2608,8 +2608,8 @@
2608
2608
  letter-spacing: var(--letter-spacing-3);
2609
2609
  }
2610
2610
  .rt-Button:where(.md\:rt-r-size-3) :where(svg) {
2611
- width: 17px;
2612
- height: 17px;
2611
+ width: var(--space-5);
2612
+ height: var(--space-5);
2613
2613
  }
2614
2614
  .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
2615
2615
  padding-left: var(--space-4);
@@ -2627,8 +2627,8 @@
2627
2627
  letter-spacing: var(--letter-spacing-4);
2628
2628
  }
2629
2629
  .rt-Button:where(.md\:rt-r-size-4) :where(svg) {
2630
- width: 19px;
2631
- height: 19px;
2630
+ width: var(--space-5);
2631
+ height: var(--space-5);
2632
2632
  }
2633
2633
  .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
2634
2634
  padding-left: var(--space-5);
@@ -2648,8 +2648,8 @@
2648
2648
  letter-spacing: var(--letter-spacing-1);
2649
2649
  }
2650
2650
  .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
2651
- width: 13px;
2652
- height: 13px;
2651
+ width: var(--space-4);
2652
+ height: var(--space-4);
2653
2653
  }
2654
2654
  .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
2655
2655
  padding-left: var(--space-2);
@@ -2667,8 +2667,8 @@
2667
2667
  letter-spacing: var(--letter-spacing-2);
2668
2668
  }
2669
2669
  .rt-Button:where(.lg\:rt-r-size-2) :where(svg) {
2670
- width: 15px;
2671
- height: 15px;
2670
+ width: var(--space-4);
2671
+ height: var(--space-4);
2672
2672
  }
2673
2673
  .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
2674
2674
  padding-left: var(--space-3);
@@ -2686,8 +2686,8 @@
2686
2686
  letter-spacing: var(--letter-spacing-3);
2687
2687
  }
2688
2688
  .rt-Button:where(.lg\:rt-r-size-3) :where(svg) {
2689
- width: 17px;
2690
- height: 17px;
2689
+ width: var(--space-5);
2690
+ height: var(--space-5);
2691
2691
  }
2692
2692
  .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
2693
2693
  padding-left: var(--space-4);
@@ -2705,8 +2705,8 @@
2705
2705
  letter-spacing: var(--letter-spacing-4);
2706
2706
  }
2707
2707
  .rt-Button:where(.lg\:rt-r-size-4) :where(svg) {
2708
- width: 19px;
2709
- height: 19px;
2708
+ width: var(--space-5);
2709
+ height: var(--space-5);
2710
2710
  }
2711
2711
  .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
2712
2712
  padding-left: var(--space-5);
@@ -2726,8 +2726,8 @@
2726
2726
  letter-spacing: var(--letter-spacing-1);
2727
2727
  }
2728
2728
  .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
2729
- width: 13px;
2730
- height: 13px;
2729
+ width: var(--space-4);
2730
+ height: var(--space-4);
2731
2731
  }
2732
2732
  .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
2733
2733
  padding-left: var(--space-2);
@@ -2745,8 +2745,8 @@
2745
2745
  letter-spacing: var(--letter-spacing-2);
2746
2746
  }
2747
2747
  .rt-Button:where(.xl\:rt-r-size-2) :where(svg) {
2748
- width: 15px;
2749
- height: 15px;
2748
+ width: var(--space-4);
2749
+ height: var(--space-4);
2750
2750
  }
2751
2751
  .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
2752
2752
  padding-left: var(--space-3);
@@ -2764,8 +2764,8 @@
2764
2764
  letter-spacing: var(--letter-spacing-3);
2765
2765
  }
2766
2766
  .rt-Button:where(.xl\:rt-r-size-3) :where(svg) {
2767
- width: 17px;
2768
- height: 17px;
2767
+ width: var(--space-5);
2768
+ height: var(--space-5);
2769
2769
  }
2770
2770
  .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
2771
2771
  padding-left: var(--space-4);
@@ -2783,8 +2783,8 @@
2783
2783
  letter-spacing: var(--letter-spacing-4);
2784
2784
  }
2785
2785
  .rt-Button:where(.xl\:rt-r-size-4) :where(svg) {
2786
- width: 19px;
2787
- height: 19px;
2786
+ width: var(--space-5);
2787
+ height: var(--space-5);
2788
2788
  }
2789
2789
  .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
2790
2790
  padding-left: var(--space-5);
@@ -4161,7 +4161,9 @@
4161
4161
  display: flex;
4162
4162
  align-items: center;
4163
4163
  gap: var(--space-2);
4164
- height: var(--base-menu-item-height);
4164
+ min-height: var(--base-menu-item-height);
4165
+ padding-top: var(--base-menu-item-padding-y);
4166
+ padding-bottom: var(--base-menu-item-padding-y);
4165
4167
  padding-left: var(--base-menu-item-padding-left);
4166
4168
  padding-right: var(--base-menu-item-padding-right);
4167
4169
  box-sizing: border-box;
@@ -4202,7 +4204,9 @@
4202
4204
  .rt-BaseMenuLabel {
4203
4205
  display: flex;
4204
4206
  align-items: center;
4205
- height: var(--base-menu-item-height);
4207
+ min-height: var(--base-menu-item-height);
4208
+ padding-top: var(--base-menu-item-padding-y);
4209
+ padding-bottom: var(--base-menu-item-padding-y);
4206
4210
  padding-left: var(--base-menu-item-padding-left);
4207
4211
  padding-right: var(--base-menu-item-padding-right);
4208
4212
  box-sizing: border-box;
@@ -4221,6 +4225,7 @@
4221
4225
  --base-menu-content-padding: var(--space-1);
4222
4226
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
4223
4227
  --base-menu-item-padding-right: var(--space-2);
4228
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
4224
4229
  --base-menu-item-height: var(--space-5);
4225
4230
  border-radius: var(--radius-3);
4226
4231
  }
@@ -4230,6 +4235,11 @@
4230
4235
  letter-spacing: var(--letter-spacing-1);
4231
4236
  border-radius: var(--radius-1);
4232
4237
  }
4238
+ .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
4239
+ width: var(--space-4);
4240
+ height: var(--space-4);
4241
+ flex-shrink: 0;
4242
+ }
4233
4243
  .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuLabel) {
4234
4244
  font-size: var(--font-size-1);
4235
4245
  line-height: var(--line-height-1);
@@ -4249,6 +4259,7 @@
4249
4259
  --base-menu-content-padding: var(--space-2);
4250
4260
  --base-menu-item-padding-left: var(--space-3);
4251
4261
  --base-menu-item-padding-right: var(--space-3);
4262
+ --base-menu-item-padding-y: var(--space-1);
4252
4263
  --base-menu-item-height: var(--space-6);
4253
4264
  border-radius: var(--radius-4);
4254
4265
  }
@@ -4258,6 +4269,11 @@
4258
4269
  letter-spacing: var(--letter-spacing-2);
4259
4270
  border-radius: var(--radius-2);
4260
4271
  }
4272
+ .rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
4273
+ width: var(--space-4);
4274
+ height: var(--space-4);
4275
+ flex-shrink: 0;
4276
+ }
4261
4277
  .rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuLabel) {
4262
4278
  font-size: var(--font-size-2);
4263
4279
  line-height: var(--line-height-2);
@@ -4278,6 +4294,7 @@
4278
4294
  --base-menu-content-padding: var(--space-1);
4279
4295
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
4280
4296
  --base-menu-item-padding-right: var(--space-2);
4297
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
4281
4298
  --base-menu-item-height: var(--space-5);
4282
4299
  border-radius: var(--radius-3);
4283
4300
  }
@@ -4287,6 +4304,11 @@
4287
4304
  letter-spacing: var(--letter-spacing-1);
4288
4305
  border-radius: var(--radius-1);
4289
4306
  }
4307
+ .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
4308
+ width: var(--space-4);
4309
+ height: var(--space-4);
4310
+ flex-shrink: 0;
4311
+ }
4290
4312
  .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
4291
4313
  font-size: var(--font-size-1);
4292
4314
  line-height: var(--line-height-1);
@@ -4306,6 +4328,7 @@
4306
4328
  --base-menu-content-padding: var(--space-2);
4307
4329
  --base-menu-item-padding-left: var(--space-3);
4308
4330
  --base-menu-item-padding-right: var(--space-3);
4331
+ --base-menu-item-padding-y: var(--space-1);
4309
4332
  --base-menu-item-height: var(--space-6);
4310
4333
  border-radius: var(--radius-4);
4311
4334
  }
@@ -4315,6 +4338,11 @@
4315
4338
  letter-spacing: var(--letter-spacing-2);
4316
4339
  border-radius: var(--radius-2);
4317
4340
  }
4341
+ .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
4342
+ width: var(--space-4);
4343
+ height: var(--space-4);
4344
+ flex-shrink: 0;
4345
+ }
4318
4346
  .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
4319
4347
  font-size: var(--font-size-2);
4320
4348
  line-height: var(--line-height-2);
@@ -4336,6 +4364,7 @@
4336
4364
  --base-menu-content-padding: var(--space-1);
4337
4365
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
4338
4366
  --base-menu-item-padding-right: var(--space-2);
4367
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
4339
4368
  --base-menu-item-height: var(--space-5);
4340
4369
  border-radius: var(--radius-3);
4341
4370
  }
@@ -4345,6 +4374,11 @@
4345
4374
  letter-spacing: var(--letter-spacing-1);
4346
4375
  border-radius: var(--radius-1);
4347
4376
  }
4377
+ .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
4378
+ width: var(--space-4);
4379
+ height: var(--space-4);
4380
+ flex-shrink: 0;
4381
+ }
4348
4382
  .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
4349
4383
  font-size: var(--font-size-1);
4350
4384
  line-height: var(--line-height-1);
@@ -4364,6 +4398,7 @@
4364
4398
  --base-menu-content-padding: var(--space-2);
4365
4399
  --base-menu-item-padding-left: var(--space-3);
4366
4400
  --base-menu-item-padding-right: var(--space-3);
4401
+ --base-menu-item-padding-y: var(--space-1);
4367
4402
  --base-menu-item-height: var(--space-6);
4368
4403
  border-radius: var(--radius-4);
4369
4404
  }
@@ -4373,6 +4408,11 @@
4373
4408
  letter-spacing: var(--letter-spacing-2);
4374
4409
  border-radius: var(--radius-2);
4375
4410
  }
4411
+ .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
4412
+ width: var(--space-4);
4413
+ height: var(--space-4);
4414
+ flex-shrink: 0;
4415
+ }
4376
4416
  .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
4377
4417
  font-size: var(--font-size-2);
4378
4418
  line-height: var(--line-height-2);
@@ -4394,6 +4434,7 @@
4394
4434
  --base-menu-content-padding: var(--space-1);
4395
4435
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
4396
4436
  --base-menu-item-padding-right: var(--space-2);
4437
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
4397
4438
  --base-menu-item-height: var(--space-5);
4398
4439
  border-radius: var(--radius-3);
4399
4440
  }
@@ -4403,6 +4444,11 @@
4403
4444
  letter-spacing: var(--letter-spacing-1);
4404
4445
  border-radius: var(--radius-1);
4405
4446
  }
4447
+ .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
4448
+ width: var(--space-4);
4449
+ height: var(--space-4);
4450
+ flex-shrink: 0;
4451
+ }
4406
4452
  .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
4407
4453
  font-size: var(--font-size-1);
4408
4454
  line-height: var(--line-height-1);
@@ -4422,6 +4468,7 @@
4422
4468
  --base-menu-content-padding: var(--space-2);
4423
4469
  --base-menu-item-padding-left: var(--space-3);
4424
4470
  --base-menu-item-padding-right: var(--space-3);
4471
+ --base-menu-item-padding-y: var(--space-1);
4425
4472
  --base-menu-item-height: var(--space-6);
4426
4473
  border-radius: var(--radius-4);
4427
4474
  }
@@ -4431,6 +4478,11 @@
4431
4478
  letter-spacing: var(--letter-spacing-2);
4432
4479
  border-radius: var(--radius-2);
4433
4480
  }
4481
+ .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
4482
+ width: var(--space-4);
4483
+ height: var(--space-4);
4484
+ flex-shrink: 0;
4485
+ }
4434
4486
  .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
4435
4487
  font-size: var(--font-size-2);
4436
4488
  line-height: var(--line-height-2);
@@ -4452,6 +4504,7 @@
4452
4504
  --base-menu-content-padding: var(--space-1);
4453
4505
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
4454
4506
  --base-menu-item-padding-right: var(--space-2);
4507
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
4455
4508
  --base-menu-item-height: var(--space-5);
4456
4509
  border-radius: var(--radius-3);
4457
4510
  }
@@ -4461,6 +4514,11 @@
4461
4514
  letter-spacing: var(--letter-spacing-1);
4462
4515
  border-radius: var(--radius-1);
4463
4516
  }
4517
+ .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
4518
+ width: var(--space-4);
4519
+ height: var(--space-4);
4520
+ flex-shrink: 0;
4521
+ }
4464
4522
  .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
4465
4523
  font-size: var(--font-size-1);
4466
4524
  line-height: var(--line-height-1);
@@ -4480,6 +4538,7 @@
4480
4538
  --base-menu-content-padding: var(--space-2);
4481
4539
  --base-menu-item-padding-left: var(--space-3);
4482
4540
  --base-menu-item-padding-right: var(--space-3);
4541
+ --base-menu-item-padding-y: var(--space-1);
4483
4542
  --base-menu-item-height: var(--space-6);
4484
4543
  border-radius: var(--radius-4);
4485
4544
  }
@@ -4489,6 +4548,11 @@
4489
4548
  letter-spacing: var(--letter-spacing-2);
4490
4549
  border-radius: var(--radius-2);
4491
4550
  }
4551
+ .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
4552
+ width: var(--space-4);
4553
+ height: var(--space-4);
4554
+ flex-shrink: 0;
4555
+ }
4492
4556
  .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
4493
4557
  font-size: var(--font-size-2);
4494
4558
  line-height: var(--line-height-2);
@@ -4510,6 +4574,7 @@
4510
4574
  --base-menu-content-padding: var(--space-1);
4511
4575
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
4512
4576
  --base-menu-item-padding-right: var(--space-2);
4577
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
4513
4578
  --base-menu-item-height: var(--space-5);
4514
4579
  border-radius: var(--radius-3);
4515
4580
  }
@@ -4519,6 +4584,11 @@
4519
4584
  letter-spacing: var(--letter-spacing-1);
4520
4585
  border-radius: var(--radius-1);
4521
4586
  }
4587
+ .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
4588
+ width: var(--space-4);
4589
+ height: var(--space-4);
4590
+ flex-shrink: 0;
4591
+ }
4522
4592
  .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
4523
4593
  font-size: var(--font-size-1);
4524
4594
  line-height: var(--line-height-1);
@@ -4538,6 +4608,7 @@
4538
4608
  --base-menu-content-padding: var(--space-2);
4539
4609
  --base-menu-item-padding-left: var(--space-3);
4540
4610
  --base-menu-item-padding-right: var(--space-3);
4611
+ --base-menu-item-padding-y: var(--space-1);
4541
4612
  --base-menu-item-height: var(--space-6);
4542
4613
  border-radius: var(--radius-4);
4543
4614
  }
@@ -4547,6 +4618,11 @@
4547
4618
  letter-spacing: var(--letter-spacing-2);
4548
4619
  border-radius: var(--radius-2);
4549
4620
  }
4621
+ .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
4622
+ width: var(--space-4);
4623
+ height: var(--space-4);
4624
+ flex-shrink: 0;
4625
+ }
4550
4626
  .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
4551
4627
  font-size: var(--font-size-2);
4552
4628
  line-height: var(--line-height-2);
@@ -4570,6 +4646,9 @@
4570
4646
  color: var(--gray-a8);
4571
4647
  cursor: default;
4572
4648
  }
4649
+ .rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
4650
+ color: var(--gray-a10);
4651
+ }
4573
4652
  .rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut) {
4574
4653
  color: inherit;
4575
4654
  }
@@ -4583,6 +4662,12 @@
4583
4662
  .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
4584
4663
  color: var(--accent-contrast);
4585
4664
  }
4665
+ .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
4666
+ color: inherit !important;
4667
+ }
4668
+ .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
4669
+ color: inherit !important;
4670
+ }
4586
4671
  .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) {
4587
4672
  background-color: var(--accent-12);
4588
4673
  color: var(--accent-1);
@@ -4590,16 +4675,31 @@
4590
4675
  .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
4591
4676
  color: var(--accent-1);
4592
4677
  }
4678
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
4679
+ color: inherit !important;
4680
+ }
4681
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
4682
+ color: inherit !important;
4683
+ }
4593
4684
  .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) {
4594
4685
  background-color: var(--accent-9);
4595
4686
  color: var(--accent-contrast);
4596
4687
  }
4688
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where(.rt-Text) {
4689
+ color: inherit !important;
4690
+ }
4691
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']) {
4692
+ color: inherit !important;
4693
+ }
4597
4694
  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
4598
4695
  background-color: var(--accent-a3);
4599
4696
  }
4600
4697
  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) {
4601
4698
  background-color: var(--accent-a4);
4602
4699
  }
4700
+ .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
4701
+ color: var(--gray-11) !important;
4702
+ }
4603
4703
  .rt-ContextMenuContent {
4604
4704
  max-height: var(--radix-context-menu-content-available-height);
4605
4705
  transform-origin: var(--radix-context-menu-content-transform-origin);
@@ -5794,20 +5894,20 @@
5794
5894
  width: var(--base-button-height);
5795
5895
  }
5796
5896
  .rt-IconButton:where(.rt-r-size-1) :where(svg) {
5797
- width: 13px;
5798
- height: 13px;
5897
+ width: var(--space-4);
5898
+ height: var(--space-4);
5799
5899
  }
5800
5900
  .rt-IconButton:where(.rt-r-size-2) :where(svg) {
5801
- width: 15px;
5802
- height: 15px;
5901
+ width: var(--space-4);
5902
+ height: var(--space-4);
5803
5903
  }
5804
5904
  .rt-IconButton:where(.rt-r-size-3) :where(svg) {
5805
- width: 17px;
5806
- height: 17px;
5905
+ width: var(--space-5);
5906
+ height: var(--space-5);
5807
5907
  }
5808
5908
  .rt-IconButton:where(.rt-r-size-4) :where(svg) {
5809
- width: 19px;
5810
- height: 19px;
5909
+ width: var(--space-5);
5910
+ height: var(--space-5);
5811
5911
  }
5812
5912
  .rt-IconButton:where(.rt-variant-ghost):where(.rt-r-size-1) {
5813
5913
  --icon-button-ghost-padding: var(--space-1);
@@ -5823,20 +5923,20 @@
5823
5923
  }
5824
5924
  @media (min-width: 520px) {
5825
5925
  .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
5826
- width: 13px;
5827
- height: 13px;
5926
+ width: var(--space-4);
5927
+ height: var(--space-4);
5828
5928
  }
5829
5929
  .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
5830
- width: 15px;
5831
- height: 15px;
5930
+ width: var(--space-4);
5931
+ height: var(--space-4);
5832
5932
  }
5833
5933
  .rt-IconButton:where(.xs\:rt-r-size-3) :where(svg) {
5834
- width: 17px;
5835
- height: 17px;
5934
+ width: var(--space-5);
5935
+ height: var(--space-5);
5836
5936
  }
5837
5937
  .rt-IconButton:where(.xs\:rt-r-size-4) :where(svg) {
5838
- width: 19px;
5839
- height: 19px;
5938
+ width: var(--space-5);
5939
+ height: var(--space-5);
5840
5940
  }
5841
5941
  .rt-IconButton:where(.rt-variant-ghost):where(.xs\:rt-r-size-1) {
5842
5942
  --icon-button-ghost-padding: var(--space-1);
@@ -5853,20 +5953,20 @@
5853
5953
  }
5854
5954
  @media (min-width: 768px) {
5855
5955
  .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
5856
- width: 13px;
5857
- height: 13px;
5956
+ width: var(--space-4);
5957
+ height: var(--space-4);
5858
5958
  }
5859
5959
  .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
5860
- width: 15px;
5861
- height: 15px;
5960
+ width: var(--space-4);
5961
+ height: var(--space-4);
5862
5962
  }
5863
5963
  .rt-IconButton:where(.sm\:rt-r-size-3) :where(svg) {
5864
- width: 17px;
5865
- height: 17px;
5964
+ width: var(--space-5);
5965
+ height: var(--space-5);
5866
5966
  }
5867
5967
  .rt-IconButton:where(.sm\:rt-r-size-4) :where(svg) {
5868
- width: 19px;
5869
- height: 19px;
5968
+ width: var(--space-5);
5969
+ height: var(--space-5);
5870
5970
  }
5871
5971
  .rt-IconButton:where(.rt-variant-ghost):where(.sm\:rt-r-size-1) {
5872
5972
  --icon-button-ghost-padding: var(--space-1);
@@ -5883,20 +5983,20 @@
5883
5983
  }
5884
5984
  @media (min-width: 1024px) {
5885
5985
  .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
5886
- width: 13px;
5887
- height: 13px;
5986
+ width: var(--space-4);
5987
+ height: var(--space-4);
5888
5988
  }
5889
5989
  .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
5890
- width: 15px;
5891
- height: 15px;
5990
+ width: var(--space-4);
5991
+ height: var(--space-4);
5892
5992
  }
5893
5993
  .rt-IconButton:where(.md\:rt-r-size-3) :where(svg) {
5894
- width: 17px;
5895
- height: 17px;
5994
+ width: var(--space-5);
5995
+ height: var(--space-5);
5896
5996
  }
5897
5997
  .rt-IconButton:where(.md\:rt-r-size-4) :where(svg) {
5898
- width: 19px;
5899
- height: 19px;
5998
+ width: var(--space-5);
5999
+ height: var(--space-5);
5900
6000
  }
5901
6001
  .rt-IconButton:where(.rt-variant-ghost):where(.md\:rt-r-size-1) {
5902
6002
  --icon-button-ghost-padding: var(--space-1);
@@ -5913,20 +6013,20 @@
5913
6013
  }
5914
6014
  @media (min-width: 1280px) {
5915
6015
  .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
5916
- width: 13px;
5917
- height: 13px;
6016
+ width: var(--space-4);
6017
+ height: var(--space-4);
5918
6018
  }
5919
6019
  .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
5920
- width: 15px;
5921
- height: 15px;
6020
+ width: var(--space-4);
6021
+ height: var(--space-4);
5922
6022
  }
5923
6023
  .rt-IconButton:where(.lg\:rt-r-size-3) :where(svg) {
5924
- width: 17px;
5925
- height: 17px;
6024
+ width: var(--space-5);
6025
+ height: var(--space-5);
5926
6026
  }
5927
6027
  .rt-IconButton:where(.lg\:rt-r-size-4) :where(svg) {
5928
- width: 19px;
5929
- height: 19px;
6028
+ width: var(--space-5);
6029
+ height: var(--space-5);
5930
6030
  }
5931
6031
  .rt-IconButton:where(.rt-variant-ghost):where(.lg\:rt-r-size-1) {
5932
6032
  --icon-button-ghost-padding: var(--space-1);
@@ -5943,20 +6043,20 @@
5943
6043
  }
5944
6044
  @media (min-width: 1640px) {
5945
6045
  .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
5946
- width: 13px;
5947
- height: 13px;
6046
+ width: var(--space-4);
6047
+ height: var(--space-4);
5948
6048
  }
5949
6049
  .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
5950
- width: 15px;
5951
- height: 15px;
6050
+ width: var(--space-4);
6051
+ height: var(--space-4);
5952
6052
  }
5953
6053
  .rt-IconButton:where(.xl\:rt-r-size-3) :where(svg) {
5954
- width: 17px;
5955
- height: 17px;
6054
+ width: var(--space-5);
6055
+ height: var(--space-5);
5956
6056
  }
5957
6057
  .rt-IconButton:where(.xl\:rt-r-size-4) :where(svg) {
5958
- width: 19px;
5959
- height: 19px;
6058
+ width: var(--space-5);
6059
+ height: var(--space-5);
5960
6060
  }
5961
6061
  .rt-IconButton:where(.rt-variant-ghost):where(.xl\:rt-r-size-1) {
5962
6062
  --icon-button-ghost-padding: var(--space-1);