@lumx/core 2.1.0-alpha.9 → 2.1.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 (25) hide show
  1. package/css/_retro-compat-v2.css +117 -0
  2. package/css/design-tokens.css +1 -14
  3. package/js/constants/design-tokens.js +1 -92
  4. package/js/constants/design-tokens.min.js +1 -1
  5. package/js/constants/design-tokens.min.js.map +1 -1
  6. package/js/constants/design-tokens.ts +1 -92
  7. package/js/utils.min.js.map +1 -1
  8. package/lumx.css +1 -1
  9. package/lumx.min.css +1 -1
  10. package/package.json +2 -2
  11. package/scss/_design-tokens.scss +1 -27
  12. package/scss/_retro-compat-v2.scss +95 -0
  13. package/scss/components/checkbox/_mixins.scss +2 -2
  14. package/scss/components/image-block/_index.scss +4 -5
  15. package/scss/components/radio-button/_mixins.scss +4 -12
  16. package/scss/components/select/_index.scss +1 -1
  17. package/scss/components/select/_mixins.scss +1 -1
  18. package/scss/components/skeleton/_index.scss +18 -0
  19. package/scss/components/switch/_mixins.scss +2 -2
  20. package/scss/components/text-field/_index.scss +1 -1
  21. package/scss/components/text-field/_mixins.scss +5 -9
  22. package/scss/components/thumbnail/_variables.scss +5 -0
  23. package/scss/components/user-block/_index.scss +2 -9
  24. package/scss/core/typography/_mixins.scss +1 -2
  25. package/scss/lumx.scss +4 -0
