ui-foundations 0.6.0 → 0.7.0

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 (35) hide show
  1. package/LICENSE +73 -0
  2. package/README.md +43 -8
  3. package/dist/macros/ui.njk +33 -0
  4. package/dist/main.css +230 -84
  5. package/dist/react/form.js +111 -0
  6. package/dist/react/index.js +1 -0
  7. package/dist/react/input.js +7 -0
  8. package/dist/react/textarea.js +7 -0
  9. package/dist/tokens/css/appearance-modes.tokens.mode-dark.css +7 -1
  10. package/dist/tokens/css/appearance-modes.tokens.mode-light.css +7 -1
  11. package/dist/tokens/css/components-ui.tokens.css +55 -33
  12. package/dist/tokens/css/core-primitives.tokens.css +1 -1
  13. package/dist/tokens/css/semantics-roles.tokens.css +1 -1
  14. package/dist/tokens/css/themes-brands.tokens.brand-a.css +1 -1
  15. package/dist/tokens/css/themes-brands.tokens.brand-b.css +1 -1
  16. package/dist/tokens/css/themes-brands.tokens.brand-c.css +1 -1
  17. package/dist/tokens/json/appearance-modes.tokens.mode-dark.json +24 -0
  18. package/dist/tokens/json/appearance-modes.tokens.mode-light.json +24 -0
  19. package/dist/tokens/json/components-ui.tokens.json +161 -25
  20. package/dist/tokens/tokens.yaml +509 -67
  21. package/dist/tokens/ts/appearance-modes.tokens.mode-dark.ts +7 -1
  22. package/dist/tokens/ts/appearance-modes.tokens.mode-light.ts +7 -1
  23. package/dist/tokens/ts/components-ui.tokens.ts +55 -33
  24. package/dist/tokens/ts/core-primitives.tokens.ts +1 -1
  25. package/dist/tokens/ts/semantics-roles.tokens.ts +1 -1
  26. package/dist/tokens/ts/themes-brands.tokens.brand-a.ts +1 -1
  27. package/dist/tokens/ts/themes-brands.tokens.brand-b.ts +1 -1
  28. package/dist/tokens/ts/themes-brands.tokens.brand-c.ts +1 -1
  29. package/dist/ui/index.css +1 -0
  30. package/dist/ui/patterns/button.css +3 -3
  31. package/dist/ui/patterns/checkbox.css +28 -28
  32. package/dist/ui/patterns/form.css +112 -0
  33. package/dist/ui/patterns/input.css +12 -12
  34. package/dist/ui/patterns/label.css +1 -1
  35. package/package.json +14 -3
package/dist/tokens/tokens.yaml CHANGED
@@ -1,8 +1,8 @@
1
1
  # Auto-generated design tokens from Figma
2
- # Generated on 2026-05-22T09:23:10.651Z
2
+ # Generated on 2026-06-06T14:29:01.231Z
3
3
 
4
4
  summary:
5
- total: 526
5
+ total: 560
6
6
  tokens:
7
7
  -
8
8
  cssVar: "--breakpoint-100"
@@ -3111,6 +3111,162 @@ tokens:
3111
3111
  scopeId: "light"
3112
3112
  selector: ":root"
3113
3113
  sourceFile: "Appearance (Modes).tokens.json"
