@kushagradhawan/kookie-ui 0.1.61 → 0.1.63

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 (25) hide show
  1. package/components.css +101 -48
  2. package/dist/cjs/components/separator.d.ts.map +1 -1
  3. package/dist/cjs/components/separator.js.map +2 -2
  4. package/dist/cjs/components/separator.props.d.ts +5 -0
  5. package/dist/cjs/components/separator.props.d.ts.map +1 -1
  6. package/dist/cjs/components/separator.props.js +1 -1
  7. package/dist/cjs/components/separator.props.js.map +2 -2
  8. package/dist/esm/components/separator.d.ts.map +1 -1
  9. package/dist/esm/components/separator.js.map +2 -2
  10. package/dist/esm/components/separator.props.d.ts +5 -0
  11. package/dist/esm/components/separator.props.d.ts.map +1 -1
  12. package/dist/esm/components/separator.props.js +1 -1
  13. package/dist/esm/components/separator.props.js.map +2 -2
  14. package/package.json +1 -1
  15. package/schemas/base-button.json +1 -1
  16. package/schemas/button.json +1 -1
  17. package/schemas/icon-button.json +1 -1
  18. package/schemas/index.json +6 -6
  19. package/schemas/toggle-button.json +1 -1
  20. package/schemas/toggle-icon-button.json +1 -1
  21. package/src/components/button.css +19 -8
  22. package/src/components/separator.css +4 -0
  23. package/src/components/separator.props.tsx +2 -0
  24. package/src/components/separator.tsx +3 -18
  25. package/styles.css +101 -48
package/styles.css CHANGED
@@ -9141,6 +9141,7 @@
9141
9141
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
9142
9142
  }
9143
9143
  .rt-Button:where(.rt-r-size-1){
9144
+ --button-padding-inline-base: var(--space-2);
9144
9145
  gap: var(--component-gap-1);
9145
9146
  font-size: var(--font-size-1);
9146
9147
  line-height: var(--line-height-1);
@@ -9151,15 +9152,17 @@
9151
9152
  height: var(--content-icon-size-1);
9152
9153
  }
9153
9154
  .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)){
9154
- padding-left: var(--space-2);
9155
- padding-right: var(--space-2);
9155
+ padding-inline-start: var(--button-padding-inline-base);
9156
+ padding-inline-end: var(--button-padding-inline-base);
9156
9157
  }
9157
9158
  .rt-Button:where(.rt-r-size-1):where(.rt-variant-ghost){
9158
9159
  gap: var(--component-gap-ghost-1);
9159
9160
  --button-ghost-padding-x: var(--space-2);
9160
9161
  --button-ghost-padding-y: var(--space-1);
9162
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9161
9163
  }
9162
9164
  .rt-Button:where(.rt-r-size-2){
9165
+ --button-padding-inline-base: var(--space-3);
9163
9166
  gap: var(--component-gap-2);
9164
9167
  font-size: var(--font-size-2);
9165
9168
  line-height: var(--line-height-2);
@@ -9170,15 +9173,17 @@
9170
9173
  height: var(--content-icon-size-2);
9171
9174
  }
9172
9175
  .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)){
9173
- padding-left: var(--space-3);
9174
- padding-right: var(--space-3);
9176
+ padding-inline-start: var(--button-padding-inline-base);
9177
+ padding-inline-end: var(--button-padding-inline-base);
9175
9178
  }
9176
9179
  .rt-Button:where(.rt-r-size-2):where(.rt-variant-ghost){
9177
9180
  gap: var(--component-gap-ghost-2);
9178
9181
  --button-ghost-padding-x: var(--space-2);
9179
9182
  --button-ghost-padding-y: var(--space-1);
9183
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9180
9184
  }
9181
9185
  .rt-Button:where(.rt-r-size-3){
9186
+ --button-padding-inline-base: var(--space-4);
9182
9187
  gap: var(--component-gap-3);
9183
9188
  font-size: var(--font-size-3);
9184
9189
  line-height: var(--line-height-3);
@@ -9189,15 +9194,17 @@
9189
9194
  height: var(--content-icon-size-3);
9190
9195
  }
9191
9196
  .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)){
9192
- padding-left: var(--space-4);
9193
- padding-right: var(--space-4);
9197
+ padding-inline-start: var(--button-padding-inline-base);
9198
+ padding-inline-end: var(--button-padding-inline-base);
9194
9199
  }
