@hashicorp/design-system-tokens 2.2.1 → 2.2.2

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.
@@ -3860,87 +3860,87 @@
3860
3860
  ]
3861
3861
  },
3862
3862
  {
3863
- "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
3863
+ "value": "inset 0px 1px 2px 1px #656a761a",
3864
3864
  "original": {
3865
- "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
3865
+ "value": "{elevation.inset.box-shadow-01.value}"
3866
3866
  },
3867
- "name": "token-elevation-high-box-shadow",
3867
+ "name": "token-elevation-inset-box-shadow",
3868
3868
  "attributes": {
3869
3869
  "category": "elevation",
3870
- "type": "high",
3870
+ "type": "inset",
3871
3871
  "item": "box-shadow"
3872
3872
  },
3873
3873
  "path": [
3874
3874
  "elevation",
3875
- "high",
3875
+ "inset",
3876
3876
  "box-shadow"
3877
3877
  ]
3878
3878
  },
3879
3879
  {
3880
- "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
3880
+ "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
3881
3881
  "original": {
3882
- "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
3882
+ "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
3883
3883
  },
3884
- "name": "token-elevation-higher-box-shadow",
3884
+ "name": "token-elevation-low-box-shadow",
3885
3885
  "attributes": {
3886
3886
  "category": "elevation",
3887
- "type": "higher",
3887
+ "type": "low",
3888
3888
  "item": "box-shadow"
3889
3889
  },
3890
3890
  "path": [
3891
3891
  "elevation",
3892
- "higher",
3892
+ "low",
3893
3893
  "box-shadow"
3894
3894
  ]
3895
3895
  },
3896
3896
  {
3897
- "value": "inset 0px 1px 2px 1px #656a761a",
3897
+ "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
3898
3898
  "original": {
3899
- "value": "{elevation.inset.box-shadow-01.value}"
3899
+ "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
3900
3900
  },
3901
- "name": "token-elevation-inset-box-shadow",
3901
+ "name": "token-elevation-mid-box-shadow",
3902
3902
  "attributes": {
3903
3903
  "category": "elevation",
3904
- "type": "inset",
3904
+ "type": "mid",
3905
3905
  "item": "box-shadow"
3906
3906
  },
3907
3907
  "path": [
3908
3908
  "elevation",
3909
- "inset",
3909
+ "mid",
3910
3910
  "box-shadow"
3911
3911
  ]
3912
3912
  },
3913
3913
  {
3914
- "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
3914
+ "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
3915
3915
  "original": {
3916
- "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
3916
+ "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
3917
3917
  },
3918
- "name": "token-elevation-low-box-shadow",
3918
+ "name": "token-elevation-high-box-shadow",
3919
3919
  "attributes": {
3920
3920
  "category": "elevation",
3921
- "type": "low",
3921
+ "type": "high",
3922
3922
  "item": "box-shadow"
3923
3923
  },
3924
3924
  "path": [
3925
3925
  "elevation",
3926
- "low",
3926
+ "high",
3927
3927
  "box-shadow"
3928
3928
  ]
3929
3929
  },
3930
3930
  {
3931
- "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
3931
+ "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
3932
3932
  "original": {
3933
- "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
3933
+ "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
3934
3934
  },
3935
- "name": "token-elevation-mid-box-shadow",
3935
+ "name": "token-elevation-higher-box-shadow",
3936
3936
  "attributes": {
3937
3937
  "category": "elevation",
3938
- "type": "mid",
3938
+ "type": "higher",
3939
3939
  "item": "box-shadow"
3940
3940
  },
3941
3941
  "path": [
3942
3942
  "elevation",
3943
- "mid",
3943
+ "higher",
3944
3944
  "box-shadow"
3945
3945
  ]
3946
3946
  },
@@ -4115,276 +4115,666 @@
4115
4115
  ]
4116
4116
  },
4117
4117
  {
4118
- "value": "#0c0c0e",
4119
- "type": "color",
4120
- "group": "components",
4118
+ "value": "60px",
4119
+ "type": "size",
4121
4120
  "original": {
4122
- "value": "{color.foreground.strong.value}",
4123
- "type": "color",
4124
- "group": "components"
4121
+ "value": "60",
4122
+ "type": "size"
4125
4123
  },
4126
- "name": "token-form-control-base-foreground-value-color",
4124
+ "name": "token-app-header-height",
4127
4125
  "attributes": {
4128
- "category": "form",
4129
- "type": "control",
4130
- "item": "base",
4131
- "subitem": "foreground",
4132
- "state": "value-color"
4126
+ "category": "app-header",
4127
+ "type": "height"
4133
4128
  },
4134
4129
  "path": [
4135
- "form",
4136
- "control",
4137
- "base",
4138
- "foreground",
4139
- "value-color"
4130
+ "app-header",
4131
+ "height"
4140
4132
  ]
4141
4133
  },
4142
4134
  {
4143
- "value": "#656a76",
4144
- "type": "color",
4145
- "group": "components",
4135
+ "value": "36px",
4136
+ "type": "size",
4146
4137
  "original": {
4147
- "value": "{color.foreground.faint.value}",
4148
- "type": "color",
4149
- "group": "components"
4138
+ "value": "36",
4139
+ "type": "size"
4150
4140
  },
4151
- "name": "token-form-control-base-foreground-placeholder-color",
4141
+ "name": "token-app-header-home-link-size",
4152
4142
  "attributes": {
4153
- "category": "form",
4154
- "type": "control",
4155
- "item": "base",
4156
- "subitem": "foreground",
4157
- "state": "placeholder-color"
4143
+ "category": "app-header",
4144
+ "type": "home-link",
4145
+ "item": "size"
4158
4146
  },
4159
4147
  "path": [
4160
- "form",
4161
- "control",
4162
- "base",
4163
- "foreground",
4164
- "placeholder-color"
4148
+ "app-header",
4149
+ "home-link",
4150
+ "size"
4165
4151
  ]
4166
4152
  },
4167
4153
  {
4168
- "value": "#ffffff",
4169
- "type": "color",
4170
- "group": "components",
4154
+ "value": "28px",
4155
+ "type": "size",
4171
4156
  "original": {
4172
- "value": "{color.surface.interactive.value}",
4173
- "type": "color",
4174
- "group": "components"
4157
+ "value": "28",
4158
+ "type": "size"
4175
4159
  },
4176
- "name": "token-form-control-base-surface-color-default",
4160
+ "name": "token-app-header-logo-size",
4177
4161
  "attributes": {
4178
- "category": "form",
4179
- "type": "control",
4180
- "item": "base",
4181
- "subitem": "surface-color",
4182
- "state": "default"
4162
+ "category": "app-header",
4163
+ "type": "logo",
4164
+ "item": "size"
4183
4165
  },
4184
4166
  "path": [
4185
- "form",
4186
- "control",
4187
- "base",
4188
- "surface-color",
4189
- "default"
4167
+ "app-header",
4168
+ "logo",
4169
+ "size"
4190
4170
  ]
4191
4171
  },
4192
4172
  {
4193
- "value": "#f1f2f3",
4194
- "type": "color",
4195
- "group": "components",
4173
+ "value": "1px",
4174
+ "type": "size",
4196
4175
  "original": {
4197
- "value": "{color.surface.interactive-hover.value}",
4198
- "type": "color",
4199
- "group": "components"
4176
+ "value": "1",
4177
+ "type": "size"
4200
4178
  },
4201
- "name": "token-form-control-base-surface-color-hover",
4179
+ "name": "token-app-side-nav-wrapper-border-width",
4202
4180
  "attributes": {
4203
- "category": "form",
4204
- "type": "control",
4205
- "item": "base",
4206
- "subitem": "surface-color",
4207
- "state": "hover"
4181
+ "category": "app-side-nav",
4182
+ "type": "wrapper",
4183
+ "item": "border",
4184
+ "subitem": "width"
4208
4185
  },
4209
4186
  "path": [
4210
- "form",
4211
- "control",
4212
- "base",
4213
- "surface-color",
4214
- "hover"
4187
+ "app-side-nav",
4188
+ "wrapper",
4189
+ "border",
4190
+ "width"
4215
4191
  ]
4216
4192
  },