3114
+ -
3115
+ cssVar: "--color-text-on-active"
3116
+ name: "color-text-on-active"
3117
+ value: "var(--color-neutral-000)"
3118
+ type: "color"
3119
+ group: "colors"
3120
+ path: "Color/Text/On Active"
3121
+ pathKey: "Color.Text.On Active"
3122
+ scope: "mode:dark"
3123
+ scopeBucket: "mode"
3124
+ scopeId: "dark"
3125
+ selector: ":root[data-mode=\"dark\"]"
3126
+ sourceFile: "Appearance (Modes).tokens.json"
3127
+ -
3128
+ cssVar: "--color-text-on-active"
3129
+ name: "color-text-on-active"
3130
+ value: "var(--color-neutral-000)"
3131
+ type: "color"
3132
+ group: "colors"
3133
+ path: "Color/Text/On Active"
3134
+ pathKey: "Color.Text.On Active"
3135
+ scope: "mode:light"
3136
+ scopeBucket: "mode"
3137
+ scopeId: "light"
3138
+ selector: ":root"
3139
+ sourceFile: "Appearance (Modes).tokens.json"
3140
+ -
3141
+ cssVar: "--color-text-on-brand"
3142
+ name: "color-text-on-brand"
3143
+ value: "var(--color-neutral-000)"
3144
+ type: "color"
3145
+ group: "colors"
3146
+ path: "Color/Text/On Brand"
3147
+ pathKey: "Color.Text.On Brand"
3148
+ scope: "mode:dark"
3149
+ scopeBucket: "mode"
3150
+ scopeId: "dark"
3151
+ selector: ":root[data-mode=\"dark\"]"
3152
+ sourceFile: "Appearance (Modes).tokens.json"
3153
+ -
3154
+ cssVar: "--color-text-on-brand"
3155
+ name: "color-text-on-brand"
3156
+ value: "var(--color-neutral-000)"
3157
+ type: "color"
3158
+ group: "colors"
3159
+ path: "Color/Text/On Brand"
3160
+ pathKey: "Color.Text.On Brand"
3161
+ scope: "mode:light"
3162
+ scopeBucket: "mode"
3163
+ scopeId: "light"
3164
+ selector: ":root"
3165
+ sourceFile: "Appearance (Modes).tokens.json"
3166
+ -
3167
+ cssVar: "--color-text-on-danger"
3168
+ name: "color-text-on-danger"
3169
+ value: "var(--color-neutral-000)"
3170
+ type: "color"
3171
+ group: "colors"
3172
+ path: "Color/Text/On Danger"
3173
+ pathKey: "Color.Text.On Danger"
3174
+ scope: "mode:dark"
3175
+ scopeBucket: "mode"
3176
+ scopeId: "dark"
3177
+ selector: ":root[data-mode=\"dark\"]"
3178
+ sourceFile: "Appearance (Modes).tokens.json"
3179
+ -
3180
+ cssVar: "--color-text-on-danger"
3181
+ name: "color-text-on-danger"
3182
+ value: "var(--color-neutral-000)"
3183
+ type: "color"
3184
+ group: "colors"
3185
+ path: "Color/Text/On Danger"
3186
+ pathKey: "Color.Text.On Danger"
3187
+ scope: "mode:light"
3188
+ scopeBucket: "mode"
3189
+ scopeId: "light"
3190
+ selector: ":root"
3191
+ sourceFile: "Appearance (Modes).tokens.json"
3192
+ -
3193
+ cssVar: "--color-text-on-disabled"
3194
+ name: "color-text-on-disabled"
3195
+ value: "var(--color-neutral-800)"
3196
+ type: "color"
3197
+ group: "colors"
3198
+ path: "Color/Text/On Disabled"
3199
+ pathKey: "Color.Text.On Disabled"
3200
+ scope: "mode:dark"
3201
+ scopeBucket: "mode"
3202
+ scopeId: "dark"
3203
+ selector: ":root[data-mode=\"dark\"]"
3204
+ sourceFile: "Appearance (Modes).tokens.json"
3205
+ -
3206
+ cssVar: "--color-text-on-disabled"
3207
+ name: "color-text-on-disabled"
3208
+ value: "var(--color-neutral-800)"
3209
+ type: "color"
3210
+ group: "colors"
3211
+ path: "Color/Text/On Disabled"
3212
+ pathKey: "Color.Text.On Disabled"
3213
+ scope: "mode:light"
3214
+ scopeBucket: "mode"
3215
+ scopeId: "light"
3216
+ selector: ":root"
3217
+ sourceFile: "Appearance (Modes).tokens.json"
3218
+ -
3219
+ cssVar: "--color-text-on-subtle"
3220
+ name: "color-text-on-subtle"
3221
+ value: "var(--brand-color-primary-dark)"
3222
+ type: "color"
3223
+ group: "colors"
3224
+ path: "Color/Text/On Subtle"
3225
+ pathKey: "Color.Text.On Subtle"
3226
+ scope: "mode:dark"
3227
+ scopeBucket: "mode"
3228
+ scopeId: "dark"
3229
+ selector: ":root[data-mode=\"dark\"]"
3230
+ sourceFile: "Appearance (Modes).tokens.json"
3231
+ -
3232
+ cssVar: "--color-text-on-subtle"
3233
+ name: "color-text-on-subtle"
3234
+ value: "var(--brand-color-primary)"
3235
+ type: "color"
3236
+ group: "colors"
3237
+ path: "Color/Text/On Subtle"
3238
+ pathKey: "Color.Text.On Subtle"
3239
+ scope: "mode:light"
3240
+ scopeBucket: "mode"
3241
+ scopeId: "light"
3242
+ selector: ":root"
3243
+ sourceFile: "Appearance (Modes).tokens.json"
3244
+ -
3245
+ cssVar: "--color-text-on-success"
3246
+ name: "color-text-on-success"
3247
+ value: "var(--color-neutral-000)"
3248
+ type: "color"
3249
+ group: "colors"
3250
+ path: "Color/Text/On Success"
3251
+ pathKey: "Color.Text.On Success"
3252
+ scope: "mode:dark"
3253
+ scopeBucket: "mode"
3254
+ scopeId: "dark"
3255
+ selector: ":root[data-mode=\"dark\"]"
3256
+ sourceFile: "Appearance (Modes).tokens.json"
3257
+ -
3258
+ cssVar: "--color-text-on-success"
3259
+ name: "color-text-on-success"
3260
+ value: "var(--color-neutral-000)"
3261
+ type: "color"
3262
+ group: "colors"
3263
+ path: "Color/Text/On Success"
3264
+ pathKey: "Color.Text.On Success"
3265
+ scope: "mode:light"
3266
+ scopeBucket: "mode"
3267
+ scopeId: "light"
3268
+ selector: ":root"
3269
+ sourceFile: "Appearance (Modes).tokens.json"
3114
3270
  -
