@kushagradhawan/kookie-ui 0.1.62 → 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 (10) hide show
  1. package/components.css +98 -48
  2. package/package.json +1 -1
  3. package/schemas/base-button.json +1 -1
  4. package/schemas/button.json +1 -1
  5. package/schemas/icon-button.json +1 -1
  6. package/schemas/index.json +6 -6
  7. package/schemas/toggle-button.json +1 -1
  8. package/schemas/toggle-icon-button.json +1 -1
  9. package/src/components/button.css +19 -8
  10. package/styles.css +98 -48
package/components.css CHANGED
@@ -4136,6 +4136,7 @@
4136
4136
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
4137
4137
  }
4138
4138
  .rt-Button:where(.rt-r-size-1) {
4139
+ --button-padding-inline-base: var(--space-2);
4139
4140
  gap: var(--component-gap-1);
4140
4141
  font-size: var(--font-size-1);
4141
4142
  line-height: var(--line-height-1);
@@ -4146,15 +4147,17 @@
4146
4147
  height: var(--content-icon-size-1);
4147
4148
  }
4148
4149
  .rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
4149
- padding-left: var(--space-2);
4150
- padding-right: var(--space-2);
4150
+ padding-inline-start: var(--button-padding-inline-base);
4151
+ padding-inline-end: var(--button-padding-inline-base);
4151
4152
  }
4152
4153
  .rt-Button:where(.rt-r-size-1):where(.rt-variant-ghost) {
4153
4154
  gap: var(--component-gap-ghost-1);
4154
4155
  --button-ghost-padding-x: var(--space-2);
4155
4156
  --button-ghost-padding-y: var(--space-1);
4157
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4156
4158
  }
4157
4159
  .rt-Button:where(.rt-r-size-2) {
4160
+ --button-padding-inline-base: var(--space-3);
4158
4161
  gap: var(--component-gap-2);
4159
4162
  font-size: var(--font-size-2);
4160
4163
  line-height: var(--line-height-2);
@@ -4165,15 +4168,17 @@
4165
4168
  height: var(--content-icon-size-2);
4166
4169
  }
4167
4170
  .rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
4168
- padding-left: var(--space-3);
4169
- padding-right: var(--space-3);
4171
+ padding-inline-start: var(--button-padding-inline-base);
4172
+ padding-inline-end: var(--button-padding-inline-base);
4170
4173
  }
4171
4174
  .rt-Button:where(.rt-r-size-2):where(.rt-variant-ghost) {
4172
4175
  gap: var(--component-gap-ghost-2);
4173
4176
  --button-ghost-padding-x: var(--space-2);
4174
4177
  --button-ghost-padding-y: var(--space-1);
4178
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4175
4179
  }
4176
4180
  .rt-Button:where(.rt-r-size-3) {
4181
+ --button-padding-inline-base: var(--space-4);
4177
4182
  gap: var(--component-gap-3);
4178
4183
  font-size: var(--font-size-3);
4179
4184
  line-height: var(--line-height-3);
@@ -4184,15 +4189,17 @@
4184
4189
  height: var(--content-icon-size-3);
4185
4190
  }
4186
4191
  .rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
4187
- padding-left: var(--space-4);
4188
- padding-right: var(--space-4);
4192
+ padding-inline-start: var(--button-padding-inline-base);
4193
+ padding-inline-end: var(--button-padding-inline-base);
4189
4194
  }
4190
4195
  .rt-Button:where(.rt-r-size-3):where(.rt-variant-ghost) {
4191
4196
  gap: var(--component-gap-ghost-3);
4192
4197
  --button-ghost-padding-x: var(--space-3);
4193
4198
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4199
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4194
4200
  }
4195
4201
  .rt-Button:where(.rt-r-size-4) {
4202
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4196
4203
  gap: var(--component-gap-4);
4197
4204
  font-size: var(--font-size-4);
4198
4205
  line-height: var(--line-height-4);
@@ -4203,16 +4210,18 @@
4203
4210
  height: var(--content-icon-size-4);
4204
4211
  }
4205
4212
  .rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
4206
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4207
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4213
+ padding-inline-start: var(--button-padding-inline-base);
4214
+ padding-inline-end: var(--button-padding-inline-base);
4208
4215
  }
4209
4216
  .rt-Button:where(.rt-r-size-4):where(.rt-variant-ghost) {
4210
4217
  gap: var(--component-gap-ghost-4);
4211
4218
  --button-ghost-padding-x: var(--space-4);
4212
4219
  --button-ghost-padding-y: var(--space-2);
4220
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4213
4221
  }
