@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/material.css CHANGED
@@ -1,61 +1,60 @@
1
1
  :root {
2
2
  --lumx-border-radius: 2px;
3
3
  --lumx-typography-font-family: 'Roboto', sans-serif;
4
- --lumx-button-font-weight: 500;
5
- --lumx-button-text-transform: uppercase;
6
- --lumx-button-variant-icon-border-radius: 50%;
7
- --lumx-button-size-s-font-size: 10px;
8
- --lumx-checkbox-wrapper-size: 24px;
9
- --lumx-checkbox-control-size: 18px;
10
- --lumx-chip-size-m-height: 32px;
11
- --lumx-chip-size-m-border-radius: 16px;
12
- --lumx-chip-size-m-padding-vertical: 12px;
13
- --lumx-chip-size-s-height: 20px;
14
- --lumx-chip-size-s-border-radius: 2px;
15
- --lumx-chip-size-s-padding-vertical: 8px;
16
- --lumx-input-label-font-size: 16px;
17
- --lumx-input-label-line-height: 24px;
18
- --lumx-input-helper-font-size: 14px;
19
- --lumx-input-helper-line-height: 20px;
20
- --lumx-progress-bounce: none;
21
- --lumx-progress-rotate: block;
22
- --lumx-radio-button-wrapper-size: 24px;
23
- --lumx-radio-button-control-size: 20px;
24
- --lumx-radio-button-indicator-size: 10px;
25
- --lumx-switch-wrapper-height: 24px;
26
- --lumx-text-field-padding-top: 20px;
27
- --lumx-text-field-padding-bottom: 8px;
28
- --lumx-text-field-header-margin-bottom: 0;
29
- --lumx-text-field-label-font-size: 12px;
30
- --lumx-text-field-label-line-height: 14px;
31
- --lumx-text-field-wrapper-min-height: 32px;
32
- --lumx-text-field-wrapper-border-radius: 0;
33
- --lumx-text-field-wrapper-padding-vertical: 4px;
34
- --lumx-text-field-wrapper-padding-horizontal: 0;
35
- --lumx-text-field-state-default-border-top-width: 0;
36
- --lumx-text-field-state-default-border-right-width: 0;
37
- --lumx-text-field-state-default-border-bottom-width: 1px;
38
- --lumx-text-field-state-default-border-left-width: 0;
39
- --lumx-text-field-state-default-theme-light-background-color: transparent;
40
- --lumx-text-field-state-default-theme-light-border-color: rgba(0, 0, 0, 0.12);
41
- --lumx-text-field-state-default-theme-dark-background-color: transparent;
42
- --lumx-text-field-state-default-theme-dark-border-color: rgba(255, 255, 255, 0.2);
43
- --lumx-text-field-state-hover-theme-light-background-color: transparent;
44
- --lumx-text-field-state-hover-theme-dark-background-color: transparent;
45
- --lumx-text-field-state-focus-border-top-width: 0;
46
- --lumx-text-field-state-focus-border-right-width: 0;
47
- --lumx-text-field-state-focus-border-bottom-width: 2px;
48
- --lumx-text-field-state-focus-border-left-width: 0;
49
- --lumx-text-field-state-focus-theme-light-background-color: transparent;
50
- --lumx-text-field-state-focus-theme-light-border-color: var(--lumx-color-primary-N);
51
- --lumx-text-field-state-focus-theme-dark-background-color: transparent;
52
- --lumx-text-field-state-focus-theme-dark-border-color: #ffffff;
53
- --lumx-text-field-input-font-size: 16px;
54
- --lumx-text-field-input-line-height: 24px;
55
- --lumx-typography-style-display1-font-weight: 500;
56
- --lumx-typography-style-headline-font-weight: 500;
57
- --lumx-typography-style-title-font-weight: 500;
58
- --lumx-typography-style-subtitle2-font-weight: 500;
59
- --lumx-typography-style-subtitle1-font-weight: 500;
60
- --lumx-typography-style-overline-font-weight: 500;
4
+ --lumx-typography-font-weight-bold: 500;
5
+ --lumx-typography-custom-button-size-s-font-size: 10px;
6
+ --lumx-text-field-input-min-height: 32px;
7
+ --lumx-text-field-input-padding-horizontal: 0;
8
+ --lumx-text-field-input-border-radius: 0;
9
+ --lumx-text-field-state-default-input-border-top-width: 0;
10
+ --lumx-text-field-state-default-input-border-right-width: 0;
11
+ --lumx-text-field-state-default-input-border-bottom-width: 1px;
12
+ --lumx-text-field-state-default-input-border-left-width: 0;
13
+ --lumx-text-field-state-default-theme-light-input-background-color: transparent;
14
+ --lumx-text-field-state-default-theme-light-input-border-color: rgba(0, 0, 0, 0.12);
15
+ --lumx-text-field-state-default-theme-dark-input-background-color: transparent;
16
+ --lumx-text-field-state-default-theme-dark-input-border-color: rgba(255, 255, 255, 0.2);
17
+ --lumx-text-field-state-hover-input-border-top-width: 0;
18
+ --lumx-text-field-state-hover-input-border-right-width: 0;
19
+ --lumx-text-field-state-hover-input-border-bottom-width: 1px;
20
+ --lumx-text-field-state-hover-input-border-left-width: 0;
21
+ --lumx-text-field-state-hover-theme-light-input-background-color: transparent;
22
+ --lumx-text-field-state-hover-theme-light-input-border-color: rgba(0, 0, 0, 0.12);
23
+ --lumx-text-field-state-hover-theme-dark-input-background-color: transparent;
24
+ --lumx-text-field-state-hover-theme-dark-input-border-color: rgba(255, 255, 255, 0.2);
25
+ --lumx-text-field-state-focus-input-border-top-width: 0;
26
+ --lumx-text-field-state-focus-input-border-right-width: 0;
27
+ --lumx-text-field-state-focus-input-border-bottom-width: 2px;
28
+ --lumx-text-field-state-focus-input-border-left-width: 0;
29
+ --lumx-text-field-state-focus-theme-light-input-background-color: transparent;
30
+ --lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N);
31
+ --lumx-text-field-state-focus-theme-dark-input-background-color: transparent;
32
+ --lumx-text-field-state-focus-theme-dark-input-border-color: #ffffff;
33
+ --lumx-material-button-text-transform: uppercase;
34
+ --lumx-material-button-variant-icon-border-radius: 50%;
35
+ --lumx-material-checkbox-wrapper-size: 24px;
36
+ --lumx-material-checkbox-control-size: 18px;
37
+ --lumx-material-chip-size-m-height: 32px;
38
+ --lumx-material-chip-size-m-border-radius: 16px;
39
+ --lumx-material-chip-size-m-padding-vertical: 12px;
40
+ --lumx-material-chip-size-s-height: 20px;
41
+ --lumx-material-chip-size-s-border-radius: 2px;
42
+ --lumx-material-chip-size-s-padding-vertical: 8px;
43
+ --lumx-material-input-label-font-size: 16px;
44
+ --lumx-material-input-label-line-height: 24px;
45
+ --lumx-material-input-helper-font-size: 14px;
46
+ --lumx-material-input-helper-line-height: 20px;
47
+ --lumx-material-progress-bounce: none;
48
+ --lumx-material-progress-rotate: block;
49
+ --lumx-material-radio-button-wrapper-size: 24px;
50
+ --lumx-material-radio-button-control-size: 20px;
51
+ --lumx-material-radio-button-indicator-size: 10px;
52
+ --lumx-material-switch-wrapper-height: 24px;
53
+ --lumx-material-text-field-padding-top: 20px;
54
+ --lumx-material-text-field-padding-bottom: 8px;
55
+ --lumx-material-text-field-header-wrapper-margin-bottom: 0;
56
+ --lumx-material-text-field-header-label-font-size: 12px;
57
+ --lumx-material-text-field-header-label-line-height: 14px;
58
+ --lumx-material-text-field-input-content-font-size: 16px;
59
+ --lumx-material-text-field-input-content-line-height: 24px;
61
60
  }