3115
3271
  cssVar: "--color-text-strong"
3116
3272
  name: "color-text-strong"
@@ -3205,7 +3361,7 @@ tokens:
3205
3361
  -
3206
3362
  cssVar: "--badge-border-radius"
3207
3363
  name: "badge-border-radius"
3208
- value: "var(--brand-corner-input)"
3364
+ value: "var(--size-radius-full)"
3209
3365
  type: "number"
3210
3366
  group: "components"
3211
3367
  path: "Badge/Border Radius"
@@ -3257,7 +3413,7 @@ tokens:
3257
3413
  -
3258
3414
  cssVar: "--badge-brand-text-color"
3259
3415
  name: "badge-brand-text-color"
3260
- value: "var(--color-text-inverse)"
3416
+ value: "var(--color-text-on-brand)"
3261
3417
  type: "color"
3262
3418
  group: "components"
3263
3419
  path: "Badge/Brand/Text Color"
@@ -3296,7 +3452,7 @@ tokens:
3296
3452
  -
3297
3453
  cssVar: "--badge-danger-text-color"
3298
3454
  name: "badge-danger-text-color"
3299
- value: "var(--color-text-inverse)"
3455
+ value: "var(--color-text-on-danger)"
3300
3456
  type: "color"
3301
3457
  group: "components"
3302
3458
  path: "Badge/Danger/Text Color"
@@ -3359,13 +3515,26 @@ tokens:
3359
3515
  selector: ":root"
3360
3516
  sourceFile: "Components (UI).tokens.json"
3361
3517
  -
3362
- cssVar: "--badge-font-size"
3363
- name: "badge-font-size"
3364
- value: "var(--typography-label-font-size)"
3518
+ cssVar: "--badge-font-size-md"
3519
+ name: "badge-font-size-md"
3520
+ value: ".875rem"
3365
3521
  type: "number"
3366
3522
  group: "components"
3367
- path: "Badge/Font Size"
3368
- pathKey: "Badge.Font Size"
3523
+ path: "Badge/font-size/md"
3524
+ pathKey: "Badge.font-size.md"
3525
+ scope: "global:components-ui"
3526
+ scopeBucket: "global"
3527
+ scopeId: "components-ui"
3528
+ selector: ":root"
3529
+ sourceFile: "Components (UI).tokens.json"
3530
+ -
3531
+ cssVar: "--badge-font-size-sm"
3532
+ name: "badge-font-size-sm"
3533
+ value: ".75rem"
3534
+ type: "number"
3535
+ group: "components"
3536
+ path: "Badge/font-size/sm"
3537
+ pathKey: "Badge.font-size.sm"
3369
3538
  scope: "global:components-ui"
3370
3539
  scopeBucket: "global"
3371
3540
  scopeId: "components-ui"
@@ -3387,7 +3556,7 @@ tokens:
3387
3556
  -
3388
3557
  cssVar: "--badge-gap"
3389
3558
  name: "badge-gap"
3390
- value: "var(--size-spacing-200)"
3559
+ value: "var(--size-spacing-100)"
3391
3560
  type: "number"
3392
3561
  group: "components"
3393
3562
  path: "Badge/Gap"
@@ -3411,39 +3580,52 @@ tokens:
3411
3580
  selector: ":root"
3412
3581
  sourceFile: "Components (UI).tokens.json"
3413
3582
  -
3414
- cssVar: "--badge-line-height"
3415
- name: "badge-line-height"
3416
- value: "var(--typography-label-line-height)"
3583
+ cssVar: "--badge-line-height-md"
3584
+ name: "badge-line-height-md"
3585
+ value: "1.25rem"
3417
3586
  type: "number"
3418
3587
  group: "components"
3419
- path: "Badge/Line Height"
3420
- pathKey: "Badge.Line Height"
3588
+ path: "Badge/line-height/md"
3589
+ pathKey: "Badge.line-height.md"
3421
3590
  scope: "global:components-ui"
3422
3591
  scopeBucket: "global"
3423
3592
  scopeId: "components-ui"
3424
3593
  selector: ":root"
3425
3594
  sourceFile: "Components (UI).tokens.json"
3426
3595
  -
3427
- cssVar: "--badge-padding-block"
3428
- name: "badge-padding-block"
3429
- value: "var(--size-spacing-200)"
3596
+ cssVar: "--badge-line-height-sm"
3597
+ name: "badge-line-height-sm"
3598
+ value: "1rem"
3430
3599
  type: "number"
3431
3600
  group: "components"
3432
- path: "Badge/Padding Block"
3433
- pathKey: "Badge.Padding Block"
3601
+ path: "Badge/line-height/sm"
3602
+ pathKey: "Badge.line-height.sm"
3434
3603
  scope: "global:components-ui"
3435
3604
  scopeBucket: "global"
3436
3605
  scopeId: "components-ui"
3437
3606
  selector: ":root"
3438
3607
  sourceFile: "Components (UI).tokens.json"
3439
3608
  -
