@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/styles.css CHANGED
@@ -7074,8 +7074,8 @@
7074
7074
  letter-spacing: var(--letter-spacing-1);
7075
7075
  }
7076
7076
  .rt-Button:where(.rt-r-size-1) :where(svg) {
7077
- width: 13px;
7078
- height: 13px;
7077
+ width: var(--space-4);
7078
+ height: var(--space-4);
7079
7079
  }
7080
7080
  .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
7081
7081
  padding-left: var(--space-2);
@@ -7093,8 +7093,8 @@
7093
7093
  letter-spacing: var(--letter-spacing-2);
7094
7094
  }
7095
7095
  .rt-Button:where(.rt-r-size-2) :where(svg) {
7096
- width: 15px;
7097
- height: 15px;
7096
+ width: var(--space-4);
7097
+ height: var(--space-4);
7098
7098
  }
7099
7099
  .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
7100
7100
  padding-left: var(--space-3);
@@ -7112,8 +7112,8 @@
7112
7112
  letter-spacing: var(--letter-spacing-3);
7113
7113
  }
7114
7114
  .rt-Button:where(.rt-r-size-3) :where(svg) {
7115
- width: 17px;
7116
- height: 17px;
7115
+ width: var(--space-5);
7116
+ height: var(--space-5);
7117
7117
  }
7118
7118
  .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
7119
7119
  padding-left: var(--space-4);
@@ -7131,8 +7131,8 @@
7131
7131
  letter-spacing: var(--letter-spacing-4);
7132
7132
  }
7133
7133
  .rt-Button:where(.rt-r-size-4) :where(svg) {
7134
- width: 19px;
7135
- height: 19px;
7134
+ width: var(--space-5);
7135
+ height: var(--space-5);
7136
7136
  }
7137
7137
  .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
7138
7138
  padding-left: var(--space-5);
@@ -7151,8 +7151,8 @@
7151
7151
  letter-spacing: var(--letter-spacing-1);
7152
7152
  }
7153
7153
  .rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
7154
- width: 13px;
7155
- height: 13px;
7154
+ width: var(--space-4);
7155
+ height: var(--space-4);
7156
7156
  }
7157
7157
  .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7158
7158
  padding-left: var(--space-2);
@@ -7170,8 +7170,8 @@
7170
7170
  letter-spacing: var(--letter-spacing-2);
7171
7171
  }
7172
7172
  .rt-Button:where(.xs\:rt-r-size-2) :where(svg) {
7173
- width: 15px;
7174
- height: 15px;
7173
+ width: var(--space-4);
7174
+ height: var(--space-4);
7175
7175
  }
7176
7176
  .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
7177
7177
  padding-left: var(--space-3);
@@ -7189,8 +7189,8 @@
7189
7189
  letter-spacing: var(--letter-spacing-3);
7190
7190
  }
7191
7191
  .rt-Button:where(.xs\:rt-r-size-3) :where(svg) {
7192
- width: 17px;
7193
- height: 17px;
7192
+ width: var(--space-5);
7193
+ height: var(--space-5);
7194
7194
  }
7195
7195
  .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
7196
7196
  padding-left: var(--space-4);
@@ -7208,8 +7208,8 @@
7208
7208
  letter-spacing: var(--letter-spacing-4);
7209
7209
  }
7210
7210
  .rt-Button:where(.xs\:rt-r-size-4) :where(svg) {
7211
- width: 19px;
7212
- height: 19px;
7211
+ width: var(--space-5);
7212
+ height: var(--space-5);
7213
7213
  }
7214
7214
  .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
7215
7215
  padding-left: var(--space-5);
@@ -7229,8 +7229,8 @@
7229
7229
  letter-spacing: var(--letter-spacing-1);
7230
7230
  }
7231
7231
  .rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
7232
- width: 13px;
7233
- height: 13px;
7232
+ width: var(--space-4);
7233
+ height: var(--space-4);
7234
7234
  }