4217
4193
  {
4218
- "value": "#8c909c",
4194
+ "value": "var(--token-color-palette-neutral-200)",
4219
4195
  "type": "color",
4220
4196
  "group": "components",
4221
4197
  "original": {
4222
- "value": "{color.palette.neutral-400.value}",
4198
+ "value": "var(--token-color-palette-neutral-200)",
4223
4199
  "type": "color",
4224
4200
  "group": "components"
4225
4201
  },
4226
- "name": "token-form-control-base-border-color-default",
4202
+ "name": "token-app-side-nav-wrapper-border-color",
4227
4203
  "attributes": {
4228
- "category": "form",
4229
- "type": "control",
4230
- "item": "base",
4231
- "subitem": "border-color",
4232
- "state": "default"
4204
+ "category": "app-side-nav",
4205
+ "type": "wrapper",
4206
+ "item": "border",
4207
+ "subitem": "color"
4233
4208
  },
4234
4209
  "path": [
4235
- "form",
4236
- "control",
4237
- "base",
4238
- "border-color",
4239
- "default"
4210
+ "app-side-nav",
4211
+ "wrapper",
4212
+ "border",
4213
+ "color"
4240
4214
  ]
4241
4215
  },
4242
4216
  {
4243
- "value": "#656a76",
4244
- "type": "color",
4245
- "group": "components",
4217
+ "value": "16px",
4218
+ "type": "size",
4246
4219
  "original": {
4247
- "value": "{color.palette.neutral-500.value}",
4248
- "type": "color",
4249
- "group": "components"
4220
+ "value": "16",
4221
+ "type": "size"
4250
4222
  },
4251
- "name": "token-form-control-base-border-color-hover",
4223
+ "name": "token-app-side-nav-wrapper-padding-horizontal",
4252
4224
  "attributes": {
4253
- "category": "form",
4254
- "type": "control",
4255
- "item": "base",
4256
- "subitem": "border-color",
4257
- "state": "hover"
4225
+ "category": "app-side-nav",
4226
+ "type": "wrapper",
4227
+ "item": "padding",
4228
+ "subitem": "horizontal"
4258
4229
  },
4259
4230
  "path": [
4260
- "form",
4261
- "control",
4262
- "base",
4263
- "border-color",
4264
- "hover"
4231
+ "app-side-nav",
4232
+ "wrapper",
4233
+ "padding",
4234
+ "horizontal"
4265
4235
  ]
4266
4236
  },
4267
4237
  {
4268
- "value": "#ffffff",
4269
- "type": "color",
4270
- "group": "components",
4238
+ "value": "16px",
4239
+ "type": "size",
4271
4240
  "original": {
4272
- "value": "{color.foreground.high-contrast.value}",
4273
- "type": "color",
4274
- "group": "components"
4241
+ "value": "16",
4242
+ "type": "size"
4275
4243
  },
4276
- "name": "token-form-control-checked-foreground-color",
4244
+ "name": "token-app-side-nav-wrapper-padding-vertical",
4277
4245
  "attributes": {
4278
- "category": "form",
4279
- "type": "control",
4280
- "item": "checked",
4281
- "subitem": "foreground-color"
4246
+ "category": "app-side-nav",
4247
+ "type": "wrapper",
4248
+ "item": "padding",
4249
+ "subitem": "vertical"
4282
4250
  },
4283
4251
  "path": [
4284
- "form",
4285
- "control",
4286
- "checked",
4287
- "foreground-color"
4252
+ "app-side-nav",
4253
+ "wrapper",
4254
+ "padding",
4255
+ "vertical"
4288
4256
  ]
4289
4257
  },