3440
- cssVar: "--badge-padding-inline"
3441
- name: "badge-padding-inline"
3442
- value: "var(--size-spacing-400)"
3609
+ cssVar: "--badge-padding-block-md"
3610
+ name: "badge-padding-block-md"
3611
+ value: "var(--size-spacing-100)"
3612
+ type: "number"
3613
+ group: "components"
3614
+ path: "Badge/Padding Block Md"
3615
+ pathKey: "Badge.Padding Block Md"
3616
+ scope: "global:components-ui"
3617
+ scopeBucket: "global"
3618
+ scopeId: "components-ui"
3619
+ selector: ":root"
3620
+ sourceFile: "Components (UI).tokens.json"
3621
+ -
3622
+ cssVar: "--badge-padding-block-sm"
3623
+ name: "badge-padding-block-sm"
3624
+ value: ".125rem"
3443
3625
  type: "number"
3444
3626
  group: "components"
3445
- path: "Badge/Padding Inline"
3446
- pathKey: "Badge.Padding Inline"
3627
+ path: "Badge/padding-block/sm"
3628
+ pathKey: "Badge.padding-block.sm"
3447
3629
  scope: "global:components-ui"
3448
3630
  scopeBucket: "global"
3449
3631
  scopeId: "components-ui"
@@ -3462,6 +3644,32 @@ tokens:
3462
3644
  scopeId: "components-ui"
3463
3645
  selector: ":root"
3464
3646
  sourceFile: "Components (UI).tokens.json"
3647
+ -
3648
+ cssVar: "--badge-padding-inline-md"
3649
+ name: "badge-padding-inline-md"
3650
+ value: "var(--size-spacing-300)"
3651
+ type: "number"
3652
+ group: "components"
3653
+ path: "Badge/Padding Inline Md"
3654
+ pathKey: "Badge.Padding Inline Md"
3655
+ scope: "global:components-ui"
3656
+ scopeBucket: "global"
3657
+ scopeId: "components-ui"
3658
+ selector: ":root"
3659
+ sourceFile: "Components (UI).tokens.json"
3660
+ -
3661
+ cssVar: "--badge-padding-inline-sm"
3662
+ name: "badge-padding-inline-sm"
3663
+ value: ".5rem"
3664
+ type: "number"
3665
+ group: "components"
3666
+ path: "Badge/padding-inline/sm"
3667
+ pathKey: "Badge.padding-inline.sm"
3668
+ scope: "global:components-ui"
3669
+ scopeBucket: "global"
3670
+ scopeId: "components-ui"
3671
+ selector: ":root"
3672
+ sourceFile: "Components (UI).tokens.json"
3465
3673
  -
3466
3674
  cssVar: "--badge-success-border-color"
3467
3675
  name: "badge-success-border-color"
@@ -3491,7 +3699,7 @@ tokens:
3491
3699
  -
3492
3700
  cssVar: "--badge-success-text-color"
3493
3701
  name: "badge-success-text-color"
3494
- value: "var(--color-text-inverse)"
3702
+ value: "var(--color-text-on-success)"
3495
3703
  type: "color"
3496
3704
  group: "components"
3497
3705
  path: "Badge/Success/Text Color"
@@ -4141,7 +4349,7 @@ tokens:
4141
4349
  -
4142
4350
  cssVar: "--button-solid-text-color-active"
4143
4351
  name: "button-solid-text-color-active"
4144
- value: "var(--color-text-inverse)"
4352
+ value: "var(--color-text-on-brand)"
4145
4353
  type: "color"
4146
4354
  group: "components"
4147
4355
  path: "Button/Solid/Text Color Active"
@@ -4154,7 +4362,7 @@ tokens:
4154
4362
  -
4155
4363
  cssVar: "--button-solid-text-color-default"
4156
4364
  name: "button-solid-text-color-default"
4157
- value: "var(--color-text-inverse)"
4365
+ value: "var(--color-text-on-brand)"
4158
4366
  type: "color"
4159
4367
  group: "components"
4160
4368
  path: "Button/Solid/Text Color Default"
@@ -4167,7 +4375,7 @@ tokens:
4167
4375
  -
4168
4376
  cssVar: "--button-solid-text-color-hover"
4169
4377
  name: "button-solid-text-color-hover"
4170
- value: "var(--color-text-inverse)"
4378
+ value: "var(--color-text-on-brand)"
4171
4379
  type: "color"
4172
4380
  group: "components"
4173
4381
  path: "Button/Solid/Text Color Hover"
@@ -4258,7 +4466,7 @@ tokens:
4258
4466
  -
4259
4467
  cssVar: "--checkbox-border-color-hover"
4260
4468
  name: "checkbox-border-color-hover"
4261
- value: "var(--color-border-strong)"
4469
+ value: "var(--color-border-brand)"
4262
4470
  type: "color"
4263
4471
  group: "components"
4264
4472
  path: "Checkbox/Border/Color Hover"
@@ -4401,7 +4609,7 @@ tokens:
4401
4609
  -
4402
4610
  cssVar: "--checkbox-text-color-active"
4403
4611
  name: "checkbox-text-color-active"
4404
- value: "var(--color-text-inverse)"
4612
+ value: "var(--color-text-on-brand)"
4405
4613
  type: "color"
