@adobe/spectrum-design-data 0.12.0 → 0.13.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 (39) hide show
  1. package/components/action-bar.json +2 -1
  2. package/components/avatar.json +2 -1
  3. package/components/bar-panel.json +14 -0
  4. package/components/card-horizontal.json +14 -0
  5. package/components/card.json +15 -0
  6. package/components/coach-mark.json +5 -1
  7. package/components/collection-card.json +13 -0
  8. package/components/color-control.json +14 -0
  9. package/components/combo-box.json +20 -4
  10. package/components/date-field.json +13 -0
  11. package/components/double-calendar.json +13 -0
  12. package/components/field.json +13 -0
  13. package/components/floating-action-button.json +13 -0
  14. package/components/form-item.json +13 -0
  15. package/components/in-field-button.json +14 -0
  16. package/components/menu.json +3 -1
  17. package/components/segmented-text-field.json +13 -0
  18. package/components/select-box.json +2 -1
  19. package/components/side-navigation.json +2 -1
  20. package/components/single-calendar.json +13 -0
  21. package/components/slider.json +4 -1
  22. package/components/stack-item.json +23 -0
  23. package/components/status-light.json +2 -1
  24. package/components/steplist.json +2 -1
  25. package/components/swatch.json +9 -1
  26. package/components/table.json +2 -1
  27. package/components/time-field.json +13 -0
  28. package/components/tree-view.json +7 -2
  29. package/components/triple-calendar.json +13 -0
  30. package/components/user-card.json +14 -0
  31. package/fields/referenceScaleIndex.json +16 -0
  32. package/package.json +1 -1
  33. package/registry/property-terms.json +2 -2
  34. package/tokens/color-aliases.tokens.json +151 -65
  35. package/tokens/color-component.tokens.json +99 -40
  36. package/tokens/layout-component.tokens.json +1023 -600
  37. package/tokens/layout.tokens.json +305 -128
  38. package/tokens/semantic-color-palette.tokens.json +260 -88
  39. package/tokens/typography.tokens.json +144 -72
package/tokens/color-aliases.tokens.json CHANGED
@@ -1201,7 +1201,9 @@
1201
1201
  },
1202
1202
  {
1203
1203
  "name": {
1204
- "property": "disabled-background-color"
1204
+ "property": "background-color",
1205
+ "state": "disabled",
1206
+ "legacyKey": "disabled-background-color"
1205
1207
  },
1206
1208
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1207
1209
  "$ref": "16d156d1-4af9-4878-9984-643a2c08aff8",
@@ -1209,7 +1211,9 @@
1209
1211
  },
1210
1212
  {
1211
1213
  "name": {
1212
- "property": "disabled-border-color"
1214
+ "property": "border-color",
1215
+ "state": "disabled",
1216
+ "legacyKey": "disabled-border-color"
1213
1217
  },
1214
1218
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1215
1219
  "$ref": "dac01571-b26a-4aef-ace7-d0e34e917570",
@@ -1217,7 +1221,9 @@
1217
1221
  },
1218
1222
  {
1219
1223
  "name": {
1220
- "property": "disabled-content-color"
1224
+ "property": "content-color",
1225
+ "state": "disabled",
1226
+ "legacyKey": "disabled-content-color"
1221
1227
  },
1222
1228
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1223
1229
  "$ref": "d1edde4a-c912-42fb-b8d4-e10e6b994d2f",
@@ -1225,7 +1231,11 @@
1225
1231
  },
1226
1232
  {
1227
1233
  "name": {
1228
- "property": "disabled-static-black-background-color"
1234
+ "variant": "static",
1235
+ "colorFamily": "black",
1236
+ "property": "background-color",
1237
+ "state": "disabled",
1238
+ "legacyKey": "disabled-static-black-background-color"
1229
1239
  },
1230
1240
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1231
1241
  "$ref": "7565eb32-d745-4fc3-8779-a717f8ba910a",
@@ -1233,7 +1243,11 @@
1233
1243
  },