7235
7235
  .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7236
7236
  padding-left: var(--space-2);
@@ -7248,8 +7248,8 @@
7248
7248
  letter-spacing: var(--letter-spacing-2);
7249
7249
  }
7250
7250
  .rt-Button:where(.sm\:rt-r-size-2) :where(svg) {
7251
- width: 15px;
7252
- height: 15px;
7251
+ width: var(--space-4);
7252
+ height: var(--space-4);
7253
7253
  }
7254
7254
  .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
7255
7255
  padding-left: var(--space-3);
@@ -7267,8 +7267,8 @@
7267
7267
  letter-spacing: var(--letter-spacing-3);
7268
7268
  }
7269
7269
  .rt-Button:where(.sm\:rt-r-size-3) :where(svg) {
7270
- width: 17px;
7271
- height: 17px;
7270
+ width: var(--space-5);
7271
+ height: var(--space-5);
7272
7272
  }
7273
7273
  .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
7274
7274
  padding-left: var(--space-4);
@@ -7286,8 +7286,8 @@
7286
7286
  letter-spacing: var(--letter-spacing-4);
7287
7287
  }
7288
7288
  .rt-Button:where(.sm\:rt-r-size-4) :where(svg) {
7289
- width: 19px;
7290
- height: 19px;
7289
+ width: var(--space-5);
7290
+ height: var(--space-5);
7291
7291
  }
7292
7292
  .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
7293
7293
  padding-left: var(--space-5);
@@ -7307,8 +7307,8 @@
7307
7307
  letter-spacing: var(--letter-spacing-1);
7308
7308
  }
7309
7309
  .rt-Button:where(.md\:rt-r-size-1) :where(svg) {
7310
- width: 13px;
7311
- height: 13px;
7310
+ width: var(--space-4);
7311
+ height: var(--space-4);
7312
7312
  }
7313
7313
  .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7314
7314
  padding-left: var(--space-2);
@@ -7326,8 +7326,8 @@
7326
7326
  letter-spacing: var(--letter-spacing-2);
7327
7327
  }
7328
7328
  .rt-Button:where(.md\:rt-r-size-2) :where(svg) {
7329
- width: 15px;
7330
- height: 15px;
7329
+ width: var(--space-4);
7330
+ height: var(--space-4);
7331
7331
  }
7332
7332
  .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
7333
7333
  padding-left: var(--space-3);
@@ -7345,8 +7345,8 @@
7345
7345
  letter-spacing: var(--letter-spacing-3);
7346
7346
  }
7347
7347
  .rt-Button:where(.md\:rt-r-size-3) :where(svg) {
7348
- width: 17px;
7349
- height: 17px;
7348
+ width: var(--space-5);
7349
+ height: var(--space-5);
7350
7350
  }
7351
7351
  .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
7352
7352
  padding-left: var(--space-4);
@@ -7364,8 +7364,8 @@
7364
7364
  letter-spacing: var(--letter-spacing-4);
7365
7365
  }
7366
7366
  .rt-Button:where(.md\:rt-r-size-4) :where(svg) {
7367
- width: 19px;
7368
- height: 19px;
7367
+ width: var(--space-5);
7368
+ height: var(--space-5);
7369
7369
  }
7370
7370
  .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
7371
7371
  padding-left: var(--space-5);
@@ -7385,8 +7385,8 @@
7385
7385
  letter-spacing: var(--letter-spacing-1);
7386
7386
  }
7387
7387
  .rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
7388
- width: 13px;
7389
- height: 13px;
7388
+ width: var(--space-4);
7389
+ height: var(--space-4);
7390
7390
  }
7391
7391
  .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7392
7392
  padding-left: var(--space-2);
@@ -7404,8 +7404,8 @@
7404
7404
  letter-spacing: var(--letter-spacing-2);
7405
7405
  }
7406
7406
  .rt-Button:where(.lg\:rt-r-size-2) :where(svg) {
7407
- width: 15px;
7408
- height: 15px;
7407
+ width: var(--space-4);
7408
+ height: var(--space-4);
7409
7409
  }