4406
4614
  group: "components"
4407
4615
  path: "Checkbox/Text Color Active"
@@ -4440,7 +4648,7 @@ tokens:
4440
4648
  -
4441
4649
  cssVar: "--checkbox-text-color-hover"
4442
4650
  name: "checkbox-text-color-hover"
4443
- value: "var(--color-text-strong)"
4651
+ value: "var(--color-text-brand)"
4444
4652
  type: "color"
4445
4653
  group: "components"
4446
4654
  path: "Checkbox/Text Color Hover"
@@ -4607,8 +4815,8 @@ tokens:
4607
4815
  selector: ":root"
4608
4816
  sourceFile: "Components (UI).tokens.json"
4609
4817
  -
4610
- cssVar: "--input-border-border-color-active"
4611
- name: "input-border-border-color-active"
4818
+ cssVar: "--input-border-color-active"
4819
+ name: "input-border-color-active"
4612
4820
  value: "var(--color-border-brand)"
4613
4821
  type: "color"
4614
4822
  group: "components"
@@ -4620,8 +4828,8 @@ tokens:
4620
4828
  selector: ":root"
4621
4829
  sourceFile: "Components (UI).tokens.json"
4622
4830
  -
4623
- cssVar: "--input-border-border-color-default"
4624
- name: "input-border-border-color-default"
4831
+ cssVar: "--input-border-color-default"
4832
+ name: "input-border-color-default"
4625
4833
  value: "var(--color-border-default)"
4626
4834
  type: "color"
4627
4835
  group: "components"
@@ -4633,8 +4841,8 @@ tokens:
4633
4841
  selector: ":root"
4634
4842
  sourceFile: "Components (UI).tokens.json"
4635
4843
  -
4636
- cssVar: "--input-border-border-color-disabled"
4637
- name: "input-border-border-color-disabled"
4844
+ cssVar: "--input-border-color-disabled"
4845
+ name: "input-border-color-disabled"
4638
4846
  value: "var(--color-border-disabled)"
4639
4847
  type: "color"
4640
4848
  group: "components"
@@ -4646,8 +4854,8 @@ tokens:
4646
4854
  selector: ":root"
4647
4855
  sourceFile: "Components (UI).tokens.json"
4648
4856
  -
4649
- cssVar: "--input-border-border-color-focus"
4650
- name: "input-border-border-color-focus"
4857
+ cssVar: "--input-border-color-focus"
4858
+ name: "input-border-color-focus"
4651
4859
  value: "var(--color-border-brand)"
4652
4860
  type: "color"
4653
4861
  group: "components"
@@ -4659,8 +4867,8 @@ tokens:
4659
4867
  selector: ":root"
4660
4868
  sourceFile: "Components (UI).tokens.json"
4661
4869
  -
4662
- cssVar: "--input-border-border-color-hover"
4663
- name: "input-border-border-color-hover"
4870
+ cssVar: "--input-border-color-hover"
4871
+ name: "input-border-color-hover"
4664
4872
  value: "var(--color-border-brand)"
4665
4873
  type: "color"
4666
4874
  group: "components"
@@ -4672,8 +4880,8 @@ tokens:
4672
4880
  selector: ":root"
4673
4881
  sourceFile: "Components (UI).tokens.json"
4674
4882
  -
4675
- cssVar: "--input-border-border-color-invalid"
4676
- name: "input-border-border-color-invalid"
4883
+ cssVar: "--input-border-color-invalid"
4884
+ name: "input-border-color-invalid"
4677
4885
  value: "var(--color-border-danger)"
4678
4886
  type: "color"
4679
4887
  group: "components"
@@ -4685,8 +4893,8 @@ tokens:
4685
4893
  selector: ":root"
4686
4894
  sourceFile: "Components (UI).tokens.json"
4687
4895
  -
4688
- cssVar: "--input-border-border-color-valid"
4689
- name: "input-border-border-color-valid"
4896
+ cssVar: "--input-border-color-valid"
4897
+ name: "input-border-color-valid"
4690
4898
  value: "var(--color-border-strong)"
4691
4899
  type: "color"
4692
4900
  group: "components"
@@ -4698,8 +4906,8 @@ tokens:
4698
4906
  selector: ":root"
4699
4907
  sourceFile: "Components (UI).tokens.json"
4700
4908
  -
4701
- cssVar: "--input-border-border-radius"
4702
- name: "input-border-border-radius"
4909
+ cssVar: "--input-border-radius"
4910
+ name: "input-border-radius"
4703
4911
  value: "var(--brand-corner-input)"
4704
4912
  type: "number"
4705
4913
  group: "components"
@@ -4711,8 +4919,8 @@ tokens:
4711
4919
  selector: ":root"
4712
4920
  sourceFile: "Components (UI).tokens.json"
4713
4921
  -
4714
- cssVar: "--input-border-border-size-active"
4715
- name: "input-border-border-size-active"
4922
+ cssVar: "--input-border-size-active"
4923
+ name: "input-border-size-active"
4716
4924
  value: "var(--size-border-200)"