4290
4258
  {
4291
- "value": "#1060ff",
4292
- "type": "color",
4293
- "group": "components",
4259
+ "value": "8px",
4260
+ "type": "size",
4294
4261
  "original": {
4295
- "value": "{color.palette.blue-200.value}",
4296
- "type": "color",
4297
- "group": "components"
4262
+ "value": "8",
4263
+ "type": "size"
4298
4264
  },
4299
- "name": "token-form-control-checked-surface-color-default",
4265
+ "name": "token-app-side-nav-wrapper-padding-horizontal-minimized",
4300
4266
  "attributes": {
4301
- "category": "form",
4302
- "type": "control",
4303
- "item": "checked",
4304
- "subitem": "surface-color",
4305
- "state": "default"
4267
+ "category": "app-side-nav",
4268
+ "type": "wrapper",
4269
+ "item": "padding",
4270
+ "subitem": "horizontal-minimized"
4306
4271
  },
4307
4272
  "path": [
4308
- "form",
4309
- "control",
4310
- "checked",
4311
- "surface-color",
4312
- "default"
4313
- ]
4314
- },
4273
+ "app-side-nav",
4274
+ "wrapper",
4275
+ "padding",
4276
+ "horizontal-minimized"
4277
+ ]
4278
+ },
4279
+ {
4280
+ "value": "22px",
4281
+ "type": "size",
4282
+ "original": {
4283
+ "value": "22",
4284
+ "type": "size"
4285
+ },
4286
+ "name": "token-app-side-nav-wrapper-padding-vertical-minimized",
4287
+ "attributes": {
4288
+ "category": "app-side-nav",
4289
+ "type": "wrapper",
4290
+ "item": "padding",
4291
+ "subitem": "vertical-minimized"
4292
+ },
4293
+ "path": [
4294
+ "app-side-nav",
4295
+ "wrapper",
4296
+ "padding",
4297
+ "vertical-minimized"
4298
+ ]
4299
+ },
4300
+ {
4301
+ "value": "5px",
4302
+ "type": "size",
4303
+ "original": {
4304
+ "value": "5",
4305
+ "type": "size"
4306
+ },
4307
+ "name": "token-app-side-nav-toggle-button-border-radius",
4308
+ "attributes": {
4309
+ "category": "app-side-nav",
4310
+ "type": "toggle-button",
4311
+ "item": "border",
4312
+ "subitem": "radius"
4313
+ },
4314
+ "path": [
4315
+ "app-side-nav",
4316
+ "toggle-button",
4317
+ "border",
4318
+ "radius"
4319
+ ]
4320
+ },
4321
+ {
4322
+ "value": "4px",
4323
+ "type": "size",
4324
+ "original": {
4325
+ "value": "4",
4326
+ "type": "size"
4327
+ },
4328
+ "name": "token-app-side-nav-header-home-link-padding",
4329
+ "attributes": {
4330
+ "category": "app-side-nav",
4331
+ "type": "header",
4332
+ "item": "home-link",
4333
+ "subitem": "padding"
4334
+ },
4335
+ "path": [
4336
+ "app-side-nav",
4337
+ "header",
4338
+ "home-link",
4339
+ "padding"
4340
+ ]
4341
+ },
4342
+ {
4343
+ "value": "48px",
4344
+ "type": "size",
4345
+ "original": {
4346
+ "value": "48",
4347
+ "type": "size"
4348
+ },
4349
+ "name": "token-app-side-nav-header-home-link-logo-size",
4350
+ "attributes": {
4351
+ "category": "app-side-nav",
4352
+ "type": "header",
4353
+ "item": "home-link",
4354
+ "subitem": "logo-size"
4355
+ },
4356
+ "path": [
4357
+ "app-side-nav",
4358
+ "header",
4359
+ "home-link",
4360
+ "logo-size"
4361
+ ]
4362
+ },
4363
+ {
4364
+ "value": "32px",
4365
+ "type": "size",
4366
+ "original": {
4367
+ "value": "32",
4368
+ "type": "size"
4369
+ },
4370
+ "name": "token-app-side-nav-header-home-link-logo-size-minimized",
4371
+ "attributes": {
4372
+ "category": "app-side-nav",
4373
+ "type": "header",
4374
+ "item": "home-link",
4375
+ "subitem": "logo-size-minimized"
4376
+ },
4377
+ "path": [
4378
+ "app-side-nav",
4379
+ "header",
4380
+ "home-link",
4381
+ "logo-size-minimized"
4382
+ ]
4383
+ },
4384
+ {
4385
+ "value": "8px",
4386
+ "type": "size",
4387
+ "original": {
4388
+ "value": "8",
4389
+ "type": "size"
4390
+ },
4391
+ "name": "token-app-side-nav-header-actions-spacing",
4392
+ "attributes": {
4393
+ "category": "app-side-nav",
4394
+ "type": "header",
4395
+ "item": "actions",
4396
+ "subitem": "spacing"
4397
+ },
4398
+ "path": [
4399
+ "app-side-nav",
4400
+ "header",
4401
+ "actions",
4402
+ "spacing"
4403
+ ]
4404
+ },
4405
+ {
4406
+ "value": "24px",
4407
+ "type": "size",
4408
+ "original": {
4409
+ "value": "24",
4410
+ "type": "size"
4411
+ },
4412
+ "name": "token-app-side-nav-body-list-margin-vertical",
4413
+ "attributes": {
4414
+ "category": "app-side-nav",
4415
+ "type": "body",
4416
+ "item": "list",
4417
+ "subitem": "margin-vertical"
4418
+ },
4419
+ "path": [
4420
+ "app-side-nav",
4421
+ "body",
4422
+ "list",
4423
+ "margin-vertical"
4424
+ ]
4425
+ },
4426
+ {
4427
+ "value": "36px",
4428
+ "type": "size",
4429
+ "original": {
4430
+ "value": "36",
4431
+ "type": "size"
4432
+ },
4433
+ "name": "token-app-side-nav-body-list-item-height",
4434
+ "attributes": {
4435
+ "category": "app-side-nav",
4436
+ "type": "body",
4437
+ "item": "list-item",
4438
+ "subitem": "height"
4439
+ },
4440
+ "path": [
4441
+ "app-side-nav",
4442
+ "body",
4443
+ "list-item",
4444
+ "height"
4445
+ ]
4446
+ },
4447
+ {
4448
+ "value": "8px",
4449
+ "type": "size",
4450
+ "original": {
4451
+ "value": "8",
4452
+ "type": "size"
4453
+ },
4454
+ "name": "token-app-side-nav-body-list-item-padding-horizontal",
4455
+ "attributes": {
4456
+ "category": "app-side-nav",
4457
+ "type": "body",
4458
+ "item": "list-item",
4459
+ "subitem": "padding",
4460
+ "state": "horizontal"
4461
+ },
4462
+ "path": [
4463
+ "app-side-nav",
4464
+ "body",
4465
+ "list-item",
4466
+ "padding",
4467
+ "horizontal"
4468
+ ]
4469
+ },
4470
+ {
4471
+ "value": "4px",
4472
+ "type": "size",
4473
+ "original": {
4474
+ "value": "4",
4475
+ "type": "size"
4476
+ },
4477
+ "name": "token-app-side-nav-body-list-item-padding-vertical",
4478
+ "attributes": {
4479
+ "category": "app-side-nav",
4480
+ "type": "body",
4481
+ "item": "list-item",
4482
+ "subitem": "padding",
4483
+ "state": "vertical"
4484
+ },
4485
+ "path": [
4486
+ "app-side-nav",
4487
+ "body",
4488
+ "list-item",
4489
+ "padding",
4490
+ "vertical"
4491
+ ]
4492
+ },
4493
+ {
4494
+ "value": "2px",
4495
+ "type": "size",
4496
+ "original": {
4497
+ "value": "2",
4498
+ "type": "size"
4499
+ },
4500
+ "name": "token-app-side-nav-body-list-item-spacing-vertical",
4501
+ "attributes": {
4502
+ "category": "app-side-nav",
4503
+ "type": "body",
4504
+ "item": "list-item",
4505
+ "subitem": "spacing-vertical"
4506
+ },
4507
+ "path": [
4508
+ "app-side-nav",
4509
+ "body",
4510
+ "list-item",
4511
+ "spacing-vertical"
4512
+ ]
4513
+ },
4514
+ {
4515
+ "value": "8px",
4516
+ "type": "size",
4517
+ "original": {
4518
+ "value": "8",
4519
+ "type": "size"
4520
+ },
4521
+ "name": "token-app-side-nav-body-list-item-content-spacing-horizontal",
4522
+ "attributes": {
4523
+ "category": "app-side-nav",
4524
+ "type": "body",
4525
+ "item": "list-item",
4526
+ "subitem": "content-spacing-horizontal"
4527
+ },
4528
+ "path": [
4529
+ "app-side-nav",
4530
+ "body",
4531
+ "list-item",
4532
+ "content-spacing-horizontal"
4533
+ ]
4534
+ },
4535
+ {
4536
+ "value": "5px",
4537
+ "type": "size",
4538
+ "original": {
4539
+ "value": "5",
4540
+ "type": "size"
4541
+ },
4542
+ "name": "token-app-side-nav-body-list-item-border-radius",
4543
+ "attributes": {
4544
+ "category": "app-side-nav",
4545
+ "type": "body",
4546
+ "item": "list-item",
4547
+ "subitem": "border-radius"
4548
+ },
4549
+ "path": [
4550
+ "app-side-nav",
4551
+ "body",
4552
+ "list-item",
4553
+ "border-radius"
4554
+ ]
4555
+ },
4556
+ {
4557
+ "value": "var(--token-color-foreground-primary)",
4558
+ "type": "color",
4559
+ "group": "components",
4560
+ "original": {
4561
+ "value": "var(--token-color-foreground-primary)",
4562
+ "type": "color",
4563
+ "group": "components"
4564
+ },
4565
+ "name": "token-app-side-nav-color-foreground-primary",
4566
+ "attributes": {
4567
+ "category": "app-side-nav",
4568
+ "type": "color",
4569
+ "item": "foreground",
4570
+ "subitem": "primary"
4571
+ },
4572
+ "path": [
4573
+ "app-side-nav",
4574
+ "color",
4575
+ "foreground",
4576
+ "primary"
4577
+ ]
4578
+ },
4579
+ {
4580
+ "value": "var(--token-color-foreground-primary)",
4581
+ "type": "color",
4582
+ "group": "components",
4583
+ "original": {
4584
+ "value": "var(--token-color-foreground-primary)",
4585
+ "type": "color",
4586
+ "group": "components"
4587
+ },
4588
+ "name": "token-app-side-nav-color-foreground-strong",
4589
+ "attributes": {
4590
+ "category": "app-side-nav",
4591
+ "type": "color",
4592
+ "item": "foreground",
4593
+ "subitem": "strong"
4594
+ },
4595
+ "path": [
4596
+ "app-side-nav",
4597
+ "color",
4598
+ "foreground",
4599
+ "strong"
4600
+ ]
4601
+ },
4602
+ {
4603
+ "value": "var(--token-color-foreground-faint)",
4604
+ "type": "color",
4605
+ "group": "components",
4606
+ "original": {
4607
+ "value": "var(--token-color-foreground-faint)",
4608
+ "type": "color",
4609
+ "group": "components"
4610
+ },
4611
+ "name": "token-app-side-nav-color-foreground-faint",
4612
+ "attributes": {
4613
+ "category": "app-side-nav",
4614
+ "type": "color",
4615
+ "item": "foreground",
4616
+ "subitem": "faint"
4617
+ },
4618
+ "path": [
4619
+ "app-side-nav",
4620
+ "color",
4621
+ "foreground",
4622
+ "faint"
4623
+ ]
4624
+ },
4625
+ {
4626
+ "value": "var(--token-color-surface-faint)",
4627
+ "type": "color",
4628
+ "group": "components",
4629
+ "original": {
4630
+ "value": "var(--token-color-surface-faint)",
4631
+ "type": "color",
4632
+ "group": "components"
4633
+ },
4634
+ "name": "token-app-side-nav-color-surface-primary",
4635
+ "attributes": {
4636
+ "category": "app-side-nav",
4637
+ "type": "color",
4638
+ "item": "surface",
4639
+ "subitem": "primary"
4640
+ },
4641
+ "path": [
4642
+ "app-side-nav",
4643
+ "color",
4644
+ "surface",
4645
+ "primary"
4646
+ ]
4647
+ },
4648
+ {
4649
+ "value": "var(--token-color-surface-interactive-hover)",
4650
+ "type": "color",
4651
+ "group": "semantic",
4652
+ "original": {
4653
+ "value": "var(--token-color-surface-interactive-hover)",
4654
+ "type": "color",
4655
+ "group": "semantic"
4656
+ },
4657
+ "name": "token-app-side-nav-color-surface-interactive-hover",
4658
+ "attributes": {
4659
+ "category": "app-side-nav",
4660
+ "type": "color",
4661
+ "item": "surface",
4662
+ "subitem": "interactive-hover"
4663
+ },
4664
+ "path": [
4665
+ "app-side-nav",
4666
+ "color",
4667
+ "surface",
4668
+ "interactive-hover"
4669
+ ]
4670
+ },
4671
+ {
4672
+ "value": "var(--token-color-palette-neutral-300)",
4673
+ "type": "color",
4674
+ "group": "semantic",
4675
+ "original": {
4676
+ "value": "var(--token-color-palette-neutral-300)",
4677
+ "type": "color",
4678
+ "group": "semantic"
4679
+ },
4680
+ "name": "token-app-side-nav-color-surface-interactive-active",
4681
+ "attributes": {
4682
+ "category": "app-side-nav",
4683
+ "type": "color",
4684
+ "item": "surface",
4685
+ "subitem": "interactive-active"
4686
+ },
4687
+ "path": [
4688
+ "app-side-nav",
4689
+ "color",
4690
+ "surface",
4691
+ "interactive-active"
4692
+ ]
4693
+ },
4694
+ {
4695
+ "value": "#0c0c0e",
4696
+ "type": "color",
4697
+ "group": "components",
4698
+ "original": {
4699
+ "value": "{color.foreground.strong.value}",
4700
+ "type": "color",
4701
+ "group": "components"
4702
+ },
4703
+ "name": "token-form-label-color",
4704
+ "attributes": {
4705
+ "category": "form",
4706
+ "type": "label",
4707
+ "item": "color"
4708
+ },
4709
+ "path": [
4710
+ "form",
4711
+ "label",
4712
+ "color"
4713
+ ]
4714
+ },
4315
4715
  {
4316
- "value": "#0c56e9",
4716
+ "value": "#0c0c0e",
4317
4717
  "type": "color",
4318
4718
  "group": "components",
4319
4719
  "original": {
4320
- "value": "{color.palette.blue-300.value}",
4720
+ "value": "{form.label.color.value}",
4321
4721
  "type": "color",
4322
4722
  "group": "components"
4323
4723
  },
4324
- "name": "token-form-control-checked-surface-color-hover",
4724
+ "name": "token-form-legend-color",
4325
4725
  "attributes": {
4326
4726
  "category": "form",
4327
- "type": "control",
4328
- "item": "checked",
4329
- "subitem": "surface-color",
4330
- "state": "hover"
4727
+ "type": "legend",
4728
+ "item": "color"
4331
4729
  },
4332
4730
  "path": [
4333
4731
  "form",
4334
- "control",
4335
- "checked",
4336
- "surface-color",
4337
- "hover"
4732
+ "legend",
4733
+ "color"
4338
4734
  ]
4339
4735
  },