package/css/_retro-compat-v2.css ADDED
@@ -0,0 +1,117 @@
1
+ /**
2
+ * List of deprecated v2 variables that have been removed or renamed.
3
+ * Warning: These will be removed in the next major version.
4
+ */
5
+ :root {
6
+ --lumx-button-font-weight: var(--lumx-typography-font-weight-bold);
7
+ --lumx-button-text-transform: var(--lumx-material-button-text-transform);
8
+ --lumx-button-variant-icon-border-radius: var(--lumx-material-button-variant-icon-border-radius);
9
+ --lumx-button-size-m-font-size: var(--lumx-typography-custom-button-size-m-font-size);
10
+ --lumx-button-size-s-font-size: var(--lumx-typography-custom-button-size-s-font-size);
11
+ --lumx-checkbox-wrapper-size: var(--lumx-material-checkbox-wrapper-size);
12
+ --lumx-checkbox-control-size: var(--lumx-material-checkbox-control-size);
13
+ --lumx-chip-size-m-height: var(--lumx-material-chip-size-m-height);
14
+ --lumx-chip-size-m-border-radius: var(--lumx-material-chip-size-m-border-radius);
15
+ --lumx-chip-size-m-padding-vertical: var(--lumx-material-chip-size-m-padding-vertical);
16
+ --lumx-chip-size-s-height: var(--lumx-material-chip-size-s-height);
17
+ --lumx-chip-size-s-border-radius: var(--lumx-material-chip-size-s-border-radius);
18
+ --lumx-chip-size-s-padding-vertical: var(--lumx-material-chip-size-s-padding-vertical);
19
+ --lumx-input-helper-font-size: var(--lumx-material-input-helper-font-size);
20
+ --lumx-input-helper-font-weight: var(--lumx-material-input-helper-font-weight);
21
+ --lumx-input-helper-line-height: var(--lumx-material-input-helper-line-height);
22
+ --lumx-input-label-font-size: var(--lumx-material-input-label-font-size);
23
+ --lumx-input-label-font-weight: var(--lumx-material-input-label-font-weight);
24
+ --lumx-input-label-line-height: var(--lumx-material-input-label-line-height);
25
+ --lumx-radio-button-wrapper-size: var(--lumx-material-radio-button-wrapper-size);
26
+ --lumx-radio-button-control-size: var(--lumx-material-radio-button-control-size);
27
+ --lumx-radio-button-indicator-size: var(--lumx-material-radio-button-indicator-size);
28
+ --lumx-switch-wrapper-width: var(--lumx-material-switch-wrapper-width);
29
+ --lumx-switch-wrapper-height: var(--lumx-material-switch-wrapper-height);
30
+ --lumx-switch-control-width: var(--lumx-material-switch-control-width);
31
+ --lumx-switch-control-height: var(--lumx-material-switch-control-height);
32
+ --lumx-switch-indicator-size: var(--lumx-material-switch-indicator-size);
33
+ --lumx-switch-indicator-offset: var(--lumx-material-switch-indicator-offset);
34
+ --lumx-text-field-padding-top: var(--lumx-material-text-field-padding-top);
35
+ --lumx-text-field-padding-bottom: var(--lumx-material-text-field-padding-bottom);
36
+ --lumx-text-field-header-margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
37
+ --lumx-text-field-label-font-size: var(--lumx-material-text-field-header-label-font-size);
38
+ --lumx-text-field-label-font-weight: var(--lumx-material-text-field-header-label-font-weight);
39
+ --lumx-text-field-label-line-height: var(--lumx-material-text-field-header-label-line-height);
40
+ --lumx-text-field-wrapper-min-height: var(--lumx-text-field-input-min-height);
41
+ --lumx-text-field-wrapper-border-radius: var(--lumx-text-field-input-border-radius);
42
+ --lumx-text-field-wrapper-padding-vertical: var(--lumx-spacing-unit-tiny);
43
+ --lumx-text-field-wrapper-padding-horizontal: var(--lumx-text-field-input-padding-horizontal);
44
+ --lumx-text-field-state-default-border-top-width: var(--lumx-text-field-state-default-input-border-top-width);
45
+ --lumx-text-field-state-default-border-right-width: var(--lumx-text-field-state-default-input-border-right-width);
46
+ --lumx-text-field-state-default-border-bottom-width: var(--lumx-text-field-state-default-input-border-bottom-width);
47
+ --lumx-text-field-state-default-border-left-width: var(--lumx-text-field-state-default-input-border-left-width);
48
+ --lumx-text-field-state-default-theme-light-background-color: var(
49
+ --lumx-text-field-state-default-theme-light-input-background-color
50
+ );
51
+ --lumx-text-field-state-default-theme-light-border-color: var(
52
+ --lumx-text-field-state-default-theme-light-input-border-color
53
+ );
54
+ --lumx-text-field-state-default-theme-dark-background-color: var(
55
+ --lumx-text-field-state-default-theme-dark-input-background-color
56
+ );
57
+ --lumx-text-field-state-default-theme-dark-border-color: var(
58
+ --lumx-text-field-state-default-theme-dark-input-border-color
59
+ );
60
+ --lumx-text-field-state-hover-theme-light-background-color: var(
61
+ --lumx-text-field-state-hover-theme-light-input-background-color
62
+ );
63
+ --lumx-text-field-state-hover-theme-dark-background-color: var(
64
+ --lumx-text-field-state-hover-theme-dark-input-background-color
65
+ );
66
+ --lumx-text-field-state-focus-border-top-width: var(--lumx-text-field-state-focus-input-border-top-width);
67
+ --lumx-text-field-state-focus-border-right-width: var(--lumx-text-field-state-focus-input-border-right-width);
68
+ --lumx-text-field-state-focus-border-bottom-width: var(--lumx-text-field-state-focus-input-border-bottom-width);
69
+ --lumx-text-field-state-focus-border-left-width: var(--lumx-text-field-state-focus-input-border-left-width);
70
+ --lumx-text-field-state-focus-theme-light-background-color: var(
71
+ --lumx-text-field-state-focus-theme-light-input-background-color
72
+ );
73
+ --lumx-text-field-state-focus-theme-light-border-color: var(
74
+ --lumx-text-field-state-focus-theme-light-input-border-color
75
+ );
76
+ --lumx-text-field-state-focus-theme-dark-background-color: var(
77
+ --lumx-text-field-state-focus-theme-dark-input-background-color
78
+ );
79
+ --lumx-text-field-state-focus-theme-dark-border-color: var(
80
+ --lumx-text-field-state-focus-theme-dark-input-border-color
81
+ );
82
+ --lumx-text-field-input-icon-size: var(--lumx-size-xs);
83
+ --lumx-text-field-input-font-size: var(--lumx-material-text-field-input-content-font-size);
84
+ --lumx-text-field-input-font-weight: var(--lumx-material-text-field-input-content-font-weight);
85
+ --lumx-text-field-input-line-height: var(--lumx-material-text-field-input-content-line-height);
86
+ --lumx-text-field-input-validity-size: var(--lumx-size-xxs);
87
+ --lumx-text-field-input-clear-size: var(--lumx-size-s);
88
+ --lumx-progress-bounce: var(--lumx-material-progress-bounce);
89
+ --lumx-progress-rotate: var(--lumx-material-progress-rotate);
90
+ --lumx-typography-style-display1-font-size: var(--lumx-typography-interface-display1-font-size);
91
+ --lumx-typography-style-display1-font-weight: var(--lumx-typography-interface-display1-font-weight);
92
+ --lumx-typography-style-display1-line-height: var(--lumx-typography-interface-display1-line-height);
93
+ --lumx-typography-style-headline-font-size: var(--lumx-typography-interface-headline-font-size);
94
+ --lumx-typography-style-headline-font-weight: var(--lumx-typography-interface-headline-font-weight);
95
+ --lumx-typography-style-headline-line-height: var(--lumx-typography-interface-headline-line-height);
96
+ --lumx-typography-style-title-font-size: var(--lumx-typography-interface-title-font-size);
97
+ --lumx-typography-style-title-font-weight: var(--lumx-typography-interface-title-font-weight);
98
+ --lumx-typography-style-title-line-height: var(--lumx-typography-interface-title-line-height);
99
+ --lumx-typography-style-subtitle2-font-size: var(--lumx-typography-interface-subtitle2-font-size);
100
+ --lumx-typography-style-subtitle2-font-weight: var(--lumx-typography-interface-subtitle2-font-weight);
101
+ --lumx-typography-style-subtitle2-line-height: var(--lumx-typography-interface-subtitle2-line-height);
102
+ --lumx-typography-style-subtitle1-font-size: var(--lumx-typography-interface-subtitle1-font-size);
103
+ --lumx-typography-style-subtitle1-font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
104
+ --lumx-typography-style-subtitle1-line-height: var(--lumx-typography-interface-subtitle1-line-height);
105
+ --lumx-typography-style-body2-font-size: var(--lumx-typography-interface-body2-font-size);
106
+ --lumx-typography-style-body2-font-weight: var(--lumx-typography-interface-body2-font-weight);
107
+ --lumx-typography-style-body2-line-height: var(--lumx-typography-interface-body2-line-height);
108
+ --lumx-typography-style-body1-font-size: var(--lumx-typography-interface-body1-font-size);
109
+ --lumx-typography-style-body1-font-weight: var(--lumx-typography-interface-body1-font-weight);
110
+ --lumx-typography-style-body1-line-height: var(--lumx-typography-interface-body1-line-height);
111
+ --lumx-typography-style-caption-font-size: var(--lumx-typography-interface-caption-font-size);
112
+ --lumx-typography-style-caption-font-weight: var(--lumx-typography-interface-caption-font-weight);
113
+ --lumx-typography-style-caption-line-height: var(--lumx-typography-interface-caption-line-height);
114
+ --lumx-typography-style-overline-font-size: var(--lumx-typography-interface-overline-font-size);
115
+ --lumx-typography-style-overline-font-weight: var(--lumx-typography-interface-overline-font-weight);
116
+ --lumx-typography-style-overline-line-height: var(--lumx-typography-interface-overline-line-height);
117
+ }
package/css/design-tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 23 Sep 2021 06:47:16 GMT
3
+ * Generated on Tue, 19 Oct 2021 08:35:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -877,55 +877,42 @@
877
877
  --lumx-typography-interface-overline-font-size: 10px;