1234
1244
  {
1235
1245
  "name": {
1236
- "property": "disabled-static-black-border-color"
1246
+ "variant": "static",
1247
+ "colorFamily": "black",
1248
+ "property": "border-color",
1249
+ "state": "disabled",
1250
+ "legacyKey": "disabled-static-black-border-color"
1237
1251
  },
1238
1252
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1239
1253
  "$ref": "16a871e1-d9df-42bb-8889-99059d70e82e",
@@ -1241,7 +1255,11 @@
1241
1255
  },
1242
1256
  {
1243
1257
  "name": {
1244
- "property": "disabled-static-black-content-color"
1258
+ "variant": "static",
1259
+ "colorFamily": "black",
1260
+ "property": "content-color",
1261
+ "state": "disabled",
1262
+ "legacyKey": "disabled-static-black-content-color"
1245
1263
  },
1246
1264
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1247
1265
  "$ref": "b769453b-586c-4dd2-b3a1-ddf5964160bc",
@@ -1249,7 +1267,11 @@
1249
1267
  },
1250
1268
  {
1251
1269
  "name": {
1252
- "property": "disabled-static-white-background-color"
1270
+ "variant": "static",
1271
+ "colorFamily": "white",
1272
+ "property": "background-color",
1273
+ "state": "disabled",
1274
+ "legacyKey": "disabled-static-white-background-color"
1253
1275
  },
1254
1276
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1255
1277
  "$ref": "a1b64a62-7c78-415e-a9be-c86acbf361ca",
@@ -1257,7 +1279,11 @@
1257
1279
  },
1258
1280
  {
1259
1281
  "name": {
1260
- "property": "disabled-static-white-border-color"
1282
+ "variant": "static",
1283
+ "colorFamily": "white",
1284
+ "property": "border-color",
1285
+ "state": "disabled",
1286
+ "legacyKey": "disabled-static-white-border-color"
1261
1287
  },
1262
1288
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1263
1289
  "$ref": "5ffa0283-ce9c-4f96-9227-f559ec54ee0c",
@@ -1265,7 +1291,11 @@
1265
1291
  },
1266
1292
  {
1267
1293
  "name": {
1268
- "property": "disabled-static-white-content-color"
1294
+ "variant": "static",
1295
+ "colorFamily": "white",
1296
+ "property": "content-color",
1297
+ "state": "disabled",
1298
+ "legacyKey": "disabled-static-white-content-color"
1269
1299
  },
1270
1300
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
1271
1301
  "$ref": "12e610d4-e3dc-4e86-9c09-09d86915b6f1",
@@ -2493,8 +2523,10 @@
2493
2523
  },
2494
2524
  {
2495
2525
  "name": {
2496
- "property": "informative-visual-color",
2497
- "colorScheme": "light"
2526
+ "colorRole": "informative",
2527
+ "property": "visual-color",
2528
+ "colorScheme": "light",
2529
+ "legacyKey": "informative-visual-color"
2498
2530
  },
2499
2531
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2500
2532
  "$ref": "b4efe4b2-3787-47df-a7a0-5d89c3641f9f",
@@ -2504,8 +2536,10 @@
2504
2536
  },
2505
2537
  {
2506
2538
  "name": {
2507
- "property": "informative-visual-color",
2508
- "colorScheme": "dark"
2539
+ "colorRole": "informative",
2540
+ "property": "visual-color",
2541
+ "colorScheme": "dark",
2542
+ "legacyKey": "informative-visual-color"
2509
2543
  },
2510
2544
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2511
2545
  "$ref": "41b73196-0bc1-493e-9b5d-49f608914f5a",
@@ -2515,8 +2549,10 @@
2515
2549
  },
2516
2550
  {
2517
2551
  "name": {
2518
- "property": "informative-visual-color",
2519
- "colorScheme": "wireframe"
2552
+ "colorRole": "informative",
2553
+ "property": "visual-color",
2554
+ "colorScheme": "wireframe",
2555
+ "legacyKey": "informative-visual-color"
2520
2556
  },
2521
2557
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2522
2558
  "$ref": "b4efe4b2-3787-47df-a7a0-5d89c3641f9f",
@@ -2838,8 +2874,10 @@
2838
2874
  },