4214
4222
  @media (min-width: 520px) {
4215
4223
  .rt-Button:where(.xs\:rt-r-size-1) {
4224
+ --button-padding-inline-base: var(--space-2);
4216
4225
  gap: var(--component-gap-1);
4217
4226
  font-size: var(--font-size-1);
4218
4227
  line-height: var(--line-height-1);
@@ -4223,15 +4232,17 @@
4223
4232
  height: var(--content-icon-size-1);
4224
4233
  }
4225
4234
  .rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4226
- padding-left: var(--space-2);
4227
- padding-right: var(--space-2);
4235
+ padding-inline-start: var(--button-padding-inline-base);
4236
+ padding-inline-end: var(--button-padding-inline-base);
4228
4237
  }
4229
4238
  .rt-Button:where(.xs\:rt-r-size-1):where(.rt-variant-ghost) {
4230
4239
  gap: var(--component-gap-ghost-1);
4231
4240
  --button-ghost-padding-x: var(--space-2);
4232
4241
  --button-ghost-padding-y: var(--space-1);
4242
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4233
4243
  }
4234
4244
  .rt-Button:where(.xs\:rt-r-size-2) {
4245
+ --button-padding-inline-base: var(--space-3);
4235
4246
  gap: var(--component-gap-2);
4236
4247
  font-size: var(--font-size-2);
4237
4248
  line-height: var(--line-height-2);
@@ -4242,15 +4253,17 @@
4242
4253
  height: var(--content-icon-size-2);
4243
4254
  }
4244
4255
  .rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4245
- padding-left: var(--space-3);
4246
- padding-right: var(--space-3);
4256
+ padding-inline-start: var(--button-padding-inline-base);
4257
+ padding-inline-end: var(--button-padding-inline-base);
4247
4258
  }
4248
4259
  .rt-Button:where(.xs\:rt-r-size-2):where(.rt-variant-ghost) {
4249
4260
  gap: var(--component-gap-ghost-2);
4250
4261
  --button-ghost-padding-x: var(--space-2);
4251
4262
  --button-ghost-padding-y: var(--space-1);
4263
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4252
4264
  }
4253
4265
  .rt-Button:where(.xs\:rt-r-size-3) {
4266
+ --button-padding-inline-base: var(--space-4);
4254
4267
  gap: var(--component-gap-3);
4255
4268
  font-size: var(--font-size-3);
4256
4269
  line-height: var(--line-height-3);
@@ -4261,15 +4274,17 @@
4261
4274
  height: var(--content-icon-size-3);
4262
4275
  }
4263
4276
  .rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4264
- padding-left: var(--space-4);
4265
- padding-right: var(--space-4);
4277
+ padding-inline-start: var(--button-padding-inline-base);
4278
+ padding-inline-end: var(--button-padding-inline-base);
4266
4279
  }
4267
4280
  .rt-Button:where(.xs\:rt-r-size-3):where(.rt-variant-ghost) {
4268
4281
  gap: var(--component-gap-ghost-3);
4269
4282
  --button-ghost-padding-x: var(--space-3);
4270
4283
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4284
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4271
4285
  }
4272
4286
  .rt-Button:where(.xs\:rt-r-size-4) {
4287
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4273
4288
  gap: var(--component-gap-4);
4274
4289
  font-size: var(--font-size-4);
4275
4290
  line-height: var(--line-height-4);
@@ -4280,17 +4295,19 @@
4280
4295
  height: var(--content-icon-size-4);
4281
4296
  }
4282
4297
  .rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4283
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4284
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4298
+ padding-inline-start: var(--button-padding-inline-base);
4299
+ padding-inline-end: var(--button-padding-inline-base);
4285
4300
  }
4286
4301
  .rt-Button:where(.xs\:rt-r-size-4):where(.rt-variant-ghost) {
4287
4302
  gap: var(--component-gap-ghost-4);
4288
4303
  --button-ghost-padding-x: var(--space-4);
4289
4304
  --button-ghost-padding-y: var(--space-2);
4305
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4290
4306
  }
4291
4307
  }