4340
4736
  {
4341
- "value": "#0c56e9",
4737
+ "value": "#656a76",
4342
4738
  "type": "color",
4343
4739
  "group": "components",
4344
4740
  "original": {
4345
- "value": "{color.palette.blue-300.value}",
4741
+ "value": "{color.foreground.faint.value}",
4346
4742
  "type": "color",
4347
4743
  "group": "components"
4348
4744
  },
4349
- "name": "token-form-control-checked-border-color-default",
4745
+ "name": "token-form-helper-text-color",
4350
4746
  "attributes": {
4351
4747
  "category": "form",
4352
- "type": "control",
4353
- "item": "checked",
4354
- "subitem": "border-color",
4355
- "state": "default"
4748
+ "type": "helper-text",
4749
+ "item": "color"
4356
4750
  },
4357
4751
  "path": [
4358
4752
  "form",
4359
- "control",
4360
- "checked",
4361
- "border-color",
4362
- "default"
4753
+ "helper-text",
4754
+ "color"
4363
4755
  ]
4364
4756
  },
4365
4757
  {
4366
- "value": "#0046d1",
4758
+ "value": "#656a76",
4367
4759
  "type": "color",
4368
4760
  "group": "components",
4369
4761
  "original": {
4370
- "value": "{color.palette.blue-400.value}",
4762
+ "value": "{color.foreground.faint.value}",
4371
4763
  "type": "color",
4372
4764
  "group": "components"
4373
4765
  },
4374
- "name": "token-form-control-checked-border-color-hover",
4766
+ "name": "token-form-indicator-optional-color",
4375
4767
  "attributes": {
4376
4768
  "category": "form",
4377
- "type": "control",
4378
- "item": "checked",
4379
- "subitem": "border-color",
4380
- "state": "hover"
4769
+ "type": "indicator",
4770
+ "item": "optional",
4771
+ "subitem": "color"
4381
4772
  },
4382
4773
  "path": [
4383
4774
  "form",
4384
- "control",
4385
- "checked",
4386
- "border-color",
4387
- "hover"
4775
+ "indicator",
4776
+ "optional",
4777
+ "color"
4388
4778
  ]
4389
4779
  },
4390
4780
  {
@@ -4396,538 +4786,725 @@
4396
4786
  "type": "color",
4397
4787
  "group": "components"
4398
4788
  },
4399
- "name": "token-form-control-invalid-border-color-default",
4789
+ "name": "token-form-error-color",
4400
4790
  "attributes": {
4401
4791
  "category": "form",
4402
- "type": "control",
4403
- "item": "invalid",
4404
- "subitem": "border-color",
4405
- "state": "default"
4792
+ "type": "error",
4793
+ "item": "color"
4406
4794
  },
4407
4795
  "path": [
4408
4796
  "form",
4409
- "control",
4410
- "invalid",
4411
- "border-color",
4412
- "default"
4797
+ "error",
4798
+ "color"
4413
4799
  ]
4414
4800
  },
4415
4801
  {
4416
- "value": "#940004",
4417
- "type": "color",
4418
- "group": "components",
4802
+ "value": "14px",
4803
+ "type": "size",
4419
4804
  "original": {
4420
- "value": "{color.palette.red-400.value}",
4421
- "type": "color",
4422
- "group": "components"
4805
+ "value": "14",
4806
+ "type": "size"
4423
4807
  },
4424
- "name": "token-form-control-invalid-border-color-hover",
4808
+ "name": "token-form-error-icon-size",
4425
4809
  "attributes": {
4426
4810
  "category": "form",
4427
- "type": "control",
4428
- "item": "invalid",
4429
- "subitem": "border-color",
4430
- "state": "hover"
4811
+ "type": "error",
4812
+ "item": "icon-size"
4431
4813
  },
4432
4814
  "path": [
4433
4815
  "form",
4434
- "control",
4435
- "invalid",
4436
- "border-color",
4437
- "hover"
4816
+ "error",
4817
+ "icon-size"
4438
4818
  ]
4439
4819
  },