7410
7410
  .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
7411
7411
  padding-left: var(--space-3);
@@ -7423,8 +7423,8 @@
7423
7423
  letter-spacing: var(--letter-spacing-3);
7424
7424
  }
7425
7425
  .rt-Button:where(.lg\:rt-r-size-3) :where(svg) {
7426
- width: 17px;
7427
- height: 17px;
7426
+ width: var(--space-5);
7427
+ height: var(--space-5);
7428
7428
  }
7429
7429
  .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
7430
7430
  padding-left: var(--space-4);
@@ -7442,8 +7442,8 @@
7442
7442
  letter-spacing: var(--letter-spacing-4);
7443
7443
  }
7444
7444
  .rt-Button:where(.lg\:rt-r-size-4) :where(svg) {
7445
- width: 19px;
7446
- height: 19px;
7445
+ width: var(--space-5);
7446
+ height: var(--space-5);
7447
7447
  }
7448
7448
  .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
7449
7449
  padding-left: var(--space-5);
@@ -7463,8 +7463,8 @@
7463
7463
  letter-spacing: var(--letter-spacing-1);
7464
7464
  }
7465
7465
  .rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
7466
- width: 13px;
7467
- height: 13px;
7466
+ width: var(--space-4);
7467
+ height: var(--space-4);
7468
7468
  }
7469
7469
  .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
7470
7470
  padding-left: var(--space-2);
@@ -7482,8 +7482,8 @@
7482
7482
  letter-spacing: var(--letter-spacing-2);
7483
7483
  }
7484
7484
  .rt-Button:where(.xl\:rt-r-size-2) :where(svg) {
7485
- width: 15px;
7486
- height: 15px;
7485
+ width: var(--space-4);
7486
+ height: var(--space-4);
7487
7487
  }
7488
7488
  .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
7489
7489
  padding-left: var(--space-3);
@@ -7501,8 +7501,8 @@
7501
7501
  letter-spacing: var(--letter-spacing-3);
7502
7502
  }
7503
7503
  .rt-Button:where(.xl\:rt-r-size-3) :where(svg) {
7504
- width: 17px;
7505
- height: 17px;
7504
+ width: var(--space-5);
7505
+ height: var(--space-5);
7506
7506
  }
7507
7507
  .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
7508
7508
  padding-left: var(--space-4);
@@ -7520,8 +7520,8 @@
7520
7520
  letter-spacing: var(--letter-spacing-4);
7521
7521
  }
7522
7522
  .rt-Button:where(.xl\:rt-r-size-4) :where(svg) {
7523
- width: 19px;
7524
- height: 19px;
7523
+ width: var(--space-5);
7524
+ height: var(--space-5);
7525
7525
  }
7526
7526
  .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
7527
7527
  padding-left: var(--space-5);
@@ -8888,7 +8888,9 @@
8888
8888
  display: flex;
8889
8889
  align-items: center;
8890
8890
  gap: var(--space-2);
8891
- height: var(--base-menu-item-height);
8891
+ min-height: var(--base-menu-item-height);
8892
+ padding-top: var(--base-menu-item-padding-y);
8893
+ padding-bottom: var(--base-menu-item-padding-y);
8892
8894
  padding-left: var(--base-menu-item-padding-left);
8893
8895
  padding-right: var(--base-menu-item-padding-right);
8894
8896
  box-sizing: border-box;
@@ -8929,7 +8931,9 @@
8929
8931
  .rt-BaseMenuLabel {
8930
8932
  display: flex;
8931
8933
  align-items: center;
8932
- height: var(--base-menu-item-height);
8934
+ min-height: var(--base-menu-item-height);
8935
+ padding-top: var(--base-menu-item-padding-y);
8936
+ padding-bottom: var(--base-menu-item-padding-y);
8933
8937
  padding-left: var(--base-menu-item-padding-left);
8934
8938
  padding-right: var(--base-menu-item-padding-right);
8935
8939
  box-sizing: border-box;
@@ -8948,6 +8952,7 @@
8948
8952
  --base-menu-content-padding: var(--space-1);
8949
8953
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
8950
8954
  --base-menu-item-padding-right: var(--space-2);
8955
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
8951
8956
  --base-menu-item-height: var(--space-5);
8952
8957
  border-radius: var(--radius-3);
8953
8958
  }