878
878
  --lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold);
879
879
  --lumx-typography-interface-overline-line-height: 12px;
880
- --lumx-typography-custom-title1-font-family: var(--lumx-typography-font-family);
881
880
  --lumx-typography-custom-title1-font-size: 40px;
882
881
  --lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold);
883
882
  --lumx-typography-custom-title1-line-height: 50px;
884
- --lumx-typography-custom-title2-font-family: var(--lumx-typography-font-family);
885
883
  --lumx-typography-custom-title2-font-size: 30px;
886
884
  --lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold);
887
885
  --lumx-typography-custom-title2-line-height: 40px;
888
- --lumx-typography-custom-title3-font-family: var(--lumx-typography-font-family);
889
886
  --lumx-typography-custom-title3-font-size: 24px;
890
887
  --lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold);
891
888
  --lumx-typography-custom-title3-line-height: 32px;
892
- --lumx-typography-custom-title4-font-family: var(--lumx-typography-font-family);
893
889
  --lumx-typography-custom-title4-font-size: 20px;
894
890
  --lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold);
895
891
  --lumx-typography-custom-title4-line-height: 30px;
896
- --lumx-typography-custom-title5-font-family: var(--lumx-typography-font-family);
897
892
  --lumx-typography-custom-title5-font-size: 16px;