4440
4820
  {
4441
- "value": "#3b3d45",
4442
- "type": "color",
4443
- "group": "components",
4821
+ "value": "16px",
4822
+ "type": "size",
4444
4823
  "original": {
4445
- "value": "{color.foreground.primary.value}",
4446
- "type": "color",
4447
- "group": "components"
4824
+ "value": "16",
4825
+ "type": "size"
4448
4826
  },
4449
- "name": "token-form-control-readonly-foreground-color",
4827
+ "name": "token-form-checkbox-size",
4828
+ "attributes": {
4829
+ "category": "form",
4830
+ "type": "checkbox",
4831
+ "item": "size"
4832
+ },
4833
+ "path": [
4834
+ "form",
4835
+ "checkbox",
4836
+ "size"
4837
+ ]
4838
+ },
4839
+ {
4840
+ "value": "3px",
4841
+ "type": "size",
4842
+ "original": {
4843
+ "value": "3",
4844
+ "type": "size"
4845
+ },
4846
+ "name": "token-form-checkbox-border-radius",
4847
+ "attributes": {
4848
+ "category": "form",
4849
+ "type": "checkbox",
4850
+ "item": "border",
4851
+ "subitem": "radius"
4852
+ },
4853
+ "path": [
4854
+ "form",
4855
+ "checkbox",
4856
+ "border",
4857
+ "radius"
4858
+ ]
4859
+ },
4860
+ {
4861
+ "value": "1px",
4862
+ "type": "size",
4863
+ "original": {
4864
+ "value": "1",
4865
+ "type": "size"
4866
+ },
4867
+ "name": "token-form-checkbox-border-width",
4868
+ "attributes": {
4869
+ "category": "form",
4870
+ "type": "checkbox",
4871
+ "item": "border",
4872
+ "subitem": "width"
4873
+ },
4874
+ "path": [
4875
+ "form",
4876
+ "checkbox",
4877
+ "border",
4878
+ "width"
4879
+ ]
4880
+ },
4881
+ {
4882
+ "value": "12px",
4883
+ "type": "size",
4884
+ "original": {
4885
+ "value": "12",
4886
+ "type": "size"
4887
+ },
4888
+ "name": "token-form-checkbox-background-image-size",
4889
+ "attributes": {
4890
+ "category": "form",
4891
+ "type": "checkbox",
4892
+ "item": "background-image",
4893
+ "subitem": "size"
4894
+ },
4895
+ "path": [
4896
+ "form",
4897
+ "checkbox",
4898
+ "background-image",
4899
+ "size"
4900
+ ]
4901
+ },
4902
+ {
4903
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
4904
+ "comment": "notice: the 'tick' color is hardcoded here!",
4905
+ "original": {
4906
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
4907
+ "comment": "notice: the 'tick' color is hardcoded here!"
4908
+ },
4909
+ "name": "token-form-checkbox-background-image-data-url",
4910
+ "attributes": {
4911
+ "category": "form",
4912
+ "type": "checkbox",
4913
+ "item": "background-image",
4914
+ "subitem": "data-url"
4915
+ },
4916
+ "path": [
4917
+ "form",
4918
+ "checkbox",
4919
+ "background-image",
4920
+ "data-url"
4921
+ ]
4922
+ },
4923
+ {
4924
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
4925
+ "comment": "notice: the 'dash' color is hardcoded here!",
4926
+ "original": {
4927
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
4928
+ "comment": "notice: the 'dash' color is hardcoded here!"
4929
+ },
4930
+ "name": "token-form-checkbox-background-image-data-url-indeterminate",
4931
+ "attributes": {
4932
+ "category": "form",
4933
+ "type": "checkbox",
4934
+ "item": "background-image",
4935
+ "subitem": "data-url-indeterminate"
4936
+ },
4937
+ "path": [
4938
+ "form",
4939
+ "checkbox",
4940
+ "background-image",
4941
+ "data-url-indeterminate"
4942
+ ]
4943
+ },
4944
+ {
4945
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
4946
+ "comment": "notice: the 'tick' color is hardcoded here!",
4947
+ "original": {
4948
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
4949
+ "comment": "notice: the 'tick' color is hardcoded here!"
4950
+ },
4951
+ "name": "token-form-checkbox-background-image-data-url-disabled",
4952
+ "attributes": {
4953
+ "category": "form",
4954
+ "type": "checkbox",
4955
+ "item": "background-image",
4956
+ "subitem": "data-url-disabled"
4957
+ },
4958
+ "path": [
4959
+ "form",
4960
+ "checkbox",
4961
+ "background-image",
4962
+ "data-url-disabled"
4963
+ ]
4964
+ },
4965
+ {
4966
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
4967
+ "comment": "notice: the 'dash' color is hardcoded here!",
4968
+ "original": {
4969
+ "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
4970
+ "comment": "notice: the 'dash' color is hardcoded here!"
4971
+ },
4972
+ "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
4450
4973
  "attributes": {
4451
4974
  "category": "form",
4452
- "type": "control",
4453
- "item": "readonly",
4454
- "subitem": "foreground-color"
4975
+ "type": "checkbox",
4976
+ "item": "background-image",
4977
+ "subitem": "data-url-indeterminate-disabled"
4455
4978
  },
4456
4979
  "path": [
4457
4980
  "form",
4458
- "control",
4459
- "readonly",
4460
- "foreground-color"
4981
+ "checkbox",
4982
+ "background-image",
4983
+ "data-url-indeterminate-disabled"
4461
4984
  ]
4462
4985
  },
4463
4986
  {
4464
- "value": "#f1f2f3",
4987
+ "value": "#0c0c0e",
4465
4988
  "type": "color",
4466
4989
  "group": "components",
4467
4990
  "original": {
4468
- "value": "{color.surface.strong.value}",
4991
+ "value": "{color.foreground.strong.value}",
4469
4992
  "type": "color",
4470
4993
  "group": "components"
4471
4994
  },
4472
- "name": "token-form-control-readonly-surface-color",
4995
+ "name": "token-form-control-base-foreground-value-color",
4473
4996
  "attributes": {
4474
4997
  "category": "form",
4475
4998
  "type": "control",
4476
- "item": "readonly",
4477
- "subitem": "surface-color"
4999
+ "item": "base",
5000
+ "subitem": "foreground",
5001
+ "state": "value-color"
4478
5002
  },
4479
5003
  "path": [
4480
5004
  "form",
4481
5005
  "control",
4482
- "readonly",
4483
- "surface-color"
5006
+ "base",
5007
+ "foreground",
5008
+ "value-color"
4484
5009
  ]
4485
5010
  },
4486
5011
  {
4487
- "value": "#656a761a",
5012
+ "value": "#656a76",
4488
5013
  "type": "color",
4489
5014
  "group": "components",
4490
5015
  "original": {
4491
- "value": "{color.border.faint.value}",
5016
+ "value": "{color.foreground.faint.value}",
4492
5017
  "type": "color",
4493
5018
  "group": "components"
4494
5019
  },
4495
- "name": "token-form-control-readonly-border-color",
5020
+ "name": "token-form-control-base-foreground-placeholder-color",
4496
5021
  "attributes": {
4497
5022
  "category": "form",
4498
5023
  "type": "control",
4499
- "item": "readonly",
4500
- "subitem": "border-color"
5024
+ "item": "base",
5025
+ "subitem": "foreground",
5026
+ "state": "placeholder-color"
4501
5027
  },
4502
5028
  "path": [
4503
5029
  "form",
4504
5030
  "control",
4505
- "readonly",
4506
- "border-color"
5031
+ "base",
5032
+ "foreground",
5033
+ "placeholder-color"
4507
5034
  ]
4508
5035
  },
