@dxc-technology/halstack-react 0.0.0-de7c6b0 → 0.0.0-dec566a

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 (286) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +52 -139
  4. package/HalstackContext.js +11 -36
  5. package/README.md +47 -0
  6. package/accordion/Accordion.js +31 -84
  7. package/accordion/Accordion.stories.tsx +5 -50
  8. package/accordion/Accordion.test.js +18 -33
  9. package/accordion/types.d.ts +6 -6
  10. package/accordion-group/AccordionGroup.d.ts +2 -3
  11. package/accordion-group/AccordionGroup.js +17 -44
  12. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  13. package/accordion-group/AccordionGroup.test.js +42 -60
  14. package/accordion-group/AccordionGroupAccordion.js +11 -23
  15. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  16. package/accordion-group/AccordionGroupContext.js +8 -0
  17. package/accordion-group/types.d.ts +7 -7
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +48 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +29 -118
  24. package/alert/Alert.test.js +28 -45
  25. package/alert/types.d.ts +5 -5
  26. package/badge/Badge.d.ts +1 -1
  27. package/badge/Badge.js +141 -43
  28. package/badge/Badge.stories.tsx +210 -0
  29. package/badge/Badge.test.js +30 -0
  30. package/badge/types.d.ts +52 -3
  31. package/bleed/Bleed.js +13 -21
  32. package/bleed/types.d.ts +2 -2
  33. package/box/Box.js +11 -33
  34. package/box/Box.test.js +1 -6
  35. package/box/types.d.ts +3 -3
  36. package/bulleted-list/BulletedList.js +22 -55
  37. package/bulleted-list/BulletedList.stories.tsx +2 -93
  38. package/bulleted-list/types.d.ts +5 -5
  39. package/button/Button.d.ts +1 -1
  40. package/button/Button.js +68 -100
  41. package/button/Button.stories.tsx +33 -132
  42. package/button/Button.test.js +19 -16
  43. package/button/types.d.ts +9 -5
  44. package/card/Card.js +21 -44
  45. package/card/Card.test.js +10 -21
  46. package/card/types.d.ts +5 -5
  47. package/checkbox/Checkbox.js +85 -120
  48. package/checkbox/Checkbox.stories.tsx +16 -54
  49. package/checkbox/Checkbox.test.js +107 -63
  50. package/checkbox/types.d.ts +8 -4
  51. package/chip/Chip.js +12 -31
  52. package/chip/Chip.stories.tsx +1 -1
  53. package/chip/Chip.test.js +15 -28
  54. package/chip/types.d.ts +4 -4
  55. package/common/coreTokens.d.ts +105 -14
  56. package/common/coreTokens.js +41 -24
  57. package/common/utils.js +2 -8
  58. package/common/variables.d.ts +52 -139
  59. package/common/variables.js +63 -157
  60. package/container/Container.d.ts +4 -0
  61. package/container/Container.js +194 -0
  62. package/container/Container.stories.tsx +214 -0
  63. package/container/types.d.ts +74 -0
  64. package/contextual-menu/ContextualMenu.d.ts +7 -0
  65. package/contextual-menu/ContextualMenu.js +71 -0
  66. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  67. package/contextual-menu/ContextualMenu.test.js +71 -0
  68. package/contextual-menu/MenuItemAction.d.ts +4 -0
  69. package/contextual-menu/MenuItemAction.js +46 -0
  70. package/contextual-menu/types.d.ts +22 -0
  71. package/contextual-menu/types.js +5 -0
  72. package/date-input/Calendar.js +15 -59
  73. package/date-input/DateInput.js +50 -96
  74. package/date-input/DateInput.stories.tsx +11 -30
  75. package/date-input/DateInput.test.js +674 -701
  76. package/date-input/DatePicker.js +11 -42
  77. package/date-input/Icons.d.ts +6 -6
  78. package/date-input/Icons.js +6 -23
  79. package/date-input/YearPicker.js +8 -34
  80. package/date-input/types.d.ts +28 -22
  81. package/dialog/Dialog.js +13 -40
  82. package/dialog/Dialog.stories.tsx +170 -0
  83. package/dialog/Dialog.test.js +125 -187
  84. package/dialog/types.d.ts +18 -13
  85. package/divider/Divider.d.ts +4 -0
  86. package/divider/Divider.js +36 -0
  87. package/divider/Divider.stories.tsx +223 -0
  88. package/divider/Divider.test.js +38 -0
  89. package/divider/types.d.ts +21 -0
  90. package/divider/types.js +5 -0
  91. package/dropdown/Dropdown.js +59 -128
  92. package/dropdown/Dropdown.stories.tsx +5 -16
  93. package/dropdown/Dropdown.test.js +391 -378
  94. package/dropdown/DropdownMenu.js +8 -19
  95. package/dropdown/DropdownMenuItem.js +11 -20
  96. package/dropdown/types.d.ts +20 -24
  97. package/file-input/FileInput.js +180 -248
  98. package/file-input/FileInput.stories.tsx +1 -1
  99. package/file-input/FileInput.test.js +356 -354
  100. package/file-input/FileItem.js +14 -41
  101. package/file-input/types.d.ts +10 -10
  102. package/flex/Flex.js +25 -39
  103. package/flex/types.d.ts +6 -6
  104. package/footer/Footer.d.ts +1 -1
  105. package/footer/Footer.js +70 -102
  106. package/footer/Footer.stories.tsx +37 -6
  107. package/footer/Footer.test.js +21 -33
  108. package/footer/Icons.d.ts +3 -2
  109. package/footer/Icons.js +66 -7
  110. package/footer/types.d.ts +25 -21
  111. package/grid/Grid.d.ts +1 -1
  112. package/grid/Grid.js +2 -17
  113. package/grid/Grid.stories.tsx +38 -38
  114. package/grid/types.d.ts +10 -10
  115. package/header/Header.d.ts +1 -1
  116. package/header/Header.js +28 -84
  117. package/header/Header.test.js +12 -25
  118. package/header/Icons.d.ts +2 -2
  119. package/header/Icons.js +2 -7
  120. package/header/types.d.ts +7 -8
  121. package/heading/Heading.js +9 -31
  122. package/heading/Heading.test.js +70 -87
  123. package/heading/types.d.ts +7 -7
  124. package/icon/Icon.d.ts +4 -0
  125. package/icon/Icon.js +33 -0
  126. package/icon/Icon.stories.tsx +28 -0
  127. package/icon/types.d.ts +4 -0
  128. package/icon/types.js +5 -0
  129. package/image/Image.d.ts +4 -0
  130. package/image/Image.js +70 -0
  131. package/image/Image.stories.tsx +129 -0
  132. package/image/types.d.ts +72 -0
  133. package/image/types.js +5 -0
  134. package/inset/Inset.js +13 -21
  135. package/inset/types.d.ts +2 -2
  136. package/layout/ApplicationLayout.d.ts +2 -2
  137. package/layout/ApplicationLayout.js +29 -66
  138. package/layout/ApplicationLayout.stories.tsx +1 -1
  139. package/layout/Icons.d.ts +8 -5
  140. package/layout/Icons.js +51 -59
  141. package/layout/types.d.ts +3 -3
  142. package/link/Link.js +21 -42
  143. package/link/Link.test.js +23 -41
  144. package/link/types.d.ts +14 -14
  145. package/main.d.ts +8 -4
  146. package/main.js +39 -59
  147. package/nav-tabs/NavTabs.d.ts +1 -2
  148. package/nav-tabs/NavTabs.js +19 -48
  149. package/nav-tabs/NavTabs.stories.tsx +7 -5
  150. package/nav-tabs/NavTabs.test.js +38 -44
  151. package/nav-tabs/NavTabsContext.d.ts +3 -0
  152. package/nav-tabs/NavTabsContext.js +8 -0
  153. package/nav-tabs/Tab.js +24 -52
  154. package/nav-tabs/types.d.ts +9 -9
  155. package/number-input/NumberInput.js +46 -36
  156. package/number-input/NumberInput.stories.tsx +42 -26
  157. package/number-input/NumberInput.test.js +859 -412
  158. package/number-input/NumberInputContext.d.ts +3 -4
  159. package/number-input/NumberInputContext.js +3 -14
  160. package/number-input/types.d.ts +17 -5
  161. package/package.json +30 -28
  162. package/paginator/Icons.d.ts +5 -5
  163. package/paginator/Icons.js +5 -19
  164. package/paginator/Paginator.js +15 -43
  165. package/paginator/Paginator.test.js +224 -207
  166. package/paginator/types.d.ts +3 -3
  167. package/paragraph/Paragraph.js +3 -19
  168. package/paragraph/Paragraph.stories.tsx +0 -17
  169. package/password-input/Icons.d.ts +6 -0
  170. package/password-input/Icons.js +35 -0
  171. package/password-input/PasswordInput.js +57 -126
  172. package/password-input/PasswordInput.stories.tsx +1 -33
  173. package/password-input/PasswordInput.test.js +157 -140
  174. package/password-input/types.d.ts +8 -7
  175. package/progress-bar/ProgressBar.js +21 -53
  176. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  177. package/progress-bar/ProgressBar.test.js +35 -52
  178. package/progress-bar/types.d.ts +3 -3
  179. package/quick-nav/QuickNav.js +4 -27
  180. package/quick-nav/QuickNav.stories.tsx +1 -1
  181. package/quick-nav/types.d.ts +10 -10
  182. package/radio-group/Radio.d.ts +1 -1
  183. package/radio-group/Radio.js +22 -54
  184. package/radio-group/RadioGroup.js +37 -83
  185. package/radio-group/RadioGroup.stories.tsx +10 -10
  186. package/radio-group/RadioGroup.test.js +504 -470
  187. package/radio-group/types.d.ts +8 -8
  188. package/resultset-table/Icons.d.ts +7 -0
  189. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  190. package/resultset-table/ResultsetTable.d.ts +7 -0
  191. package/{resultsetTable → resultset-table}/ResultsetTable.js +44 -69
  192. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +106 -5
  193. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +148 -92
  194. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  195. package/resultset-table/types.js +5 -0
  196. package/select/Icons.d.ts +7 -7
  197. package/select/Icons.js +1 -5
  198. package/select/Listbox.js +13 -39
  199. package/select/Option.js +17 -27
  200. package/select/Select.js +87 -163
  201. package/select/Select.stories.tsx +3 -3
  202. package/select/Select.test.js +1946 -1804
  203. package/select/types.d.ts +14 -15
  204. package/sidenav/Icons.d.ts +4 -4
  205. package/sidenav/Icons.js +1 -5
  206. package/sidenav/Sidenav.js +29 -70
  207. package/sidenav/Sidenav.test.js +3 -10
  208. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  209. package/{layout → sidenav}/SidenavContext.js +3 -9
  210. package/sidenav/types.d.ts +18 -18
  211. package/slider/Slider.js +68 -125
  212. package/slider/Slider.test.js +107 -103
  213. package/slider/types.d.ts +4 -4
  214. package/spinner/Spinner.js +16 -54
  215. package/spinner/Spinner.test.js +25 -34
  216. package/spinner/types.d.ts +3 -3
  217. package/status-light/StatusLight.d.ts +4 -0
  218. package/status-light/StatusLight.js +51 -0
  219. package/status-light/StatusLight.stories.tsx +74 -0
  220. package/status-light/StatusLight.test.js +25 -0
  221. package/status-light/types.d.ts +17 -0
  222. package/status-light/types.js +5 -0
  223. package/switch/Switch.js +49 -97
  224. package/switch/Switch.stories.tsx +0 -34
  225. package/switch/Switch.test.js +51 -96
  226. package/switch/types.d.ts +4 -4
  227. package/table/DropdownTheme.js +62 -0
  228. package/table/Table.d.ts +6 -2
  229. package/table/Table.js +76 -33
  230. package/table/{Table.stories.jsx → Table.stories.tsx} +297 -2
  231. package/table/Table.test.js +93 -6
  232. package/table/types.d.ts +34 -6
  233. package/tabs/Tab.js +17 -33
  234. package/tabs/Tabs.js +52 -129
  235. package/tabs/Tabs.stories.tsx +1 -1
  236. package/tabs/Tabs.test.js +62 -118
  237. package/tabs/types.d.ts +19 -19
  238. package/tag/Tag.js +21 -51
  239. package/tag/Tag.test.js +19 -30
  240. package/tag/types.d.ts +7 -7
  241. package/text-input/Suggestion.js +9 -26
  242. package/text-input/Suggestions.d.ts +1 -1
  243. package/text-input/Suggestions.js +19 -67
  244. package/text-input/TextInput.js +221 -327
  245. package/text-input/TextInput.stories.tsx +49 -153
  246. package/text-input/TextInput.test.js +1227 -1194
  247. package/text-input/types.d.ts +25 -17
  248. package/textarea/Textarea.js +67 -109
  249. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  250. package/textarea/Textarea.test.js +150 -179
  251. package/textarea/types.d.ts +9 -5
  252. package/toggle-group/ToggleGroup.js +90 -107
  253. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  254. package/toggle-group/ToggleGroup.test.js +68 -87
  255. package/toggle-group/types.d.ts +26 -17
  256. package/typography/Typography.js +4 -13
  257. package/typography/types.d.ts +1 -1
  258. package/useTheme.d.ts +49 -136
  259. package/useTheme.js +1 -8
  260. package/useTranslatedLabels.js +1 -7
  261. package/utils/BaseTypography.d.ts +2 -2
  262. package/utils/BaseTypography.js +16 -30
  263. package/utils/FocusLock.js +25 -39
  264. package/wizard/Wizard.js +14 -49
  265. package/wizard/Wizard.test.js +53 -80
  266. package/wizard/types.d.ts +7 -7
  267. package/common/OpenSans.css +0 -69
  268. package/common/fonts/OpenSans-Bold.ttf +0 -0
  269. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  270. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  271. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  272. package/common/fonts/OpenSans-Italic.ttf +0 -0
  273. package/common/fonts/OpenSans-Light.ttf +0 -0
  274. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  275. package/common/fonts/OpenSans-Regular.ttf +0 -0
  276. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  277. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  278. package/number-input/numberInputContextTypes.d.ts +0 -19
  279. package/resultsetTable/Icons.d.ts +0 -7
  280. package/resultsetTable/ResultsetTable.d.ts +0 -4
  281. package/slider/Slider.stories.tsx +0 -240
  282. package/text-input/Icons.d.ts +0 -8
  283. package/text-input/Icons.js +0 -60
  284. /package/{resultsetTable → action-icon}/types.js +0 -0
  285. /package/{number-input/numberInputContextTypes.js → container/types.js} +0 -0
  286. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