4292
4308
  @media (min-width: 768px) {
4293
4309
  .rt-Button:where(.sm\:rt-r-size-1) {
4310
+ --button-padding-inline-base: var(--space-2);
4294
4311
  gap: var(--component-gap-1);
4295
4312
  font-size: var(--font-size-1);
4296
4313
  line-height: var(--line-height-1);
@@ -4301,15 +4318,17 @@
4301
4318
  height: var(--content-icon-size-1);
4302
4319
  }
4303
4320
  .rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4304
- padding-left: var(--space-2);
4305
- padding-right: var(--space-2);
4321
+ padding-inline-start: var(--button-padding-inline-base);
4322
+ padding-inline-end: var(--button-padding-inline-base);
4306
4323
  }
4307
4324
  .rt-Button:where(.sm\:rt-r-size-1):where(.rt-variant-ghost) {
4308
4325
  gap: var(--component-gap-ghost-1);
4309
4326
  --button-ghost-padding-x: var(--space-2);
4310
4327
  --button-ghost-padding-y: var(--space-1);
4328
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4311
4329
  }
4312
4330
  .rt-Button:where(.sm\:rt-r-size-2) {
4331
+ --button-padding-inline-base: var(--space-3);
4313
4332
  gap: var(--component-gap-2);
4314
4333
  font-size: var(--font-size-2);
4315
4334
  line-height: var(--line-height-2);
@@ -4320,15 +4339,17 @@
4320
4339
  height: var(--content-icon-size-2);
4321
4340
  }
4322
4341
  .rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4323
- padding-left: var(--space-3);
4324
- padding-right: var(--space-3);
4342
+ padding-inline-start: var(--button-padding-inline-base);
4343
+ padding-inline-end: var(--button-padding-inline-base);
4325
4344
  }
4326
4345
  .rt-Button:where(.sm\:rt-r-size-2):where(.rt-variant-ghost) {
4327
4346
  gap: var(--component-gap-ghost-2);
4328
4347
  --button-ghost-padding-x: var(--space-2);
4329
4348
  --button-ghost-padding-y: var(--space-1);
4349
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4330
4350
  }
4331
4351
  .rt-Button:where(.sm\:rt-r-size-3) {
4352
+ --button-padding-inline-base: var(--space-4);
4332
4353
  gap: var(--component-gap-3);
4333
4354
  font-size: var(--font-size-3);
4334
4355
  line-height: var(--line-height-3);
@@ -4339,15 +4360,17 @@
4339
4360
  height: var(--content-icon-size-3);
4340
4361
  }
4341
4362
  .rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4342
- padding-left: var(--space-4);
4343
- padding-right: var(--space-4);
4363
+ padding-inline-start: var(--button-padding-inline-base);
4364
+ padding-inline-end: var(--button-padding-inline-base);
4344
4365
  }
4345
4366
  .rt-Button:where(.sm\:rt-r-size-3):where(.rt-variant-ghost) {
4346
4367
  gap: var(--component-gap-ghost-3);
4347
4368
  --button-ghost-padding-x: var(--space-3);
4348
4369
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4370
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4349
4371
  }
4350
4372
  .rt-Button:where(.sm\:rt-r-size-4) {
4373
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4351
4374
  gap: var(--component-gap-4);
4352
4375
  font-size: var(--font-size-4);
4353
4376
  line-height: var(--line-height-4);
@@ -4358,17 +4381,19 @@
4358
4381
  height: var(--content-icon-size-4);
4359
4382
  }
4360
4383
  .rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4361
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4362
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4384
+ padding-inline-start: var(--button-padding-inline-base);
4385
+ padding-inline-end: var(--button-padding-inline-base);
4363
4386
  }
4364
4387
  .rt-Button:where(.sm\:rt-r-size-4):where(.rt-variant-ghost) {
4365
4388
  gap: var(--component-gap-ghost-4);
4366
4389
  --button-ghost-padding-x: var(--space-4);
4367
4390
  --button-ghost-padding-y: var(--space-2);
4391
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4368
4392
  }
4369
4393
  }
4370
4394
  @media (min-width: 1024px) {
4371
4395
  .rt-Button:where(.md\:rt-r-size-1) {
4396
+ --button-padding-inline-base: var(--space-2);
4372
4397
  gap: var(--component-gap-1);
4373
4398
  font-size: var(--font-size-1);
4374
4399
  line-height: var(--line-height-1);
@@ -4379,15 +4404,17 @@
4379
4404
  height: var(--content-icon-size-1);
4380
4405
  }
4381
4406
  .rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4382
- padding-left: var(--space-2);
4383
- padding-right: var(--space-2);
4407
+ padding-inline-start: var(--button-padding-inline-base);
4408
+ padding-inline-end: var(--button-padding-inline-base);
4384
4409
  }
