@epam/uui 4.9.1 → 4.9.2

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 (120) hide show
  1. package/assets/styles/buttonLayout.scss +66 -66
  2. package/assets/styles/controlLayout.scss +11 -11
  3. package/assets/styles/effects.scss +8 -8
  4. package/assets/styles/font-faces.scss +51 -51
  5. package/assets/styles/fonts-variables.scss +24 -24
  6. package/assets/styles/icons.scss +18 -18
  7. package/assets/styles/index.scss +7 -7
  8. package/assets/styles/inputs.scss +69 -69
  9. package/assets/styles/layout-mixins.scss +8 -8
  10. package/assets/styles/prettifyScrollBar.scss +44 -44
  11. package/assets/styles/text-layout.scss +80 -80
  12. package/assets/styles/text-size.scss +37 -37
  13. package/assets/styles/typography.scss +3 -3
  14. package/assets/styles/variables/buttons/button.scss +70 -70
  15. package/assets/styles/variables/buttons/iconButton.scss +41 -41
  16. package/assets/styles/variables/buttons/linkButton.scss +6 -6
  17. package/assets/styles/variables/buttons/tabButton.scss +8 -8
  18. package/assets/styles/variables/inputs/checkbox.scss +18 -18
  19. package/assets/styles/variables/inputs/radioInput.scss +14 -14
  20. package/assets/styles/variables/inputs/switch.scss +24 -24
  21. package/assets/styles/variables/inputs/textInput.scss +21 -21
  22. package/assets/styles/variables/layout/accordion.scss +10 -10
  23. package/assets/styles/variables/layout/iconContainer.scss +22 -22
  24. package/assets/styles/variables/layout/labeledInput.scss +8 -8
  25. package/assets/styles/variables/layout/panel.scss +5 -5
  26. package/assets/styles/variables/layout/scrollBars.scss +3 -3
  27. package/assets/styles/variables/overlays/dropdownContainer.scss +4 -4
  28. package/assets/styles/variables/overlays/modals.scss +5 -5
  29. package/assets/styles/variables/overlays/notificationCard.scss +27 -27
  30. package/assets/styles/variables/overlays/tooltip.scss +8 -8
  31. package/assets/styles/variables/pickers/pickerToggler.scss +15 -15
  32. package/assets/styles/variables/typography/text.scss +19 -19
  33. package/assets/styles/variables/typography/textPlaceholder.scss +4 -4
  34. package/assets/styles/variables/widgets/badge.scss +50 -50
  35. package/assets/styles/variables/widgets/tag.scss +9 -9
  36. package/bundle-stats.json +1 -1
  37. package/components/buttons/Button.d.ts +13 -13
  38. package/components/buttons/IconButton.d.ts +11 -11
  39. package/components/buttons/LinkButton.d.ts +8 -8
  40. package/components/buttons/TabButton.d.ts +8 -8
  41. package/components/buttons/VerticalTabButton.d.ts +4 -4
  42. package/components/buttons/docs/button.doc.d.ts +5 -5
  43. package/components/buttons/docs/linkButton.doc.d.ts +5 -5
  44. package/components/buttons/helper.d.ts +2 -2
  45. package/components/buttons/index.d.ts +5 -5
  46. package/components/index.d.ts +9 -9
  47. package/components/inputs/Checkbox.d.ts +9 -9
  48. package/components/inputs/RadioInput.d.ts +7 -7
  49. package/components/inputs/Switch.d.ts +8 -8
  50. package/components/inputs/TextInput.d.ts +13 -13
  51. package/components/inputs/docs/checkbox.doc.d.ts +5 -5
  52. package/components/inputs/docs/radioInput.doc.d.ts +5 -5
  53. package/components/inputs/docs/switch.doc.d.ts +5 -5
  54. package/components/inputs/docs/textInput.doc.d.ts +5 -5
  55. package/components/inputs/index.d.ts +4 -4
  56. package/components/layout/Accordion.d.ts +8 -8
  57. package/components/layout/ControlGroup.d.ts +3 -3
  58. package/components/layout/FlexItems/FlexCell.d.ts +11 -11
  59. package/components/layout/FlexItems/FlexRow.d.ts +13 -13
  60. package/components/layout/FlexItems/FlexSpacer.d.ts +4 -4
  61. package/components/layout/FlexItems/Panel.d.ts +10 -10
  62. package/components/layout/FlexItems/index.d.ts +4 -4
  63. package/components/layout/IconContainer.d.ts +9 -9
  64. package/components/layout/LabeledInput.d.ts +7 -7
  65. package/components/layout/RadioGroup.d.ts +3 -3
  66. package/components/layout/ScrollBars.d.ts +5 -5
  67. package/components/layout/VirtualList.d.ts +7 -7
  68. package/components/layout/index.d.ts +8 -8
  69. package/components/overlays/Dropdown.d.ts +5 -5
  70. package/components/overlays/DropdownContainer.d.ts +6 -6
  71. package/components/overlays/DropdownMenu.d.ts +36 -36
  72. package/components/overlays/Modals.d.ts +23 -23
  73. package/components/overlays/NotificationCard.d.ts +30 -30
  74. package/components/overlays/Tooltip.d.ts +6 -6
  75. package/components/overlays/index.d.ts +6 -6
  76. package/components/pickers/DataPickerBody.d.ts +15 -15
  77. package/components/pickers/DataPickerFooter.d.ts +8 -8
  78. package/components/pickers/DataPickerHeader.d.ts +7 -7
  79. package/components/pickers/DataPickerRow.d.ts +15 -15
  80. package/components/pickers/MobileDropdownWrapper.d.ts +10 -10
  81. package/components/pickers/PickerInput.d.ts +16 -16
  82. package/components/pickers/PickerItem.d.ts +12 -12
  83. package/components/pickers/PickerList.d.ts +17 -17
  84. package/components/pickers/PickerListItem.d.ts +8 -8
  85. package/components/pickers/PickerModal.d.ts +15 -15
  86. package/components/pickers/PickerToggler.d.ts +8 -8
  87. package/components/pickers/docs/common.d.ts +27 -27
  88. package/components/pickers/docs/pickerInput.doc.d.ts +4 -4
  89. package/components/pickers/docs/pickerToggler.doc.d.ts +5 -5
  90. package/components/pickers/index.d.ts +11 -11
  91. package/components/tables/DataTableCell.d.ts +9 -9
  92. package/components/tables/Presets/Preset.d.ts +13 -13
  93. package/components/tables/Presets/Presets.d.ts +8 -8
  94. package/components/tables/Presets/index.d.ts +2 -2
  95. package/components/tables/index.d.ts +3 -3
  96. package/components/tables/types.d.ts +8 -8
  97. package/components/types.d.ts +29 -29
  98. package/components/typography/Text.d.ts +11 -11
  99. package/components/typography/TextPlaceholder.d.ts +7 -7
  100. package/components/typography/docs/textPlaceholder.doc.d.ts +4 -4
  101. package/components/typography/index.d.ts +2 -2
  102. package/components/widgets/Avatar.d.ts +3 -3
  103. package/components/widgets/Badge.d.ts +15 -15
  104. package/components/widgets/Tag.d.ts +8 -8
  105. package/components/widgets/index.d.ts +3 -3
  106. package/docs/common.d.ts +10 -10
  107. package/docs/contexts/DefaultContext.d.ts +6 -6
  108. package/docs/contexts/index.d.ts +1 -1
  109. package/docs/index.d.ts +2 -2
  110. package/helpers/textLayout.d.ts +8 -8
  111. package/i18n.d.ts +50 -50
  112. package/icons/icons.d.ts +3 -3
  113. package/index.d.ts +3 -3
  114. package/index.docs.d.ts +5 -5
  115. package/index.js +1679 -1679
  116. package/index.js.map +1 -1
  117. package/package.json +5 -5
  118. package/readme.md +4 -4
  119. package/styles.css +614 -614
  120. package/styles.css.map +1 -1