9195
9200
  .rt-Button:where(.rt-r-size-3):where(.rt-variant-ghost){
9196
9201
  gap: var(--component-gap-ghost-3);
9197
9202
  --button-ghost-padding-x: var(--space-3);
9198
9203
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
9204
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9199
9205
  }
9200
9206
  .rt-Button:where(.rt-r-size-4){
9207
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
9201
9208
  gap: var(--component-gap-4);
9202
9209
  font-size: var(--font-size-4);
9203
9210
  line-height: var(--line-height-4);
@@ -9208,16 +9215,18 @@
9208
9215
  height: var(--content-icon-size-4);
9209
9216
  }
9210
9217
  .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)){
9211
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
9212
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
9218
+ padding-inline-start: var(--button-padding-inline-base);
9219
+ padding-inline-end: var(--button-padding-inline-base);
9213
9220
  }
9214
9221
  .rt-Button:where(.rt-r-size-4):where(.rt-variant-ghost){
9215
9222
  gap: var(--component-gap-ghost-4);
9216
9223
  --button-ghost-padding-x: var(--space-4);
9217
9224
  --button-ghost-padding-y: var(--space-2);
9225
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9218
9226
  }
9219
9227
  @media (min-width: 520px){
9220
9228
  .rt-Button:where(.xs\:rt-r-size-1){
9229
+ --button-padding-inline-base: var(--space-2);
9221
9230
  gap: var(--component-gap-1);
9222
9231
  font-size: var(--font-size-1);
9223
9232
  line-height: var(--line-height-1);
@@ -9228,15 +9237,17 @@
9228
9237
  height: var(--content-icon-size-1);
9229
9238
  }
9230
9239
  .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)){
9231
- padding-left: var(--space-2);
9232
- padding-right: var(--space-2);
9240
+ padding-inline-start: var(--button-padding-inline-base);
9241
+ padding-inline-end: var(--button-padding-inline-base);
9233
9242
  }
9234
9243
  .rt-Button:where(.xs\:rt-r-size-1):where(.rt-variant-ghost){
9235
9244
  gap: var(--component-gap-ghost-1);
9236
9245
  --button-ghost-padding-x: var(--space-2);
9237
9246
  --button-ghost-padding-y: var(--space-1);
9247
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9238
9248
  }
9239
9249
  .rt-Button:where(.xs\:rt-r-size-2){
9250
+ --button-padding-inline-base: var(--space-3);
9240
9251
  gap: var(--component-gap-2);
9241
9252
  font-size: var(--font-size-2);
9242
9253
  line-height: var(--line-height-2);
@@ -9247,15 +9258,17 @@
9247
9258
  height: var(--content-icon-size-2);
9248
9259
  }
9249
9260
  .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)){
9250
- padding-left: var(--space-3);
9251
- padding-right: var(--space-3);
9261
+ padding-inline-start: var(--button-padding-inline-base);
9262
+ padding-inline-end: var(--button-padding-inline-base);
9252
9263
  }
9253
9264
  .rt-Button:where(.xs\:rt-r-size-2):where(.rt-variant-ghost){
9254
9265
  gap: var(--component-gap-ghost-2);
9255
9266
  --button-ghost-padding-x: var(--space-2);
9256
9267
  --button-ghost-padding-y: var(--space-1);
9268
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9257
9269
  }
9258
9270
  .rt-Button:where(.xs\:rt-r-size-3){
9271
+ --button-padding-inline-base: var(--space-4);
9259
9272
  gap: var(--component-gap-3);
9260
9273
  font-size: var(--font-size-3);
9261
9274
  line-height: var(--line-height-3);
@@ -9266,15 +9279,17 @@
9266
9279
  height: var(--content-icon-size-3);
9267
9280
  }
9268
9281
  .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)){
9269
- padding-left: var(--space-4);
9270
- padding-right: var(--space-4);
9282
+ padding-inline-start: var(--button-padding-inline-base);
9283
+ padding-inline-end: var(--button-padding-inline-base);
9271
9284
  }
9272
9285
  .rt-Button:where(.xs\:rt-r-size-3):where(.rt-variant-ghost){
9273
9286
  gap: var(--component-gap-ghost-3);
9274
9287
  --button-ghost-padding-x: var(--space-3);
9275
9288
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
9289
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9276
9290
  }
9277
9291
  .rt-Button:where(.xs\:rt-r-size-4){
9292
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
9278
9293
  gap: var(--component-gap-4);
9279
9294
  font-size: var(--font-size-4);
9280
9295
  line-height: var(--line-height-4);
@@ -9285,17 +9300,19 @@
9285
9300
  height: var(--content-icon-size-4);
9286
9301
  }