2839
2875
  {
2840
2876
  "name": {
2841
- "property": "negative-border-color-focus",
2842
- "state": "hover"
2877
+ "colorRole": "negative",
2878
+ "property": "border-color",
2879
+ "state": "focus-hover",
2880
+ "legacyKey": "negative-border-color-focus-hover"
2843
2881
  },
2844
2882
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2845
2883
  "$ref": "0c35da5c-cf37-4349-82e4-8739ea94aa65",
@@ -2867,8 +2905,10 @@
2867
2905
  },
2868
2906
  {
2869
2907
  "name": {
2870
- "property": "negative-content-color",
2871
- "state": "default"
2908
+ "colorRole": "negative",
2909
+ "property": "content-color",
2910
+ "state": "default",
2911
+ "legacyKey": "negative-content-color-default"
2872
2912
  },
2873
2913
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2874
2914
  "$ref": "0b469d2e-7c66-4188-b6bf-bbc379f75538",
@@ -2876,8 +2916,10 @@
2876
2916
  },
2877
2917
  {
2878
2918
  "name": {
2879
- "property": "negative-content-color",
2880
- "state": "down"
2919
+ "colorRole": "negative",
2920
+ "property": "content-color",
2921
+ "state": "down",
2922
+ "legacyKey": "negative-content-color-down"
2881
2923
  },
2882
2924
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2883
2925
  "$ref": "2ea616aa-e08f-47cb-a3b0-3d7a06bd6ec2",
@@ -2885,8 +2927,10 @@
2885
2927
  },
2886
2928
  {
2887
2929
  "name": {
2888
- "property": "negative-content-color",
2889
- "state": "hover"
2930
+ "colorRole": "negative",
2931
+ "property": "content-color",
2932
+ "state": "hover",
2933
+ "legacyKey": "negative-content-color-hover"
2890
2934
  },
2891
2935
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2892
2936
  "$ref": "2ea616aa-e08f-47cb-a3b0-3d7a06bd6ec2",
@@ -2904,8 +2948,10 @@
2904
2948
  },
2905
2949
  {
2906
2950
  "name": {
2907
- "property": "negative-visual-color",
2908
- "colorScheme": "light"
2951
+ "colorRole": "negative",
2952
+ "property": "visual-color",
2953
+ "colorScheme": "light",
2954
+ "legacyKey": "negative-visual-color"
2909
2955
  },
2910
2956
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2911
2957
  "$ref": "d858b481-8970-4547-aed1-b6388c36aba4",
@@ -2915,8 +2961,10 @@
2915
2961
  },
2916
2962
  {
2917
2963
  "name": {
2918
- "property": "negative-visual-color",
2919
- "colorScheme": "dark"
2964
+ "colorRole": "negative",
2965
+ "property": "visual-color",
2966
+ "colorScheme": "dark",
2967
+ "legacyKey": "negative-visual-color"
2920
2968
  },
2921
2969
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2922
2970
  "$ref": "0b469d2e-7c66-4188-b6bf-bbc379f75538",
@@ -2926,8 +2974,10 @@
2926
2974
  },
2927
2975
  {
2928
2976
  "name": {
2929
- "property": "negative-visual-color",
2930
- "colorScheme": "wireframe"
2977
+ "colorRole": "negative",
2978
+ "property": "visual-color",
2979
+ "colorScheme": "wireframe",
2980
+ "legacyKey": "negative-visual-color"
2931
2981
  },
2932
2982
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2933
2983
  "$ref": "d858b481-8970-4547-aed1-b6388c36aba4",
@@ -2977,8 +3027,10 @@
2977
3027
  },
2978
3028
  {
2979
3029
  "name": {
2980
- "property": "neutral-background-color-selected",
2981
- "state": "default"
3030
+ "colorRole": "neutral",
3031
+ "property": "background-color",
3032
+ "state": "selected-default",
3033
+ "legacyKey": "neutral-background-color-selected-default"
2982
3034
  },
2983
3035
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2984
3036
  "$ref": "f417fb5b-c7cc-41c2-a870-f6cd9a280c22",
@@ -2986,8 +3038,10 @@
2986
3038
  },
