@epam/uui 4.7.0 → 4.8.0-beta.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 (126) 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 +14 -14
  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/DataPickerFooter.d.ts.map +1 -1
  79. package/components/pickers/DataPickerHeader.d.ts +7 -7
  80. package/components/pickers/DataPickerRow.d.ts +15 -15
  81. package/components/pickers/DataPickerRow.d.ts.map +1 -1
  82. package/components/pickers/MobileDropdownWrapper.d.ts +10 -10
  83. package/components/pickers/PickerInput.d.ts +16 -16
  84. package/components/pickers/PickerInput.d.ts.map +1 -1
  85. package/components/pickers/PickerItem.d.ts +12 -12
  86. package/components/pickers/PickerList.d.ts +17 -17
  87. package/components/pickers/PickerList.d.ts.map +1 -1
  88. package/components/pickers/PickerListItem.d.ts +8 -8
  89. package/components/pickers/PickerModal.d.ts +15 -15
  90. package/components/pickers/PickerModal.d.ts.map +1 -1
  91. package/components/pickers/PickerToggler.d.ts +8 -8
  92. package/components/pickers/docs/common.d.ts +27 -27
  93. package/components/pickers/docs/pickerInput.doc.d.ts +4 -4
  94. package/components/pickers/docs/pickerToggler.doc.d.ts +5 -5
  95. package/components/pickers/index.d.ts +11 -11
  96. package/components/tables/DataTableCell.d.ts +9 -9
  97. package/components/tables/DataTableCell.d.ts.map +1 -1
  98. package/components/tables/Presets/Preset.d.ts +14 -14
  99. package/components/tables/Presets/Presets.d.ts +8 -8
  100. package/components/tables/Presets/index.d.ts +2 -2
  101. package/components/tables/index.d.ts +3 -3
  102. package/components/tables/types.d.ts +8 -8
  103. package/components/types.d.ts +28 -28
  104. package/components/typography/Text.d.ts +11 -11
  105. package/components/typography/TextPlaceholder.d.ts +7 -7
  106. package/components/typography/docs/textPlaceholder.doc.d.ts +4 -4
  107. package/components/typography/index.d.ts +2 -2
  108. package/components/widgets/Avatar.d.ts +3 -3
  109. package/components/widgets/Badge.d.ts +15 -15
  110. package/components/widgets/Tag.d.ts +8 -8
  111. package/components/widgets/index.d.ts +3 -3
  112. package/docs/common.d.ts +10 -10
  113. package/docs/contexts/DefaultContext.d.ts +6 -6
  114. package/docs/contexts/index.d.ts +1 -1
  115. package/docs/index.d.ts +2 -2
  116. package/helpers/textLayout.d.ts +8 -8
  117. package/i18n.d.ts +50 -50
  118. package/icons/icons.d.ts +3 -3
  119. package/index.d.ts +3 -3
  120. package/index.docs.d.ts +5 -5
  121. package/index.js +1770 -1771
  122. package/index.js.map +1 -1
  123. package/package.json +6 -6
  124. package/readme.md +4 -4
  125. package/styles.css +613 -613
  126. package/styles.css.map +1 -1