9287
9302
  .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)){
9288
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
9289
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
9303
+ padding-inline-start: var(--button-padding-inline-base);
9304
+ padding-inline-end: var(--button-padding-inline-base);
9290
9305
  }
9291
9306
  .rt-Button:where(.xs\:rt-r-size-4):where(.rt-variant-ghost){
9292
9307
  gap: var(--component-gap-ghost-4);
9293
9308
  --button-ghost-padding-x: var(--space-4);
9294
9309
  --button-ghost-padding-y: var(--space-2);
9310
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9295
9311
  }
9296
9312
  }
9297
9313
  @media (min-width: 768px){
9298
9314
  .rt-Button:where(.sm\:rt-r-size-1){
9315
+ --button-padding-inline-base: var(--space-2);
9299
9316
  gap: var(--component-gap-1);
9300
9317
  font-size: var(--font-size-1);
9301
9318
  line-height: var(--line-height-1);
@@ -9306,15 +9323,17 @@
9306
9323
  height: var(--content-icon-size-1);
9307
9324
  }
9308
9325
  .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)){
9309
- padding-left: var(--space-2);
9310
- padding-right: var(--space-2);
9326
+ padding-inline-start: var(--button-padding-inline-base);
9327
+ padding-inline-end: var(--button-padding-inline-base);
9311
9328
  }
9312
9329
  .rt-Button:where(.sm\:rt-r-size-1):where(.rt-variant-ghost){
9313
9330
  gap: var(--component-gap-ghost-1);
9314
9331
  --button-ghost-padding-x: var(--space-2);
9315
9332
  --button-ghost-padding-y: var(--space-1);
9333
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9316
9334
  }
9317
9335
  .rt-Button:where(.sm\:rt-r-size-2){
9336
+ --button-padding-inline-base: var(--space-3);
9318
9337
  gap: var(--component-gap-2);
9319
9338
  font-size: var(--font-size-2);
9320
9339
  line-height: var(--line-height-2);
@@ -9325,15 +9344,17 @@
9325
9344
  height: var(--content-icon-size-2);
9326
9345
  }
9327
9346
  .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)){
9328
- padding-left: var(--space-3);
9329
- padding-right: var(--space-3);
9347
+ padding-inline-start: var(--button-padding-inline-base);
9348
+ padding-inline-end: var(--button-padding-inline-base);
9330
9349
  }
9331
9350
  .rt-Button:where(.sm\:rt-r-size-2):where(.rt-variant-ghost){
9332
9351
  gap: var(--component-gap-ghost-2);
9333
9352
  --button-ghost-padding-x: var(--space-2);
9334
9353
  --button-ghost-padding-y: var(--space-1);
9354
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9335
9355
  }
9336
9356
  .rt-Button:where(.sm\:rt-r-size-3){
9357
+ --button-padding-inline-base: var(--space-4);
9337
9358
  gap: var(--component-gap-3);
9338
9359
  font-size: var(--font-size-3);
9339
9360
  line-height: var(--line-height-3);
@@ -9344,15 +9365,17 @@
9344
9365
  height: var(--content-icon-size-3);
9345
9366
  }
9346
9367
  .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)){
9347
- padding-left: var(--space-4);
9348
- padding-right: var(--space-4);
9368
+ padding-inline-start: var(--button-padding-inline-base);
9369
+ padding-inline-end: var(--button-padding-inline-base);
9349
9370
  }
9350
9371
  .rt-Button:where(.sm\:rt-r-size-3):where(.rt-variant-ghost){
9351
9372
  gap: var(--component-gap-ghost-3);
9352
9373
  --button-ghost-padding-x: var(--space-3);
9353
9374
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
9375
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9354
9376
  }
9355
9377
  .rt-Button:where(.sm\:rt-r-size-4){
9378
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
9356
9379
  gap: var(--component-gap-4);
9357
9380
  font-size: var(--font-size-4);
9358
9381
  line-height: var(--line-height-4);
@@ -9363,17 +9386,19 @@
9363
9386
  height: var(--content-icon-size-4);
9364
9387
  }
9365
9388
  .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)){
9366
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
9367
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
9389
+ padding-inline-start: var(--button-padding-inline-base);
9390
+ padding-inline-end: var(--button-padding-inline-base);
9368
9391
  }