2987
3039
  {
2988
3040
  "name": {
2989
- "property": "neutral-background-color-selected",
2990
- "state": "down"
3041
+ "colorRole": "neutral",
3042
+ "property": "background-color",
3043
+ "state": "selected-down",
3044
+ "legacyKey": "neutral-background-color-selected-down"
2991
3045
  },
2992
3046
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
2993
3047
  "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
@@ -2995,8 +3049,10 @@
2995
3049
  },
2996
3050
  {
2997
3051
  "name": {
2998
- "property": "neutral-background-color-selected",
2999
- "state": "hover"
3052
+ "colorRole": "neutral",
3053
+ "property": "background-color",
3054
+ "state": "selected-hover",
3055
+ "legacyKey": "neutral-background-color-selected-hover"
3000
3056
  },
3001
3057
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3002
3058
  "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
@@ -3004,8 +3060,10 @@
3004
3060
  },
3005
3061
  {
3006
3062
  "name": {
3007
- "property": "neutral-background-color-selected",
3008
- "state": "key-focus"
3063
+ "colorRole": "neutral",
3064
+ "property": "background-color",
3065
+ "state": "selected-key-focus",
3066
+ "legacyKey": "neutral-background-color-selected-key-focus"
3009
3067
  },
3010
3068
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3011
3069
  "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
@@ -3013,8 +3071,10 @@
3013
3071
  },
3014
3072
  {
3015
3073
  "name": {
3016
- "property": "neutral-content-color",
3017
- "state": "default"
3074
+ "colorRole": "neutral",
3075
+ "property": "content-color",
3076
+ "state": "default",
3077
+ "legacyKey": "neutral-content-color-default"
3018
3078
  },
3019
3079
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3020
3080
  "$ref": "f417fb5b-c7cc-41c2-a870-f6cd9a280c22",
@@ -3022,8 +3082,10 @@
3022
3082
  },
3023
3083
  {
3024
3084
  "name": {
3025
- "property": "neutral-content-color",
3026
- "state": "down"
3085
+ "colorRole": "neutral",
3086
+ "property": "content-color",
3087
+ "state": "down",
3088
+ "legacyKey": "neutral-content-color-down"
3027
3089
  },
3028
3090
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3029
3091
  "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
@@ -3031,8 +3093,10 @@
3031
3093
  },
3032
3094
  {
3033
3095
  "name": {
3034
- "property": "neutral-content-color",
3035
- "state": "focus"
3096
+ "colorRole": "neutral",
3097
+ "property": "content-color",
3098
+ "state": "focus",
3099
+ "legacyKey": "neutral-content-color-focus"
3036
3100
  },
3037
3101
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3038
3102
  "$ref": "cf169d95-e427-4665-a983-c24727dbfa60",
@@ -3040,8 +3104,10 @@
3040
3104
  },
3041
3105
  {
3042
3106
  "name": {
3043
- "property": "neutral-content-color-focus",
3044
- "state": "hover"
3107
+ "colorRole": "neutral",
3108
+ "property": "content-color",
3109
+ "state": "focus-hover",
3110
+ "legacyKey": "neutral-content-color-focus-hover"
3045
3111
  },
3046
3112
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3047
3113
  "$ref": "cf169d95-e427-4665-a983-c24727dbfa60",
@@ -3049,8 +3115,10 @@
3049
3115
  },
3050
3116
  {
3051
3117
  "name": {
3052
- "property": "neutral-content-color",
3053
- "state": "hover"
3118
+ "colorRole": "neutral",
3119
+ "property": "content-color",
3120
+ "state": "hover",
3121
+ "legacyKey": "neutral-content-color-hover"
3054
3122
  },
3055
3123
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3056
3124
  "$ref": "e0eaa59c-81ad-4632-a61d-ab0bee53af4a",
@@ -3353,8 +3421,10 @@
3353
3421
  },
3354
3422
  {
3355
3423
  "name": {
3356
- "property": "neutral-visual-color",
3357
- "colorScheme": "light"
3424
+ "colorRole": "neutral",
3425
+ "property": "visual-color",
3426
+ "colorScheme": "light",
3427
+ "legacyKey": "neutral-visual-color"
3358
3428
  },
3359
3429
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3360
3430
  "$ref": "60077744-c665-4c80-8f88-dff31a10219e",
@@ -3364,8 +3434,10 @@
3364
3434
  },
