@workday/canvas-kit-docs 10.0.0-alpha.446-next.0 → 10.0.0-alpha.449-next.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 (3) hide show
  1. package/dist/es6/lib/docs.js +90 -150
  2. package/dist/mdx/10.0-UPGRADE_GUIDE.mdx +49 -1
  3. package/package.json +5 -5
package/dist/es6/lib/docs.js CHANGED
@@ -21276,7 +21276,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
21276
21276
  "tags": {},
21277
21277
  "type": {
21278
21278
  "kind": "number",
21279
- "value": 1
21279
+ "value": 0.0625
21280
21280
  }
21281
21281
  },
21282
21282
  {
@@ -21291,8 +21291,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
21291
21291
  ],
21292
21292
  "tags": {},
21293
21293
  "type": {
21294
- "kind": "number",
21295
- "value": 280
21294
+ "kind": "primitive",
21295
+ "value": "string"
21296
21296
  }
21297
21297
  },
21298
21298
  {
@@ -54040,19 +54040,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
54040
54040
  },
54041
54041
  {
54042
54042
  "kind": "string",
54043
- "value": "40px"
54043
+ "value": "2.5rem"
54044
54044
  },
54045
54045
  {
54046
54046
  "kind": "string",
54047
- "value": "80px"
54047
+ "value": "5rem"
54048
54048
  },
54049
54049
  {
54050
54050
  "kind": "string",
54051
- "value": "32px"
54051
+ "value": "2rem"
54052
54052
  },
54053
54053
  {
54054
54054
  "kind": "string",
54055
- "value": "24px"
54055
+ "value": "1.5rem"
54056
54056
  }
54057
54057
  ]
54058
54058
  }
@@ -118121,7 +118121,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
118121
118121
  "typeParameters": [
118122
118122
  {
118123
118123
  "kind": "symbol",
118124
- "name": "PopperJS.Instance",
118124
+ "name": "Instance",
118125
118125
  "value": "Instance"
118126
118126
  }
118127
118127
  ]
@@ -149464,7 +149464,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
149464
149464
  "typeParameters": [
149465
149465
  {
149466
149466
  "kind": "symbol",
149467
- "name": "PopperJS.Instance",
149467
+ "name": "Instance",
149468
149468
  "value": "Instance"
149469
149469
  }
149470
149470
  ]
@@ -178431,7 +178431,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
178431
178431
  "typeParameters": [],
178432
178432
  "value": {
178433
178433
  "kind": "symbol",
178434
- "name": "PopperJS.Placement",
178434
+ "name": "PopperJSPlacement",
178435
178435
  "value": "Placement"
178436
178436
  }
178437
178437
  }
@@ -181654,69 +181654,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
181654
181654
  "kind": "type",
181655
181655
  "typeParameters": [],
181656
181656
  "value": {
181657
- "kind": "union",
181658
- "value": [
181659
- {
181660
- "kind": "string",
181661
- "value": "auto"
181662
- },
181663
- {
181664
- "kind": "string",
181665
- "value": "left"
181666
- },
181667
- {
181668
- "kind": "string",
181669
- "value": "right"
181670
- },
181671
- {
181672
- "kind": "string",
181673
- "value": "top"
181674
- },
181675
- {
181676
- "kind": "string",
181677
- "value": "bottom"
181678
- },
181679
- {
181680
- "kind": "string",
181681
- "value": "auto-start"
181682
- },
181683
- {
181684
- "kind": "string",
181685
- "value": "auto-end"
181686
- },
181687
- {
181688
- "kind": "string",
181689
- "value": "top-start"
181690
- },
181691
- {
181692
- "kind": "string",
181693
- "value": "top-end"
181694
- },
181695
- {
181696
- "kind": "string",
181697
- "value": "bottom-start"
181698
- },
181699
- {
181700
- "kind": "string",
181701
- "value": "bottom-end"
181702
- },
181703
- {
181704
- "kind": "string",
181705
- "value": "right-start"
181706
- },
181707
- {
181708
- "kind": "string",
181709
- "value": "right-end"
181710
- },
181711
- {
181712
- "kind": "string",
181713
- "value": "left-start"
181714
- },
181715
- {
181716
- "kind": "string",
181717
- "value": "left-end"
181718
- }
181719
- ]
181657
+ "kind": "symbol",
181658
+ "name": "PopperJSPlacement",
181659
+ "value": "Placement"
181720
181660
  }