898
893
  --lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold);
899
894
  --lumx-typography-custom-title5-line-height: 24px;
900
- --lumx-typography-custom-title6-font-family: var(--lumx-typography-font-family);
901
895
  --lumx-typography-custom-title6-font-size: 14px;
902
896
  --lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold);
903
897
  --lumx-typography-custom-title6-line-height: 20px;
904
- --lumx-typography-custom-intro-font-family: var(--lumx-typography-font-family);
905
898
  --lumx-typography-custom-intro-font-size: 18px;
906
899
  --lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold);
907
900
  --lumx-typography-custom-intro-line-height: 30px;
908
- --lumx-typography-custom-body-large-font-family: var(--lumx-typography-font-family);
909
901
  --lumx-typography-custom-body-large-font-size: 16px;
910
902
  --lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular);
911
903
  --lumx-typography-custom-body-large-line-height: 24px;
912
- --lumx-typography-custom-body-font-family: var(--lumx-typography-font-family);
913
904
  --lumx-typography-custom-body-font-size: 14px;
914
905
  --lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular);
915
906
  --lumx-typography-custom-body-line-height: 20px;
916
- --lumx-typography-custom-quote-font-family: var(--lumx-typography-font-family);
917
907
  --lumx-typography-custom-quote-font-size: 16px;
918
908
  --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-light);
919
909
  --lumx-typography-custom-quote-font-style: italic;
920
910
  --lumx-typography-custom-quote-line-height: 24px;
921
- --lumx-typography-custom-publish-info-font-family: var(--lumx-typography-font-family);
922
911
  --lumx-typography-custom-publish-info-font-size: 14px;
923
912
  --lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular);
924
913
  --lumx-typography-custom-publish-info-line-height: 20px;
925
- --lumx-typography-custom-button-size-m-font-family: var(--lumx-typography-font-family);
926
914
  --lumx-typography-custom-button-size-m-font-size: 14px;
927
915
  --lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold);
928
- --lumx-typography-custom-button-size-s-font-family: var(--lumx-typography-font-family);
929
916
  --lumx-typography-custom-button-size-s-font-size: 12px;
930
917
  --lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold);
931
918
  }
package/js/constants/design-tokens.js CHANGED
@@ -94,7 +94,7 @@ __webpack_require__.r(__webpack_exports__);
94
94
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DESIGN_TOKENS", function() { return DESIGN_TOKENS; });
95
95
  /**
96
96
  * Do not edit directly
97
- * Generated on Thu, 23 Sep 2021 06:47:16 GMT
97
+ * Generated on Tue, 19 Oct 2021 08:35:25 GMT
98
98
  */