3365
3435
  {
3366
3436
  "name": {
3367
- "property": "neutral-visual-color",
3368
- "colorScheme": "dark"
3437
+ "colorRole": "neutral",
3438
+ "property": "visual-color",
3439
+ "colorScheme": "dark",
3440
+ "legacyKey": "neutral-visual-color"
3369
3441
  },
3370
3442
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3371
3443
  "$ref": "b49953b7-ef80-4e57-b1e7-546279b36bb4",
@@ -3375,8 +3447,10 @@
3375
3447
  },
3376
3448
  {
3377
3449
  "name": {
3378
- "property": "neutral-visual-color",
3379
- "colorScheme": "wireframe"
3450
+ "colorRole": "neutral",
3451
+ "property": "visual-color",
3452
+ "colorScheme": "wireframe",
3453
+ "legacyKey": "neutral-visual-color"
3380
3454
  },
3381
3455
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3382
3456
  "$ref": "60077744-c665-4c80-8f88-dff31a10219e",
@@ -3425,8 +3499,10 @@
3425
3499
  },
3426
3500
  {
3427
3501
  "name": {
3428
- "property": "notice-visual-color",
3429
- "colorScheme": "light"
3502
+ "colorRole": "notice",
3503
+ "property": "visual-color",
3504
+ "colorScheme": "light",
3505
+ "legacyKey": "notice-visual-color"
3430
3506
  },
3431
3507
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3432
3508
  "$ref": "a83cdd4d-b8a9-42af-98c4-459f721abbff",
@@ -3436,8 +3512,10 @@
3436
3512
  },
3437
3513
  {
3438
3514
  "name": {
3439
- "property": "notice-visual-color",
3440
- "colorScheme": "dark"
3515
+ "colorRole": "notice",
3516
+ "property": "visual-color",
3517
+ "colorScheme": "dark",
3518
+ "legacyKey": "notice-visual-color"
3441
3519
  },
3442
3520
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3443
3521
  "$ref": "df87ca09-ff38-485e-90f7-6d9cbfbb6714",
@@ -3447,8 +3525,10 @@
3447
3525
  },
3448
3526
  {
3449
3527
  "name": {
3450
- "property": "notice-visual-color",
3451
- "colorScheme": "wireframe"
3528
+ "colorRole": "notice",
3529
+ "property": "visual-color",
3530
+ "colorScheme": "wireframe",
3531
+ "legacyKey": "notice-visual-color"
3452
3532
  },
3453
3533
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3454
3534
  "$ref": "a83cdd4d-b8a9-42af-98c4-459f721abbff",
@@ -3916,8 +3996,10 @@
3916
3996
  },
3917
3997
  {
3918
3998
  "name": {
3919
- "property": "positive-visual-color",
3920
- "colorScheme": "light"
3999
+ "colorRole": "positive",
4000
+ "property": "visual-color",
4001
+ "colorScheme": "light",
4002
+ "legacyKey": "positive-visual-color"
3921
4003
  },
3922
4004
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3923
4005
  "$ref": "ee02d9d5-b840-44af-be8a-0f10086e8f7e",
@@ -3927,8 +4009,10 @@
3927
4009
  },
3928
4010
  {
3929
4011
  "name": {
3930
- "property": "positive-visual-color",
3931
- "colorScheme": "dark"
4012
+ "colorRole": "positive",
4013
+ "property": "visual-color",
4014
+ "colorScheme": "dark",
4015
+ "legacyKey": "positive-visual-color"
3932
4016
  },
3933
4017
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3934
4018
  "$ref": "1cd86108-ff79-4ccf-911e-8de9986c9053",
@@ -3938,8 +4022,10 @@
3938
4022
  },
3939
4023
  {
3940
4024
  "name": {
3941
- "property": "positive-visual-color",
3942
- "colorScheme": "wireframe"
4025
+ "colorRole": "positive",
4026
+ "property": "visual-color",
4027
+ "colorScheme": "wireframe",
4028
+ "legacyKey": "positive-visual-color"
3943
4029
  },
3944
4030
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/alias.json",
3945
4031
  "$ref": "ee02d9d5-b840-44af-be8a-0f10086e8f7e",