package/assets/styles/variables/inputs/textInput.scss CHANGED
@@ -1,21 +1,21 @@
1
- :global(.text-input-vars) {
2
- --text-input-bg-color: var(--input-bg-color);
3
- --text-input-bg-color-disabled: var(--input-bg-disabled-color);
4
- --text-input-bg-color-readonly: var(--input-bg-readonly-color);
5
- --text-input-border-color: var(--input-border-color);
6
- --text-input-border-color-hover: var(--input-textinput-border-hover-color);
7
- --text-input-border-color-active: var(--input-border-checked-color);
8
- --text-input-border-color-error: var(--negative-color);
9
- --text-input-border-color-disabled: var(--input-border-disabled-color);
10
- --text-input-border-color-readonly: var(--input-border-readonly-color);
11
- --text-input-placeholder-color: var(--input-placeholder-color);
12
- --text-input-placeholder-color-disabled: var(--input-placeholder-disabled-color);
13
- --text-input-text-color: var(--input-text-color);
14
- --text-input-text-color-disabled: var(--input-text-disabled-color);
15
- --text-input-icon-color: var(--input-icon-color);
16
- --text-input-icon-color-disabled: var(--input-icon-disabled-color);
17
- --text-input-icon-color-clickable: var(--icon-color);
18
- --text-input-icon-color-clickable-hover: var(--icon-hover-color);
19
-
20
- --text-input-border-radius: var(--border-radius);
21
- }
1
+ :global(.text-input-vars) {
2
+ --text-input-bg-color: var(--input-bg-color);
3
+ --text-input-bg-color-disabled: var(--input-bg-disabled-color);
4
+ --text-input-bg-color-readonly: var(--input-bg-readonly-color);
5
+ --text-input-border-color: var(--input-border-color);
6
+ --text-input-border-color-hover: var(--input-textinput-border-hover-color);
7
+ --text-input-border-color-active: var(--input-border-checked-color);
8
+ --text-input-border-color-error: var(--negative-color);
9
+ --text-input-border-color-disabled: var(--input-border-disabled-color);
10
+ --text-input-border-color-readonly: var(--input-border-readonly-color);
11
+ --text-input-placeholder-color: var(--input-placeholder-color);
12
+ --text-input-placeholder-color-disabled: var(--input-placeholder-disabled-color);
13
+ --text-input-text-color: var(--input-text-color);
14
+ --text-input-text-color-disabled: var(--input-text-disabled-color);
15
+ --text-input-icon-color: var(--input-icon-color);
16
+ --text-input-icon-color-disabled: var(--input-icon-disabled-color);
17
+ --text-input-icon-color-clickable: var(--icon-color);
18
+ --text-input-icon-color-clickable-hover: var(--icon-hover-color);
19
+
20
+ --text-input-border-radius: var(--border-radius);
21
+ }
package/assets/styles/variables/layout/accordion.scss CHANGED
@@ -1,10 +1,10 @@
1
- :global(.accordion-vars) {
2
- --accordion-bg-color: var(--surface-color);
3
- --accordion-border-color: var(--divider-color);
4
- --accordion-text-color: var(--text-primary-color);
5
- --accordion-text-color-disabled: var(--text-disabled-color);
6
- --accordion-icon-color: var(--icon-color);
7
- --accordion-icon-color-disabled: var(--icon-disabled-color);
8
- --accordion-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
9
- --accordion-shadow-hovered: 0 6px 12px 0 rgba(29, 30, 38, 0.10), 0 3px 6px 0 rgba(29, 30, 38, 0.10);
10
- }
1
+ :global(.accordion-vars) {
2
+ --accordion-bg-color: var(--surface-color);
3
+ --accordion-border-color: var(--divider-color);
4
+ --accordion-text-color: var(--text-primary-color);
5
+ --accordion-text-color-disabled: var(--text-disabled-color);
6
+ --accordion-icon-color: var(--icon-color);
7
+ --accordion-icon-color-disabled: var(--icon-disabled-color);
8
+ --accordion-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
9
+ --accordion-shadow-hovered: 0 6px 12px 0 rgba(29, 30, 38, 0.10), 0 3px 6px 0 rgba(29, 30, 38, 0.10);
10
+ }
package/assets/styles/variables/layout/iconContainer.scss CHANGED
@@ -1,23 +1,23 @@
1
- :global(.icon-container-color-info) {
2
- --icon-container-fill-color: var(--info-color);
3
- }
4
-
5
- :global(.icon-container-color-success) {
6
- --icon-container-fill-color: var(--success-color);
7
- }
8
-
9
- :global(.icon-container-color-warning) {
10
- --icon-container-fill-color: var(--warning-color);
11
- }
12
-
13
- :global(.icon-container-color-error) {
14
- --icon-container-fill-color: var(--error-color);
15
- }
16
-
17
- :global(.icon-container-color-default) {
18
- --icon-container-fill-color: var(--icon-color);
19
- }
20
-
21
- :global(.icon-container-color-secondary) {
22
- --icon-container-fill-color: var(--secondary-color);
1
+ :global(.icon-container-color-info) {
2
+ --icon-container-fill-color: var(--info-color);
3
+ }
4
+
5
+ :global(.icon-container-color-success) {
6
+ --icon-container-fill-color: var(--success-color);
7
+ }
8
+
9
+ :global(.icon-container-color-warning) {
10
+ --icon-container-fill-color: var(--warning-color);
11
+ }
12
+
13
+ :global(.icon-container-color-error) {
14
+ --icon-container-fill-color: var(--error-color);
15
+ }
16
+
17
+ :global(.icon-container-color-default) {
18
+ --icon-container-fill-color: var(--icon-color);
19
+ }
20
+
21
+ :global(.icon-container-color-secondary) {
22
+ --icon-container-fill-color: var(--secondary-color);
23
23
  }
package/assets/styles/variables/layout/labeledInput.scss CHANGED
@@ -1,8 +1,8 @@
1
- :global(.labeled-input-vars) {
2
- --labeled-input-color: var(--text-primary-color);
3
- --labeled-input-color-disabled: var(--text-disabled-color);
4
- --labeled-input-color-error: var(--error-color);
5
- --labeled-input-fill-color: var(--default-color);
6
- --labeled-input-optional-text-color: var(--text-secondary-color);
7
- --labeled-input-asterisk-color: var(--error-color);
8
- }
1
+ :global(.labeled-input-vars) {
2
+ --labeled-input-color: var(--text-primary-color);
3
+ --labeled-input-color-disabled: var(--text-disabled-color);
4
+ --labeled-input-color-error: var(--error-color);
5
+ --labeled-input-fill-color: var(--default-color);
6
+ --labeled-input-optional-text-color: var(--text-secondary-color);
7
+ --labeled-input-asterisk-color: var(--error-color);
8
+ }
package/assets/styles/variables/layout/panel.scss CHANGED
@@ -1,6 +1,6 @@
1
- :global(.panel-vars) {
2
- --panel-border-radius: var(--border-radius);
3
- --panel-bg-color: var(--surface-color);
4
- //noinspection CssInvalidFunction
5
- --panel-shadow: var(--shadow, 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10)); // WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442
1
+ :global(.panel-vars) {
2
+ --panel-border-radius: var(--border-radius);
3
+ --panel-bg-color: var(--surface-color);
4
+ //noinspection CssInvalidFunction
5
+ --panel-shadow: var(--shadow, 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10)); // WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442
6
6
  }