4385
4410
  .rt-Button:where(.md\:rt-r-size-1):where(.rt-variant-ghost) {
4386
4411
  gap: var(--component-gap-ghost-1);
4387
4412
  --button-ghost-padding-x: var(--space-2);
4388
4413
  --button-ghost-padding-y: var(--space-1);
4414
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4389
4415
  }
4390
4416
  .rt-Button:where(.md\:rt-r-size-2) {
4417
+ --button-padding-inline-base: var(--space-3);
4391
4418
  gap: var(--component-gap-2);
4392
4419
  font-size: var(--font-size-2);
4393
4420
  line-height: var(--line-height-2);
@@ -4398,15 +4425,17 @@
4398
4425
  height: var(--content-icon-size-2);
4399
4426
  }
4400
4427
  .rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4401
- padding-left: var(--space-3);
4402
- padding-right: var(--space-3);
4428
+ padding-inline-start: var(--button-padding-inline-base);
4429
+ padding-inline-end: var(--button-padding-inline-base);
4403
4430
  }
4404
4431
  .rt-Button:where(.md\:rt-r-size-2):where(.rt-variant-ghost) {
4405
4432
  gap: var(--component-gap-ghost-2);
4406
4433
  --button-ghost-padding-x: var(--space-2);
4407
4434
  --button-ghost-padding-y: var(--space-1);
4435
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4408
4436
  }
4409
4437
  .rt-Button:where(.md\:rt-r-size-3) {
4438
+ --button-padding-inline-base: var(--space-4);
4410
4439
  gap: var(--component-gap-3);
4411
4440
  font-size: var(--font-size-3);
4412
4441
  line-height: var(--line-height-3);
@@ -4417,15 +4446,17 @@
4417
4446
  height: var(--content-icon-size-3);
4418
4447
  }
4419
4448
  .rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4420
- padding-left: var(--space-4);
4421
- padding-right: var(--space-4);
4449
+ padding-inline-start: var(--button-padding-inline-base);
4450
+ padding-inline-end: var(--button-padding-inline-base);
4422
4451
  }
4423
4452
  .rt-Button:where(.md\:rt-r-size-3):where(.rt-variant-ghost) {
4424
4453
  gap: var(--component-gap-ghost-3);
4425
4454
  --button-ghost-padding-x: var(--space-3);
4426
4455
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4456
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4427
4457
  }
4428
4458
  .rt-Button:where(.md\:rt-r-size-4) {
4459
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4429
4460
  gap: var(--component-gap-4);
4430
4461
  font-size: var(--font-size-4);
4431
4462
  line-height: var(--line-height-4);
@@ -4436,17 +4467,19 @@
4436
4467
  height: var(--content-icon-size-4);
4437
4468
  }
4438
4469
  .rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4439
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4440
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4470
+ padding-inline-start: var(--button-padding-inline-base);
4471
+ padding-inline-end: var(--button-padding-inline-base);
4441
4472
  }
4442
4473
  .rt-Button:where(.md\:rt-r-size-4):where(.rt-variant-ghost) {
4443
4474
  gap: var(--component-gap-ghost-4);
4444
4475
  --button-ghost-padding-x: var(--space-4);
4445
4476
  --button-ghost-padding-y: var(--space-2);
4477
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4446
4478
  }
4447
4479
  }
4448
4480
  @media (min-width: 1280px) {
4449
4481
  .rt-Button:where(.lg\:rt-r-size-1) {
4482
+ --button-padding-inline-base: var(--space-2);
4450
4483
  gap: var(--component-gap-1);
4451
4484
  font-size: var(--font-size-1);
4452
4485
  line-height: var(--line-height-1);
@@ -4457,15 +4490,17 @@
4457
4490
  height: var(--content-icon-size-1);
4458
4491
  }
4459
4492
  .rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4460
- padding-left: var(--space-2);
4461
- padding-right: var(--space-2);
4493
+ padding-inline-start: var(--button-padding-inline-base);
4494
+ padding-inline-end: var(--button-padding-inline-base);
4462
4495
  }
4463
4496
  .rt-Button:where(.lg\:rt-r-size-1):where(.rt-variant-ghost) {
4464
4497
  gap: var(--component-gap-ghost-1);
4465
4498
  --button-ghost-padding-x: var(--space-2);
4466
4499
  --button-ghost-padding-y: var(--space-1);
4500
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4467
4501
  }