9369
9392
  .rt-Button:where(.sm\:rt-r-size-4):where(.rt-variant-ghost){
9370
9393
  gap: var(--component-gap-ghost-4);
9371
9394
  --button-ghost-padding-x: var(--space-4);
9372
9395
  --button-ghost-padding-y: var(--space-2);
9396
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9373
9397
  }
9374
9398
  }
9375
9399
  @media (min-width: 1024px){
9376
9400
  .rt-Button:where(.md\:rt-r-size-1){
9401
+ --button-padding-inline-base: var(--space-2);
9377
9402
  gap: var(--component-gap-1);
9378
9403
  font-size: var(--font-size-1);
9379
9404
  line-height: var(--line-height-1);
@@ -9384,15 +9409,17 @@
9384
9409
  height: var(--content-icon-size-1);
9385
9410
  }
9386
9411
  .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)){
9387
- padding-left: var(--space-2);
9388
- padding-right: var(--space-2);
9412
+ padding-inline-start: var(--button-padding-inline-base);
9413
+ padding-inline-end: var(--button-padding-inline-base);
9389
9414
  }
9390
9415
  .rt-Button:where(.md\:rt-r-size-1):where(.rt-variant-ghost){
9391
9416
  gap: var(--component-gap-ghost-1);
9392
9417
  --button-ghost-padding-x: var(--space-2);
9393
9418
  --button-ghost-padding-y: var(--space-1);
9419
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9394
9420
  }
9395
9421
  .rt-Button:where(.md\:rt-r-size-2){
9422
+ --button-padding-inline-base: var(--space-3);
9396
9423
  gap: var(--component-gap-2);
9397
9424
  font-size: var(--font-size-2);
9398
9425
  line-height: var(--line-height-2);
@@ -9403,15 +9430,17 @@
9403
9430
  height: var(--content-icon-size-2);
9404
9431
  }
9405
9432
  .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)){
9406
- padding-left: var(--space-3);
9407
- padding-right: var(--space-3);
9433
+ padding-inline-start: var(--button-padding-inline-base);
9434
+ padding-inline-end: var(--button-padding-inline-base);
9408
9435
  }
9409
9436
  .rt-Button:where(.md\:rt-r-size-2):where(.rt-variant-ghost){
9410
9437
  gap: var(--component-gap-ghost-2);
9411
9438
  --button-ghost-padding-x: var(--space-2);
9412
9439
  --button-ghost-padding-y: var(--space-1);
9440
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9413
9441
  }
9414
9442
  .rt-Button:where(.md\:rt-r-size-3){
9443
+ --button-padding-inline-base: var(--space-4);
9415
9444
  gap: var(--component-gap-3);
9416
9445
  font-size: var(--font-size-3);
9417
9446
  line-height: var(--line-height-3);
@@ -9422,15 +9451,17 @@
9422
9451
  height: var(--content-icon-size-3);
9423
9452
  }
9424
9453
  .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)){
9425
- padding-left: var(--space-4);
9426
- padding-right: var(--space-4);
9454
+ padding-inline-start: var(--button-padding-inline-base);
9455
+ padding-inline-end: var(--button-padding-inline-base);
9427
9456
  }
9428
9457
  .rt-Button:where(.md\:rt-r-size-3):where(.rt-variant-ghost){
9429
9458
  gap: var(--component-gap-ghost-3);
9430
9459
  --button-ghost-padding-x: var(--space-3);
9431
9460
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
9461
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9432
9462
  }
9433
9463
  .rt-Button:where(.md\:rt-r-size-4){
9464
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
9434
9465
  gap: var(--component-gap-4);
9435
9466
  font-size: var(--font-size-4);
9436
9467
  line-height: var(--line-height-4);
@@ -9441,17 +9472,19 @@
9441
9472
  height: var(--content-icon-size-4);
9442
9473
  }
9443
9474
  .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)){
9444
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
9445
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
9475
+ padding-inline-start: var(--button-padding-inline-base);
9476
+ padding-inline-end: var(--button-padding-inline-base);
9446
9477
  }
9447
9478
  .rt-Button:where(.md\:rt-r-size-4):where(.rt-variant-ghost){
9448
9479
  gap: var(--component-gap-ghost-4);
9449
9480
  --button-ghost-padding-x: var(--space-4);
9450
9481
  --button-ghost-padding-y: var(--space-2);
9482
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9451
9483
  }
9452
9484
  }