package/assets/styles/variables/layout/scrollBars.scss CHANGED
@@ -1,4 +1,4 @@
1
- :global(.scroll-bars-vars) {
2
- --scroll-bars-bg-color: #CED0DB;
3
- --scroll-bars-bg-color-active: #6C6F80;
1
+ :global(.scroll-bars-vars) {
2
+ --scroll-bars-bg-color: #CED0DB;
3
+ --scroll-bars-bg-color-active: #6C6F80;
4
4
  }
package/assets/styles/variables/overlays/dropdownContainer.scss CHANGED
@@ -1,5 +1,5 @@
1
- :global(.dropdown-container-vars) {
2
- //noinspection CssInvalidFunction
3
- --dropdown-container-shadow: var(--shadow, 0 3px 6px 0 rgba(29, 30, 38, 0.1), 0 1px 3px 0 rgba(29, 30, 38, 0.1));
4
- --dropdown-container-scrollbar-thumb-color: #6C6F80;
1
+ :global(.dropdown-container-vars) {
2
+ //noinspection CssInvalidFunction
3
+ --dropdown-container-shadow: var(--shadow, 0 3px 6px 0 rgba(29, 30, 38, 0.1), 0 1px 3px 0 rgba(29, 30, 38, 0.1));
4
+ --dropdown-container-scrollbar-thumb-color: #6C6F80;
5
5
  }
package/assets/styles/variables/overlays/modals.scss CHANGED
@@ -1,6 +1,6 @@
1
- :global(.modals-vars) {
2
- --modals-border-radius: var(--border-radius);
3
- --modals-overlay-color: rgba(29, 30, 38, 0.8);
4
- --modals-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
5
- --modals-bg-color: var(--surface-color)
1
+ :global(.modals-vars) {
2
+ --modals-border-radius: var(--border-radius);
3
+ --modals-overlay-color: rgba(29, 30, 38, 0.8);
4
+ --modals-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
5
+ --modals-bg-color: var(--surface-color)
6
6
  }
package/assets/styles/variables/overlays/notificationCard.scss CHANGED
@@ -1,28 +1,28 @@
1
- :global(.notification-card-vars) {
2
- --notification-card-border-radius: var(--border-radius);
3
- --notification-card-border-width: 6px 1px 1px;
4
- }
5
-
6
- :global(.notification-card-color-warning) {
7
- --notification-card-fill-color: var(--warning-color);
8
- --notification-card-border-color: var(--warning-color);
9
- --notification-card-bg-color: white;
10
- }
11
-
12
- :global(.notification-card-color-success) {
13
- --notification-card-fill-color: var(--success-color);
14
- --notification-card-border-color: var(--success-color);
15
- --notification-card-bg-color: white;
16
- }
17
-
18
- :global(.notification-card-color-info) {
19
- --notification-card-fill-color: var(--info-color);
20
- --notification-card-border-color: var(--info-color);
21
- --notification-card-bg-color: white;
22
- }
23
-
24
- :global(.notification-card-color-error) {
25
- --notification-card-fill-color: var(--error-color);
26
- --notification-card-border-color: var(--error-color);
27
- --notification-card-bg-color: white;
1
+ :global(.notification-card-vars) {
2
+ --notification-card-border-radius: var(--border-radius);
3
+ --notification-card-border-width: 6px 1px 1px;
4
+ }
5
+
6
+ :global(.notification-card-color-warning) {
7
+ --notification-card-fill-color: var(--warning-color);
8
+ --notification-card-border-color: var(--warning-color);
9
+ --notification-card-bg-color: white;
10
+ }
11
+
12
+ :global(.notification-card-color-success) {
13
+ --notification-card-fill-color: var(--success-color);
14
+ --notification-card-border-color: var(--success-color);
15
+ --notification-card-bg-color: white;
16
+ }
17
+
18
+ :global(.notification-card-color-info) {
19
+ --notification-card-fill-color: var(--info-color);
20
+ --notification-card-border-color: var(--info-color);
21
+ --notification-card-bg-color: white;
22
+ }
23
+
24
+ :global(.notification-card-color-error) {
25
+ --notification-card-fill-color: var(--error-color);
26
+ --notification-card-border-color: var(--error-color);
27
+ --notification-card-bg-color: white;
28
28
  }
package/assets/styles/variables/overlays/tooltip.scss CHANGED
@@ -1,8 +1,8 @@
1
- :global(.tooltip-vars) {
2
- //noinspection CssInvalidFunction
3
- --tooltip-shadow: var(--shadow, 0 1px 4px 0 rgba(44, 47, 60, 0.05), 0 2px 18px 0 rgba(44, 47, 60, 0.03)); // WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442
4
- --tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
5
- --tooltip-bg-color: var(--surface-dark-color);
6
- --tooltip-text-color: white;
7
- --tooltip-border-radius: var(--border-radius);
8
- }
1
+ :global(.tooltip-vars) {
2
+ //noinspection CssInvalidFunction
3
+ --tooltip-shadow: var(--shadow, 0 1px 4px 0 rgba(44, 47, 60, 0.05), 0 2px 18px 0 rgba(44, 47, 60, 0.03)); // WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442
4
+ --tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
5
+ --tooltip-bg-color: var(--surface-dark-color);
6
+ --tooltip-text-color: white;
7
+ --tooltip-border-radius: var(--border-radius);
8
+ }
package/assets/styles/variables/pickers/pickerToggler.scss CHANGED
@@ -1,16 +1,16 @@
1
- :global(.picker-toggler-vars) {
2
- --picker-toggler-bg-color: var(--input-bg-color);
3
- --picker-toggler-border-color: var(--input-border-color);
4
- --picker-toggler-border-color-hover: var(--input-textinput-border-hover-color);
5
- --picker-toggler-border-color-active: var(--input-border-checked-color);
6
- --picker-toggler-border-color-error: var(--negative-color);
7
- --picker-toggler-placeholder-color: var(--input-placeholder-color);
8
- --picker-toggler-text-color: var(--input-text-color);
9
- --picker-toggler-text-color-disabled: var(--input-text-disabled-color);
10
- --picker-toggler-icon-color: var(--input-icon-color);
11
- --picker-toggler-icon-color-disabled: var(--input-icon-disabled-color);
12
- --picker-toggler-icon-color-clickable: var(--icon-color);
13
- --picker-toggler-icon-color-clickable-hover: var(--icon-hover-color);
14
-
15
- --picker-toggler-border-radius: var(--border-radius);
1
+ :global(.picker-toggler-vars) {
2
+ --picker-toggler-bg-color: var(--input-bg-color);
3
+ --picker-toggler-border-color: var(--input-border-color);
4
+ --picker-toggler-border-color-hover: var(--input-textinput-border-hover-color);
5
+ --picker-toggler-border-color-active: var(--input-border-checked-color);
6
+ --picker-toggler-border-color-error: var(--negative-color);
7
+ --picker-toggler-placeholder-color: var(--input-placeholder-color);
8
+ --picker-toggler-text-color: var(--input-text-color);
9
+ --picker-toggler-text-color-disabled: var(--input-text-disabled-color);
10
+ --picker-toggler-icon-color: var(--input-icon-color);
11
+ --picker-toggler-icon-color-disabled: var(--input-icon-disabled-color);
12
+ --picker-toggler-icon-color-clickable: var(--icon-color);
13
+ --picker-toggler-icon-color-clickable-hover: var(--icon-hover-color);
14
+
15
+ --picker-toggler-border-radius: var(--border-radius);
16
16
  }
package/assets/styles/variables/typography/text.scss CHANGED
@@ -1,19 +1,19 @@
1
- :global(.text-color-brand) {
2
- --text-color: var(--text-brand-color);
3
- }
4
-
5
- :global(.text-color-primary) {
6
- --text-color: var(--text-primary-color);
7
- }
8
-
9
- :global(.text-color-secondary) {
10
- --text-color: var(--text-secondary-color);
11
- }
12
-
13
- :global(.text-color-disabled) {
14
- --text-color: var(--text-disabled-color);
15
- }
16
-
17
- :global(.text-color-contrast) {
18
- --text-color: var(--text-contrast-color);
19
- }
1
+ :global(.text-color-brand) {
2
+ --text-color: var(--text-brand-color);
3
+ }
4
+
5
+ :global(.text-color-primary) {
6
+ --text-color: var(--text-primary-color);
7
+ }
8
+
9
+ :global(.text-color-secondary) {
10
+ --text-color: var(--text-secondary-color);
11
+ }
12
+
13
+ :global(.text-color-disabled) {
14
+ --text-color: var(--text-disabled-color);
15
+ }
16
+
17
+ :global(.text-color-contrast) {
18
+ --text-color: var(--text-contrast-color);
19
+ }
package/assets/styles/variables/typography/textPlaceholder.scss CHANGED
@@ -1,4 +1,4 @@
1
- :global(.text-placeholder-vars) {
2
- --text-placeholder-gradient: var(--skeleton-gradient);
3
- --text-placeholder-color: var(--skeleton-color);
4
- }
1
+ :global(.text-placeholder-vars) {
2
+ --text-placeholder-gradient: var(--skeleton-gradient);
3
+ --text-placeholder-color: var(--skeleton-color);
4
+ }
package/assets/styles/variables/widgets/badge.scss CHANGED
@@ -1,51 +1,51 @@
1
- :global(.badge-color-info) {
2
- --badge-bg-color: var(--info-color);
3
- --badge-bg-color-hover: var(--info-active-color);
4
- //--bg-color-semitransparent: #{lighten(#008ACE, 50%)};
5
- //--border-color-semitransparent: #{lighten($blue, 40%)};
6
- --badge-caption-color-solid: white;
7
- //--caption-color-semitransparent: #{darken($blue, 10%)};
8
- //--caption-color-semitransparent-hover: #{darken($blue, 20%)};
9
- //--caption-color-transparent: #{$gray80};
10
- --badge-count-bg-color: white;
11
- --badge-count-color: var(--text-secondary-color);
12
- }
13
-
14
- :global(.badge-color-success) {
15
- --badge-bg-color: var(--success-color);
16
- --badge-bg-color-hover: var(--success-active-color);
17
- //--bg-color-semitransparent: #{$cyan-lightest};
18
- //--border-color-semitransparent: #{$cyan-light};
19
- --badge-caption-color-solid: white;
20
- //--caption-color-semitransparent: #{$cyan-dark};
21
- //--caption-color-semitransparent-hover: #{$cyan-darkest};
22
- //--caption-color-transparent: #{$gray80};
23
- --badge-count-bg-color: white;
24
- --badge-count-color: var(--text-secondary-color);
25
- }
26
-
27
- :global(.badge-color-warning) {
28
- --badge-bg-color: var(--warning-color);
29
- --badge-bg-color-hover: var(--warning-active-color);
30
- //--bg-color-semitransparent: #{lighten($green, 50%)};
31
- //--border-color-semitransparent: #{lighten($green, 40%)};
32
- --badge-caption-color-solid: white;
33
- //--caption-color-semitransparent: #{darken($green, 10%)};
34
- //--caption-color-semitransparent-hover: #{darken($green, 20%)};
35
- //--caption-color-transparent: #{$gray80};
36
- --badge-count-bg-color: white;
37
- --badge-count-color: var(--text-secondary-color);
38
- }
39
-
40
- :global(.badge-color-error) {
41
- --badge-bg-color: var(--error-color);
42
- --badge-bg-color-hover: var(--error-active-color);
43
- //--bg-color-semitransparent: #{lighten($amber, 40%)};
44
- //--border-color-semitransparent: #{lighten($amber, 30%)};
45
- --badge-caption-color-solid: var(--text-primary-color);
46
- //--caption-color-semitransparent: #995A00;
47
- //--caption-color-semitransparent-hover: #804000;
48
- //--caption-color-transparent: #{$gray80};
49
- --badge-count-bg-color: white;
50
- --badge-count-color: var(--text-secondary-color);
1
+ :global(.badge-color-info) {
2
+ --badge-bg-color: var(--info-color);
3
+ --badge-bg-color-hover: var(--info-active-color);
4
+ //--bg-color-semitransparent: #{lighten(#008ACE, 50%)};
5
+ //--border-color-semitransparent: #{lighten($blue, 40%)};
6
+ --badge-caption-color-solid: white;
7
+ //--caption-color-semitransparent: #{darken($blue, 10%)};
8
+ //--caption-color-semitransparent-hover: #{darken($blue, 20%)};
9
+ //--caption-color-transparent: #{$gray80};
10
+ --badge-count-bg-color: white;
11
+ --badge-count-color: var(--text-secondary-color);
12
+ }
13
+
14
+ :global(.badge-color-success) {
15
+ --badge-bg-color: var(--success-color);
16
+ --badge-bg-color-hover: var(--success-active-color);
17
+ //--bg-color-semitransparent: #{$cyan-lightest};
18
+ //--border-color-semitransparent: #{$cyan-light};
19
+ --badge-caption-color-solid: white;
20
+ //--caption-color-semitransparent: #{$cyan-dark};
21
+ //--caption-color-semitransparent-hover: #{$cyan-darkest};
22
+ //--caption-color-transparent: #{$gray80};
23
+ --badge-count-bg-color: white;
24
+ --badge-count-color: var(--text-secondary-color);
25
+ }
26
+
27
+ :global(.badge-color-warning) {
28
+ --badge-bg-color: var(--warning-color);
29
+ --badge-bg-color-hover: var(--warning-active-color);
30
+ //--bg-color-semitransparent: #{lighten($green, 50%)};
31
+ //--border-color-semitransparent: #{lighten($green, 40%)};
32
+ --badge-caption-color-solid: white;
33
+ //--caption-color-semitransparent: #{darken($green, 10%)};
34
+ //--caption-color-semitransparent-hover: #{darken($green, 20%)};
35
+ //--caption-color-transparent: #{$gray80};
36
+ --badge-count-bg-color: white;
37
+ --badge-count-color: var(--text-secondary-color);
38
+ }
39
+
40
+ :global(.badge-color-error) {
41
+ --badge-bg-color: var(--error-color);
42
+ --badge-bg-color-hover: var(--error-active-color);
43
+ //--bg-color-semitransparent: #{lighten($amber, 40%)};
44
+ //--border-color-semitransparent: #{lighten($amber, 30%)};
45
+ --badge-caption-color-solid: var(--text-primary-color);
46
+ //--caption-color-semitransparent: #995A00;
47
+ //--caption-color-semitransparent-hover: #804000;
48
+ //--caption-color-transparent: #{$gray80};
49
+ --badge-count-bg-color: white;
50
+ --badge-count-color: var(--text-secondary-color);
51
51
  }
package/assets/styles/variables/widgets/tag.scss CHANGED
@@ -1,9 +1,9 @@
1
- :global(.tag-vars) {
2
- --tag-bg-color: var(--tag-color);
3
- --tag-bg-color-hover: var(--tag-hover-color);
4
- --tag-caption-color: var(--text-primary-color);
5
- --tag-fill-color: var(--icon-color);
6
- --tag-fill-color-hover: var(--icon-hover-color);
7
- --tag-count-bg-color: white;
8
- --tag-count-color: var(--text-secondary-color);
9
- }
1
+ :global(.tag-vars) {
2
+ --tag-bg-color: var(--tag-color);
3
+ --tag-bg-color-hover: var(--tag-hover-color);
4
+ --tag-caption-color: var(--text-primary-color);
5
+ --tag-fill-color: var(--icon-color);
6
+ --tag-fill-color-hover: var(--icon-hover-color);
7
+ --tag-count-bg-color: white;
8
+ --tag-count-color: var(--text-secondary-color);
9
+ }