4717
4925
  type: "number"
4718
4926
  group: "components"
@@ -4724,8 +4932,8 @@ tokens:
4724
4932
  selector: ":root"
4725
4933
  sourceFile: "Components (UI).tokens.json"
4726
4934
  -
4727
- cssVar: "--input-border-border-size-default"
4728
- name: "input-border-border-size-default"
4935
+ cssVar: "--input-border-size-default"
4936
+ name: "input-border-size-default"
4729
4937
  value: "var(--size-border-100)"
4730
4938
  type: "number"
4731
4939
  group: "components"
@@ -4737,8 +4945,8 @@ tokens:
4737
4945
  selector: ":root"
4738
4946
  sourceFile: "Components (UI).tokens.json"
4739
4947
  -
4740
- cssVar: "--input-border-border-size-hover"
4741
- name: "input-border-border-size-hover"
4948
+ cssVar: "--input-border-size-hover"
4949
+ name: "input-border-size-hover"
4742
4950
  value: "var(--size-border-100)"
4743
4951
  type: "number"
4744
4952
  group: "components"
@@ -5009,10 +5217,23 @@ tokens:
5009
5217
  scopeId: "components-ui"
5010
5218
  selector: ":root"
5011
5219
  sourceFile: "Components (UI).tokens.json"
5220
+ -
5221
+ cssVar: "--input-radio-border-color-focus"
5222
+ name: "input-radio-border-color-focus"
5223
+ value: "var(--color-border-brand)"
5224
+ type: "color"
5225
+ group: "components"
5226
+ path: "Input/radio/border-color/focus"
5227
+ pathKey: "Input.radio.border-color.focus"
5228
+ scope: "global:components-ui"
5229
+ scopeBucket: "global"
5230
+ scopeId: "components-ui"
5231
+ selector: ":root"
5232
+ sourceFile: "Components (UI).tokens.json"
5012
5233
  -
5013
5234
  cssVar: "--input-radio-border-color-hover"
5014
5235
  name: "input-radio-border-color-hover"
5015
- value: "var(--color-border-strong)"
5236
+ value: "var(--color-border-brand)"
5016
5237
  type: "color"
5017
5238
  group: "components"
5018
5239
  path: "Radio/Border/Color Hover"
@@ -5048,6 +5269,32 @@ tokens:
5048
5269
  scopeId: "components-ui"
5049
5270
  selector: ":root"
5050
5271
  sourceFile: "Components (UI).tokens.json"
5272
+ -
5273
+ cssVar: "--input-radio-container-background-hover"
5274
+ name: "input-radio-container-background-hover"
5275
+ value: "var(--color-fill-surface)"
5276
+ type: "color"
5277
+ group: "components"
5278
+ path: "Input/radio/container-background/hover"
5279
+ pathKey: "Input.radio.container-background.hover"
5280
+ scope: "global:components-ui"
5281
+ scopeBucket: "global"
5282
+ scopeId: "components-ui"
5283
+ selector: ":root"
5284
+ sourceFile: "Components (UI).tokens.json"
5285
+ -
5286
+ cssVar: "--input-radio-text-color-active"
5287
+ name: "input-radio-text-color-active"
5288
+ value: "var(--color-text-default)"
5289
+ type: "color"
5290
+ group: "components"
5291
+ path: "Input/radio/text-color/active"
5292
+ pathKey: "Input.radio.text-color.active"
5293
+ scope: "global:components-ui"
5294
+ scopeBucket: "global"
5295
+ scopeId: "components-ui"
5296
+ selector: ":root"
5297
+ sourceFile: "Components (UI).tokens.json"
5051
5298
  -
5052
5299
  cssVar: "--input-radio-text-color-default"
5053
5300
  name: "input-radio-text-color-default"
@@ -5075,8 +5322,21 @@ tokens:
5075
5322
  selector: ":root"
5076
5323
  sourceFile: "Components (UI).tokens.json"
5077
5324
  -
5078
- cssVar: "--input-text-text-color-active"
5079
- name: "input-text-text-color-active"
5325
+ cssVar: "--input-radio-text-color-hover"
5326
+ name: "input-radio-text-color-hover"
5327
+ value: "var(--color-text-strong)"
5328
+ type: "color"
5329
+ group: "components"
5330
+ path: "Input/radio/text-color/hover"
5331
+ pathKey: "Input.radio.text-color.hover"
5332
+ scope: "global:components-ui"
5333
+ scopeBucket: "global"
5334
+ scopeId: "components-ui"
5335
+ selector: ":root"
5336
+ sourceFile: "Components (UI).tokens.json"
5337
+ -
5338
+ cssVar: "--input-text-color-active"
5339
+ name: "input-text-color-active"
5080
5340
  value: "var(--color-text-default)"
5081
5341
  type: "color"
5082
5342
  group: "components"
@@ -5088,8 +5348,8 @@ tokens:
5088
5348
  selector: ":root"
5089
5349
  sourceFile: "Components (UI).tokens.json"
5090
5350
  -