4509
5036
  {
4510
- "value": "#8c909c",
5037
+ "value": "#ffffff",
4511
5038
  "type": "color",
4512
5039
  "group": "components",
4513
5040
  "original": {
4514
- "value": "{color.foreground.disabled.value}",
5041
+ "value": "{color.surface.interactive.value}",
4515
5042
  "type": "color",
4516
5043
  "group": "components"
4517
5044
  },
4518
- "name": "token-form-control-disabled-foreground-color",
5045
+ "name": "token-form-control-base-surface-color-default",
4519
5046
  "attributes": {
4520
5047
  "category": "form",
4521
5048
  "type": "control",
4522
- "item": "disabled",
4523
- "subitem": "foreground-color"
5049
+ "item": "base",
5050
+ "subitem": "surface-color",
5051
+ "state": "default"
4524
5052
  },
4525
5053
  "path": [
4526
5054
  "form",
4527
5055
  "control",
4528
- "disabled",
4529
- "foreground-color"
5056
+ "base",
5057
+ "surface-color",
5058
+ "default"
4530
5059
  ]
4531
5060
  },
4532
5061
  {
4533
- "value": "#fafafa",
5062
+ "value": "#f1f2f3",
4534
5063
  "type": "color",
4535
5064
  "group": "components",
4536
5065
  "original": {
4537
- "value": "{color.surface.interactive-disabled.value}",
5066
+ "value": "{color.surface.interactive-hover.value}",
4538
5067
  "type": "color",
4539
5068
  "group": "components"
4540
5069
  },
4541
- "name": "token-form-control-disabled-surface-color",
5070
+ "name": "token-form-control-base-surface-color-hover",
4542
5071
  "attributes": {
4543
5072
  "category": "form",
4544
5073
  "type": "control",
4545
- "item": "disabled",
4546
- "subitem": "surface-color"
5074
+ "item": "base",
5075
+ "subitem": "surface-color",
5076
+ "state": "hover"
4547
5077
  },
4548
5078
  "path": [
4549
5079
  "form",
4550
5080
  "control",
4551
- "disabled",
4552
- "surface-color"
5081
+ "base",
5082
+ "surface-color",
5083
+ "hover"
4553
5084
  ]
4554
5085
  },
4555
5086
  {
4556
- "value": "#656a7633",
5087
+ "value": "#8c909c",
4557
5088
  "type": "color",
4558
5089
  "group": "components",
4559
5090
  "original": {
4560
- "value": "{color.border.primary.value}",
5091
+ "value": "{color.palette.neutral-400.value}",
4561
5092
  "type": "color",
4562
5093
  "group": "components"
4563
5094
  },
4564
- "name": "token-form-control-disabled-border-color",
5095
+ "name": "token-form-control-base-border-color-default",
4565
5096
  "attributes": {
4566
5097
  "category": "form",
4567
5098
  "type": "control",
4568
- "item": "disabled",
4569
- "subitem": "border-color"
5099
+ "item": "base",
5100
+ "subitem": "border-color",
5101
+ "state": "default"
4570
5102
  },
4571
5103
  "path": [
4572
5104
  "form",
4573
5105
  "control",
4574
- "disabled",
4575
- "border-color"
5106
+ "base",
5107
+ "border-color",
5108
+ "default"
4576
5109
  ]
4577
5110
  },
4578
5111
  {
4579
- "value": "7px",
4580
- "type": "size",
4581
- "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
5112
+ "value": "#656a76",
5113
+ "type": "color",
5114
+ "group": "components",
4582
5115
  "original": {
4583
- "value": "7",
4584
- "type": "size",
4585
- "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
5116
+ "value": "{color.palette.neutral-500.value}",
5117
+ "type": "color",
5118
+ "group": "components"
4586
5119
  },
4587
- "name": "token-form-control-padding",
5120
+ "name": "token-form-control-base-border-color-hover",
4588
5121
  "attributes": {
4589
5122
  "category": "form",
4590
5123
  "type": "control",
4591
- "item": "padding"
5124
+ "item": "base",
5125
+ "subitem": "border-color",
5126
+ "state": "hover"
4592
5127
  },
4593
5128
  "path": [
4594
5129
  "form",
4595
5130
  "control",
4596
- "padding"
5131
+ "base",
5132
+ "border-color",
5133
+ "hover"
4597
5134
  ]
4598
5135
  },
4599
5136
  {
4600
- "value": "5px",
4601
- "type": "size",
5137
+ "value": "#ffffff",
5138
+ "type": "color",
5139
+ "group": "components",
4602
5140
  "original": {
4603
- "value": "5",
4604
- "type": "size"
5141
+ "value": "{color.foreground.high-contrast.value}",
5142
+ "type": "color",
5143
+ "group": "components"
4605
5144
  },
4606
- "name": "token-form-control-border-radius",
5145
+ "name": "token-form-control-checked-foreground-color",
4607
5146
  "attributes": {
4608
5147
  "category": "form",
4609
5148
  "type": "control",
4610
- "item": "border",
4611
- "subitem": "radius"
5149
+ "item": "checked",
5150
+ "subitem": "foreground-color"
4612
5151
  },
4613
5152
  "path": [
4614
5153
  "form",
4615
5154
  "control",
4616
- "border",
4617
- "radius"
5155
+ "checked",
5156
+ "foreground-color"
4618
5157
  ]
4619
5158
  },
4620
5159
  {
4621
- "value": "1px",
4622
- "type": "size",
5160
+ "value": "#1060ff",
5161
+ "type": "color",
5162
+ "group": "components",
4623
5163
  "original": {
4624
- "value": "1",
4625
- "type": "size"
5164
+ "value": "{color.palette.blue-200.value}",
5165
+ "type": "color",
5166
+ "group": "components"
4626
5167
  },
4627
- "name": "token-form-control-border-width",
5168
+ "name": "token-form-control-checked-surface-color-default",
4628
5169
  "attributes": {
4629
5170
  "category": "form",
4630
5171
  "type": "control",
4631
- "item": "border",
4632
- "subitem": "width"
5172
+ "item": "checked",
5173
+ "subitem": "surface-color",
5174
+ "state": "default"
4633
5175
  },
4634
5176
  "path": [
4635
5177
  "form",
4636
5178
  "control",
4637
- "border",
4638
- "width"
5179
+ "checked",
5180
+ "surface-color",
5181
+ "default"
4639
5182
  ]
4640
5183
  },
4641
5184
  {
4642
- "value": "#0c0c0e",
5185
+ "value": "#0c56e9",
4643
5186
  "type": "color",
4644
5187
  "group": "components",
4645
5188
  "original": {
4646
- "value": "{color.foreground.strong.value}",
5189
+ "value": "{color.palette.blue-300.value}",
4647
5190
  "type": "color",
4648
5191
  "group": "components"
4649
5192
  },
4650
- "name": "token-form-label-color",
5193
+ "name": "token-form-control-checked-surface-color-hover",
4651
5194
  "attributes": {
4652
5195
  "category": "form",
4653
- "type": "label",
4654
- "item": "color"
5196
+ "type": "control",
5197
+ "item": "checked",
5198
+ "subitem": "surface-color",
5199
+ "state": "hover"
4655
5200
  },
4656
5201
  "path": [
4657
5202
  "form",
4658
- "label",
4659
- "color"
5203
+ "control",
5204
+ "checked",
5205
+ "surface-color",
5206
+ "hover"
4660
5207
  ]
4661
5208
  },