@@ -8957,6 +8962,11 @@
8957
8962
  letter-spacing: var(--letter-spacing-1);
8958
8963
  border-radius: var(--radius-1);
8959
8964
  }
8965
+ .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
8966
+ width: var(--space-4);
8967
+ height: var(--space-4);
8968
+ flex-shrink: 0;
8969
+ }
8960
8970
  .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuLabel) {
8961
8971
  font-size: var(--font-size-1);
8962
8972
  line-height: var(--line-height-1);
@@ -8976,6 +8986,7 @@
8976
8986
  --base-menu-content-padding: var(--space-2);
8977
8987
  --base-menu-item-padding-left: var(--space-3);
8978
8988
  --base-menu-item-padding-right: var(--space-3);
8989
+ --base-menu-item-padding-y: var(--space-1);
8979
8990
  --base-menu-item-height: var(--space-6);
8980
8991
  border-radius: var(--radius-4);
8981
8992
  }
@@ -8985,6 +8996,11 @@
8985
8996
  letter-spacing: var(--letter-spacing-2);
8986
8997
  border-radius: var(--radius-2);
8987
8998
  }
8999
+ .rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
9000
+ width: var(--space-4);
9001
+ height: var(--space-4);
9002
+ flex-shrink: 0;
9003
+ }
8988
9004
  .rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuLabel) {
8989
9005
  font-size: var(--font-size-2);
8990
9006
  line-height: var(--line-height-2);
@@ -9005,6 +9021,7 @@
9005
9021
  --base-menu-content-padding: var(--space-1);
9006
9022
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
9007
9023
  --base-menu-item-padding-right: var(--space-2);
9024
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
9008
9025
  --base-menu-item-height: var(--space-5);
9009
9026
  border-radius: var(--radius-3);
9010
9027
  }
@@ -9014,6 +9031,11 @@
9014
9031
  letter-spacing: var(--letter-spacing-1);
9015
9032
  border-radius: var(--radius-1);
9016
9033
  }
9034
+ .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9035
+ width: var(--space-4);
9036
+ height: var(--space-4);
9037
+ flex-shrink: 0;
9038
+ }
9017
9039
  .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
9018
9040
  font-size: var(--font-size-1);
9019
9041
  line-height: var(--line-height-1);
@@ -9033,6 +9055,7 @@
9033
9055
  --base-menu-content-padding: var(--space-2);
9034
9056
  --base-menu-item-padding-left: var(--space-3);
9035
9057
  --base-menu-item-padding-right: var(--space-3);
9058
+ --base-menu-item-padding-y: var(--space-1);
9036
9059
  --base-menu-item-height: var(--space-6);
9037
9060
  border-radius: var(--radius-4);
9038
9061
  }
@@ -9042,6 +9065,11 @@
9042
9065
  letter-spacing: var(--letter-spacing-2);
9043
9066
  border-radius: var(--radius-2);
9044
9067
  }
9068
+ .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
9069
+ width: var(--space-4);
9070
+ height: var(--space-4);
9071
+ flex-shrink: 0;
9072
+ }
9045
9073
  .rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
9046
9074
  font-size: var(--font-size-2);
9047
9075
  line-height: var(--line-height-2);
@@ -9063,6 +9091,7 @@
9063
9091
  --base-menu-content-padding: var(--space-1);
9064
9092
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
9065
9093
  --base-menu-item-padding-right: var(--space-2);
9094
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
9066
9095
  --base-menu-item-height: var(--space-5);