5091
- cssVar: "--input-text-text-color-default"
5092
- name: "input-text-text-color-default"
5351
+ cssVar: "--input-text-color-default"
5352
+ name: "input-text-color-default"
5093
5353
  value: "var(--color-text-default)"
5094
5354
  type: "color"
5095
5355
  group: "components"
@@ -5101,8 +5361,8 @@ tokens:
5101
5361
  selector: ":root"
5102
5362
  sourceFile: "Components (UI).tokens.json"
5103
5363
  -
5104
- cssVar: "--input-text-text-color-disabled"
5105
- name: "input-text-text-color-disabled"
5364
+ cssVar: "--input-text-color-disabled"
5365
+ name: "input-text-color-disabled"
5106
5366
  value: "var(--color-text-disabled)"
5107
5367
  type: "color"
5108
5368
  group: "components"
@@ -5114,9 +5374,9 @@ tokens:
5114
5374
  selector: ":root"
5115
5375
  sourceFile: "Components (UI).tokens.json"
5116
5376
  -
5117
- cssVar: "--input-text-text-color-hover"
5118
- name: "input-text-text-color-hover"
5119
- value: "var(--color-text-default)"
5377
+ cssVar: "--input-text-color-hover"
5378
+ name: "input-text-color-hover"
5379
+ value: "var(--color-text-brand)"
5120
5380
  type: "color"
5121
5381
  group: "components"
5122
5382
  path: "Input/Text/Text Color Hover"
@@ -5127,8 +5387,8 @@ tokens:
5127
5387
  selector: ":root"
5128
5388
  sourceFile: "Components (UI).tokens.json"
5129
5389
  -
5130
- cssVar: "--input-text-text-color-placeholder"
5131
- name: "input-text-text-color-placeholder"
5390
+ cssVar: "--input-text-color-placeholder"
5391
+ name: "input-text-color-placeholder"
5132
5392
  value: "var(--color-text-subtle)"
5133
5393
  type: "color"
5134
5394
  group: "components"
@@ -5347,6 +5607,188 @@ tokens:
5347
5607
  scopeId: "core-primitives"
5348
5608
  selector: ":root"
5349
5609
  sourceFile: "Core (Primitives).tokens.json"