4468
4502
  .rt-Button:where(.lg\:rt-r-size-2) {
4503
+ --button-padding-inline-base: var(--space-3);
4469
4504
  gap: var(--component-gap-2);
4470
4505
  font-size: var(--font-size-2);
4471
4506
  line-height: var(--line-height-2);
@@ -4476,15 +4511,17 @@
4476
4511
  height: var(--content-icon-size-2);
4477
4512
  }
4478
4513
  .rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4479
- padding-left: var(--space-3);
4480
- padding-right: var(--space-3);
4514
+ padding-inline-start: var(--button-padding-inline-base);
4515
+ padding-inline-end: var(--button-padding-inline-base);
4481
4516
  }
4482
4517
  .rt-Button:where(.lg\:rt-r-size-2):where(.rt-variant-ghost) {
4483
4518
  gap: var(--component-gap-ghost-2);
4484
4519
  --button-ghost-padding-x: var(--space-2);
4485
4520
  --button-ghost-padding-y: var(--space-1);
4521
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4486
4522
  }
4487
4523
  .rt-Button:where(.lg\:rt-r-size-3) {
4524
+ --button-padding-inline-base: var(--space-4);
4488
4525
  gap: var(--component-gap-3);
4489
4526
  font-size: var(--font-size-3);
4490
4527
  line-height: var(--line-height-3);
@@ -4495,15 +4532,17 @@
4495
4532
  height: var(--content-icon-size-3);
4496
4533
  }
4497
4534
  .rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4498
- padding-left: var(--space-4);
4499
- padding-right: var(--space-4);
4535
+ padding-inline-start: var(--button-padding-inline-base);
4536
+ padding-inline-end: var(--button-padding-inline-base);
4500
4537
  }
4501
4538
  .rt-Button:where(.lg\:rt-r-size-3):where(.rt-variant-ghost) {
4502
4539
  gap: var(--component-gap-ghost-3);
4503
4540
  --button-ghost-padding-x: var(--space-3);
4504
4541
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4542
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4505
4543
  }
4506
4544
  .rt-Button:where(.lg\:rt-r-size-4) {
4545
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4507
4546
  gap: var(--component-gap-4);
4508
4547
  font-size: var(--font-size-4);
4509
4548
  line-height: var(--line-height-4);
@@ -4514,17 +4553,19 @@
4514
4553
  height: var(--content-icon-size-4);
4515
4554
  }
4516
4555
  .rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4517
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4518
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4556
+ padding-inline-start: var(--button-padding-inline-base);
4557
+ padding-inline-end: var(--button-padding-inline-base);
4519
4558
  }
4520
4559
  .rt-Button:where(.lg\:rt-r-size-4):where(.rt-variant-ghost) {
4521
4560
  gap: var(--component-gap-ghost-4);
4522
4561
  --button-ghost-padding-x: var(--space-4);
4523
4562
  --button-ghost-padding-y: var(--space-2);
4563
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4524
4564
  }
4525
4565
  }
4526
4566
  @media (min-width: 1640px) {
4527
4567
  .rt-Button:where(.xl\:rt-r-size-1) {
4568
+ --button-padding-inline-base: var(--space-2);
4528
4569
  gap: var(--component-gap-1);
4529
4570
  font-size: var(--font-size-1);
4530
4571
  line-height: var(--line-height-1);
@@ -4535,15 +4576,17 @@
4535
4576
  height: var(--content-icon-size-1);
4536
4577
  }
4537
4578
  .rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
4538
- padding-left: var(--space-2);
4539
- padding-right: var(--space-2);
4579
+ padding-inline-start: var(--button-padding-inline-base);
4580
+ padding-inline-end: var(--button-padding-inline-base);
4540
4581
  }
4541
4582
  .rt-Button:where(.xl\:rt-r-size-1):where(.rt-variant-ghost) {
4542
4583
  gap: var(--component-gap-ghost-1);
4543
4584
  --button-ghost-padding-x: var(--space-2);
4544
4585
  --button-ghost-padding-y: var(--space-1);
4586
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4545
4587
  }
4546
4588
  .rt-Button:where(.xl\:rt-r-size-2) {
4589
+ --button-padding-inline-base: var(--space-3);
4547
4590
  gap: var(--component-gap-2);
4548
4591
  font-size: var(--font-size-2);
4549
4592
  line-height: var(--line-height-2);
@@ -4554,15 +4597,17 @@
4554
4597
  height: var(--content-icon-size-2);
4555
4598
  }
4556
4599
  .rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