9067
9096
  border-radius: var(--radius-3);
9068
9097
  }
@@ -9072,6 +9101,11 @@
9072
9101
  letter-spacing: var(--letter-spacing-1);
9073
9102
  border-radius: var(--radius-1);
9074
9103
  }
9104
+ .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9105
+ width: var(--space-4);
9106
+ height: var(--space-4);
9107
+ flex-shrink: 0;
9108
+ }
9075
9109
  .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
9076
9110
  font-size: var(--font-size-1);
9077
9111
  line-height: var(--line-height-1);
@@ -9091,6 +9125,7 @@
9091
9125
  --base-menu-content-padding: var(--space-2);
9092
9126
  --base-menu-item-padding-left: var(--space-3);
9093
9127
  --base-menu-item-padding-right: var(--space-3);
9128
+ --base-menu-item-padding-y: var(--space-1);
9094
9129
  --base-menu-item-height: var(--space-6);
9095
9130
  border-radius: var(--radius-4);
9096
9131
  }
@@ -9100,6 +9135,11 @@
9100
9135
  letter-spacing: var(--letter-spacing-2);
9101
9136
  border-radius: var(--radius-2);
9102
9137
  }
9138
+ .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
9139
+ width: var(--space-4);
9140
+ height: var(--space-4);
9141
+ flex-shrink: 0;
9142
+ }
9103
9143
  .rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
9104
9144
  font-size: var(--font-size-2);
9105
9145
  line-height: var(--line-height-2);
@@ -9121,6 +9161,7 @@
9121
9161
  --base-menu-content-padding: var(--space-1);
9122
9162
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
9123
9163
  --base-menu-item-padding-right: var(--space-2);
9164
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
9124
9165
  --base-menu-item-height: var(--space-5);
9125
9166
  border-radius: var(--radius-3);
9126
9167
  }
@@ -9130,6 +9171,11 @@
9130
9171
  letter-spacing: var(--letter-spacing-1);
9131
9172
  border-radius: var(--radius-1);
9132
9173
  }
9174
+ .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9175
+ width: var(--space-4);
9176
+ height: var(--space-4);
9177
+ flex-shrink: 0;
9178
+ }
9133
9179
  .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
9134
9180
  font-size: var(--font-size-1);
9135
9181
  line-height: var(--line-height-1);
@@ -9149,6 +9195,7 @@
9149
9195
  --base-menu-content-padding: var(--space-2);
9150
9196
  --base-menu-item-padding-left: var(--space-3);
9151
9197
  --base-menu-item-padding-right: var(--space-3);
9198
+ --base-menu-item-padding-y: var(--space-1);
9152
9199
  --base-menu-item-height: var(--space-6);
9153
9200
  border-radius: var(--radius-4);
9154
9201
  }
@@ -9158,6 +9205,11 @@
9158
9205
  letter-spacing: var(--letter-spacing-2);
9159
9206
  border-radius: var(--radius-2);
9160
9207
  }
9208
+ .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
9209
+ width: var(--space-4);
9210
+ height: var(--space-4);
9211
+ flex-shrink: 0;
9212
+ }
9161
9213
  .rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
9162
9214
  font-size: var(--font-size-2);
9163
9215
  line-height: var(--line-height-2);
@@ -9179,6 +9231,7 @@
9179
9231
  --base-menu-content-padding: var(--space-1);
9180
9232
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
9181
9233
  --base-menu-item-padding-right: var(--space-2);
9234
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
9182
9235
  --base-menu-item-height: var(--space-5);
9183
9236
  border-radius: var(--radius-3);
9184
9237
  }
@@ -9188,6 +9241,11 @@
9188
9241
  letter-spacing: var(--letter-spacing-1);
9189
9242
  border-radius: var(--radius-1);
9190
9243
  }
9244
+ .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9245
+ width: var(--space-4);
9246
+ height: var(--space-4);
9247
+ flex-shrink: 0;
9248
+ }
9191
9249
  .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