99
99
  var DESIGN_TOKENS = {
100
100
  button: {
@@ -5271,13 +5271,6 @@ var DESIGN_TOKENS = {
5271
5271
  },
5272
5272
  custom: {
5273
5273
  title1: {
5274
- 'font-family': {
5275
- attributes: {
5276
- category: 'typography',
5277
- type: 'custom',
5278
- item: 'title1'
5279
- }
5280
- },
5281
5274
  'font-size': {
5282
5275
  attributes: {
5283
5276
  category: 'typography',
@@ -5301,13 +5294,6 @@ var DESIGN_TOKENS = {
5301
5294
  }
5302
5295
  },
5303
5296
  title2: {
5304
- 'font-family': {
5305
- attributes: {
5306
- category: 'typography',
5307
- type: 'custom',
5308
- item: 'title2'
5309
- }
5310
- },
5311
5297
  'font-size': {
5312
5298
  attributes: {
5313
5299
  category: 'typography',
@@ -5331,13 +5317,6 @@ var DESIGN_TOKENS = {
5331
5317
  }
5332
5318
  },
5333
5319
  title3: {
5334
- 'font-family': {
5335
- attributes: {
5336
- category: 'typography',
5337
- type: 'custom',
5338
- item: 'title3'
5339
- }
5340
- },
5341
5320
  'font-size': {
5342
5321
  attributes: {
5343
5322
  category: 'typography',
@@ -5361,13 +5340,6 @@ var DESIGN_TOKENS = {
5361
5340
  }
5362
5341
  },
5363
5342
  title4: {
5364
- 'font-family': {
5365
- attributes: {
5366
- category: 'typography',
5367
- type: 'custom',
5368
- item: 'title4'
5369
- }
5370
- },
5371
5343
  'font-size': {
5372
5344
  attributes: {
5373
5345
  category: 'typography',
@@ -5391,13 +5363,6 @@ var DESIGN_TOKENS = {
5391
5363
  }
5392
5364
  },
5393
5365
  title5: {
5394
- 'font-family': {
5395
- attributes: {
5396
- category: 'typography',
5397
- type: 'custom',
5398
- item: 'title5'
5399
- }
5400
- },
5401
5366
  'font-size': {
5402
5367
  attributes: {
5403
5368
  category: 'typography',
@@ -5421,13 +5386,6 @@ var DESIGN_TOKENS = {
5421
5386
  }
5422
5387
  },
5423
5388
  title6: {
5424
- 'font-family': {
5425
- attributes: {
5426
- category: 'typography',
5427
- type: 'custom',
5428
- item: 'title6'
5429
- }
5430
- },
5431
5389
  'font-size': {
5432
5390
  attributes: {
5433
5391
  category: 'typography',
@@ -5451,13 +5409,6 @@ var DESIGN_TOKENS = {
5451
5409
  }
5452
5410
  },
5453
5411
  intro: {
5454
- 'font-family': {
5455
- attributes: {
5456
- category: 'typography',
5457
- type: 'custom',
5458
- item: 'intro'
5459
- }
5460
- },
5461
5412
  'font-size': {
5462
5413
  attributes: {
5463
5414
  category: 'typography',
@@ -5481,13 +5432,6 @@ var DESIGN_TOKENS = {
5481
5432
  }
5482
5433
  },
5483
5434
  'body-large': {
5484
- 'font-family': {
5485
- attributes: {
5486
- category: 'typography',
5487
- type: 'custom',
5488
- item: 'body-large'
5489
- }
5490
- },
5491
5435
  'font-size': {
5492
5436
  attributes: {
5493
5437
  category: 'typography',
@@ -5511,13 +5455,6 @@ var DESIGN_TOKENS = {
5511
5455
  }
5512
5456
  },
5513
5457
  body: {
5514
- 'font-family': {
5515
- attributes: {
5516
- category: 'typography',
5517
- type: 'custom',
5518
- item: 'body'
5519
- }
5520
- },
5521
5458
  'font-size': {
5522
5459
  attributes: {
5523
5460
  category: 'typography',
@@ -5541,13 +5478,6 @@ var DESIGN_TOKENS = {
5541
5478
  }
5542
5479
  },
5543
5480
  quote: {
5544
- 'font-family': {
5545
- attributes: {
5546
- category: 'typography',
5547
- type: 'custom',
5548
- item: 'quote'
5549
- }
5550
- },
5551
5481
  'font-size': {
5552
5482
  attributes: {
5553
5483
  category: 'typography',
@@ -5578,13 +5508,6 @@ var DESIGN_TOKENS = {
5578
5508
  }
5579
5509
  },
5580
5510
  'publish-info': {
5581
- 'font-family': {
5582
- attributes: {
5583
- category: 'typography',
5584
- type: 'custom',
5585
- item: 'publish-info'
5586
- }
5587
- },
5588
5511
  'font-size': {
5589
5512
  attributes: {
5590
5513
  category: 'typography',
@@ -5609,13 +5532,6 @@ var DESIGN_TOKENS = {
5609
5532
  },
5610
5533
  button: {
5611
5534
  'size-m': {
5612
- 'font-family': {
5613
- attributes: {
5614
- category: 'typography',
5615
- type: 'custom',
5616
- item: 'button'
5617
- }
5618
- },
5619
5535
  'font-size': {
5620
5536
  attributes: {
5621
5537
  category: 'typography',
@@ -5632,13 +5548,6 @@ var DESIGN_TOKENS = {
5632
5548
  }
5633
5549
  },
5634
5550
  'size-s': {
5635
- 'font-family': {
5636
- attributes: {
5637
- category: 'typography',
5638
- type: 'custom',
5639
- item: 'button'
5640
- }
5641
- },
5642
5551
  'font-size': {
5643
5552
  attributes: {
5644
5553
  category: 'typography',