4662
5209
  {
4663
- "value": "#0c0c0e",
5210
+ "value": "#0c56e9",
4664
5211
  "type": "color",
4665
5212
  "group": "components",
4666
5213
  "original": {
4667
- "value": "{form.label.color.value}",
5214
+ "value": "{color.palette.blue-300.value}",
4668
5215
  "type": "color",
4669
5216
  "group": "components"
4670
5217
  },
4671
- "name": "token-form-legend-color",
5218
+ "name": "token-form-control-checked-border-color-default",
4672
5219
  "attributes": {
4673
5220
  "category": "form",
4674
- "type": "legend",
4675
- "item": "color"
5221
+ "type": "control",
5222
+ "item": "checked",
5223
+ "subitem": "border-color",
5224
+ "state": "default"
4676
5225
  },
4677
5226
  "path": [
4678
5227
  "form",
4679
- "legend",
4680
- "color"
5228
+ "control",
5229
+ "checked",
5230
+ "border-color",
5231
+ "default"
4681
5232
  ]
4682
5233
  },
4683
5234
  {
4684
- "value": "#656a76",
5235
+ "value": "#0046d1",
4685
5236
  "type": "color",
4686
5237
  "group": "components",
4687
5238
  "original": {
4688
- "value": "{color.foreground.faint.value}",
5239
+ "value": "{color.palette.blue-400.value}",
4689
5240
  "type": "color",
4690
5241
  "group": "components"
4691
5242
  },
4692
- "name": "token-form-helper-text-color",
5243
+ "name": "token-form-control-checked-border-color-hover",
4693
5244
  "attributes": {
4694
5245
  "category": "form",
4695
- "type": "helper-text",
4696
- "item": "color"
5246
+ "type": "control",
5247
+ "item": "checked",
5248
+ "subitem": "border-color",
5249
+ "state": "hover"
4697
5250
  },
4698
5251
  "path": [
4699
5252
  "form",
4700
- "helper-text",
4701
- "color"
5253
+ "control",
5254
+ "checked",
5255
+ "border-color",
5256
+ "hover"
4702
5257
  ]
4703
5258
  },
4704
5259
  {
4705
- "value": "#656a76",
5260
+ "value": "#c00005",
4706
5261
  "type": "color",
4707
5262
  "group": "components",
4708
5263
  "original": {
4709
- "value": "{color.foreground.faint.value}",
5264
+ "value": "{color.palette.red-300.value}",
4710
5265
  "type": "color",
4711
5266
  "group": "components"
4712
5267
  },
4713
- "name": "token-form-indicator-optional-color",
5268
+ "name": "token-form-control-invalid-border-color-default",
4714
5269
  "attributes": {
4715
5270
  "category": "form",
4716
- "type": "indicator",
4717
- "item": "optional",
4718
- "subitem": "color"
5271
+ "type": "control",
5272
+ "item": "invalid",
5273
+ "subitem": "border-color",
5274
+ "state": "default"
4719
5275
  },
4720
5276
  "path": [
4721
5277
  "form",
4722
- "indicator",
4723
- "optional",
4724
- "color"
5278
+ "control",
5279
+ "invalid",
5280
+ "border-color",
5281
+ "default"
4725
5282
  ]
4726
5283
  },
4727
5284
  {
4728
- "value": "#c00005",
5285
+ "value": "#940004",
4729
5286
  "type": "color",
4730
5287
  "group": "components",
4731
5288
  "original": {
4732
- "value": "{color.palette.red-300.value}",
5289
+ "value": "{color.palette.red-400.value}",
4733
5290
  "type": "color",
4734
5291
  "group": "components"
4735
5292
  },
4736
- "name": "token-form-error-color",
5293
+ "name": "token-form-control-invalid-border-color-hover",
4737
5294
  "attributes": {
4738
5295
  "category": "form",
4739
- "type": "error",
4740
- "item": "color"
5296
+ "type": "control",
5297
+ "item": "invalid",
5298
+ "subitem": "border-color",
5299
+ "state": "hover"
4741
5300
  },
4742
5301
  "path": [
4743
5302
  "form",
4744
- "error",
4745
- "color"
5303
+ "control",
5304
+ "invalid",
5305
+ "border-color",
5306
+ "hover"
4746
5307
  ]
4747
5308
  },