9453
9485
  @media (min-width: 1280px){
9454
9486
  .rt-Button:where(.lg\:rt-r-size-1){
9487
+ --button-padding-inline-base: var(--space-2);
9455
9488
  gap: var(--component-gap-1);
9456
9489
  font-size: var(--font-size-1);
9457
9490
  line-height: var(--line-height-1);
@@ -9462,15 +9495,17 @@
9462
9495
  height: var(--content-icon-size-1);
9463
9496
  }
9464
9497
  .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)){
9465
- padding-left: var(--space-2);
9466
- padding-right: var(--space-2);
9498
+ padding-inline-start: var(--button-padding-inline-base);
9499
+ padding-inline-end: var(--button-padding-inline-base);
9467
9500
  }
9468
9501
  .rt-Button:where(.lg\:rt-r-size-1):where(.rt-variant-ghost){
9469
9502
  gap: var(--component-gap-ghost-1);
9470
9503
  --button-ghost-padding-x: var(--space-2);
9471
9504
  --button-ghost-padding-y: var(--space-1);
9505
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9472
9506
  }
9473
9507
  .rt-Button:where(.lg\:rt-r-size-2){
9508
+ --button-padding-inline-base: var(--space-3);
9474
9509
  gap: var(--component-gap-2);
9475
9510
  font-size: var(--font-size-2);
9476
9511
  line-height: var(--line-height-2);
@@ -9481,15 +9516,17 @@
9481
9516
  height: var(--content-icon-size-2);
9482
9517
  }
9483
9518
  .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)){
9484
- padding-left: var(--space-3);
9485
- padding-right: var(--space-3);
9519
+ padding-inline-start: var(--button-padding-inline-base);
9520
+ padding-inline-end: var(--button-padding-inline-base);
9486
9521
  }
9487
9522
  .rt-Button:where(.lg\:rt-r-size-2):where(.rt-variant-ghost){
9488
9523
  gap: var(--component-gap-ghost-2);
9489
9524
  --button-ghost-padding-x: var(--space-2);
9490
9525
  --button-ghost-padding-y: var(--space-1);
9526
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9491
9527
  }
9492
9528
  .rt-Button:where(.lg\:rt-r-size-3){
9529
+ --button-padding-inline-base: var(--space-4);
9493
9530
  gap: var(--component-gap-3);
9494
9531
  font-size: var(--font-size-3);
9495
9532
  line-height: var(--line-height-3);
@@ -9500,15 +9537,17 @@
9500
9537
  height: var(--content-icon-size-3);
9501
9538
  }
9502
9539
  .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)){
9503
- padding-left: var(--space-4);
9504
- padding-right: var(--space-4);
9540
+ padding-inline-start: var(--button-padding-inline-base);
9541
+ padding-inline-end: var(--button-padding-inline-base);
9505
9542
  }
9506
9543
  .rt-Button:where(.lg\:rt-r-size-3):where(.rt-variant-ghost){
9507
9544
  gap: var(--component-gap-ghost-3);
9508
9545
  --button-ghost-padding-x: var(--space-3);
9509
9546
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
9547
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9510
9548
  }
9511
9549
  .rt-Button:where(.lg\:rt-r-size-4){
9550
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
9512
9551
  gap: var(--component-gap-4);
9513
9552
  font-size: var(--font-size-4);
9514
9553
  line-height: var(--line-height-4);
@@ -9519,17 +9558,19 @@
9519
9558
  height: var(--content-icon-size-4);
9520
9559
  }
9521
9560
  .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)){
9522
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
9523
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
9561
+ padding-inline-start: var(--button-padding-inline-base);
9562
+ padding-inline-end: var(--button-padding-inline-base);
9524
9563
  }
9525
9564
  .rt-Button:where(.lg\:rt-r-size-4):where(.rt-variant-ghost){
9526
9565
  gap: var(--component-gap-ghost-4);
9527
9566
  --button-ghost-padding-x: var(--space-4);
9528
9567
  --button-ghost-padding-y: var(--space-2);
9568
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9529
9569
  }
9530
9570
  }
9531
9571
  @media (min-width: 1640px){
9532
9572
  .rt-Button:where(.xl\:rt-r-size-1){
9573
+ --button-padding-inline-base: var(--space-2);
9533
9574
  gap: var(--component-gap-1);
9534
9575
  font-size: var(--font-size-1);
9535
9576
  line-height: var(--line-height-1);
@@ -9540,15 +9581,17 @@
9540
9581
  height: var(--content-icon-size-1);
9541
9582
  }
9542
9583
  .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)){
9543
- padding-left: var(--space-2);
9544
- padding-right: var(--space-2);
9584
+ padding-inline-start: var(--button-padding-inline-base);
9585
+ padding-inline-end: var(--button-padding-inline-base);
9545
9586
  }