@@ -1,29 +1,28 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- declare type OptionCommons = {
11
- /**
12
- * Number with the option inner value.
13
- */
14
- value: number;
15
- };
16
- declare type OptionIcon = OptionCommons & {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ type OptionIcon = {
17
11
  /**
18
12
  * String with the option display value.
19
13
  */
20
- label?: string;
14
+ label?: never;
21
15
  /**
22
16
  * Element used as the icon. Icon and label can't be used at same time.
23
17
  */
24
18
  icon: string | SVG;
19
+ /**
20
+ * Value for the HTML properties title and aria-label.
21
+ * When a label is defined, this prop can not be use.
22
+ */
23
+ title: string;
25
24
  };
26
- export declare type OptionLabel = OptionCommons & {
25
+ export type OptionLabel = {
27
26
  /**
28
27
  * String with the option display value.
29
28
  */
@@ -32,9 +31,19 @@ export declare type OptionLabel = OptionCommons & {
32
31
  * Element used as the icon. Icon and label can't be used at same time.
33
32
  */
34
33
  icon?: string | SVG;
34
+ /**
35
+ * Value for the HTML properties title and aria-label.
36
+ * When a label is defined, this prop can not be use.
37
+ */
38
+ title?: never;
35
39
  };
36
- declare type Option = OptionIcon | OptionLabel;
37
- declare type CommonProps = {
40
+ type Option = {
41
+ /**
42
+ * Number with the option inner value.
43
+ */
44
+ value: number;
45
+ } & (OptionIcon | OptionLabel);
46
+ type CommonProps = {
38
47
  /**
39
48
  * Text to be placed above the component.
40
49
  */
@@ -61,7 +70,7 @@ declare type CommonProps = {
61
70
  */
62
71
  tabIndex?: number;
63
72
  };
64
- declare type SingleSelectionToggle = CommonProps & {
73
+ type SingleSelectionToggleGroup = CommonProps & {
65
74
  /**
66
75
  * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
67
76
  */
@@ -81,7 +90,7 @@ declare type SingleSelectionToggle = CommonProps & {
81
90
  */
82
91
  onChange?: (optionIndex: number) => void;
83
92
  };
84
- declare type MultipleSelectionToggle = CommonProps & {
93
+ type MultipleSelectionToggleGroup = CommonProps & {
85
94
  /**
86
95
  * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
87
96
  */
@@ -101,5 +110,5 @@ declare type MultipleSelectionToggle = CommonProps & {
101
110
  */
102
111
  onChange?: (optionIndex: number[]) => void;
103
112
  };
104
- declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
113
+ type Props = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
105
114
  export default Props;
@@ -1,32 +1,23 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = void 0;
9
-
10
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
-
12
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
-
14
10
  var _react = _interopRequireDefault(require("react"));
15
-
16
11
  var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
17
-
18
12
  var _excluded = ["textOverflow", "whiteSpace", "children"];
19
-
20
13
  var DxcTypography = function DxcTypography(_ref) {
21
14
  var textOverflow = _ref.textOverflow,
22
- whiteSpace = _ref.whiteSpace,
23
- children = _ref.children,
24
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
15
+ whiteSpace = _ref.whiteSpace,
16
+ children = _ref.children,
17
+ props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
25
18
  return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], (0, _extends2["default"])({
26
19
  textOverflow: textOverflow,
27
20
  whiteSpace: whiteSpace == null && textOverflow != null && textOverflow !== "unset" ? "nowrap" : whiteSpace
28
21
  }, props), children);
29
22
  };
30
-
31
- var _default = DxcTypography;
32
- exports["default"] = _default;
23
+ var _default = exports["default"] = DxcTypography;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- declare type Props = {
2
+ type Props = {
3
3
  as?: keyof HTMLElementTagNameMap;
4
4
  display?: "inline" | "block";
5
5
  fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
package/useTheme.d.ts CHANGED
@@ -36,7 +36,7 @@ declare const useTheme: () => {
36
36
  disabledIconColor: string;
37
37
  iconSize: string;
38
38
  iconMarginLeft: string;
39
- iconMarginRigth: string;
39
+ iconMarginRight: string;
40
40
  accordionGroupSeparatorBorderColor: string;
41
41
  accordionGroupSeparatorBorderThickness: string;
42
42
  accordionGroupSeparatorBorderRadius: string;
@@ -109,7 +109,6 @@ declare const useTheme: () => {
109
109
  }>;
110
110
  bulletedList?: Partial<{
111
111
  fontColor: string;
112
- fontColorOnDark: string;
113
112
  bulletIconHeight: string;
114
113
  bulletIconWidth: string;
115
114
  bulletHeight: string;
@@ -124,19 +123,12 @@ declare const useTheme: () => {
124
123
  paddingTop: string;
125
124
  paddingBottom: string;
126
125
  focusBorderColor: string;
127
- focusBorderColorOnDark: string;
128
126
  primaryBackgroundColor: string;
129
- primaryBackgroundColorOnDark: string;
130
127
  primaryFontColor: string;
131
- primaryFontColorOnDark: string;
132
128
  primaryHoverBackgroundColor: string;
133
- primaryHoverBackgroundColorOnDark: string;
134
129
  primaryActiveBackgroundColor: string;
135
- primaryActiveBackgroundColorOnDark: string;
136
130
  primaryDisabledBackgroundColor: string;
137
- primaryDisabledBackgroundColorOnDark: string;
138
131
  primaryDisabledFontColor: string;
139
- primaryDisabledFontColorOnDark: string;
140
132
  primaryBorderThickness: string;
141
133
  primaryBorderStyle: string;
142
134
  primaryBorderRadius: string;
@@ -144,23 +136,14 @@ declare const useTheme: () => {
144
136
  primaryFontSize: string;
145
137
  primaryFontWeight: string;
146
138
  secondaryBackgroundColor: string;
147
- secondaryBackgroundColorOnDark: string;
148
139
  secondaryFontColor: string;
149
- secondaryFontColorOnDark: string;
150
140
  secondaryHoverFontColor: string;
151
- secondaryHoverFontColorOnDark: string;
152
141
  secondaryBorderColor: string;
153
- secondaryBorderColorOnDark: string;
154
142
  secondaryHoverBackgroundColor: string;
155
- secondaryHoverBackgroundColorOnDark: string;
156
143
  secondaryActiveBackgroundColor: string;
157
- secondaryActiveBackgroundColorOnDark: string;
158
144
  secondaryDisabledBackgroundColor: string;
159
- secondaryDisabledBackgroundColorOnDark: string;
160
145
  secondaryDisabledFontColor: string;
161
- secondaryDisabledFontColorOnDark: string;
162
146
  secondaryDisabledBorderColor: string;
163
- secondaryDisabledBorderColorOnDark: string;
164
147
  secondaryBorderThickness: string;
165
148
  secondaryBorderStyle: string;
166
149
  secondaryBorderRadius: string;
@@ -168,17 +151,11 @@ declare const useTheme: () => {
168
151
  secondaryFontSize: string;
169
152
  secondaryFontWeight: string;
170
153
  textBackgroundColor: string;
171
- textBackgroundColorOnDark: string;
172
154
  textFontColor: string;
173
- textFontColorOnDark: string;
174
155
  textHoverBackgroundColor: string;
175
- textHoverBackgroundColorOnDark: string;
176
156
  textActiveBackgroundColor: string;
177
- textActiveBackgroundColorOnDark: string;
178
157
  textDisabledBackgroundColor: string;
179
- textDisabledBackgroundColorOnDark: string;
180
158
  textDisabledFontColor: string;
181
- textDisabledFontColorOnDark: string;
182
159
  textBorderThickness: string;
183
160
  textBorderStyle: string;
184
161
  textBorderRadius: string;
@@ -192,30 +169,24 @@ declare const useTheme: () => {
192
169
  }>;
193
170
  checkbox?: Partial<{
194
171
  backgroundColorChecked: string;
195
- backgroundColorCheckedOnDark: string;
196
172
  hoverBackgroundColorChecked: string;
197
- hoverBackgroundColorCheckedOnDark: string;
198
173
  disabledBackgroundColorChecked: string;
199
- disabledBackgroundColorCheckedOnDark: string;
174
+ readOnlyBackgroundColorChecked: string;
175
+ hoverReadOnlyBackgroundColorChecked: string;
200
176
  borderColor: string;
201
- borderColorOnDark: string;
202
177
  hoverBorderColor: string;
203
- hoverBorderColorOnDark: string;
204
178
  disabledBorderColor: string;
205
- disabledBorderColorOnDark: string;
179
+ readOnlyBorderColor: string;
180
+ hoverReadOnlyBorderColor: string;
206
181
  checkColor: string;
207
- checkColorOnDark: string;
208
182
  disabledCheckColor: string;
209
- disabledCheckColorOnDark: string;
183
+ readOnlyCheckColor: string;
210
184
  fontFamily: string;
211
185
  fontSize: string;
212
186
  fontWeight: string;
213
187
  fontColor: string;
214
- fontColorOnDark: string;
215
188
  disabledFontColor: string;
216
- disabledFontColorOnDark: string;
217
189
  focusColor: string;
218
- focusColorOnDark: string;
219
190
  checkLabelSpacing: string;
220
191
  }>;
221
192
  chip?: Partial<{
@@ -311,8 +282,14 @@ declare const useTheme: () => {
311
282
  buttonPaddingBottom: string;
312
283
  buttonPaddingLeft: string;
313
284
  buttonPaddingRight: string;
285
+ buttonHeight: string;
286
+ buttonBorderRadius: string;
287
+ buttonBorderStyle: string;
288
+ buttonBorderThickness: string;
289
+ buttonBorderColor: string;
314
290
  disabledColor: string;
315
291
  disabledButtonBackgroundColor: string;
292
+ disabledButtonBorderColor: string;
316
293
  disabledBorderColor: string;
317
294
  optionBackgroundColor: string;
318
295
  hoverOptionBackgroundColor: string;
@@ -449,7 +426,6 @@ declare const useTheme: () => {
449
426
  underlinedThickness: string;
450
427
  underlinedStyle: string;
451
428
  contentColor: string;
452
- contentColorOnDark: string;
453
429
  }>;
454
430
  heading?: Partial<{
455
431
  level1FontColor: string;
@@ -488,6 +464,14 @@ declare const useTheme: () => {
488
464
  level5LineHeight: string;
489
465
  level5LetterSpacing: string;
490
466
  }>;
467
+ image?: Partial<{
468
+ captionFontColor: string;
469
+ captionFontFamily: string;
470
+ captionFontSize: string;
471
+ captionFontStyle: string;
472
+ captionFontWeight: string;
473
+ captionLineHeight: string;
474
+ }>;
491
475
  link?: Partial<{
492
476
  fontColor: string;
493
477
  fontFamily: string;
@@ -548,31 +532,26 @@ declare const useTheme: () => {
548
532
  }>;
549
533
  paragraph?: Partial<{
550
534
  fontColor: string;
551
- fontColorOnDark: string;
552
535
  display: string;
553
536
  fontSize: string;
554
537
  fontWeight: string;
555
538
  }>;
556
539
  progressBar?: Partial<{
557
540
  trackLineColor: string;
558
- trackLineColorOnDark: string;
559
541
  totalLineColor: string;
560
542
  labelFontFamily: string;
561
543
  labelFontSize: string;
562
544
  labelFontStyle: string;
563
545
  labelFontWeight: string;
564
546
  labelFontColor: string;
565
- labelFontColorOnDark: string;
566
547
  labelFontTextTransform: string;
567
548
  valueFontFamily: string;
568
549
  valueFontSize: string;
569
550
  valueFontStyle: string;
570
551
  valueFontWeight: string;
571
552
  valueFontColor: string;
572
- valueFontColorOnDark: string;
573
553
  valueFontTextTransform: string;
574
554
  helperTextFontColor: string;
575
- helperTextFontColorOnDark: string;
576
555
  helperTextFontSize: string;
577
556
  helperTextFontStyle: string;
578
557
  helperTextFontWeight: string;
@@ -608,9 +587,9 @@ declare const useTheme: () => {
608
587
  errorRadioInputColor: string;
609
588
  hoverErrorRadioInputColor: string;
610
589
  activeErrorRadioInputColor: string;
611
- readonlyRadioInputColor: string;
612
- hoverReadonlyRadioInputColor: string;
613
- activeReadonlyRadioInputColor: string;
590
+ readOnlyRadioInputColor: string;
591
+ hoverReadOnlyRadioInputColor: string;
592
+ activeReadOnlyRadioInputColor: string;
614
593
  disabledRadioInputColor: string;
615
594
  disabledLabelFontColor: string;
616
595
  disabledHelperTextFontColor: string;
@@ -750,7 +729,6 @@ declare const useTheme: () => {
750
729
  slider?: Partial<{
751
730
  fontFamily: string;
752
731
  limitValuesFontColor: string;
753
- limitValuesFontColorOnDark: string;
754
732
  limitValuesFontSize: string;
755
733
  limitValuesFontStyle: string;
756
734
  limitValuesFontWeight: string;
@@ -767,15 +745,10 @@ declare const useTheme: () => {
767
745
  helperTextFontWeight: string;
768
746
  helperTextLineHeight: string;
769
747
  fontColor: string;
770
- fontColorOnDark: string;
771
748
  labelFontColor: string;
772
- labelFontColorOnDark: string;
773
749
  helperTextFontColor: string;
774
- helperTextFontColorOnDark: string;
775
750
  disabledLabelFontColor: string;
776
- disabledLabelFontColorOnDark: string;
777
751
  disabledHelperTextFontColor: string;
778
- disabledHelperTextFontColorOnDark: string;
779
752
  thumbHeight: string;
780
753
  thumbWidth: string;
781
754
  hoverThumbHeight: string;
@@ -783,40 +756,28 @@ declare const useTheme: () => {
783
756
  thumbVerticalPosition: string;
784
757
  hoverThumbVerticalPosition: string;
785
758
  thumbBackgroundColor: string;
786
- thumbBackgroundColorOnDark: string;
787
759
  hoverThumbScale: string;
788
760
  hoverThumbBackgroundColor: string;
789
- hoverThumbBackgroundColorOnDark: string;
790
761
  activeThumbScale: string;
791
762
  activeThumbBackgroundColor: string;
792
- activeThumbBackgroundColorOnDark: string;
793
763
  focusThumbBackgroundColor: string;
794
- focusThumbBackgroundColorOnDark: string;
795
764
  tickHeight: string;
796
765
  tickWidth: string;
797
766
  tickVerticalPosition: string;
798
767
  tickBackgroundColor: string;
799
- tickBackgroundColorOnDark: string;
800
768
  trackLineThickness: string;
801
769
  trackLineVerticalPosition: string;
802
770
  trackLineColor: string;
803
- trackLineColorOnDark: string;
804
771
  totalLineThickness: string;
805
772
  totalLineVerticalPosition: string;
806
773
  totalLineColor: string;
807
- totalLineColorOnDark: string;
808
774
  disabledThumbVerticalPosition: string;
809
775
  disabledThumbBackgroundColor: string;
810
- disabledThumbBackgroundColorOnDark: string;
811
776
  disabledTickVerticalPosition: string;
812
777
  disabledTickBackgroundColor: string;
813
- disabledTickBackgroundColorOnDark: string;
814
778
  disabledTrackLineColor: string;
815
- disabledTrackLineColorOnDark: string;
816
779
  disabledTotalLineColor: string;
817
- disabledTotalLineColorOnDark: string;
818
780
  focusColor: string;
819
- focusColorOnDark: string;
820
781
  floorLabelMarginRight: string;
821
782
  ceilLabelMarginLeft: string;
822
783
  inputMarginLeft: string;
@@ -830,14 +791,12 @@ declare const useTheme: () => {
830
791
  labelFontStyle: string;
831
792
  labelFontWeight: string;
832
793
  labelFontColor: string;
833
- labelFontColorOnDark: string;
834
794
  labelTextAlign: string;
835
795
  progressValueFontFamily: string;
836
796
  progressValueFontSize: string;
837
797
  progressValueFontStyle: string;
838
798
  progressValueFontWeight: string;
839
799
  progressValueFontColor: string;
840
- progressValueFontColorOnDark: string;
841
800
  progressValueTextAlign: string;
842
801
  overlayBackgroundColor: string;
843
802
  overlayOpacity: string;
@@ -856,32 +815,21 @@ declare const useTheme: () => {
856
815
  }>;
857
816
  switch?: Partial<{
858
817
  checkedTrackBackgroundColor: string;
859
- checkedTrackBackgroundColorOnDark: string;
860
818
  checkedThumbBackgroundColor: string;
861
- checkedThumbBackgroundColorOnDark: string;
862
819
  uncheckedTrackBackgroundColor: string;
863
- uncheckedTrackBackgroundColorOnDark: string;
864
820
  uncheckedThumbBackgroundColor: string;
865
- uncheckedThumbBackgroundColorOnDark: string;
866
821
  disabledCheckedTrackBackgroundColor: string;
867
- disabledCheckedTrackBackgroundColorOnDark: string;
868
822
  disabledCheckedThumbBackgroundColor: string;
869
- disabledCheckedThumbBackgroundColorOnDark: string;
870
823
  disabledUncheckedTrackBackgroundColor: string;
871
- disabledUncheckedTrackBackgroundColorOnDark: string;
872
824
  disabledUncheckedThumbBackgroundColor: string;
873
- disabledUncheckedThumbBackgroundColorOnDark: string;
874
825
  disabledLabelFontColor: string;
875
- disabledLabelFontColorOnDark: string;
876
826
  disabledLabelFontStyle: string;
877
827
  labelFontFamily: string;
878
828
  labelFontSize: string;
879
829
  labelFontStyle: string;
880
830
  labelFontWeight: string;
881
831
  labelFontColor: string;
882
- labelFontColorOnDark: string;
883
832
  thumbFocusColor: string;
884
- thumbFocusColorOnDark: string;
885
833
  thumbHeight: string;
886
834
  thumbWidth: string;
887
835
  thumbShift: string;
@@ -904,8 +852,16 @@ declare const useTheme: () => {
904
852
  dataPaddingBottom: string;
905
853
  dataPaddingRight: string;
906
854
  dataPaddingLeft: string;
855
+ dataPaddingTopReduced: string;
856
+ dataPaddingBottomReduced: string;
857
+ dataPaddingRightReduced: string;
858
+ dataPaddingLeftReduced: string;
907
859
  dataTextAlign: string;
908
860
  dataTextLineHeight: string;
861
+ firstChildPaddingLeft: string;
862
+ lastChildPaddingRight: string;
863
+ firstChildPaddingLeftReduced: string;
864
+ lastChildPaddingRightReduced: string;
909
865
  headerBackgroundColor: string;
910
866
  headerBorderRadius: string;
911
867
  headerFontFamily: string;
@@ -918,11 +874,25 @@ declare const useTheme: () => {
918
874
  headerPaddingBottom: string;
919
875
  headerPaddingRight: string;
920
876
  headerPaddingLeft: string;
877
+ headerPaddingTopReduced: string;
878
+ headerPaddingBottomReduced: string;
879
+ headerPaddingRightReduced: string;
880
+ headerPaddingLeftReduced: string;
921
881
  headerTextAlign: string;
922
882
  headerTextLineHeight: string;
923
883
  scrollBarThumbColor: string;
924
884
  scrollBarTrackColor: string;
925
885
  sortIconColor: string;
886
+ actionIconColor: string;
887
+ disabledActionIconColor: string;
888
+ hoverActionIconColor: string;
889
+ focusActionIconColor: string;
890
+ activeActionIconColor: string;
891
+ actionBackgroundColor: string;
892
+ disabledActionBackgroundColor: string;
893
+ hoverActionBackgroundColor: string;
894
+ focusActionBorderColor: string;
895
+ activeActionBackgroundColor: string;
926
896
  }>;
927
897
  tabs?: Partial<{
928
898
  fontFamily: string;
@@ -941,7 +911,6 @@ declare const useTheme: () => {
941
911
  disabledFontColor: string;
942
912
  disabledIconColor: string;
943
913
  disabledFontStyle: string;
944
- disabledBadgeBackgroundColor: string;
945
914
  hoverBackgroundColor: string;
946
915
  pressedBackgroundColor: string;
947
916
  pressedFontWeight: string;
@@ -949,19 +918,6 @@ declare const useTheme: () => {
949
918
  dividerThickness: string;
950
919
  focusOutline: string;
951
920
  scrollButtonsWidth: string;
952
- badgeBackgroundColor: string;
953
- badgeFontFamily: string;
954
- badgeFontSize: string;
955
- badgeFontStyle: string;
956
- badgeFontWeight: string;
957
- badgeFontColor: string;
958
- badgeLetterSpacing: string;
959
- badgeWidth: string;
960
- badgeHeight: string;
961
- badgeRadius: string;
962
- badgeWidthWithNotificationNumber: string;
963
- badgeHeightWithNotificationNumber: string;
964
- badgeRadiusWithNotificationNumber: string;
965
921
  }>;
966
922
  tag?: Partial<{
967
923
  fontFamily: string;
@@ -983,130 +939,87 @@ declare const useTheme: () => {
983
939
  textarea?: Partial<{
984
940
  fontFamily: string;
985
941
  enabledBorderColor: string;
986
- enabledBorderColorOnDark: string;
987
942
  hoverBorderColor: string;
988
- hoverBorderColorOnDark: string;
989
943
  focusBorderColor: string;
990
- focusBorderColorOnDark: string;
991
944
  disabledBorderColor: string;
992
- disabledBorderColorOnDark: string;
993
945
  disabledContainerFillColor: string;
994
- disabledContainerFillColorOnDark: string;
946
+ readOnlyBorderColor: string;
947
+ hoverReadOnlyBorderColor: string;
995
948
  errorBorderColor: string;
996
- errorBorderColorOnDark: string;
997
949
  hoverErrorBorderColor: string;
998
- hoverErrorBorderColorOnDark: string;
999
950
  inputMarginTop: string;
1000
951
  inputMarginBottom: string;
1001
952
  errorMessageColor: string;
1002
- errorMessageColorOnDark: string;
1003
953
  labelFontColor: string;
1004
- labelFontColorOnDark: string;
1005
954
  labelFontSize: string;
1006
955
  labelFontStyle: string;
1007
956
  labelFontWeight: string;
1008
957
  labelLineHeight: string;
1009
958
  disabledLabelFontColor: string;
1010
- disabledLabelFontColorOnDark: string;
1011
959
  optionalLabelFontWeight: string;
1012
960
  helperTextFontColor: string;
1013
- helperTextFontColorOnDark: string;
1014
961
  helperTextFontSize: string;
1015
962
  helperTextFontStyle: string;
1016
963
  helperTextFontWeight: string;
1017
964
  helperTextLineHeight: string;
1018
965
  disabledHelperTextFontColor: string;
1019
- disabledHelperTextFontColorOnDark: string;
1020
966
  placeholderFontColor: string;
1021
- placeholderFontColorOnDark: string;
1022
967
  disabledPlaceholderFontColor: string;
1023
- disabledPlaceholderFontColorOnDark: string;
1024
968
  valueFontColor: string;
1025
- valueFontColorOnDark: string;
1026
969
  valueFontSize: string;
1027
970
  valueFontStyle: string;
1028
971
  valueFontWeight: string;
1029
972
  disabledValueFontColor: string;
1030
- disabledValueFontColorOnDark: string;
1031
973
  }>;
1032
974
  textInput?: Partial<{
1033
975
  fontFamily: string;
1034
976
  enabledBorderColor: string;
1035
- enabledBorderColorOnDark: string;
1036
977
  hoverBorderColor: string;
1037
- hoverBorderColorOnDark: string;
1038
978
  focusBorderColor: string;
1039
- focusBorderColorOnDark: string;
1040
979
  disabledBorderColor: string;
1041
- disabledBorderColorOnDark: string;
1042
980
  disabledContainerFillColor: string;
1043
- disabledContainerFillColorOnDark: string;
981
+ readOnlyBorderColor: string;
982
+ hoverReadOnlyBorderColor: string;
1044
983
  errorBorderColor: string;
1045
- errorBorderColorOnDark: string;
1046
984
  hoverErrorBorderColor: string;
1047
- hoverErrorBorderColorOnDark: string;
1048
985
  inputMarginTop: string;
1049
986
  inputMarginBottom: string;
1050
987
  errorMessageColor: string;
1051
- errorMessageColorOnDark: string;
1052
988
  errorIconColor: string;
1053
- errorIconColorOnDark: string;
1054
989
  labelFontColor: string;
1055
- labelFontColorOnDark: string;
1056
990
  labelFontSize: string;
1057
991
  labelFontStyle: string;
1058
992
  labelFontWeight: string;
1059
993
  labelLineHeight: string;
1060
994
  disabledLabelFontColor: string;
1061
- disabledLabelFontColorOnDark: string;
1062
995
  optionalLabelFontWeight: string;
1063
996
  helperTextFontColor: string;
1064
- helperTextFontColorOnDark: string;
1065
997
  helperTextFontSize: string;
1066
998
  helperTextFontStyle: string;
1067
999
  helperTextFontWeight: string;
1068
1000
  helperTextLineHeight: string;
1069
1001
  disabledHelperTextFontColor: string;
1070
- disabledHelperTextFontColorOnDark: string;
1071
1002
  prefixColor: string;
1072
- prefixColorOnDark: string;
1073
1003
  suffixColor: string;
1074
- suffixColorOnDark: string;
1075
1004
  disabledPrefixColor: string;
1076
1005
  disabledSuffixColor: string;
1077
- disabledPrefixColorOnDark: string;
1078
- disabledSuffixColorOnDark: string;
1079
1006
  placeholderFontColor: string;
1080
- placeholderFontColorOnDark: string;
1081
1007
  disabledPlaceholderFontColor: string;
1082
- disabledPlaceholderFontColorOnDark: string;
1083
1008
  valueFontColor: string;
1084
- valueFontColorOnDark: string;
1085
1009
  valueFontSize: string;
1086
1010
  valueFontStyle: string;
1087
1011
  valueFontWeight: string;
1088
1012
  disabledValueFontColor: string;
1089
- disabledValueFontColorOnDark: string;
1090
1013
  actionIconColor: string;
1091
- actionIconColorOnDark: string;
1092
1014
  disabledActionIconColor: string;
1093
- disabledActionIconColorOnDark: string;
1094
1015
  hoverActionIconColor: string;
1095
- hoverActionIconColorOnDark: string;
1096
1016
  focusActionIconColor: string;
1097
- focusActionIconColorOnDark: string;
1098
1017
  activeActionIconColor: string;
1099
- activeActionIconColorOnDark: string;
1100
1018
  actionBackgroundColor: string;
1101
- actionBackgroundColorOnDark: string;
1102
1019
  disabledActionBackgroundColor: string;
1103
- disabledActionBackgroundColorOnDark: string;
1104
1020
  hoverActionBackgroundColor: string;
1105
- hoverActionBackgroundColorOnDark: string;
1106
1021
  focusActionBorderColor: string;
1107
- focusActionBorderColorOnDark: string;
1108
1022
  activeActionBackgroundColor: string;
1109
- activeActionBackgroundColorOnDark: string;
1110
1023
  listDialogBackgroundColor: string;
1111
1024
  listDialogBorderColor: string;
1112
1025
  listOptionDividerColor: string;
package/useTheme.js CHANGED
@@ -1,22 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = void 0;
9
-
10
8
  var _react = require("react");
11
-
12
9
  var _variables = require("./common/variables");
13
-
14
10
  var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
15
-
16
11
  var useTheme = function useTheme() {
17
12
  var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
18
13
  return colorsTheme || _variables.componentTokens;
19
14
  };
20
-
21
- var _default = useTheme;
22
- exports["default"] = _default;
15
+ var _default = exports["default"] = useTheme;
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports["default"] = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _variables = require("./common/variables");
11
-
12
9
  var _HalstackContext = require("./HalstackContext");
13
-
14
10
  var useTranslatedLabels = function useTranslatedLabels() {
15
11
  var labels = (0, _react.useContext)(_HalstackContext.HalstackLanguageContext);
16
12
  return labels || _variables.defaultTranslatedComponentLabels;
17
13
  };
18
-
19
- var _default = useTranslatedLabels;
20
- exports["default"] = _default;
14
+ var _default = exports["default"] = useTranslatedLabels;