@lumx/core 2.0.3 → 2.1.0-alpha-css-test2

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 (37) hide show
  1. package/css/_retro-compat-v2.css +117 -0
  2. package/css/design-tokens.css +768 -92
  3. package/css/material.css +56 -57
  4. package/js/constants/design-tokens.js +3406 -414
  5. package/js/constants/design-tokens.min.js +1 -1
  6. package/js/constants/design-tokens.min.js.map +1 -1
  7. package/js/constants/design-tokens.ts +3386 -394
  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 +1670 -224
  12. package/scss/_retro-compat-v2.scss +95 -0
  13. package/scss/components/button/_index.scss +6 -42
  14. package/scss/components/button/_mixins.scss +144 -29
  15. package/scss/components/checkbox/_mixins.scss +9 -9
  16. package/scss/components/chip/_index.scss +2 -2
  17. package/scss/components/chip/_mixins.scss +2 -2
  18. package/scss/components/image-block/_index.scss +4 -5
  19. package/scss/components/input-helper/_mixins.scss +3 -3
  20. package/scss/components/input-label/_mixins.scss +3 -3
  21. package/scss/components/progress/_index.scss +2 -2
  22. package/scss/components/radio-button/_mixins.scss +12 -12
  23. package/scss/components/select/_index.scss +99 -10
  24. package/scss/components/select/_mixins.scss +6 -1
  25. package/scss/components/skeleton/_index.scss +2 -2
  26. package/scss/components/switch/_mixins.scss +15 -15
  27. package/scss/components/tabs/_index.scss +27 -55
  28. package/scss/components/tabs/_mixins.scss +66 -31
  29. package/scss/components/text-field/_index.scss +114 -9
  30. package/scss/components/text-field/_mixins.scss +42 -66
  31. package/scss/components/user-block/_index.scss +2 -9
  32. package/scss/core/base/_variables.scss +1 -0
  33. package/scss/core/state/_mixins.scss +11 -7
  34. package/scss/core/typography/_index.scss +9 -2
  35. package/scss/core/typography/_mixins.scss +13 -4
  36. package/scss/core/typography/_variables.scss +2 -1
  37. 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
+ }