9192
9250
  font-size: var(--font-size-1);
9193
9251
  line-height: var(--line-height-1);
@@ -9207,6 +9265,7 @@
9207
9265
  --base-menu-content-padding: var(--space-2);
9208
9266
  --base-menu-item-padding-left: var(--space-3);
9209
9267
  --base-menu-item-padding-right: var(--space-3);
9268
+ --base-menu-item-padding-y: var(--space-1);
9210
9269
  --base-menu-item-height: var(--space-6);
9211
9270
  border-radius: var(--radius-4);
9212
9271
  }
@@ -9216,6 +9275,11 @@
9216
9275
  letter-spacing: var(--letter-spacing-2);
9217
9276
  border-radius: var(--radius-2);
9218
9277
  }
9278
+ .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
9279
+ width: var(--space-4);
9280
+ height: var(--space-4);
9281
+ flex-shrink: 0;
9282
+ }
9219
9283
  .rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
9220
9284
  font-size: var(--font-size-2);
9221
9285
  line-height: var(--line-height-2);
@@ -9237,6 +9301,7 @@
9237
9301
  --base-menu-content-padding: var(--space-1);
9238
9302
  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
9239
9303
  --base-menu-item-padding-right: var(--space-2);
9304
+ --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
9240
9305
  --base-menu-item-height: var(--space-5);
9241
9306
  border-radius: var(--radius-3);
9242
9307
  }
@@ -9246,6 +9311,11 @@
9246
9311
  letter-spacing: var(--letter-spacing-1);
9247
9312
  border-radius: var(--radius-1);
9248
9313
  }
9314
+ .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
9315
+ width: var(--space-4);
9316
+ height: var(--space-4);
9317
+ flex-shrink: 0;
9318
+ }
9249
9319
  .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
9250
9320
  font-size: var(--font-size-1);
9251
9321
  line-height: var(--line-height-1);
@@ -9265,6 +9335,7 @@
9265
9335
  --base-menu-content-padding: var(--space-2);
9266
9336
  --base-menu-item-padding-left: var(--space-3);
9267
9337
  --base-menu-item-padding-right: var(--space-3);
9338
+ --base-menu-item-padding-y: var(--space-1);
9268
9339
  --base-menu-item-height: var(--space-6);
9269
9340
  border-radius: var(--radius-4);
9270
9341
  }
@@ -9274,6 +9345,11 @@
9274
9345
  letter-spacing: var(--letter-spacing-2);
9275
9346
  border-radius: var(--radius-2);
9276
9347
  }
9348
+ .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
9349
+ width: var(--space-4);
9350
+ height: var(--space-4);
9351
+ flex-shrink: 0;
9352
+ }
9277
9353
  .rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
9278
9354
  font-size: var(--font-size-2);
9279
9355
  line-height: var(--line-height-2);
@@ -9297,6 +9373,9 @@
9297
9373
  color: var(--gray-a8);
9298
9374
  cursor: default;
9299
9375
  }
9376
+ .rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
9377
+ color: var(--gray-a10);
9378
+ }
9300
9379
  .rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut) {
9301
9380
  color: inherit;
9302
9381
  }
@@ -9310,6 +9389,12 @@
9310
9389
  .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
9311
9390
  color: var(--accent-contrast);
9312
9391
  }
9392
+ .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
9393
+ color: inherit !important;
9394
+ }
9395
+ .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
9396
+ color: inherit !important;
9397
+ }
9313
9398
  .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) {
9314
9399
  background-color: var(--accent-12);
9315
9400
  color: var(--accent-1);
@@ -9317,16 +9402,31 @@
9317
9402
  .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
9318
9403
  color: var(--accent-1);
9319
9404
  }
9405
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
9406
+ color: inherit !important;
9407
+ }
9408
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
9409
+ color: inherit !important;
9410
+ }
9320
9411
  .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) {
9321
9412
  background-color: var(--accent-9);
9322
9413
  color: var(--accent-contrast);
9323
9414
  }