5610
+ -
5611
+ cssVar: "--switch-text-color-default"
5612
+ name: "switch-text-color-default"
5613
+ value: "var(--color-text-default)"
5614
+ type: "color"
5615
+ group: "components"
5616
+ path: "Switch/text-color/default"
5617
+ pathKey: "Switch.text-color.default"
5618
+ scope: "global:components-ui"
5619
+ scopeBucket: "global"
5620
+ scopeId: "components-ui"
5621
+ selector: ":root"
5622
+ sourceFile: "Components (UI).tokens.json"
5623
+ -
5624
+ cssVar: "--switch-text-color-disabled"
5625
+ name: "switch-text-color-disabled"
5626
+ value: "var(--color-text-disabled)"
5627
+ type: "color"
5628
+ group: "components"
5629
+ path: "Switch/text-color/disabled"
5630
+ pathKey: "Switch.text-color.disabled"
5631
+ scope: "global:components-ui"
5632
+ scopeBucket: "global"
5633
+ scopeId: "components-ui"
5634
+ selector: ":root"
5635
+ sourceFile: "Components (UI).tokens.json"
5636
+ -
5637
+ cssVar: "--switch-thumb-background-active"
5638
+ name: "switch-thumb-background-active"
5639
+ value: "var(--color-fill-surface)"
5640
+ type: "color"
5641
+ group: "components"
5642
+ path: "Switch/thumb/background/active"
5643
+ pathKey: "Switch.thumb.background.active"
5644
+ scope: "global:components-ui"
5645
+ scopeBucket: "global"
5646
+ scopeId: "components-ui"
5647
+ selector: ":root"
5648
+ sourceFile: "Components (UI).tokens.json"
5649
+ -
5650
+ cssVar: "--switch-thumb-background-default"
5651
+ name: "switch-thumb-background-default"
5652
+ value: "var(--color-border-default)"
5653
+ type: "color"
5654
+ group: "components"
5655
+ path: "Switch/thumb/background/default"
5656
+ pathKey: "Switch.thumb.background.default"
5657
+ scope: "global:components-ui"
5658
+ scopeBucket: "global"
5659
+ scopeId: "components-ui"
5660
+ selector: ":root"
5661
+ sourceFile: "Components (UI).tokens.json"
5662
+ -
5663
+ cssVar: "--switch-thumb-background-disabled"
5664
+ name: "switch-thumb-background-disabled"
5665
+ value: "var(--color-fill-surface)"
5666
+ type: "color"
5667
+ group: "components"
5668
+ path: "Switch/thumb/background/disabled"
5669
+ pathKey: "Switch.thumb.background.disabled"
5670
+ scope: "global:components-ui"
5671
+ scopeBucket: "global"
5672
+ scopeId: "components-ui"
5673
+ selector: ":root"
5674
+ sourceFile: "Components (UI).tokens.json"
5675
+ -
5676
+ cssVar: "--switch-thumb-background-hover"
5677
+ name: "switch-thumb-background-hover"
5678
+ value: "var(--color-border-brand)"
5679
+ type: "color"
5680
+ group: "components"
5681
+ path: "Switch/thumb/background/hover"
5682
+ pathKey: "Switch.thumb.background.hover"
5683
+ scope: "global:components-ui"
5684
+ scopeBucket: "global"
5685
+ scopeId: "components-ui"
5686
+ selector: ":root"
5687
+ sourceFile: "Components (UI).tokens.json"
5688
+ -
5689
+ cssVar: "--switch-track-background-active"
5690
+ name: "switch-track-background-active"
5691
+ value: "var(--color-fill-brand)"
5692
+ type: "color"
5693
+ group: "components"
5694
+ path: "Switch/track/background/active"
5695
+ pathKey: "Switch.track.background.active"
5696
+ scope: "global:components-ui"
5697
+ scopeBucket: "global"
5698
+ scopeId: "components-ui"
5699
+ selector: ":root"
5700
+ sourceFile: "Components (UI).tokens.json"
5701
+ -
5702
+ cssVar: "--switch-track-background-default"
5703
+ name: "switch-track-background-default"
5704
+ value: "var(--color-fill-surface)"
5705
+ type: "color"
5706
+ group: "components"
5707
+ path: "Switch/track/background/default"
5708
+ pathKey: "Switch.track.background.default"
5709
+ scope: "global:components-ui"
5710
+ scopeBucket: "global"
5711
+ scopeId: "components-ui"
5712
+ selector: ":root"
5713
+ sourceFile: "Components (UI).tokens.json"
5714
+ -
5715
+ cssVar: "--switch-track-background-disabled"
5716
+ name: "switch-track-background-disabled"
5717
+ value: "var(--color-fill-disabled)"
5718
+ type: "color"
5719
+ group: "components"
5720
+ path: "Switch/track/background/disabled"
5721
+ pathKey: "Switch.track.background.disabled"
5722
+ scope: "global:components-ui"
5723
+ scopeBucket: "global"
5724
+ scopeId: "components-ui"
5725
+ selector: ":root"
5726
+ sourceFile: "Components (UI).tokens.json"
5727
+ -
5728
+ cssVar: "--switch-track-background-hover"
5729
+ name: "switch-track-background-hover"
5730
+ value: "var(--color-fill-surface)"
5731
+ type: "color"
5732
+ group: "components"
5733
+ path: "Switch/track/background/hover"
5734
+ pathKey: "Switch.track.background.hover"
5735
+ scope: "global:components-ui"
5736
+ scopeBucket: "global"
5737
+ scopeId: "components-ui"
5738
+ selector: ":root"
5739
+ sourceFile: "Components (UI).tokens.json"
5740
+ -
5741
+ cssVar: "--switch-track-border-color-active"
5742
+ name: "switch-track-border-color-active"
5743
+ value: "var(--color-border-brand)"
5744
+ type: "color"
5745
+ group: "components"
5746
+ path: "Switch/track/border-color/active"
5747
+ pathKey: "Switch.track.border-color.active"
5748
+ scope: "global:components-ui"
5749
+ scopeBucket: "global"
5750
+ scopeId: "components-ui"
5751
+ selector: ":root"
5752
+ sourceFile: "Components (UI).tokens.json"
5753
+ -
5754
+ cssVar: "--switch-track-border-color-default"
5755
+ name: "switch-track-border-color-default"
5756
+ value: "var(--color-border-default)"
5757
+ type: "color"
5758
+ group: "components"
5759
+ path: "Switch/track/border-color/default"
5760
+ pathKey: "Switch.track.border-color.default"
5761
+ scope: "global:components-ui"
5762
+ scopeBucket: "global"
5763
+ scopeId: "components-ui"
5764
+ selector: ":root"
5765
+ sourceFile: "Components (UI).tokens.json"
5766
+ -
5767
+ cssVar: "--switch-track-border-color-disabled"
5768
+ name: "switch-track-border-color-disabled"
5769
+ value: "var(--color-border-disabled)"
5770
+ type: "color"
5771
+ group: "components"
5772
+ path: "Switch/track/border-color/disabled"
5773
+ pathKey: "Switch.track.border-color.disabled"
5774
+ scope: "global:components-ui"
5775
+ scopeBucket: "global"
5776
+ scopeId: "components-ui"
5777
+ selector: ":root"
5778
+ sourceFile: "Components (UI).tokens.json"
5779
+ -
5780
+ cssVar: "--switch-track-border-color-hover"
5781
+ name: "switch-track-border-color-hover"
5782
+ value: "var(--color-border-brand)"
5783
+ type: "color"
5784
+ group: "components"
5785
+ path: "Switch/track/border-color/hover"
5786
+ pathKey: "Switch.track.border-color.hover"
5787
+ scope: "global:components-ui"
5788
+ scopeBucket: "global"
5789
+ scopeId: "components-ui"
5790
+ selector: ":root"
5791
+ sourceFile: "Components (UI).tokens.json"
5350
5792
  -
5351
5793
  cssVar: "--zindex-base"
5352
5794
  name: "zindex-base"