181721
181661
  }
181722
181662
  },
@@ -181736,7 +181676,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
181736
181676
  "typeParameters": [],
181737
181677
  "value": {
181738
181678
  "kind": "symbol",
181739
- "name": "PopperJS.Options",
181679
+ "name": "Options",
181740
181680
  "value": "Options"
181741
181681
  }
181742
181682
  }
@@ -182097,7 +182037,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
182097
182037
  "typeParameters": [
182098
182038
  {
182099
182039
  "kind": "symbol",
182100
- "name": "PopperJS.Instance",
182040
+ "name": "Instance",
182101
182041
  "value": "Instance"
182102
182042
  }
182103
182043
  ]
@@ -183851,7 +183791,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
183851
183791
  "typeParameters": [
183852
183792
  {
183853
183793
  "kind": "symbol",
183854
- "name": "PopperJS.Instance",
183794
+ "name": "Instance",
183855
183795
  "value": "Instance"
183856
183796
  }
183857
183797
  ]
@@ -193865,7 +193805,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
193865
193805
  "typeParameters": [
193866
193806
  {
193867
193807
  "kind": "symbol",
193868
- "name": "PopperJS.Instance",
193808
+ "name": "Instance",
193869
193809
  "value": "Instance"
193870
193810
  }
193871
193811
  ]
@@ -194221,7 +194161,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
194221
194161
  "typeParameters": [
194222
194162
  {
194223
194163
  "kind": "symbol",
194224
- "name": "PopperJS.Instance",
194164
+ "name": "Instance",
194225
194165
  "value": "Instance"
194226
194166
  }
194227
194167
  ]
@@ -228588,7 +228528,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228588
228528
  "required": true,
228589
228529
  "type": {
228590
228530
  "kind": "string",
228591
- "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
228531
+ "value": "0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)"
228592
228532
  },
228593
228533
  "description": "",