4557
- padding-left: var(--space-3);
4558
- padding-right: var(--space-3);
4600
+ padding-inline-start: var(--button-padding-inline-base);
4601
+ padding-inline-end: var(--button-padding-inline-base);
4559
4602
  }
4560
4603
  .rt-Button:where(.xl\:rt-r-size-2):where(.rt-variant-ghost) {
4561
4604
  gap: var(--component-gap-ghost-2);
4562
4605
  --button-ghost-padding-x: var(--space-2);
4563
4606
  --button-ghost-padding-y: var(--space-1);
4607
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4564
4608
  }
4565
4609
  .rt-Button:where(.xl\:rt-r-size-3) {
4610
+ --button-padding-inline-base: var(--space-4);
4566
4611
  gap: var(--component-gap-3);
4567
4612
  font-size: var(--font-size-3);
4568
4613
  line-height: var(--line-height-3);
@@ -4573,15 +4618,17 @@
4573
4618
  height: var(--content-icon-size-3);
4574
4619
  }
4575
4620
  .rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
4576
- padding-left: var(--space-4);
4577
- padding-right: var(--space-4);
4621
+ padding-inline-start: var(--button-padding-inline-base);
4622
+ padding-inline-end: var(--button-padding-inline-base);
4578
4623
  }
4579
4624
  .rt-Button:where(.xl\:rt-r-size-3):where(.rt-variant-ghost) {
4580
4625
  gap: var(--component-gap-ghost-3);
4581
4626
  --button-ghost-padding-x: var(--space-3);
4582
4627
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
4628
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4583
4629
  }
4584
4630
  .rt-Button:where(.xl\:rt-r-size-4) {
4631
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
4585
4632
  gap: var(--component-gap-4);
4586
4633
  font-size: var(--font-size-4);
4587
4634
  line-height: var(--line-height-4);
@@ -4592,17 +4639,20 @@
4592
4639
  height: var(--content-icon-size-4);
4593
4640
  }
4594
4641
  .rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
4595
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
4596
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
4642
+ padding-inline-start: var(--button-padding-inline-base);
4643
+ padding-inline-end: var(--button-padding-inline-base);
4597
4644
  }
4598
4645
  .rt-Button:where(.xl\:rt-r-size-4):where(.rt-variant-ghost) {
4599
4646
  gap: var(--component-gap-ghost-4);
4600
4647
  --button-ghost-padding-x: var(--space-4);
4601
4648
  --button-ghost-padding-y: var(--space-2);
4649
+ --button-padding-inline-base: var(--button-ghost-padding-x);
4602
4650
  }
4603
4651
  }
4604
4652
  .rt-Button {
4605
4653
  font-weight: var(--font-weight-medium);
4654
+ --button-padding-inline-base: var(--space-3);
4655
+ --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-1));
4606
4656
  }
4607
4657
  .rt-CalloutRoot {
4608
4658
  box-sizing: border-box;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kushagradhawan/kookie-ui",
3
- "version": "0.1.62",
3
+ "version": "0.1.63",
4
4
  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive docs",
5
5
  "keywords": [
6
6
  "react",
package/schemas/base-button.json CHANGED
@@ -279,6 +279,6 @@
279
279
  "title": "Base-button Component Props",
280
280
  "description": "Props schema for the base-button component in Kookie UI",
281
281
  "version": "1.0.0",
282
- "generatedAt": "2025-11-14T09:15:53.377Z",
282
+ "generatedAt": "2025-11-17T09:51:58.569Z",
283
283
  "source": "Zod schema"
284
284
  }
package/schemas/button.json CHANGED
@@ -530,6 +530,6 @@
530
530
  "title": "Button Component Props",
531
531
  "description": "Props schema for the button component in Kookie UI",
532
532
  "version": "1.0.0",
533
- "generatedAt": "2025-11-14T09:15:53.382Z",
533
+ "generatedAt": "2025-11-17T09:51:58.574Z",
534
534
  "source": "Zod schema"
535
535
  }
package/schemas/icon-button.json CHANGED
@@ -313,6 +313,6 @@
313
313
  "title": "Icon-button Component Props",
314
314
  "description": "Props schema for the icon-button component in Kookie UI",
315
315
  "version": "1.0.0",
316
- "generatedAt": "2025-11-14T09:15:53.383Z",
316
+ "generatedAt": "2025-11-17T09:51:58.575Z",
317
317
  "source": "Zod schema"
318
318
  }