4748
5309
  {
4749
- "value": "14px",
4750
- "type": "size",
4751
- "original": {
4752
- "value": "14",
4753
- "type": "size"
5310
+ "value": "#3b3d45",
5311
+ "type": "color",
5312
+ "group": "components",
5313
+ "original": {
5314
+ "value": "{color.foreground.primary.value}",
5315
+ "type": "color",
5316
+ "group": "components"
4754
5317
  },
4755
- "name": "token-form-error-icon-size",
5318
+ "name": "token-form-control-readonly-foreground-color",
4756
5319
  "attributes": {
4757
5320
  "category": "form",
4758
- "type": "error",
4759
- "item": "icon-size"
5321
+ "type": "control",
5322
+ "item": "readonly",
5323
+ "subitem": "foreground-color"
4760
5324
  },
4761
5325
  "path": [
4762
5326
  "form",
4763
- "error",
4764
- "icon-size"
5327
+ "control",
5328
+ "readonly",
5329
+ "foreground-color"
4765
5330
  ]
4766
5331
  },
4767
5332
  {
4768
- "value": "16px",
4769
- "type": "size",
5333
+ "value": "#f1f2f3",
5334
+ "type": "color",
5335
+ "group": "components",
4770
5336
  "original": {
4771
- "value": "16",
4772
- "type": "size"
5337
+ "value": "{color.surface.strong.value}",
5338
+ "type": "color",
5339
+ "group": "components"
4773
5340
  },
4774
- "name": "token-form-checkbox-size",
5341
+ "name": "token-form-control-readonly-surface-color",
4775
5342
  "attributes": {
4776
5343
  "category": "form",
4777
- "type": "checkbox",
4778
- "item": "size"
5344
+ "type": "control",
5345
+ "item": "readonly",
5346
+ "subitem": "surface-color"
4779
5347
  },
4780
5348
  "path": [
4781
5349
  "form",
4782
- "checkbox",
4783
- "size"
5350
+ "control",
5351
+ "readonly",
5352
+ "surface-color"
4784
5353
  ]
4785
5354
  },
4786
5355
  {
4787
- "value": "3px",
4788
- "type": "size",
5356
+ "value": "#656a761a",
5357
+ "type": "color",
5358
+ "group": "components",
4789
5359
  "original": {
4790
- "value": "3",
4791
- "type": "size"
5360
+ "value": "{color.border.faint.value}",
5361
+ "type": "color",
5362
+ "group": "components"
4792
5363
  },
4793
- "name": "token-form-checkbox-border-radius",
5364
+ "name": "token-form-control-readonly-border-color",
4794
5365
  "attributes": {
4795
5366
  "category": "form",
4796
- "type": "checkbox",
4797
- "item": "border",
4798
- "subitem": "radius"
5367
+ "type": "control",
5368
+ "item": "readonly",
5369
+ "subitem": "border-color"
4799
5370
  },
4800
5371
  "path": [
4801
5372
  "form",
4802
- "checkbox",
4803
- "border",
4804
- "radius"
5373
+ "control",
5374
+ "readonly",
5375
+ "border-color"
4805
5376
  ]
4806
5377
  },
4807
5378
  {
4808
- "value": "1px",
4809
- "type": "size",
5379
+ "value": "#8c909c",
5380
+ "type": "color",
5381
+ "group": "components",
4810
5382
  "original": {
4811
- "value": "1",
4812
- "type": "size"
5383
+ "value": "{color.foreground.disabled.value}",
5384
+ "type": "color",
5385
+ "group": "components"
4813
5386
  },
4814
- "name": "token-form-checkbox-border-width",
5387
+ "name": "token-form-control-disabled-foreground-color",
4815
5388
  "attributes": {
4816
5389
  "category": "form",
4817
- "type": "checkbox",
4818
- "item": "border",
4819
- "subitem": "width"
5390
+ "type": "control",
5391
+ "item": "disabled",
5392
+ "subitem": "foreground-color"
4820
5393
  },
4821
5394
  "path": [
4822
5395
  "form",
4823
- "checkbox",
4824
- "border",
4825
- "width"
5396
+ "control",
5397
+ "disabled",
5398
+ "foreground-color"
4826
5399
  ]
4827
5400
  },
4828
5401
  {
4829
- "value": "12px",
4830
- "type": "size",
5402
+ "value": "#fafafa",
5403
+ "type": "color",
5404
+ "group": "components",
4831
5405
  "original": {
4832
- "value": "12",
4833
- "type": "size"
5406
+ "value": "{color.surface.interactive-disabled.value}",
5407
+ "type": "color",
5408
+ "group": "components"
4834
5409
  },
4835
- "name": "token-form-checkbox-background-image-size",
5410
+ "name": "token-form-control-disabled-surface-color",
4836
5411
  "attributes": {
4837
5412
  "category": "form",
4838
- "type": "checkbox",
4839
- "item": "background-image",
4840
- "subitem": "size"
5413
+ "type": "control",
5414
+ "item": "disabled",
5415
+ "subitem": "surface-color"
4841
5416
  },
4842
5417
  "path": [
4843
5418
  "form",
4844
- "checkbox",
4845
- "background-image",
4846
- "size"
5419
+ "control",
5420
+ "disabled",
5421
+ "surface-color"
4847
5422
  ]
4848
5423
  },
4849
5424
  {
4850
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
4851
- "comment": "notice: the 'tick' color is hardcoded here!",
5425
+ "value": "#656a7633",
5426
+ "type": "color",
5427
+ "group": "components",
4852
5428
  "original": {
4853
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
4854
- "comment": "notice: the 'tick' color is hardcoded here!"
5429
+ "value": "{color.border.primary.value}",
5430
+ "type": "color",
5431
+ "group": "components"
4855
5432
  },
4856
- "name": "token-form-checkbox-background-image-data-url",
5433
+ "name": "token-form-control-disabled-border-color",
4857
5434
  "attributes": {
4858
5435
  "category": "form",
4859
- "type": "checkbox",
4860
- "item": "background-image",
4861
- "subitem": "data-url"
5436
+ "type": "control",
5437
+ "item": "disabled",
5438
+ "subitem": "border-color"
4862
5439
  },
4863
5440
  "path": [
4864
5441
  "form",
4865
- "checkbox",
4866
- "background-image",
4867
- "data-url"
5442
+ "control",
5443
+ "disabled",
5444
+ "border-color"
4868
5445
  ]
4869
5446
  },
4870
5447
  {
4871
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
4872
- "comment": "notice: the 'dash' color is hardcoded here!",
5448
+ "value": "7px",
5449
+ "type": "size",
5450
+ "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
4873
5451
  "original": {
4874
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
4875
- "comment": "notice: the 'dash' color is hardcoded here!"
5452
+ "value": "7",
5453
+ "type": "size",
5454
+ "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
4876
5455
  },
4877
- "name": "token-form-checkbox-background-image-data-url-indeterminate",
5456
+ "name": "token-form-control-padding",
4878
5457
  "attributes": {
4879
5458
  "category": "form",
4880
- "type": "checkbox",
4881
- "item": "background-image",
4882
- "subitem": "data-url-indeterminate"
5459
+ "type": "control",
5460
+ "item": "padding"
4883
5461
  },
4884
5462
  "path": [
4885
5463
  "form",
4886
- "checkbox",
4887
- "background-image",
4888
- "data-url-indeterminate"
5464
+ "control",
5465
+ "padding"
4889
5466
  ]
4890
5467
  },
4891
5468
  {
4892
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
4893
- "comment": "notice: the 'tick' color is hardcoded here!",
5469
+ "value": "5px",
5470
+ "type": "size",
4894
5471
  "original": {
4895
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
4896
- "comment": "notice: the 'tick' color is hardcoded here!"
5472
+ "value": "5",
5473
+ "type": "size"
4897
5474
  },
4898
- "name": "token-form-checkbox-background-image-data-url-disabled",
5475
+ "name": "token-form-control-border-radius",
4899
5476
  "attributes": {
4900
5477
  "category": "form",
4901
- "type": "checkbox",
4902
- "item": "background-image",
4903
- "subitem": "data-url-disabled"
5478
+ "type": "control",
5479
+ "item": "border",
5480
+ "subitem": "radius"
4904
5481
  },
4905
5482
  "path": [
4906
5483
  "form",
4907
- "checkbox",
4908
- "background-image",
4909
- "data-url-disabled"
5484
+ "control",
5485
+ "border",
5486
+ "radius"
4910
5487
  ]
4911
5488
  },
4912
5489
  {
4913
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
4914
- "comment": "notice: the 'dash' color is hardcoded here!",
5490
+ "value": "1px",
5491
+ "type": "size",
4915
5492
  "original": {
4916
- "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
4917
- "comment": "notice: the 'dash' color is hardcoded here!"
5493
+ "value": "1",
5494
+ "type": "size"
4918
5495
  },
4919
- "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
5496
+ "name": "token-form-control-border-width",
4920
5497
  "attributes": {
4921
5498
  "category": "form",
4922
- "type": "checkbox",
4923
- "item": "background-image",
4924
- "subitem": "data-url-indeterminate-disabled"
5499
+ "type": "control",
5500
+ "item": "border",
5501
+ "subitem": "width"
4925
5502
  },
4926
5503
  "path": [
4927
5504
  "form",
4928
- "checkbox",
4929
- "background-image",
4930
- "data-url-indeterminate-disabled"
5505
+ "control",
5506
+ "border",
5507
+ "width"
4931
5508
  ]
4932
5509
  },
4933
5510
  {
@@ -5659,61 +6236,6 @@
5659
6236
  "thumb-size"
5660
6237
  ]
5661
6238
  },
5662
- {
5663
- "value": "60px",
5664
- "type": "size",
5665
- "original": {
5666
- "value": "60",
5667
- "type": "size"
5668
- },
5669
- "name": "token-app-header-height",
5670
- "attributes": {
5671
- "category": "app-header",
5672
- "type": "height"
5673
- },
5674
- "path": [
5675
- "app-header",
5676
- "height"
5677
- ]
5678
- },
5679
- {
5680
- "value": "36px",
5681
- "type": "size",
5682
- "original": {
5683
- "value": "36",
5684
- "type": "size"
5685
- },
5686
- "name": "token-app-header-home-link-size",
5687
- "attributes": {
5688
- "category": "app-header",
5689
- "type": "home-link",
5690
- "item": "size"
5691
- },
5692
- "path": [
5693
- "app-header",
5694
- "home-link",
5695
- "size"
5696
- ]
5697
- },
5698
- {
5699
- "value": "28px",
5700
- "type": "size",
5701
- "original": {
5702
- "value": "28",
5703
- "type": "size"
5704
- },
5705
- "name": "token-app-header-logo-size",
5706
- "attributes": {
5707
- "category": "app-header",
5708
- "type": "logo",
5709
- "item": "size"
5710
- },
5711
- "path": [
5712
- "app-header",
5713
- "logo",
5714
- "size"
5715
- ]
5716
- },
5717
6239
  {
5718
6240
  "value": "36px",
5719
6241
  "type": "size",
@@ -6292,7 +6814,7 @@
6292
6814
  ]
6293
6815
  },
6294
6816
  {
6295
- "value": "#fff",
6817
+ "value": "#ffffff",
6296
6818
  "type": "color",
6297
6819
  "group": "components",
6298
6820
  "original": {