9415
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where(.rt-Text) {
9416
+ color: inherit !important;
9417
+ }
9418
+ .rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']) {
9419
+ color: inherit !important;
9420
+ }
9324
9421
  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
9325
9422
  background-color: var(--accent-a3);
9326
9423
  }
9327
9424
  .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) {
9328
9425
  background-color: var(--accent-a4);
9329
9426
  }
9427
+ .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
9428
+ color: var(--gray-11) !important;
9429
+ }
9330
9430
  .rt-ContextMenuContent {
9331
9431
  max-height: var(--radix-context-menu-content-available-height);
9332
9432
  transform-origin: var(--radix-context-menu-content-transform-origin);
@@ -10521,20 +10621,20 @@
10521
10621
  width: var(--base-button-height);
10522
10622
  }
10523
10623
  .rt-IconButton:where(.rt-r-size-1) :where(svg) {
10524
- width: 13px;
10525
- height: 13px;
10624
+ width: var(--space-4);
10625
+ height: var(--space-4);
10526
10626
  }
10527
10627
  .rt-IconButton:where(.rt-r-size-2) :where(svg) {
10528
- width: 15px;
10529
- height: 15px;
10628
+ width: var(--space-4);
10629
+ height: var(--space-4);
10530
10630
  }
10531
10631
  .rt-IconButton:where(.rt-r-size-3) :where(svg) {
10532
- width: 17px;
10533
- height: 17px;
10632
+ width: var(--space-5);
10633
+ height: var(--space-5);
10534
10634
  }
10535
10635
  .rt-IconButton:where(.rt-r-size-4) :where(svg) {
10536
- width: 19px;
10537
- height: 19px;
10636
+ width: var(--space-5);
10637
+ height: var(--space-5);
10538
10638
  }
10539
10639
  .rt-IconButton:where(.rt-variant-ghost):where(.rt-r-size-1) {
10540
10640
  --icon-button-ghost-padding: var(--space-1);
@@ -10550,20 +10650,20 @@
10550
10650
  }
10551
10651
  @media (min-width: 520px) {
10552
10652
  .rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
10553
- width: 13px;
10554
- height: 13px;
10653
+ width: var(--space-4);
10654
+ height: var(--space-4);
10555
10655
  }
10556
10656
  .rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
10557
- width: 15px;
10558
- height: 15px;
10657
+ width: var(--space-4);
10658
+ height: var(--space-4);
10559
10659
  }
10560
10660
  .rt-IconButton:where(.xs\:rt-r-size-3) :where(svg) {
10561
- width: 17px;
10562
- height: 17px;
10661
+ width: var(--space-5);
10662
+ height: var(--space-5);
10563
10663
  }
10564
10664
  .rt-IconButton:where(.xs\:rt-r-size-4) :where(svg) {
10565
- width: 19px;
10566
- height: 19px;
10665
+ width: var(--space-5);
10666
+ height: var(--space-5);
10567
10667
  }
10568
10668
  .rt-IconButton:where(.rt-variant-ghost):where(.xs\:rt-r-size-1) {
10569
10669
  --icon-button-ghost-padding: var(--space-1);
@@ -10580,20 +10680,20 @@
10580
10680
  }
10581
10681
  @media (min-width: 768px) {
10582
10682
  .rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
10583
- width: 13px;
10584
- height: 13px;
10683
+ width: var(--space-4);
10684
+ height: var(--space-4);
10585
10685
  }
10586
10686
  .rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
10587
- width: 15px;
10588
- height: 15px;
10687
+ width: var(--space-4);
10688
+ height: var(--space-4);
10589
10689
  }
10590
10690
  .rt-IconButton:where(.sm\:rt-r-size-3) :where(svg) {
10591
- width: 17px;
10592
- height: 17px;
10691
+ width: var(--space-5);
10692
+ height: var(--space-5);
10593
10693
  }