package/schemas/index.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "title": "Kookie UI Button Components",
4
4
  "description": "Complete JSON Schema collection for all button components in Kookie UI",
5
5
  "version": "1.0.0",
6
- "generatedAt": "2025-11-14T09:15:53.386Z",
6
+ "generatedAt": "2025-11-17T09:51:58.578Z",
7
7
  "source": "Zod schemas",
8
8
  "components": {
9
9
  "base-button": {
@@ -287,7 +287,7 @@
287
287
  "title": "Base-button Component Props",
288
288
  "description": "Props schema for the base-button component in Kookie UI",
289
289
  "version": "1.0.0",
290
- "generatedAt": "2025-11-14T09:15:53.377Z",
290
+ "generatedAt": "2025-11-17T09:51:58.569Z",
291
291
  "source": "Zod schema"
292
292
  },
293
293
  "button": {
@@ -822,7 +822,7 @@
822
822
  "title": "Button Component Props",
823
823
  "description": "Props schema for the button component in Kookie UI",
824
824
  "version": "1.0.0",
825
- "generatedAt": "2025-11-14T09:15:53.382Z",
825
+ "generatedAt": "2025-11-17T09:51:58.574Z",
826
826
  "source": "Zod schema"
827
827
  },
828
828
  "icon-button": {
@@ -1140,7 +1140,7 @@
1140
1140
  "title": "Icon-button Component Props",
1141
1141
  "description": "Props schema for the icon-button component in Kookie UI",
1142
1142
  "version": "1.0.0",
1143
- "generatedAt": "2025-11-14T09:15:53.383Z",
1143
+ "generatedAt": "2025-11-17T09:51:58.575Z",
1144
1144
  "source": "Zod schema"
1145
1145
  },
1146
1146
  "toggle-button": {
@@ -1683,7 +1683,7 @@
1683
1683
  "title": "Toggle-button Component Props",
1684
1684
  "description": "Props schema for the toggle-button component in Kookie UI",
1685
1685
  "version": "1.0.0",
1686
- "generatedAt": "2025-11-14T09:15:53.384Z",
1686
+ "generatedAt": "2025-11-17T09:51:58.577Z",
1687
1687
  "source": "Zod schema"
1688
1688
  },
1689
1689
  "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
2009
2009
  "title": "Toggle-icon-button Component Props",
2010
2010
  "description": "Props schema for the toggle-icon-button component in Kookie UI",
2011
2011
  "version": "1.0.0",
2012
- "generatedAt": "2025-11-14T09:15:53.385Z",
2012
+ "generatedAt": "2025-11-17T09:51:58.577Z",
2013
2013
  "source": "Zod schema"
2014
2014
  }
2015
2015
  }
package/schemas/toggle-button.json CHANGED
@@ -538,6 +538,6 @@
538
538
  "title": "Toggle-button Component Props",
539
539
  "description": "Props schema for the toggle-button component in Kookie UI",
540
540
  "version": "1.0.0",
541
- "generatedAt": "2025-11-14T09:15:53.384Z",
541
+ "generatedAt": "2025-11-17T09:51:58.577Z",
542
542
  "source": "Zod schema"
543
543
  }
package/schemas/toggle-icon-button.json CHANGED
@@ -321,6 +321,6 @@
321
321
  "title": "Toggle-icon-button Component Props",
322
322
  "description": "Props schema for the toggle-icon-button component in Kookie UI",
323
323
  "version": "1.0.0",
324
- "generatedAt": "2025-11-14T09:15:53.385Z",
324
+ "generatedAt": "2025-11-17T09:51:58.577Z",
325
325
  "source": "Zod schema"
326
326
  }
package/src/components/button.css CHANGED
@@ -36,6 +36,9 @@
36
36
  * This creates a more subtle, text-like appearance
37
37
  */
38
38
  .rt-Button {
39
+ --button-padding-inline-base: var(--space-3);
40
+ --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-1));
41
+
39
42
  &:where(.rt-variant-ghost) {
40
43
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
41
44
  }
@@ -48,6 +51,7 @@
48
51
  * Designed for toolbars, dense interfaces, and space-constrained contexts
49
52
  */