228594
228534
  "declarations": [
@@ -228625,7 +228565,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228625
228565
  "required": true,
228626
228566
  "type": {
228627
228567
  "kind": "string",
228628
- "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
228568
+ "value": "0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)"
228629
228569
  },
228630
228570
  "description": "",
228631
228571
  "declarations": [
@@ -228662,7 +228602,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228662
228602
  "required": true,
228663
228603
  "type": {
228664
228604
  "kind": "string",
228665
- "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
228605
+ "value": "0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)"
228666
228606
  },
228667
228607
  "description": "",
228668
228608
  "declarations": [
@@ -228699,7 +228639,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228699
228639
  "required": true,
228700
228640
  "type": {
228701
228641
  "kind": "string",
228702
- "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
228642
+ "value": "0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)"
228703
228643
  },
228704
228644
  "description": "",
228705
228645
  "declarations": [
@@ -228736,7 +228676,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228736
228676
  "required": true,
228737
228677
  "type": {
228738
228678
  "kind": "string",
228739
- "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
228679
+ "value": "0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)"
228740
228680
  },
228741
228681
  "description": "",
228742
228682
  "declarations": [
@@ -228773,7 +228713,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228773
228713
  "required": true,
228774
228714
  "type": {
228775
228715
  "kind": "string",
228776
- "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
228716
+ "value": "0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)"
228777
228717
  },
228778
228718
  "description": "",
228779
228719
  "declarations": [
@@ -228848,7 +228788,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228848
228788
  "required": true,
228849
228789
  "type": {
228850
228790
  "kind": "string",
228851
- "value": "0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)"
228791
+ "value": "0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)"
228852
228792
  },
228853
228793
  "description": "",
228854
228794
  "declarations": [
@@ -228870,7 +228810,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228870
228810
  "required": true,
228871
228811
  "type": {
228872
228812
  "kind": "string",
228873
- "value": "0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)"
228813
+ "value": "0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)"
228874
228814
  },
228875
228815
  "description": "",
228876
228816
  "declarations": [
@@ -228892,7 +228832,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228892
228832
  "required": true,
228893
228833
  "type": {
228894
228834
  "kind": "string",
228895
- "value": "0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)"
228835
+ "value": "0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)"
228896
228836
  },
228897
228837
  "description": "",
228898
228838
  "declarations": [
@@ -228914,7 +228854,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228914
228854
  "required": true,
228915
228855
  "type": {
228916
228856
  "kind": "string",
228917
- "value": "0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)"
228857
+ "value": "0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)"
228918
228858
  },
228919
228859
  "description": "",
228920
228860
  "declarations": [
@@ -228936,7 +228876,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228936
228876
  "required": true,
228937
228877
  "type": {
228938
228878
  "kind": "string",
228939
- "value": "0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)"
228879
+ "value": "0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)"
228940
228880
  },
228941
228881
  "description": "",
228942
228882
  "declarations": [
@@ -228958,7 +228898,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228958
228898
  "required": true,
228959
228899
  "type": {
228960
228900
  "kind": "string",
228961
- "value": "0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)"
228901
+ "value": "0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)"
228962
228902
  },
228963
228903
  "description": "",
228964
228904
  "declarations": [
@@ -229140,23 +229080,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229140
229080
  "value": [
229141
229081
  {
229142
229082
  "kind": "string",
229143
- "value": "8px"
229083
+ "value": "4px"
229144
229084
  },
229145
229085
  {
229146
229086
  "kind": "string",
229147
- "value": "0px"
229087
+ "value": "999px"
229148
229088
  },
229149
229089
  {
229150
229090
  "kind": "string",
229151
- "value": "4px"
229091
+ "value": "2px"
229152
229092
  },
229153
229093
  {
229154
229094
  "kind": "string",
229155
- "value": "999px"
229095
+ "value": "0px"
229156
229096
  },
229157
229097
  {
229158
229098
  "kind": "string",
229159
- "value": "2px"
229099
+ "value": "8px"
229160
229100
  }
229161
229101
  ]
229162
229102
  }
@@ -229182,7 +229122,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229182
229122
  {
229183
229123
  "name": "CanvasSpace",
229184
229124
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
229185
- "description": "Type for the `space` object with keys and px values (strings)",
229125
+ "description": "Type for the `space` object with keys and rem values (strings)",
229186
229126
  "declarations": [
229187
229127
  {
229188
229128
  "name": "CanvasSpace",
@@ -229199,7 +229139,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229199
229139
  "required": true,
229200
229140
  "type": {
229201
229141
  "kind": "string",
229202
- "value": "0px"
229142
+ "value": "0"
229203
229143
  },
229204
229144
  "description": "",
229205
229145
  "declarations": [
@@ -229216,7 +229156,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229216
229156
  "required": true,
229217
229157
  "type": {
229218
229158
  "kind": "string",
229219
- "value": "4px"
229159
+ "value": "0.25rem"
229220
229160
  },
229221
229161
  "description": "",
229222
229162
  "declarations": [
@@ -229233,7 +229173,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229233
229173
  "required": true,
229234
229174
  "type": {
229235
229175
  "kind": "string",
229236
- "value": "8px"
229176
+ "value": "0.5rem"
229237
229177
  },
229238
229178
  "description": "",
229239
229179
  "declarations": [
@@ -229250,7 +229190,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229250
229190
  "required": true,
229251
229191
  "type": {
229252
229192
  "kind": "string",
229253
- "value": "12px"
229193
+ "value": "0.75rem"
229254
229194
  },
229255
229195
  "description": "",
229256
229196
  "declarations": [
@@ -229267,7 +229207,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229267
229207
  "required": true,
229268
229208
  "type": {
229269
229209
  "kind": "string",
229270
- "value": "16px"
229210
+ "value": "1rem"
229271
229211
  },
229272
229212
  "description": "",
229273
229213
  "declarations": [
@@ -229284,7 +229224,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229284
229224
  "required": true,
229285
229225
  "type": {
229286
229226
  "kind": "string",
229287
- "value": "24px"
229227
+ "value": "1.5rem"
229288
229228
  },
229289
229229
  "description": "",
229290
229230
  "declarations": [
@@ -229301,7 +229241,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229301
229241
  "required": true,
229302
229242
  "type": {
229303
229243
  "kind": "string",
229304
- "value": "32px"
229244
+ "value": "2rem"
229305
229245
  },
229306
229246
  "description": "",
229307
229247
  "declarations": [
@@ -229318,7 +229258,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229318
229258
  "required": true,
229319
229259
  "type": {
229320
229260
  "kind": "string",
229321
- "value": "40px"
229261
+ "value": "2.5rem"
229322
229262
  },
229323
229263
  "description": "",
229324
229264
  "declarations": [
@@ -229335,7 +229275,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229335
229275
  "required": true,
229336
229276
  "type": {
229337
229277
  "kind": "string",
229338
- "value": "64px"
229278
+ "value": "4rem"
229339
229279
  },
229340
229280
  "description": "",
229341
229281
  "declarations": [
@@ -229352,7 +229292,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229352
229292
  "required": true,
229353
229293
  "type": {
229354
229294
  "kind": "string",
229355
- "value": "80px"
229295
+ "value": "5rem"
229356
229296
  },
229357
229297
  "description": "",
229358
229298
  "declarations": [
@@ -229394,7 +229334,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229394
229334
  {
229395
229335
  "name": "CanvasSpaceValues",
229396
229336
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
229397
- "description": "The px values for CanvasSpace (strings)",
229337
+ "description": "The rem values for CanvasSpace (strings)",
229398
229338
  "declarations": [
229399
229339
  {
229400
229340
  "name": "CanvasSpaceValues",
@@ -229410,43 +229350,43 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229410
229350
  "value": [
229411
229351
  {
229412
229352
  "kind": "string",
229413
- "value": "40px"
229353
+ "value": "2.5rem"
229414
229354
  },
229415
229355
  {
229416
229356
  "kind": "string",
229417
- "value": "80px"
229357
+ "value": "5rem"
229418
229358
  },
229419
229359
  {
229420
229360
  "kind": "string",
229421
- "value": "32px"
229361
+ "value": "2rem"
229422
229362
  },
229423
229363
  {
229424
229364
  "kind": "string",
229425
- "value": "24px"
229365
+ "value": "1.5rem"
229426
229366
  },
229427
229367
  {
229428
229368
  "kind": "string",
229429
- "value": "16px"
229369
+ "value": "1rem"
229430
229370
  },
229431
229371
  {
229432
229372
  "kind": "string",
229433
- "value": "12px"
229373
+ "value": "0.75rem"
229434
229374
  },
229435
229375
  {
229436
229376
  "kind": "string",
229437
- "value": "8px"
229377
+ "value": "0.5rem"
229438
229378
  },
229439
229379
  {
229440
229380
  "kind": "string",
229441
- "value": "0px"
229381
+ "value": "0"
229442
229382
  },
229443
229383
  {
229444
229384
  "kind": "string",
229445
- "value": "4px"
229385
+ "value": "0.25rem"
229446
229386
  },
229447
229387
  {
229448
229388
  "kind": "string",
229449
- "value": "64px"
229389
+ "value": "4rem"
229450
229390
  }
229451
229391
  ]
229452
229392
  }
@@ -229455,7 +229395,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229455
229395
  {
229456
229396
  "name": "space",
229457
229397
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
229458
- "description": "An object of space keys and px values (strings)",
229398
+ "description": "An object of space keys and rem values (strings)\n\nBelow is a table to show the equivalent values from `px` to `rem`.\nThis is based on the default browser font size which is `16px`.\n\n| px Value | rem Value | space token |\n| --------- | --------- | ----------- |\n| 0 | 0 | zero |\n| 4px | 0.25rem | xxxs |\n| 8px | 0.5rem | xxs |\n| 12px | 0.75rem | xs |\n| 16px | 1rem | s |\n| 24px | 1.5rem | m |\n| 32px | 2rem | l |\n| 40px | 2.5rem | xl |\n| 64px | 4rem | xxl |\n| 80px | 5rem | xxxl |",
229459
229399
  "declarations": [
229460
229400
  {
229461
229401
  "name": "space",
@@ -229472,7 +229412,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229472
229412
  {
229473
229413
  "name": "CanvasSpaceNumbers",
229474
229414
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
229475
- "description": "Type for the `spaceNumbers` object with keys and numeric px values (numbers)",
229415
+ "description": "Type for the `spaceNumbers` object with keys and numeric rem values (numbers)",
229476
229416
  "declarations": [
229477
229417
  {
229478
229418
  "name": "CanvasSpaceNumbers",
@@ -229506,7 +229446,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229506
229446
  "required": true,
229507
229447
  "type": {
229508
229448
  "kind": "number",
229509
- "value": 4
229449
+ "value": 0.25
229510
229450
  },
229511
229451
  "description": "",
229512
229452
  "declarations": [
@@ -229523,7 +229463,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229523
229463
  "required": true,
229524
229464
  "type": {
229525
229465
  "kind": "number",
229526
- "value": 8
229466
+ "value": 0.5
229527
229467
  },
229528
229468
  "description": "",
229529
229469
  "declarations": [
@@ -229540,7 +229480,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229540
229480
  "required": true,
229541
229481
  "type": {
229542
229482
  "kind": "number",
229543
- "value": 12
229483
+ "value": 0.75
229544
229484
  },
229545
229485
  "description": "",
229546
229486
  "declarations": [
@@ -229557,7 +229497,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229557
229497
  "required": true,
229558
229498
  "type": {
229559
229499
  "kind": "number",
229560
- "value": 16
229500
+ "value": 1
229561
229501
  },
229562
229502
  "description": "",
229563
229503
  "declarations": [
@@ -229574,7 +229514,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229574
229514
  "required": true,
229575
229515
  "type": {
229576
229516
  "kind": "number",
229577
- "value": 24
229517
+ "value": 1.5
229578
229518
  },
229579
229519
  "description": "",
229580
229520
  "declarations": [
@@ -229591,7 +229531,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229591
229531
  "required": true,
229592
229532
  "type": {
229593
229533
  "kind": "number",
229594
- "value": 32
229534
+ "value": 2
229595
229535
  },
229596
229536
  "description": "",
229597
229537
  "declarations": [
@@ -229608,7 +229548,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229608
229548
  "required": true,
229609
229549
  "type": {
229610
229550
  "kind": "number",
229611
- "value": 40
229551
+ "value": 2.5
229612
229552
  },
229613
229553
  "description": "",
229614
229554
  "declarations": [
@@ -229625,7 +229565,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229625
229565
  "required": true,
229626
229566
  "type": {
229627
229567
  "kind": "number",
229628
- "value": 64
229568
+ "value": 4
229629
229569
  },
229630
229570
  "description": "",
229631
229571
  "declarations": [
@@ -229642,7 +229582,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229642
229582
  "required": true,
229643
229583
  "type": {
229644
229584
  "kind": "number",
229645
- "value": 80
229585
+ "value": 5
229646
229586
  },
229647
229587
  "description": "",
229648
229588
  "declarations": [
@@ -229659,7 +229599,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229659
229599
  {
229660
229600
  "name": "CanvasSpaceNumberValues",
229661
229601
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
229662
- "description": "The numeric px values for CanvasSpaceNumbers (numbers)",
229602
+ "description": "The numeric rem values for CanvasSpaceNumbers (numbers)",
229663
229603
  "declarations": [
229664
229604
  {
229665
229605
  "name": "CanvasSpaceNumberValues",
@@ -229679,39 +229619,39 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229679
229619
  },
229680
229620
  {
229681
229621
  "kind": "number",
229682
- "value": 4
229622
+ "value": 1
229683
229623
  },
229684
229624
  {
229685
229625
  "kind": "number",
229686
- "value": 12
229626
+ "value": 2
229687
229627
  },
229688
229628
  {
229689
229629
  "kind": "number",
229690
- "value": 16
229630
+ "value": 4
229691
229631
  },
229692
229632
  {
229693
229633
  "kind": "number",
229694
- "value": 24
229634
+ "value": 5
229695
229635
  },
229696
229636
  {
229697
229637
  "kind": "number",
229698
- "value": 32
229638
+ "value": 0.5
229699
229639
  },
229700
229640
  {
229701
229641
  "kind": "number",
229702
- "value": 40
229642
+ "value": 1.5
229703
229643
  },
229704
229644
  {
229705
229645
  "kind": "number",
229706
- "value": 8
229646
+ "value": 0.25
229707
229647
  },
229708
229648
  {
229709
229649
  "kind": "number",
229710
- "value": 64
229650
+ "value": 0.75
229711
229651
  },
229712
229652
  {
229713
229653
  "kind": "number",
229714
- "value": 80
229654
+ "value": 2.5
229715
229655
  }
229716
229656
  ]
229717
229657
  }
@@ -229720,7 +229660,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229720
229660
  {
229721
229661
  "name": "spaceNumbers",
229722
229662
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tokens/lib/space.ts",
229723
- "description": "An object of space keys and their numeric px values (numbers)\n- These are helpful when you need a raw numeric px value.\n- Here's an example usage to perform calculations:",
229663
+ "description": "An object of space keys and their numeric rem values (numbers)\n- These are helpful when you need a raw numeric rem value.\n- Here's an example usage to perform calculations:",
229724
229664
  "declarations": [
229725
229665
  {
229726
229666
  "name": "spaceNumbers",
@@ -229728,7 +229668,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
229728
229668
  }
229729
229669
  ],
229730
229670
  "tags": {
229731
- "example": "const buttonPaddingLeft = spaceNumbers.s + iconSize;"
229671
+ "example": "```tsx\nconst buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;\n```\n\nBelow is a table to show the equivalent values from `px` to `rem`.\nThis is based on the default browser font size which is `16px`.\n\n| px Value | rem Value | space token |\n| --------- | --------- | ----------- |\n| 0 | 0 | zero |\n| 4px | 0.25rem | xxxs |\n| 8px | 0.5rem | xxs |\n| 12px | 0.75rem | xs |\n| 16px | 1rem | s |\n| 24px | 1.5rem | m |\n| 32px | 2rem | l |\n| 40px | 2.5rem | xl |\n| 64px | 4rem | xxl |\n| 80px | 5rem | xxxl |"
229732
229672
  },
229733
229673
  "type": {
229734
229674
  "kind": "symbol",
@@ -230108,43 +230048,43 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
230108
230048
  "value": [
230109
230049
  {
230110
230050
  "kind": "string",
230111
- "value": "0.875rem"
230051
+ "value": "2.5rem"
230112
230052
  },
230113
230053
  {
230114
230054
  "kind": "string",
230115
- "value": "1.25rem"
230055
+ "value": "2rem"
230116
230056
  },
230117
230057
  {
230118
230058
  "kind": "string",
230119
- "value": "0.625rem"
230059
+ "value": "1.5rem"
230120
230060
  },
230121
230061
  {
230122
230062
  "kind": "string",
230123
- "value": "0.75rem"
230063
+ "value": "1rem"
230124
230064
  },
230125
230065
  {
230126
230066
  "kind": "string",
230127
- "value": "1rem"
230067
+ "value": "0.75rem"
230128
230068
  },
230129
230069
  {
230130
230070
  "kind": "string",
230131
- "value": "1.125rem"
230071
+ "value": "0.875rem"
230132
230072
  },
230133
230073
  {
230134
230074
  "kind": "string",
230135
- "value": "1.5rem"
230075
+ "value": "1.25rem"
230136
230076
  },
230137
230077
  {
230138
230078
  "kind": "string",
230139
- "value": "1.75rem"
230079
+ "value": "0.625rem"
230140
230080
  },
230141
230081
  {
230142
230082
  "kind": "string",
230143
- "value": "2rem"
230083
+ "value": "1.125rem"
230144
230084
  },
230145
230085
  {
230146
230086
  "kind": "string",
230147
- "value": "2.5rem"
230087
+ "value": "1.75rem"
230148
230088
  },
230149
230089
  {
230150
230090
  "kind": "string",
package/dist/mdx/10.0-UPGRADE_GUIDE.mdx CHANGED
@@ -5,6 +5,8 @@ This guide contains an overview of the changes in Canvas Kit v10. Please
5
5
  any questions.
6
6
 
7
7
  - [Codemod](#codemod)
8
+ - [Token Updates](#token-updates)
9
+ - [Space and Depth](#space-and-depth)
8
10
 
9
11
  ## Codemod
10
12
 
@@ -35,4 +37,50 @@ handled by the codemod are marked with 🤖 in the Upgrade Guide.**
35
37
 
36
38
  **Please verify all changes made by the codemod.** As a safety precaution, we recommend committing
37
39
  the changes from the codemod as a single isolated commit (separate from other changes) so you can
38
- roll back more easily if necessary.
40
+ roll back more easily if necessary.
41
+
42
+ ## Token Updates
43
+
44
+ ### Space and Depth
45
+
46
+ **PR:** [#2229](https://github.com/Workday/canvas-kit/pull/2229)
47
+
48
+ In v10, we have updated our `space` and `depth` token values from `px` to `rem`. This is based on
49
+ the default browser font size which is `16px`.
50
+
51
+ These updates just mean that we have moved the values from `px` to `rem`. The values have been
52
+ updated on a 1:1 basis. None of the base value have changed, just the unit.
53
+
54
+ Below is a table to show what each token value is, what is corresponds too and what the new `rem`
55
+ value is in `px`:
56
+
57
+ | px Value | rem Value | space Token |
58
+ | -------- | --------- | ----------- |
59
+ | 0 | 0 | zero |
60
+ | 4px | 0.25rem | xxxs |
61
+ | 8px | 0.5rem | xxs |
62
+ | 12px | 0.75rem | xs |
63
+ | 16px | 1rem | s |
64
+ | 24px | 1.5rem | m |
65
+ | 32px | 2rem | l |
66
+ | 40px | 2.5rem | xl |
67
+ | 64px | 4rem | xxl |
68
+ | 80px | 5rem | xxxl |
69
+
70
+ You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
71
+ browser font size hasn't been updated, the value will be `16`).
72
+
73
+ For example:
74
+
75
+ | Equation | rem Value |
76
+ | ----------- | --------- |
77
+ | `16px/16px` | `1rem` |
78
+ | `32px/16px` | `2rem` |
79
+ | `8px/16px` | `0.5rem` |
80
+
81
+ #### Why Did We Make This Change?
82
+
83
+ We wanted to move away from absolute units in tokens to relative units for better accessibility and
84
+ adaptability to different viewport/screen sizes. If a user changes their default browser font size,
85
+ these sizes should change along with it. Since `px` are a fixed unit and do not scale, utilizing
86
+ `rem` will allow these tokens to scale with a new default font size.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "10.0.0-alpha.446-next.0",
3
+ "version": "10.0.0-alpha.449-next.0",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -44,9 +44,9 @@
44
44
  "dependencies": {
45
45
  "@emotion/styled": "^11.6.0",
46
46
  "@storybook/csf": "0.0.1",
47
- "@workday/canvas-kit-labs-react": "^10.0.0-alpha.446-next.0",
48
- "@workday/canvas-kit-preview-react": "^10.0.0-alpha.446-next.0",
49
- "@workday/canvas-kit-react": "^10.0.0-alpha.446-next.0",
47
+ "@workday/canvas-kit-labs-react": "^10.0.0-alpha.449-next.0",
48
+ "@workday/canvas-kit-preview-react": "^10.0.0-alpha.449-next.0",
49
+ "@workday/canvas-kit-react": "^10.0.0-alpha.449-next.0",
50
50
  "@workday/canvas-system-icons-web": "^3.0.0",
51
51
  "markdown-to-jsx": "^6.10.3",
52
52
  "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
57
57
  "mkdirp": "^1.0.3",
58
58
  "typescript": "4.2"
59
59
  },
60
- "gitHead": "7202c6904b61f4ef6d4a221276faa1e13062c8e3"
60
+ "gitHead": "aec7d64ecbea44ef7b474ec988885000069ff000"
61
61
  }