10594
10694
  .rt-IconButton:where(.sm\:rt-r-size-4) :where(svg) {
10595
- width: 19px;
10596
- height: 19px;
10695
+ width: var(--space-5);
10696
+ height: var(--space-5);
10597
10697
  }
10598
10698
  .rt-IconButton:where(.rt-variant-ghost):where(.sm\:rt-r-size-1) {
10599
10699
  --icon-button-ghost-padding: var(--space-1);
@@ -10610,20 +10710,20 @@
10610
10710
  }
10611
10711
  @media (min-width: 1024px) {
10612
10712
  .rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
10613
- width: 13px;
10614
- height: 13px;
10713
+ width: var(--space-4);
10714
+ height: var(--space-4);
10615
10715
  }
10616
10716
  .rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
10617
- width: 15px;
10618
- height: 15px;
10717
+ width: var(--space-4);
10718
+ height: var(--space-4);
10619
10719
  }
10620
10720
  .rt-IconButton:where(.md\:rt-r-size-3) :where(svg) {
10621
- width: 17px;
10622
- height: 17px;
10721
+ width: var(--space-5);
10722
+ height: var(--space-5);
10623
10723
  }
10624
10724
  .rt-IconButton:where(.md\:rt-r-size-4) :where(svg) {
10625
- width: 19px;
10626
- height: 19px;
10725
+ width: var(--space-5);
10726
+ height: var(--space-5);
10627
10727
  }
10628
10728
  .rt-IconButton:where(.rt-variant-ghost):where(.md\:rt-r-size-1) {
10629
10729
  --icon-button-ghost-padding: var(--space-1);
@@ -10640,20 +10740,20 @@
10640
10740
  }
10641
10741
  @media (min-width: 1280px) {
10642
10742
  .rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
10643
- width: 13px;
10644
- height: 13px;
10743
+ width: var(--space-4);
10744
+ height: var(--space-4);
10645
10745
  }
10646
10746
  .rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
10647
- width: 15px;
10648
- height: 15px;
10747
+ width: var(--space-4);
10748
+ height: var(--space-4);
10649
10749
  }
10650
10750
  .rt-IconButton:where(.lg\:rt-r-size-3) :where(svg) {
10651
- width: 17px;
10652
- height: 17px;
10751
+ width: var(--space-5);
10752
+ height: var(--space-5);
10653
10753
  }
10654
10754
  .rt-IconButton:where(.lg\:rt-r-size-4) :where(svg) {
10655
- width: 19px;
10656
- height: 19px;
10755
+ width: var(--space-5);
10756
+ height: var(--space-5);
10657
10757
  }
10658
10758
  .rt-IconButton:where(.rt-variant-ghost):where(.lg\:rt-r-size-1) {
10659
10759
  --icon-button-ghost-padding: var(--space-1);
@@ -10670,20 +10770,20 @@
10670
10770
  }
10671
10771
  @media (min-width: 1640px) {
10672
10772
  .rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
10673
- width: 13px;
10674
- height: 13px;
10773
+ width: var(--space-4);
10774
+ height: var(--space-4);
10675
10775
  }
10676
10776
  .rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
10677
- width: 15px;
10678
- height: 15px;
10777
+ width: var(--space-4);
10778
+ height: var(--space-4);
10679
10779
  }
10680
10780
  .rt-IconButton:where(.xl\:rt-r-size-3) :where(svg) {
10681
- width: 17px;
10682
- height: 17px;
10781
+ width: var(--space-5);
10782
+ height: var(--space-5);
10683
10783
  }
10684
10784
  .rt-IconButton:where(.xl\:rt-r-size-4) :where(svg) {
10685
- width: 19px;
10686
- height: 19px;
10785
+ width: var(--space-5);
10786
+ height: var(--space-5);
10687
10787
  }
10688
10788
  .rt-IconButton:where(.rt-variant-ghost):where(.xl\:rt-r-size-1) {
10689
10789
  --icon-button-ghost-padding: var(--space-1);