50
53
  &:where(.rt-r-size-1) {
54
+ --button-padding-inline-base: var(--space-2);
51
55
  gap: var(--component-gap-1);
52
56
  font-size: var(--font-size-1);
53
57
  line-height: var(--line-height-1);
@@ -68,8 +72,8 @@
68
72
  * Provides adequate touch targets while maintaining compact appearance
69
73
  */
70
74
  &:where(:not(.rt-variant-ghost)) {
71
- padding-left: var(--space-2);
72
- padding-right: var(--space-2);
75
+ padding-inline-start: var(--button-padding-inline-base);
76
+ padding-inline-end: var(--button-padding-inline-base);
73
77
  }
74
78
 
75
79
  /*
@@ -80,6 +84,7 @@
80
84
  gap: var(--component-gap-ghost-1);
81
85
  --button-ghost-padding-x: var(--space-2);
82
86
  --button-ghost-padding-y: var(--space-1);
87
+ --button-padding-inline-base: var(--button-ghost-padding-x);
83
88
  }
84
89
  }
85
90
 
@@ -88,6 +93,7 @@
88
93
  * Default size for most interface contexts and general use
89
94
  */
90
95
  &:where(.rt-r-size-2) {
96
+ --button-padding-inline-base: var(--space-3);
91
97
  gap: var(--component-gap-2);
92
98
  font-size: var(--font-size-2);
93
99
  line-height: var(--line-height-2);
@@ -102,8 +108,8 @@
102
108
 
103
109
  /* Standard padding for non-ghost variants */
104
110
  &:where(:not(.rt-variant-ghost)) {
105
- padding-left: var(--space-3);
106
- padding-right: var(--space-3);
111
+ padding-inline-start: var(--button-padding-inline-base);
112
+ padding-inline-end: var(--button-padding-inline-base);
107
113
  }
108
114
 
109
115
  /* Ghost variant padding for size 2 */
@@ -111,6 +117,7 @@
111
117
  gap: var(--component-gap-ghost-2);
112
118
  --button-ghost-padding-x: var(--space-2);
113
119
  --button-ghost-padding-y: var(--space-1);
120
+ --button-padding-inline-base: var(--button-ghost-padding-x);
114
121
  }
115
122
  }
116
123
 
@@ -119,6 +126,7 @@
119
126
  * Recommended for important actions and mobile touch targets
120
127
  */
121
128
  &:where(.rt-r-size-3) {
129
+ --button-padding-inline-base: var(--space-4);
122
130
  gap: var(--component-gap-3);
123
131
  font-size: var(--font-size-3);
124
132
  line-height: var(--line-height-3);
@@ -133,8 +141,8 @@
133
141
 
134
142
  /* Standard padding for non-ghost variants */
135
143
  &:where(:not(.rt-variant-ghost)) {
136
- padding-left: var(--space-4);
137
- padding-right: var(--space-4);
144
+ padding-inline-start: var(--button-padding-inline-base);
145
+ padding-inline-end: var(--button-padding-inline-base);
138
146
  }
139
147
 
140
148
  /* Ghost variant padding for size 3 */
@@ -142,6 +150,7 @@
142
150
  gap: var(--component-gap-ghost-3);
143
151
  --button-ghost-padding-x: var(--space-3);
144
152
  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
153
+ --button-padding-inline-base: var(--button-ghost-padding-x);
145
154
  }
146
155
  }
147
156
 
@@ -150,6 +159,7 @@
150
159
  * Designed for hero sections and maximum visual impact
151
160
  */
152
161
  &:where(.rt-r-size-4) {
162
+ --button-padding-inline-base: calc(var(--space-4) + (4px * var(--scaling)));
153
163
  gap: var(--component-gap-4);
154
164
  font-size: var(--font-size-4);
155
165
  line-height: var(--line-height-4);
@@ -168,8 +178,8 @@
168
178
  * HACK: This padding calculation adds 4px to the space-4 token for better visual balance at size 4.
169
179
  * This is a temporary workaround and should be replaced with a proper tokenized solution.
170
180
  */
171
- padding-left: calc(var(--space-4) + (4px * var(--scaling)));
172
- padding-right: calc(var(--space-4) + (4px * var(--scaling)));
181
+ padding-inline-start: var(--button-padding-inline-base);
182
+ padding-inline-end: var(--button-padding-inline-base);
173
183
  }
174
184
 
175
185
  /* Ghost variant padding for size 4 */
@@ -177,6 +187,7 @@
177
187
  gap: var(--component-gap-ghost-4);
178
188
  --button-ghost-padding-x: var(--space-4);
179
189
  --button-ghost-padding-y: var(--space-2);
190
+ --button-padding-inline-base: var(--button-ghost-padding-x);
180
191
  }
181
192
  }
182
193
  }
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;