package/assets/styles/text-layout.scss CHANGED
@@ -1,81 +1,81 @@
1
- .line-height-12 { line-height: 12px; }
2
- .line-height-18 { line-height: 18px; }
3
- .line-height-24 { line-height: 24px; }
4
- .line-height-30 { line-height: 30px; }
5
-
6
- .font-size-10 { font-size: 10px; }
7
- .font-size-12 { font-size: 12px; }
8
- .font-size-14 { font-size: 14px; }
9
- .font-size-16 { font-size: 16px; }
10
- .font-size-18 { font-size: 18px; }
11
- .font-size-24 { font-size: 24px; }
12
-
13
- .v-padding-2 {
14
- padding-top: 2px;
15
- padding-bottom: 2px;
16
- }
17
-
18
- .v-padding-3 {
19
- padding-top: 3px;
20
- padding-bottom: 3px;
21
- }
22
-
23
- .v-padding-5 {
24
- padding-top: 5px;
25
- padding-bottom: 5px;
26
- }
27
-
28
- .v-padding-6 {
29
- padding-top: 6px;
30
- padding-bottom: 6px;
31
- }
32
-
33
- .v-padding-8 {
34
- padding-top: 8px;
35
- padding-bottom: 8px;
36
- }
37
-
38
- .v-padding-9 {
39
- padding-top: 9px;
40
- padding-bottom: 9px;
41
- }
42
-
43
- .v-padding-11 {
44
- padding-top: 11px;
45
- padding-bottom: 11px;
46
- }
47
-
48
- .v-padding-12 {
49
- padding-top: 12px;
50
- padding-bottom: 12px;
51
- }
52
-
53
- .v-padding-14 {
54
- padding-top: 14px;
55
- padding-bottom: 14px;
56
- }
57
-
58
- .v-padding-15 {
59
- padding-top: 15px;
60
- padding-bottom: 15px;
61
- }
62
-
63
- .v-padding-17 {
64
- padding-top: 17px;
65
- padding-bottom: 17px;
66
- }
67
-
68
- .v-padding-18 {
69
- padding-top: 18px;
70
- padding-bottom: 18px;
71
- }
72
-
73
- .v-padding-23 {
74
- padding-top: 23px;
75
- padding-bottom: 23px;
76
- }
77
-
78
- .v-padding-24 {
79
- padding-top: 24px;
80
- padding-bottom: 24px;
1
+ .line-height-12 { line-height: 12px; }
2
+ .line-height-18 { line-height: 18px; }
3
+ .line-height-24 { line-height: 24px; }
4
+ .line-height-30 { line-height: 30px; }
5
+
6
+ .font-size-10 { font-size: 10px; }
7
+ .font-size-12 { font-size: 12px; }
8
+ .font-size-14 { font-size: 14px; }
9
+ .font-size-16 { font-size: 16px; }
10
+ .font-size-18 { font-size: 18px; }
11
+ .font-size-24 { font-size: 24px; }
12
+
13
+ .v-padding-2 {
14
+ padding-top: 2px;
15
+ padding-bottom: 2px;
16
+ }
17
+
18
+ .v-padding-3 {
19
+ padding-top: 3px;
20
+ padding-bottom: 3px;
21
+ }
22
+
23
+ .v-padding-5 {
24
+ padding-top: 5px;
25
+ padding-bottom: 5px;
26
+ }
27
+
28
+ .v-padding-6 {
29
+ padding-top: 6px;
30
+ padding-bottom: 6px;
31
+ }
32
+
33
+ .v-padding-8 {
34
+ padding-top: 8px;
35
+ padding-bottom: 8px;
36
+ }
37
+
38
+ .v-padding-9 {
39
+ padding-top: 9px;
40
+ padding-bottom: 9px;
41
+ }
42
+
43
+ .v-padding-11 {
44
+ padding-top: 11px;
45
+ padding-bottom: 11px;
46
+ }
47
+
48
+ .v-padding-12 {
49
+ padding-top: 12px;
50
+ padding-bottom: 12px;
51
+ }
52
+
53
+ .v-padding-14 {
54
+ padding-top: 14px;
55
+ padding-bottom: 14px;
56
+ }
57
+
58
+ .v-padding-15 {
59
+ padding-top: 15px;
60
+ padding-bottom: 15px;
61
+ }
62
+
63
+ .v-padding-17 {
64
+ padding-top: 17px;
65
+ padding-bottom: 17px;
66
+ }
67
+
68
+ .v-padding-18 {
69
+ padding-top: 18px;
70
+ padding-bottom: 18px;
71
+ }
72
+
73
+ .v-padding-23 {
74
+ padding-top: 23px;
75
+ padding-bottom: 23px;
76
+ }
77
+
78
+ .v-padding-24 {
79
+ padding-top: 24px;
80
+ padding-bottom: 24px;
81
81
  }
package/assets/styles/text-size.scss CHANGED
@@ -1,37 +1,37 @@
1
- @function vpadding($size, $border-width) {
2
- @if ($size == 18px or $size == 24px) {
3
- @return (3px - $border-width);
4
- } @else if ($size == 30px) {
5
- @return (6px - $border-width);
6
- } @else if ($size == 36px or $size == 42px) {
7
- @return (9px - $border-width);
8
- } @else if ($size == 48px) {
9
- @return (12px - $border-width);
10
- }
11
-
12
- @return (null);
13
- }
14
-
15
- @mixin text-size($size, $border-width: 0) {
16
- @if ($size == 18px) {
17
- line-height: 12px;
18
- font-size: 10px;
19
- } @else if ($size == 24px) {
20
- line-height: 18px;
21
- font-size: 12px;
22
- } @else if ($size == 30px) {
23
- line-height: 18px;
24
- font-size: 14px;
25
- } @else if ($size == 36px) {
26
- line-height: 18px;
27
- font-size: 14px;
28
- } @else if ($size == 42px) {
29
- line-height: 24px;
30
- font-size: 16px;
31
- } @else if ($size == 48px) {
32
- line-height: 24px;
33
- font-size: 16px;
34
- }
35
- padding-top: vpadding($size, $border-width);
36
- padding-bottom: vpadding($size, $border-width);
37
- }
1
+ @function vpadding($size, $border-width) {
2
+ @if ($size == 18px or $size == 24px) {
3
+ @return (3px - $border-width);
4
+ } @else if ($size == 30px) {
5
+ @return (6px - $border-width);
6
+ } @else if ($size == 36px or $size == 42px) {
7
+ @return (9px - $border-width);
8
+ } @else if ($size == 48px) {
9
+ @return (12px - $border-width);
10
+ }
11
+
12
+ @return (null);
13
+ }
14
+
15
+ @mixin text-size($size, $border-width: 0) {
16
+ @if ($size == 18px) {
17
+ line-height: 12px;
18
+ font-size: 10px;
19
+ } @else if ($size == 24px) {
20
+ line-height: 18px;
21
+ font-size: 12px;
22
+ } @else if ($size == 30px) {
23
+ line-height: 18px;
24
+ font-size: 14px;
25
+ } @else if ($size == 36px) {
26
+ line-height: 18px;
27
+ font-size: 14px;
28
+ } @else if ($size == 42px) {
29
+ line-height: 24px;
30
+ font-size: 16px;
31
+ } @else if ($size == 48px) {
32
+ line-height: 24px;
33
+ font-size: 16px;
34
+ }
35
+ padding-top: vpadding($size, $border-width);
36
+ padding-bottom: vpadding($size, $border-width);
37
+ }
package/assets/styles/typography.scss CHANGED
@@ -1,4 +1,4 @@
1
- @mixin overflow-ellipsis() {
2
- overflow: hidden;
3
- text-overflow: ellipsis;
1
+ @mixin overflow-ellipsis() {
2
+ overflow: hidden;
3
+ text-overflow: ellipsis;
4
4
  }
package/assets/styles/variables/buttons/button.scss CHANGED
@@ -1,71 +1,71 @@
1
- :global(.button-vars) {
2
- --button-border-radius: var(--border-radius);
3
- }
4
-
5
- :global(.button-color-primary) {
6
- --button-bg-color: var(--primary-color);
7
- --button-bg-color-hover: var(--primary-dark-color);
8
- --button-bg-color-active: var(--primary-darkest-color);
9
- --button-bg-color-halftone: var(--button-bg-halftone-color);
10
- --button-bg-color-halftone-hover: var(--primary-lightest-color);
11
- --button-bg-color-halftone-active: var(--primary-light-color);
12
- --button-bg-color-disabled: var(--disabled-color);
13
- --button-border-color: var(--primary-color);
14
- --button-border-color-hover: var(--primary-dark-color);
15
- --button-border-color-active: var(--primary-darkest-color);
16
- --button-border-color-disabled: var(--disabled-color);
17
- --button-caption-color: var(--contrast-color);
18
- --button-caption-halftone-color: var(--primary-color);
19
- --button-caption-color-disabled: var(--button-caption-disabled-color);
20
- }
21
-
22
- :global(.button-color-accent) {
23
- --button-bg-color: var(--accent-color);
24
- --button-bg-color-hover: var(--accent-dark-color);
25
- --button-bg-color-active: var(--accent-darkest-color);
26
- --button-bg-color-halftone: var(--button-bg-halftone-color);
27
- --button-bg-color-halftone-hover: var(--accent-lightest-color);
28
- --button-bg-color-halftone-active: var(--accent-light-color);
29
- --button-bg-color-disabled: var(--disabled-color);
30
- --button-border-color: var(--accent-color);
31
- --button-border-color-hover: var(--accent-dark-color);
32
- --button-border-color-active: var(--accent-darkest-color);
33
- --button-border-color-disabled: var(--disabled-color);
34
- --button-caption-color: var(--contrast-color);
35
- --button-caption-halftone-color: var(--accent-color);
36
- --button-caption-color-disabled: var(--button-caption-disabled-color);
37
- }
38
-
39
- :global(.button-color-negative) {
40
- --button-bg-color: var(--negative-color);
41
- --button-bg-color-hover: var(--negative-dark-color);
42
- --button-bg-color-active: var(--negative-darkest-color);
43
- --button-bg-color-halftone: var(--button-bg-halftone-color);
44
- --button-bg-color-halftone-hover: var(--negative-lightest-color);
45
- --button-bg-color-halftone-active: var(--negative-light-color);
46
- --button-bg-color-disabled: var(--disabled-color);
47
- --button-border-color: var(--negative-color);
48
- --button-border-color-hover: var(--negative-dark-color);
49
- --button-border-color-active: var(--negative-darkest-color);
50
- --button-border-color-disabled: var(--disabled-color);
51
- --button-caption-color: var(--contrast-color);
52
- --button-caption-halftone-color: var(--negative-color);
53
- --button-caption-color-disabled: var(--button-caption-disabled-color);
54
- }
55
-
56
- :global(.button-color-secondary) {
57
- --button-bg-color: var(--secondary-color);
58
- --button-bg-color-hover: var(--secondary-dark-color);
59
- --button-bg-color-active: var(--secondary-darkest-color);
60
- --button-bg-color-halftone: var(--button-bg-halftone-color);
61
- --button-bg-color-halftone-hover: var(--secondary-lightest-color);
62
- --button-bg-color-halftone-active: var(--secondary-light-color);
63
- --button-bg-color-disabled: var(--disabled-color);
64
- --button-border-color: var(--secondary-color);
65
- --button-border-color-hover: var(--secondary-dark-color);
66
- --button-border-color-active: var(--secondary-darkest-color);
67
- --button-border-color-disabled: var(--disabled-color);
68
- --button-caption-color: var(--contrast-color);
69
- --button-caption-halftone-color: var(--secondary-color);
70
- --button-caption-color-disabled: var(--button-caption-disabled-color);
1
+ :global(.button-vars) {
2
+ --button-border-radius: var(--border-radius);
3
+ }
4
+
5
+ :global(.button-color-primary) {
6
+ --button-bg-color: var(--primary-color);
7
+ --button-bg-color-hover: var(--primary-dark-color);
8
+ --button-bg-color-active: var(--primary-darkest-color);
9
+ --button-bg-color-halftone: var(--button-bg-halftone-color);
10
+ --button-bg-color-halftone-hover: var(--primary-lightest-color);
11
+ --button-bg-color-halftone-active: var(--primary-light-color);
12
+ --button-bg-color-disabled: var(--disabled-color);
13
+ --button-border-color: var(--primary-color);
14
+ --button-border-color-hover: var(--primary-dark-color);
15
+ --button-border-color-active: var(--primary-darkest-color);
16
+ --button-border-color-disabled: var(--disabled-color);
17
+ --button-caption-color: var(--contrast-color);
18
+ --button-caption-halftone-color: var(--primary-color);
19
+ --button-caption-color-disabled: var(--button-caption-disabled-color);
20
+ }
21
+
22
+ :global(.button-color-accent) {
23
+ --button-bg-color: var(--accent-color);
24
+ --button-bg-color-hover: var(--accent-dark-color);
25
+ --button-bg-color-active: var(--accent-darkest-color);
26
+ --button-bg-color-halftone: var(--button-bg-halftone-color);
27
+ --button-bg-color-halftone-hover: var(--accent-lightest-color);
28
+ --button-bg-color-halftone-active: var(--accent-light-color);
29
+ --button-bg-color-disabled: var(--disabled-color);
30
+ --button-border-color: var(--accent-color);
31
+ --button-border-color-hover: var(--accent-dark-color);
32
+ --button-border-color-active: var(--accent-darkest-color);
33
+ --button-border-color-disabled: var(--disabled-color);
34
+ --button-caption-color: var(--contrast-color);
35
+ --button-caption-halftone-color: var(--accent-color);
36
+ --button-caption-color-disabled: var(--button-caption-disabled-color);
37
+ }
38
+
39
+ :global(.button-color-negative) {
40
+ --button-bg-color: var(--negative-color);
41
+ --button-bg-color-hover: var(--negative-dark-color);
42
+ --button-bg-color-active: var(--negative-darkest-color);
43
+ --button-bg-color-halftone: var(--button-bg-halftone-color);
44
+ --button-bg-color-halftone-hover: var(--negative-lightest-color);
45
+ --button-bg-color-halftone-active: var(--negative-light-color);
46
+ --button-bg-color-disabled: var(--disabled-color);
47
+ --button-border-color: var(--negative-color);
48
+ --button-border-color-hover: var(--negative-dark-color);
49
+ --button-border-color-active: var(--negative-darkest-color);
50
+ --button-border-color-disabled: var(--disabled-color);
51
+ --button-caption-color: var(--contrast-color);
52
+ --button-caption-halftone-color: var(--negative-color);
53
+ --button-caption-color-disabled: var(--button-caption-disabled-color);
54
+ }
55
+
56
+ :global(.button-color-secondary) {
57
+ --button-bg-color: var(--secondary-color);
58
+ --button-bg-color-hover: var(--secondary-dark-color);
59
+ --button-bg-color-active: var(--secondary-darkest-color);
60
+ --button-bg-color-halftone: var(--button-bg-halftone-color);
61
+ --button-bg-color-halftone-hover: var(--secondary-lightest-color);
62
+ --button-bg-color-halftone-active: var(--secondary-light-color);
63
+ --button-bg-color-disabled: var(--disabled-color);
64
+ --button-border-color: var(--secondary-color);
65
+ --button-border-color-hover: var(--secondary-dark-color);
66
+ --button-border-color-active: var(--secondary-darkest-color);
67
+ --button-border-color-disabled: var(--disabled-color);
68
+ --button-caption-color: var(--contrast-color);
69
+ --button-caption-halftone-color: var(--secondary-color);
70
+ --button-caption-color-disabled: var(--button-caption-disabled-color);
71
71
  }
package/assets/styles/variables/buttons/iconButton.scss CHANGED
@@ -1,41 +1,41 @@
1
- :global(.icon-button-color-info) {
2
- --icon-button-icon-color: var(--info-color);
3
- --icon-button-icon-color-hover: var(--info-hover-color);
4
- --icon-button-icon-color-active: var(--info-active-color);
5
- --icon-button-icon-color-disabled: var(--icon-disabled-color);
6
- }
7
-
8
- :global(.icon-button-color-success) {
9
- --icon-button-icon-color: var(--success-color);
10
- --icon-button-icon-color-hover: var(--success-hover-color);
11
- --icon-button-icon-color-active: var(--success-active-color);
12
- --icon-button-icon-color-disabled: var(--icon-disabled-color);
13
- }
14
-
15
- :global(.icon-button-color-warning) {
16
- --icon-button-icon-color: var(--warning-color);
17
- --icon-button-icon-color-hover: var(--warning-hover-color);
18
- --icon-button-icon-color-active: var(--warning-active-color);
19
- --icon-button-icon-color-disabled: var(--icon-disabled-color);
20
- }
21
-
22
- :global(.icon-button-color-error) {
23
- --icon-button-icon-color: var(--error-color);
24
- --icon-button-icon-color-hover: var(--error-hover-color);
25
- --icon-button-icon-color-active: var(--error-active-color);
26
- --icon-button-icon-color-disabled: var(--icon-disabled-color);
27
- }
28
-
29
- :global(.icon-button-color-default) {
30
- --icon-button-icon-color: var(--icon-color);
31
- --icon-button-icon-color-hover: var(--icon-hover-color);
32
- --icon-button-icon-color-active: var(--icon-active-color);
33
- --icon-button-icon-color-disabled: var(--icon-disabled-color);
34
- }
35
-
36
- :global(.icon-button-color-secondary) {
37
- --icon-button-icon-color: var(--secondary-color);
38
- --icon-button-icon-color-hover: var(--secondary-hover-color);
39
- --icon-button-icon-color-active: var(--secondary-active-color);
40
- --icon-button-icon-color-disabled: var(--secondary-disabled-color);
41
- }
1
+ :global(.icon-button-color-info) {
2
+ --icon-button-icon-color: var(--info-color);
3
+ --icon-button-icon-color-hover: var(--info-hover-color);
4
+ --icon-button-icon-color-active: var(--info-active-color);
5
+ --icon-button-icon-color-disabled: var(--icon-disabled-color);
6
+ }
7
+
8
+ :global(.icon-button-color-success) {
9
+ --icon-button-icon-color: var(--success-color);
10
+ --icon-button-icon-color-hover: var(--success-hover-color);
11
+ --icon-button-icon-color-active: var(--success-active-color);
12
+ --icon-button-icon-color-disabled: var(--icon-disabled-color);
13
+ }
14
+
15
+ :global(.icon-button-color-warning) {
16
+ --icon-button-icon-color: var(--warning-color);
17
+ --icon-button-icon-color-hover: var(--warning-hover-color);
18
+ --icon-button-icon-color-active: var(--warning-active-color);
19
+ --icon-button-icon-color-disabled: var(--icon-disabled-color);
20
+ }
21
+
22
+ :global(.icon-button-color-error) {
23
+ --icon-button-icon-color: var(--error-color);
24
+ --icon-button-icon-color-hover: var(--error-hover-color);
25
+ --icon-button-icon-color-active: var(--error-active-color);
26
+ --icon-button-icon-color-disabled: var(--icon-disabled-color);
27
+ }
28
+
29
+ :global(.icon-button-color-default) {
30
+ --icon-button-icon-color: var(--icon-color);
31
+ --icon-button-icon-color-hover: var(--icon-hover-color);
32
+ --icon-button-icon-color-active: var(--icon-active-color);
33
+ --icon-button-icon-color-disabled: var(--icon-disabled-color);
34
+ }
35
+
36
+ :global(.icon-button-color-secondary) {
37
+ --icon-button-icon-color: var(--secondary-color);
38
+ --icon-button-icon-color-hover: var(--secondary-hover-color);
39
+ --icon-button-icon-color-active: var(--secondary-active-color);
40
+ --icon-button-icon-color-disabled: var(--secondary-disabled-color);
41
+ }
package/assets/styles/variables/buttons/linkButton.scss CHANGED
@@ -1,6 +1,6 @@
1
- :global(.link-button-vars) {
2
- --link-button-text-color: var(--info-color);
3
- --link-button-text-color-hover: var(--info-hover-color);
4
- --link-button-text-color-active: var(--info-active-color);
5
- --link-button-text-color-disabled: var(--button-disabled-color);
6
- }
1
+ :global(.link-button-vars) {
2
+ --link-button-text-color: var(--info-color);
3
+ --link-button-text-color-hover: var(--info-hover-color);
4
+ --link-button-text-color-active: var(--info-active-color);
5
+ --link-button-text-color-disabled: var(--button-disabled-color);
6
+ }
package/assets/styles/variables/buttons/tabButton.scss CHANGED
@@ -1,8 +1,8 @@
1
- :global(.tab-button-vars) {
2
- --tab-button-text-color: var(--text-primary-color);
3
- --tab-button-text-color-hover: var(--primary-color);
4
- --tab-button-text-color-active: var(--primary-color);
5
- --tab-button-text-color-disabled: var(--text-disabled-color);
6
- --tab-button-count-bg-color: white;
7
- --tab-button-count-color: var(--text-secondary-color);
8
- }
1
+ :global(.tab-button-vars) {
2
+ --tab-button-text-color: var(--text-primary-color);
3
+ --tab-button-text-color-hover: var(--primary-color);
4
+ --tab-button-text-color-active: var(--primary-color);
5
+ --tab-button-text-color-disabled: var(--text-disabled-color);
6
+ --tab-button-count-bg-color: white;
7
+ --tab-button-count-color: var(--text-secondary-color);
8
+ }
package/assets/styles/variables/inputs/checkbox.scss CHANGED
@@ -1,18 +1,18 @@
1
- :global(.checkbox-vars) {
2
- --checkbox-border-color: var(--input-border-color);
3
- --checkbox-border-color-hover: var(--input-border-hover-color);
4
- --checkbox-border-color-disabled: var(--input-border-disabled-color);
5
- --checkbox-border-color-checked: var(--input-border-checked-color);
6
- --checkbox-border-color-checked-disabled: var(--input-border-checked-disabled-color);
7
- --checkbox-bg-color: var(--input-bg-color);
8
- --checkbox-bg-color-checked: var(--input-bg-checked-color);
9
- --checkbox-bg-color-disabled: var(--input-bg-disabled-color);
10
- --checkbox-bg-color-checked-hover: var(--input-bg-checked-hover-color);
11
- --checkbox-bg-color-checked-disabled: var(--input-bg-checked-disabled-color);
12
- --checkbox-error-color: var(--negative-color);
13
- --checkbox-fill-color: var(--input-checkbox-icon-color);
14
- --checkbox-label-color: var(--input-label-color);
15
- --checkbox-label-color-disabled: var(--input-label-disabled-color);
16
-
17
- --checkbox-border-radius: var(--border-radius);
18
- }
1
+ :global(.checkbox-vars) {
2
+ --checkbox-border-color: var(--input-border-color);
3
+ --checkbox-border-color-hover: var(--input-border-hover-color);
4
+ --checkbox-border-color-disabled: var(--input-border-disabled-color);
5
+ --checkbox-border-color-checked: var(--input-border-checked-color);
6
+ --checkbox-border-color-checked-disabled: var(--input-border-checked-disabled-color);
7
+ --checkbox-bg-color: var(--input-bg-color);
8
+ --checkbox-bg-color-checked: var(--input-bg-checked-color);
9
+ --checkbox-bg-color-disabled: var(--input-bg-disabled-color);
10
+ --checkbox-bg-color-checked-hover: var(--input-bg-checked-hover-color);
11
+ --checkbox-bg-color-checked-disabled: var(--input-bg-checked-disabled-color);
12
+ --checkbox-error-color: var(--negative-color);
13
+ --checkbox-fill-color: var(--input-checkbox-icon-color);
14
+ --checkbox-label-color: var(--input-label-color);
15
+ --checkbox-label-color-disabled: var(--input-label-disabled-color);
16
+
17
+ --checkbox-border-radius: var(--border-radius);
18
+ }
package/assets/styles/variables/inputs/radioInput.scss CHANGED
@@ -1,15 +1,15 @@
1
- :global(.radio-input-vars) {
2
- --radio-input-bg-color: var(--input-bg-color);
3
- --radio-input-bg-color-disabled: var(--input-bg-disabled-color);
4
- --radio-input-border-color: var(--input-border-color);
5
- --radio-input-border-color-checked: var(--input-border-checked-color);
6
- --radio-input-border-color-hover: var(--input-border-hover-color);
7
- --radio-input-border-color-disabled: var(--input-border-disabled-color);
8
- --radio-input-border-color-checked-disabled: var(--input-border-checked-disabled-color);
9
- --radio-input-label-color: var(--input-label-color);
10
- --radio-input-label-color-disabled: var(--input-label-disabled-color);
11
- --radio-input-fill-color-checked: var(--input-border-checked-color);
12
- --radio-input-fill-color-hover: var(--input-border-hover-color);
13
- --radio-input-fill-color-checked-disabled: var(--input-border-checked-disabled-color);
14
- --radio-input-error-color: var(--negative-color);
1
+ :global(.radio-input-vars) {
2
+ --radio-input-bg-color: var(--input-bg-color);
3
+ --radio-input-bg-color-disabled: var(--input-bg-disabled-color);
4
+ --radio-input-border-color: var(--input-border-color);
5
+ --radio-input-border-color-checked: var(--input-border-checked-color);
6
+ --radio-input-border-color-hover: var(--input-border-hover-color);
7
+ --radio-input-border-color-disabled: var(--input-border-disabled-color);
8
+ --radio-input-border-color-checked-disabled: var(--input-border-checked-disabled-color);
9
+ --radio-input-label-color: var(--input-label-color);
10
+ --radio-input-label-color-disabled: var(--input-label-disabled-color);
11
+ --radio-input-fill-color-checked: var(--input-border-checked-color);
12
+ --radio-input-fill-color-hover: var(--input-border-hover-color);
13
+ --radio-input-fill-color-checked-disabled: var(--input-border-checked-disabled-color);
14
+ --radio-input-error-color: var(--negative-color);
15
15
  }
package/assets/styles/variables/inputs/switch.scss CHANGED
@@ -1,24 +1,24 @@
1
- :global(.switch-vars) {
2
- --switch-bg-color: var(--input-switch-bg-color);
3
- --switch-bg-color-checked: var(--input-bg-checked-color);
4
- --switch-bg-color-hover: var(--input-bg-hover-color);
5
- --switch-bg-color-disabled: var(--input-bg-disabled-color);
6
- --switch-bg-color-checked-hover: var(--input-bg-checked-hover-color);
7
- --switch-bg-color-checked-disabled: var(--input-bg-checked-disabled-color);
8
- --switch-border-color: var(--input-border-color);
9
- --switch-border-color-checked: var(--input-border-checked-color);
10
- --switch-border-color-hover: var(--input-switch-border-hover-color);
11
- --switch-border-color-disabled: var(--input-border-disabled-color);
12
- --switch-border-color-checked-hover: var(--input-border-checked-hover-color);
13
- --switch-border-color-checked-disabled: var(--input-border-checked-disabled-color);
14
- --switch-label-color: var(--input-label-color);
15
- --switch-label-color-disabled: var(--input-label-disabled-color);
16
- --switch-toggler-bg-color: #fff;
17
- --switch-toggler-bg-color-disabled: var(--input-bg-disabled-color);
18
- --switch-toggler-border-color: var(--input-switch-bg-color);
19
- --switch-toggler-border-color-checked: var(--input-bg-checked-color);
20
- --switch-toggler-border-color-hover: var(--input-bg-hover-color);
21
- --switch-toggler-border-color-disabled: var(--input-border-disabled-color);
22
- --switch-toggler-border-color-checked-hover: var(--input-bg-checked-hover-color);
23
- --switch-toggler-border-color-checked-disabled: var(--input-bg-checked-disabled-color);
24
- }
1
+ :global(.switch-vars) {
2
+ --switch-bg-color: var(--input-switch-bg-color);
3
+ --switch-bg-color-checked: var(--input-bg-checked-color);
4
+ --switch-bg-color-hover: var(--input-bg-hover-color);
5
+ --switch-bg-color-disabled: var(--input-bg-disabled-color);
6
+ --switch-bg-color-checked-hover: var(--input-bg-checked-hover-color);
7
+ --switch-bg-color-checked-disabled: var(--input-bg-checked-disabled-color);
8
+ --switch-border-color: var(--input-border-color);
9
+ --switch-border-color-checked: var(--input-border-checked-color);
10
+ --switch-border-color-hover: var(--input-switch-border-hover-color);
11
+ --switch-border-color-disabled: var(--input-border-disabled-color);
12
+ --switch-border-color-checked-hover: var(--input-border-checked-hover-color);
13
+ --switch-border-color-checked-disabled: var(--input-border-checked-disabled-color);
14
+ --switch-label-color: var(--input-label-color);
15
+ --switch-label-color-disabled: var(--input-label-disabled-color);
16
+ --switch-toggler-bg-color: #fff;
17
+ --switch-toggler-bg-color-disabled: var(--input-bg-disabled-color);
18
+ --switch-toggler-border-color: var(--input-switch-bg-color);
19
+ --switch-toggler-border-color-checked: var(--input-bg-checked-color);
20
+ --switch-toggler-border-color-hover: var(--input-bg-hover-color);
21
+ --switch-toggler-border-color-disabled: var(--input-border-disabled-color);
22
+ --switch-toggler-border-color-checked-hover: var(--input-bg-checked-hover-color);
23
+ --switch-toggler-border-color-checked-disabled: var(--input-bg-checked-disabled-color);
24
+ }