9546
9587
  .rt-Button:where(.xl\:rt-r-size-1):where(.rt-variant-ghost){
9547
9588
  gap: var(--component-gap-ghost-1);
9548
9589
  --button-ghost-padding-x: var(--space-2);
9549
9590
  --button-ghost-padding-y: var(--space-1);
9591
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9550
9592
  }
9551
9593
  .rt-Button:where(.xl\:rt-r-size-2){
9594
+ --button-padding-inline-base: var(--space-3);
9552
9595
  gap: var(--component-gap-2);
9553
9596
  font-size: var(--font-size-2);
9554
9597
  line-height: var(--line-height-2);
@@ -9559,15 +9602,17 @@
9559
9602
  height: var(--content-icon-size-2);
9560
9603
  }
9561
9604
  .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)){
9562
- padding-left: var(--space-3);
9563
- padding-right: var(--space-3);
9605
+ padding-inline-start: var(--button-padding-inline-base);
9606
+ padding-inline-end: var(--button-padding-inline-base);
9564
9607
  }
9565
9608
  .rt-Button:where(.xl\:rt-r-size-2):where(.rt-variant-ghost){
9566
9609
  gap: var(--component-gap-ghost-2);
9567
9610
  --button-ghost-padding-x: var(--space-2);
9568
9611
  --button-ghost-padding-y: var(--space-1);
9612
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9569
9613
  }
9570
9614
  .rt-Button:where(.xl\:rt-r-size-3){
9615
+ --button-padding-inline-base: var(--space-4);
9571
9616
  gap: var(--component-gap-3);
9572
9617
  font-size: var(--font-size-3);
9573
9618
  line-height: var(--line-height-3);
@@ -9578,15 +9623,17 @@
9578
9623
  height: var(--content-icon-size-3);
9579
9624
  }
9580
9625
  .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)){
9581
- padding-left: var(--space-4);
9582
- padding-right: var(--space-4);
9626
+ padding-inline-start: var(--button-padding-inline-base);
9627
+ padding-inline-end: var(--button-padding-inline-base);
9583
9628
  }
9584
9629
  .rt-Button:where(.xl\:rt-r-size-3):where(.rt-variant-ghost){
9585
9630
  gap: var(--component-gap-ghost-3);
9586
9631
  --button-ghost-padding-x: var(--space-3);
9587
9632
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
9633
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9588
9634
  }
9589
9635
  .rt-Button:where(.xl\:rt-r-size-4){
9636
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
9590
9637
  gap: var(--component-gap-4);
9591
9638
  font-size: var(--font-size-4);
9592
9639
  line-height: var(--line-height-4);
@@ -9597,17 +9644,20 @@
9597
9644
  height: var(--content-icon-size-4);
9598
9645
  }
9599
9646
  .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)){
9600
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
9601
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
9647
+ padding-inline-start: var(--button-padding-inline-base);
9648
+ padding-inline-end: var(--button-padding-inline-base);
9602
9649
  }
9603
9650
  .rt-Button:where(.xl\:rt-r-size-4):where(.rt-variant-ghost){
9604
9651
  gap: var(--component-gap-ghost-4);
9605
9652
  --button-ghost-padding-x: var(--space-4);
9606
9653
  --button-ghost-padding-y: var(--space-2);
9654
+ --button-padding-inline-base: var(--button-ghost-padding-x);
9607
9655
  }
9608
9656
  }
9609
9657
  .rt-Button{
9610
9658
  font-weight: var(--font-weight-medium);
9659
+ --button-padding-inline-base: var(--space-3);
9660
+ --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-1));
9611
9661
  }
9612
9662
  .rt-CalloutRoot{
9613
9663
  box-sizing: border-box;
@@ -19360,6 +19410,9 @@
19360
19410
  display: block;
19361
19411
  background-color: var(--accent-a5);
19362
19412
  }
19413
+ .rt-Separator:where(.rt-light){
19414
+ background-color: var(--accent-a3);
19415
+ }
19363
19416
  .rt-Separator:where(.rt-r-orientation-horizontal){
19364
19417
  width: var(--separator-size);
19365
19418
  height: 1px;