@indico-data/design-system 2.43.1 → 2.44.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 (428) hide show
  1. package/lib/assets/fonts/noto/a.woff2 +0 -0
  2. package/lib/assets/fonts/noto/b.woff2 +0 -0
  3. package/lib/assets/fonts/noto/c.woff2 +0 -0
  4. package/lib/assets/fonts/noto/d.woff2 +0 -0
  5. package/lib/assets/fonts/noto/e.woff2 +0 -0
  6. package/lib/assets/fonts/noto/f.woff2 +0 -0
  7. package/lib/assets/fonts/noto/g.woff2 +0 -0
  8. package/lib/assets/fonts/noto/h.woff2 +0 -0
  9. package/lib/assets/fonts/noto/notosans.css +79 -0
  10. package/lib/components/button/Button.stories.d.ts +11 -13
  11. package/lib/components/button/enums.d.ts +2 -4
  12. package/lib/components/button/types.d.ts +6 -7
  13. package/lib/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.d.ts +1 -1
  14. package/lib/components/forms/date/inputDatePicker/SingleInputDatePicker.d.ts +1 -1
  15. package/lib/components/forms/input/Input.d.ts +1 -1
  16. package/lib/index.css +1775 -1017
  17. package/lib/index.d.ts +148 -885
  18. package/lib/index.esm.css +1775 -1017
  19. package/lib/index.esm.js +17829 -24248
  20. package/lib/index.esm.js.map +1 -1
  21. package/lib/index.js +16041 -22502
  22. package/lib/index.js.map +1 -1
  23. package/lib/legacy/components/Tooltip/Tooltip.d.ts +1 -1
  24. package/lib/legacy/components/index.d.ts +1 -12
  25. package/lib/legacy/components/loading-indicators/BarSpinner/BarSpinner.d.ts +1 -1
  26. package/lib/legacy/components/loading-indicators/CirclePulse/CirclePulse.d.ts +1 -1
  27. package/lib/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.d.ts +1 -1
  28. package/lib/legacy/components/loading-indicators/index.d.ts +0 -4
  29. package/lib/legacy/components/modals/ConfirmModal/ConfirmModal.d.ts +1 -1
  30. package/lib/legacy/components/modals/ModalBase/ModalBase.d.ts +1 -1
  31. package/lib/stylesAndAnimations/colors/constants.d.ts +0 -1
  32. package/lib/types.d.ts +1 -3
  33. package/package.json +1 -1
  34. package/src/components/button/Button.mdx +28 -78
  35. package/src/components/button/Button.stories.tsx +312 -176
  36. package/src/components/button/Button.tsx +23 -16
  37. package/src/components/button/__tests__/Button.test.tsx +66 -58
  38. package/src/components/button/enums.ts +2 -6
  39. package/src/components/button/styles/Button.scss +119 -137
  40. package/src/components/button/styles/_variables.scss +115 -148
  41. package/src/components/button/types.ts +6 -8
  42. package/src/components/card/Card.stories.tsx +1 -1
  43. package/src/components/card/styles/Card.scss +11 -11
  44. package/src/components/floatUI/FloatUI.mdx +5 -5
  45. package/src/components/floatUI/FloatUI.stories.tsx +8 -8
  46. package/src/components/floatUI/__tests__/FloatUI.test.tsx +3 -3
  47. package/src/components/floatUI/styles/FloatUI.scss +1 -2
  48. package/src/components/floatUI/styles/_variables.scss +11 -7
  49. package/src/components/forms/checkbox/styles/Checkbox.scss +8 -14
  50. package/src/components/forms/date/datePicker/styles/DatePicker.scss +9 -5
  51. package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx +4 -4
  52. package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx +1 -1
  53. package/src/components/forms/form/styles/Form.scss +84 -2
  54. package/src/components/forms/input/Input.tsx +2 -2
  55. package/src/components/forms/input/styles/Input.scss +3 -67
  56. package/src/components/forms/numberInput/NumberInput.tsx +1 -1
  57. package/src/components/forms/numberInput/styles/NumberInput.scss +4 -67
  58. package/src/components/forms/passwordInput/PasswordInput.tsx +1 -1
  59. package/src/components/forms/passwordInput/styles/PasswordInput.scss +3 -67
  60. package/src/components/forms/radio/styles/Radio.scss +6 -10
  61. package/src/components/forms/select/styles/Select.scss +30 -44
  62. package/src/components/forms/textarea/styles/Textarea.scss +1 -49
  63. package/src/components/forms/toggle/styles/Toggle.scss +13 -12
  64. package/src/components/grid/styles/Grid.scss +3 -3
  65. package/src/components/icons/__tests__/Icon.test.tsx +1 -1
  66. package/src/components/menu/Menu.stories.tsx +3 -3
  67. package/src/components/menu/Menu.test.tsx +9 -9
  68. package/src/components/menu/styles/Menu.scss +5 -0
  69. package/src/components/menu/styles/_variables.scss +11 -6
  70. package/src/components/pill/styles/Pill.scss +4 -5
  71. package/src/components/skeleton/styles/Skeleton.scss +2 -2
  72. package/src/components/table/LoadingComponent.tsx +0 -2
  73. package/src/components/table/styles/Table.scss +6 -0
  74. package/src/components/table/styles/_variables.scss +9 -8
  75. package/src/index.ts +0 -45
  76. package/src/legacy/components/Tooltip/Tooltip.styles.ts +0 -12
  77. package/src/legacy/components/Tooltip/Tooltip.tsx +2 -4
  78. package/src/legacy/components/index.ts +1 -30
  79. package/src/legacy/components/loading-indicators/BarSpinner/BarSpinner.styles.ts +0 -3
  80. package/src/legacy/components/loading-indicators/BarSpinner/BarSpinner.tsx +1 -1
  81. package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.styles.ts +0 -4
  82. package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.tsx +1 -6
  83. package/src/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.tsx +2 -2
  84. package/src/legacy/components/loading-indicators/index.ts +0 -4
  85. package/src/legacy/components/modals/ConfirmModal/ConfirmModal.styles.ts +1 -4
  86. package/src/legacy/components/modals/ConfirmModal/ConfirmModal.tsx +12 -19
  87. package/src/legacy/components/modals/ModalBase/ModalBase.styles.tsx +0 -7
  88. package/src/legacy/components/modals/ModalBase/ModalBase.tsx +1 -1
  89. package/src/storybookDocs/Permafrost.mdx +92 -0
  90. package/src/styles/_colors.scss +7 -3
  91. package/src/styles/_sheets.scss +3 -3
  92. package/src/styles/assets/fonts/noto/a.woff2 +0 -0
  93. package/src/styles/assets/fonts/noto/b.woff2 +0 -0
  94. package/src/styles/assets/fonts/noto/c.woff2 +0 -0
  95. package/src/styles/assets/fonts/noto/d.woff2 +0 -0
  96. package/src/styles/assets/fonts/noto/e.woff2 +0 -0
  97. package/src/styles/assets/fonts/noto/f.woff2 +0 -0
  98. package/src/styles/assets/fonts/noto/g.woff2 +0 -0
  99. package/src/styles/assets/fonts/noto/h.woff2 +0 -0
  100. package/src/styles/assets/fonts/noto/notosans.css +79 -0
  101. package/src/styles/globals.scss +5 -16
  102. package/src/styles/index.scss +1 -2
  103. package/src/styles/storybook.scss +1 -1
  104. package/src/styles/variables/_borders.scss +6 -6
  105. package/src/styles/variables/_dropshadows.scss +2 -0
  106. package/src/styles/variables/_padding.scss +5 -1
  107. package/src/styles/variables/_typography.scss +7 -1
  108. package/src/styles/variables/themes/dark.scss +147 -83
  109. package/src/styles/variables/themes/light.scss +1 -2
  110. package/src/stylesAndAnimations/colors/Colors.tsx +5 -9
  111. package/src/stylesAndAnimations/colors/UtilityClasses.tsx +23 -14
  112. package/src/stylesAndAnimations/colors/constants.ts +183 -114
  113. package/src/stylesAndAnimations/sizing/Sizing.tsx +2 -2
  114. package/src/types.ts +1 -7
  115. package/lib/assets/fonts/mulish/a.woff2 +0 -0
  116. package/lib/assets/fonts/mulish/b.woff2 +0 -0
  117. package/lib/assets/fonts/mulish/c.woff2 +0 -0
  118. package/lib/assets/fonts/mulish/d.woff2 +0 -0
  119. package/lib/assets/fonts/mulish/mulish.css +0 -98
  120. package/lib/legacy/components/Accordion/Accordion.d.ts +0 -9
  121. package/lib/legacy/components/Accordion/Accordion.stories.d.ts +0 -25
  122. package/lib/legacy/components/Accordion/Accordion.styles.d.ts +0 -1
  123. package/lib/legacy/components/Accordion/index.d.ts +0 -1
  124. package/lib/legacy/components/ListTable/Header/Header.d.ts +0 -21
  125. package/lib/legacy/components/ListTable/Header/Header.styles.d.ts +0 -1
  126. package/lib/legacy/components/ListTable/Header/index.d.ts +0 -1
  127. package/lib/legacy/components/ListTable/ListTable.d.ts +0 -41
  128. package/lib/legacy/components/ListTable/ListTable.stories.d.ts +0 -54
  129. package/lib/legacy/components/ListTable/ListTable.styles.d.ts +0 -1
  130. package/lib/legacy/components/ListTable/index.d.ts +0 -1
  131. package/lib/legacy/components/ListTable/mock-data/index.d.ts +0 -1
  132. package/lib/legacy/components/ListTable/mock-data/mock-data.d.ts +0 -54
  133. package/lib/legacy/components/LoadingAwareContainer/LoadingAwareContainer.d.ts +0 -15
  134. package/lib/legacy/components/LoadingAwareContainer/LoadingAwareContainer.stories.d.ts +0 -22
  135. package/lib/legacy/components/LoadingAwareContainer/LoadingAwareContainer.styles.d.ts +0 -2
  136. package/lib/legacy/components/LoadingAwareContainer/index.d.ts +0 -1
  137. package/lib/legacy/components/Pagination/Pagination.d.ts +0 -18
  138. package/lib/legacy/components/Pagination/Pagination.stories.d.ts +0 -18
  139. package/lib/legacy/components/Pagination/Pagination.styles.d.ts +0 -1
  140. package/lib/legacy/components/Pagination/index.d.ts +0 -1
  141. package/lib/legacy/components/Toggle/Toggle.d.ts +0 -12
  142. package/lib/legacy/components/Toggle/Toggle.stories.d.ts +0 -21
  143. package/lib/legacy/components/Toggle/Toggle.styles.d.ts +0 -1
  144. package/lib/legacy/components/Toggle/index.d.ts +0 -1
  145. package/lib/legacy/components/basic-section/Section/Section.d.ts +0 -8
  146. package/lib/legacy/components/basic-section/Section/Section.stories.d.ts +0 -13
  147. package/lib/legacy/components/basic-section/Section/Section.styles.d.ts +0 -1
  148. package/lib/legacy/components/basic-section/Section/index.d.ts +0 -1
  149. package/lib/legacy/components/basic-section/SectionBlock/SectionBlock.d.ts +0 -9
  150. package/lib/legacy/components/basic-section/SectionBlock/SectionBlock.styles.d.ts +0 -1
  151. package/lib/legacy/components/basic-section/SectionBlock/index.d.ts +0 -1
  152. package/lib/legacy/components/basic-section/SectionBody/SectionBody.d.ts +0 -7
  153. package/lib/legacy/components/basic-section/SectionBody/SectionBody.stories.d.ts +0 -10
  154. package/lib/legacy/components/basic-section/SectionBody/SectionBody.styles.d.ts +0 -1
  155. package/lib/legacy/components/basic-section/SectionBody/index.d.ts +0 -1
  156. package/lib/legacy/components/basic-section/SectionHeader/SectionHeader.d.ts +0 -8
  157. package/lib/legacy/components/basic-section/SectionHeader/SectionHeader.stories.d.ts +0 -14
  158. package/lib/legacy/components/basic-section/SectionHeader/SectionHeader.styles.d.ts +0 -1
  159. package/lib/legacy/components/basic-section/SectionHeader/index.d.ts +0 -1
  160. package/lib/legacy/components/basic-section/SectionTable/SectionTable.d.ts +0 -1
  161. package/lib/legacy/components/basic-section/SectionTable/SectionTable.styles.d.ts +0 -1
  162. package/lib/legacy/components/basic-section/SectionTable/index.d.ts +0 -1
  163. package/lib/legacy/components/basic-section/index.d.ts +0 -5
  164. package/lib/legacy/components/buttons/Button/Button.d.ts +0 -21
  165. package/lib/legacy/components/buttons/Button/Button.stories.d.ts +0 -25
  166. package/lib/legacy/components/buttons/Button/Button.styles.d.ts +0 -1
  167. package/lib/legacy/components/buttons/Button/index.d.ts +0 -1
  168. package/lib/legacy/components/buttons/IconButton/IconButton.d.ts +0 -32
  169. package/lib/legacy/components/buttons/IconButton/IconButton.stories.d.ts +0 -43
  170. package/lib/legacy/components/buttons/IconButton/IconButton.styles.d.ts +0 -5
  171. package/lib/legacy/components/buttons/IconButton/index.d.ts +0 -1
  172. package/lib/legacy/components/buttons/commonStyles.d.ts +0 -9
  173. package/lib/legacy/components/buttons/index.d.ts +0 -2
  174. package/lib/legacy/components/buttons/types.d.ts +0 -3
  175. package/lib/legacy/components/dropdowns/BorderSelect/BorderSelect.d.ts +0 -19
  176. package/lib/legacy/components/dropdowns/BorderSelect/BorderSelect.stories.d.ts +0 -31
  177. package/lib/legacy/components/dropdowns/BorderSelect/BorderSelect.styles.d.ts +0 -2
  178. package/lib/legacy/components/dropdowns/BorderSelect/index.d.ts +0 -1
  179. package/lib/legacy/components/dropdowns/MultiCombobox/MultiCombobox.d.ts +0 -23
  180. package/lib/legacy/components/dropdowns/MultiCombobox/MultiCombobox.stories.d.ts +0 -46
  181. package/lib/legacy/components/dropdowns/MultiCombobox/MultiCombobox.styles.d.ts +0 -4
  182. package/lib/legacy/components/dropdowns/MultiCombobox/index.d.ts +0 -1
  183. package/lib/legacy/components/dropdowns/Select/Select.d.ts +0 -19
  184. package/lib/legacy/components/dropdowns/Select/Select.stories.d.ts +0 -34
  185. package/lib/legacy/components/dropdowns/Select/Select.styles.d.ts +0 -1
  186. package/lib/legacy/components/dropdowns/Select/index.d.ts +0 -1
  187. package/lib/legacy/components/dropdowns/SingleCombobox/SingleCombobox.d.ts +0 -20
  188. package/lib/legacy/components/dropdowns/SingleCombobox/SingleCombobox.stories.d.ts +0 -31
  189. package/lib/legacy/components/dropdowns/SingleCombobox/SingleCombobox.styles.d.ts +0 -4
  190. package/lib/legacy/components/dropdowns/SingleCombobox/index.d.ts +0 -1
  191. package/lib/legacy/components/dropdowns/commonStyles.d.ts +0 -1
  192. package/lib/legacy/components/dropdowns/index.d.ts +0 -4
  193. package/lib/legacy/components/dropdowns/types.d.ts +0 -45
  194. package/lib/legacy/components/dropdowns/useCombobox.d.ts +0 -25
  195. package/lib/legacy/components/dropdowns/utils.d.ts +0 -20
  196. package/lib/legacy/components/inputs/EditableInput/EditableInput.d.ts +0 -13
  197. package/lib/legacy/components/inputs/EditableInput/EditableInput.stories.d.ts +0 -14
  198. package/lib/legacy/components/inputs/EditableInput/EditableInput.styles.d.ts +0 -1
  199. package/lib/legacy/components/inputs/EditableInput/index.d.ts +0 -1
  200. package/lib/legacy/components/inputs/NumberInput/NumberInput.d.ts +0 -23
  201. package/lib/legacy/components/inputs/NumberInput/NumberInput.stories.d.ts +0 -28
  202. package/lib/legacy/components/inputs/NumberInput/NumberInput.styles.d.ts +0 -1
  203. package/lib/legacy/components/inputs/NumberInput/index.d.ts +0 -1
  204. package/lib/legacy/components/inputs/RadioButtons/RadioButtons.d.ts +0 -25
  205. package/lib/legacy/components/inputs/RadioButtons/RadioButtons.stories.d.ts +0 -15
  206. package/lib/legacy/components/inputs/RadioButtons/RadioButtons.styles.d.ts +0 -13
  207. package/lib/legacy/components/inputs/RadioButtons/index.d.ts +0 -1
  208. package/lib/legacy/components/inputs/RadioGroup/RadioGroup.d.ts +0 -27
  209. package/lib/legacy/components/inputs/RadioGroup/RadioGroup.stories.d.ts +0 -16
  210. package/lib/legacy/components/inputs/RadioGroup/RadioGroup.styles.d.ts +0 -1
  211. package/lib/legacy/components/inputs/RadioGroup/index.d.ts +0 -1
  212. package/lib/legacy/components/inputs/SearchInput/SearchInput.d.ts +0 -17
  213. package/lib/legacy/components/inputs/SearchInput/SearchInput.stories.d.ts +0 -30
  214. package/lib/legacy/components/inputs/SearchInput/SearchInput.styles.d.ts +0 -1
  215. package/lib/legacy/components/inputs/SearchInput/index.d.ts +0 -1
  216. package/lib/legacy/components/inputs/TextInput/TextInput.d.ts +0 -24
  217. package/lib/legacy/components/inputs/TextInput/TextInput.stories.d.ts +0 -62
  218. package/lib/legacy/components/inputs/TextInput/TextInput.styles.d.ts +0 -2
  219. package/lib/legacy/components/inputs/TextInput/index.d.ts +0 -1
  220. package/lib/legacy/components/inputs/index.d.ts +0 -6
  221. package/lib/legacy/components/inputs/inputsCommon.styles.d.ts +0 -4
  222. package/lib/legacy/components/loading-indicators/LoadingIndicator/LoadingIndicator.d.ts +0 -10
  223. package/lib/legacy/components/loading-indicators/LoadingIndicator/LoadingIndicator.stories.d.ts +0 -11
  224. package/lib/legacy/components/loading-indicators/LoadingIndicator/LoadingIndicator.styles.d.ts +0 -7
  225. package/lib/legacy/components/loading-indicators/LoadingIndicator/index.d.ts +0 -1
  226. package/lib/legacy/components/loading-indicators/LoadingList/LoadingList.d.ts +0 -1
  227. package/lib/legacy/components/loading-indicators/LoadingList/LoadingList.stories.d.ts +0 -10
  228. package/lib/legacy/components/loading-indicators/LoadingList/LoadingList.styles.d.ts +0 -1
  229. package/lib/legacy/components/loading-indicators/LoadingList/index.d.ts +0 -1
  230. package/lib/legacy/components/loading-indicators/PercentageRing/PercentageRing.d.ts +0 -12
  231. package/lib/legacy/components/loading-indicators/PercentageRing/PercentageRing.stories.d.ts +0 -10
  232. package/lib/legacy/components/loading-indicators/PercentageRing/PercentageRing.styles.d.ts +0 -1
  233. package/lib/legacy/components/loading-indicators/PercentageRing/index.d.ts +0 -1
  234. package/lib/legacy/components/loading-indicators/RandomLoadingMessage/RandomLoadingMessage.d.ts +0 -1
  235. package/lib/legacy/components/loading-indicators/RandomLoadingMessage/RandomLoadingMessage.stories.d.ts +0 -10
  236. package/lib/legacy/components/loading-indicators/RandomLoadingMessage/index.d.ts +0 -1
  237. package/lib/legacy/components/loading-indicators/RandomLoadingMessage/random-messages.d.ts +0 -2
  238. package/lib/legacy/components/text-truncate/TextTruncate.d.ts +0 -8
  239. package/lib/legacy/components/text-truncate/TextTruncate.stories.d.ts +0 -6
  240. package/lib/legacy/components/text-truncate/TextTruncate.styles.d.ts +0 -1
  241. package/lib/legacy/components/text-truncate/TextTruncate.test.d.ts +0 -1
  242. package/lib/legacy/components/text-truncate/index.d.ts +0 -1
  243. package/lib/legacy/components/user-feedback/Shrug/Shrug.d.ts +0 -14
  244. package/lib/legacy/components/user-feedback/Shrug/Shrug.stories.d.ts +0 -31
  245. package/lib/legacy/components/user-feedback/Shrug/Shrug.styles.d.ts +0 -1
  246. package/lib/legacy/components/user-feedback/Shrug/index.d.ts +0 -1
  247. package/lib/legacy/components/user-feedback/index.d.ts +0 -1
  248. package/lib/legacy/styles/globals/buttons.d.ts +0 -1
  249. package/lib/legacy/styles/globals/forms.d.ts +0 -1
  250. package/lib/legacy/styles/globals/index.d.ts +0 -1
  251. package/lib/legacy/styles/globals/layout.d.ts +0 -1
  252. package/lib/legacy/styles/globals/lists.d.ts +0 -1
  253. package/lib/legacy/styles/globals/margin-padding.d.ts +0 -1
  254. package/lib/legacy/styles/globals/media.d.ts +0 -1
  255. package/lib/legacy/styles/globals/tables.d.ts +0 -1
  256. package/lib/legacy/styles/globals/typography.d.ts +0 -1
  257. package/lib/legacy/styles/globals/utility-classes.d.ts +0 -1
  258. package/lib/legacy/styles/index.d.ts +0 -1
  259. package/lib/legacy/tokens/animation.d.ts +0 -4
  260. package/lib/legacy/tokens/breakpoints.d.ts +0 -10
  261. package/lib/legacy/tokens/colors.d.ts +0 -144
  262. package/lib/legacy/tokens/index.d.ts +0 -8
  263. package/lib/legacy/tokens/margin.d.ts +0 -4
  264. package/lib/legacy/tokens/numbers.d.ts +0 -10
  265. package/lib/legacy/tokens/padding.d.ts +0 -4
  266. package/lib/legacy/tokens/spacings.d.ts +0 -5
  267. package/lib/legacy/tokens/typography.d.ts +0 -61
  268. package/lib/legacy/utils/color.d.ts +0 -21
  269. package/lib/legacy/utils/index.d.ts +0 -4
  270. package/lib/legacy/utils/number.d.ts +0 -21
  271. package/lib/legacy/utils/string.d.ts +0 -12
  272. package/src/legacy/components/Accordion/Accordion.stories.tsx +0 -47
  273. package/src/legacy/components/Accordion/Accordion.styles.ts +0 -35
  274. package/src/legacy/components/Accordion/Accordion.tsx +0 -30
  275. package/src/legacy/components/Accordion/index.ts +0 -1
  276. package/src/legacy/components/ListTable/Header/Header.styles.ts +0 -62
  277. package/src/legacy/components/ListTable/Header/Header.tsx +0 -66
  278. package/src/legacy/components/ListTable/Header/index.ts +0 -1
  279. package/src/legacy/components/ListTable/ListTable.stories.tsx +0 -302
  280. package/src/legacy/components/ListTable/ListTable.styles.ts +0 -76
  281. package/src/legacy/components/ListTable/ListTable.tsx +0 -140
  282. package/src/legacy/components/ListTable/index.ts +0 -1
  283. package/src/legacy/components/ListTable/mock-data/index.ts +0 -1
  284. package/src/legacy/components/ListTable/mock-data/mock-data.ts +0 -291
  285. package/src/legacy/components/LoadingAwareContainer/LoadingAwareContainer.stories.tsx +0 -45
  286. package/src/legacy/components/LoadingAwareContainer/LoadingAwareContainer.styles.ts +0 -16
  287. package/src/legacy/components/LoadingAwareContainer/LoadingAwareContainer.tsx +0 -36
  288. package/src/legacy/components/LoadingAwareContainer/index.ts +0 -1
  289. package/src/legacy/components/Pagination/Pagination.stories.tsx +0 -45
  290. package/src/legacy/components/Pagination/Pagination.styles.ts +0 -51
  291. package/src/legacy/components/Pagination/Pagination.tsx +0 -118
  292. package/src/legacy/components/Pagination/index.ts +0 -1
  293. package/src/legacy/components/Toggle/Toggle.stories.tsx +0 -56
  294. package/src/legacy/components/Toggle/Toggle.styles.ts +0 -86
  295. package/src/legacy/components/Toggle/Toggle.tsx +0 -69
  296. package/src/legacy/components/Toggle/index.ts +0 -1
  297. package/src/legacy/components/basic-section/Section/Section.stories.tsx +0 -14
  298. package/src/legacy/components/basic-section/Section/Section.styles.ts +0 -8
  299. package/src/legacy/components/basic-section/Section/Section.tsx +0 -30
  300. package/src/legacy/components/basic-section/Section/index.ts +0 -1
  301. package/src/legacy/components/basic-section/SectionBlock/SectionBlock.styles.ts +0 -15
  302. package/src/legacy/components/basic-section/SectionBlock/SectionBlock.tsx +0 -37
  303. package/src/legacy/components/basic-section/SectionBlock/index.ts +0 -1
  304. package/src/legacy/components/basic-section/SectionBody/SectionBody.stories.tsx +0 -16
  305. package/src/legacy/components/basic-section/SectionBody/SectionBody.styles.ts +0 -18
  306. package/src/legacy/components/basic-section/SectionBody/SectionBody.tsx +0 -30
  307. package/src/legacy/components/basic-section/SectionBody/index.ts +0 -1
  308. package/src/legacy/components/basic-section/SectionHeader/SectionHeader.stories.tsx +0 -17
  309. package/src/legacy/components/basic-section/SectionHeader/SectionHeader.styles.ts +0 -5
  310. package/src/legacy/components/basic-section/SectionHeader/SectionHeader.tsx +0 -30
  311. package/src/legacy/components/basic-section/SectionHeader/index.ts +0 -1
  312. package/src/legacy/components/basic-section/SectionTable/SectionTable.styles.ts +0 -236
  313. package/src/legacy/components/basic-section/SectionTable/SectionTable.tsx +0 -233
  314. package/src/legacy/components/basic-section/SectionTable/index.ts +0 -1
  315. package/src/legacy/components/basic-section/index.ts +0 -5
  316. package/src/legacy/components/buttons/Button/Button.stories.tsx +0 -80
  317. package/src/legacy/components/buttons/Button/Button.styles.ts +0 -99
  318. package/src/legacy/components/buttons/Button/Button.tsx +0 -74
  319. package/src/legacy/components/buttons/Button/index.ts +0 -1
  320. package/src/legacy/components/buttons/IconButton/IconButton.stories.tsx +0 -96
  321. package/src/legacy/components/buttons/IconButton/IconButton.styles.ts +0 -109
  322. package/src/legacy/components/buttons/IconButton/IconButton.tsx +0 -114
  323. package/src/legacy/components/buttons/IconButton/index.ts +0 -1
  324. package/src/legacy/components/buttons/commonStyles.ts +0 -104
  325. package/src/legacy/components/buttons/index.ts +0 -2
  326. package/src/legacy/components/buttons/types.ts +0 -3
  327. package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.stories.tsx +0 -22
  328. package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.styles.ts +0 -73
  329. package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.tsx +0 -85
  330. package/src/legacy/components/dropdowns/BorderSelect/index.ts +0 -1
  331. package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.stories.tsx +0 -147
  332. package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.styles.ts +0 -91
  333. package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.tsx +0 -123
  334. package/src/legacy/components/dropdowns/MultiCombobox/index.ts +0 -1
  335. package/src/legacy/components/dropdowns/Select/Select.stories.tsx +0 -54
  336. package/src/legacy/components/dropdowns/Select/Select.styles.ts +0 -73
  337. package/src/legacy/components/dropdowns/Select/Select.tsx +0 -69
  338. package/src/legacy/components/dropdowns/Select/index.ts +0 -1
  339. package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.stories.tsx +0 -61
  340. package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.styles.ts +0 -56
  341. package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.tsx +0 -103
  342. package/src/legacy/components/dropdowns/SingleCombobox/index.ts +0 -1
  343. package/src/legacy/components/dropdowns/commonStyles.ts +0 -65
  344. package/src/legacy/components/dropdowns/index.ts +0 -4
  345. package/src/legacy/components/dropdowns/types.ts +0 -45
  346. package/src/legacy/components/dropdowns/useCombobox.ts +0 -32
  347. package/src/legacy/components/dropdowns/utils.tsx +0 -25
  348. package/src/legacy/components/inputs/EditableInput/EditableInput.stories.tsx +0 -26
  349. package/src/legacy/components/inputs/EditableInput/EditableInput.styles.ts +0 -21
  350. package/src/legacy/components/inputs/EditableInput/EditableInput.tsx +0 -103
  351. package/src/legacy/components/inputs/EditableInput/index.ts +0 -1
  352. package/src/legacy/components/inputs/NumberInput/NumberInput.stories.tsx +0 -72
  353. package/src/legacy/components/inputs/NumberInput/NumberInput.styles.ts +0 -66
  354. package/src/legacy/components/inputs/NumberInput/NumberInput.tsx +0 -154
  355. package/src/legacy/components/inputs/NumberInput/index.ts +0 -1
  356. package/src/legacy/components/inputs/RadioButtons/RadioButtons.stories.tsx +0 -84
  357. package/src/legacy/components/inputs/RadioButtons/RadioButtons.styles.ts +0 -82
  358. package/src/legacy/components/inputs/RadioButtons/RadioButtons.tsx +0 -63
  359. package/src/legacy/components/inputs/RadioButtons/index.tsx +0 -1
  360. package/src/legacy/components/inputs/RadioGroup/RadioGroup.stories.tsx +0 -66
  361. package/src/legacy/components/inputs/RadioGroup/RadioGroup.styles.ts +0 -11
  362. package/src/legacy/components/inputs/RadioGroup/RadioGroup.tsx +0 -119
  363. package/src/legacy/components/inputs/RadioGroup/index.ts +0 -1
  364. package/src/legacy/components/inputs/SearchInput/SearchInput.stories.tsx +0 -37
  365. package/src/legacy/components/inputs/SearchInput/SearchInput.styles.ts +0 -51
  366. package/src/legacy/components/inputs/SearchInput/SearchInput.tsx +0 -73
  367. package/src/legacy/components/inputs/SearchInput/index.ts +0 -1
  368. package/src/legacy/components/inputs/TextInput/TextInput.stories.tsx +0 -104
  369. package/src/legacy/components/inputs/TextInput/TextInput.styles.ts +0 -74
  370. package/src/legacy/components/inputs/TextInput/TextInput.tsx +0 -116
  371. package/src/legacy/components/inputs/TextInput/index.ts +0 -1
  372. package/src/legacy/components/inputs/index.ts +0 -6
  373. package/src/legacy/components/inputs/inputsCommon.styles.ts +0 -57
  374. package/src/legacy/components/loading-indicators/LoadingIndicator/LoadingIndicator.stories.tsx +0 -22
  375. package/src/legacy/components/loading-indicators/LoadingIndicator/LoadingIndicator.styles.ts +0 -81
  376. package/src/legacy/components/loading-indicators/LoadingIndicator/LoadingIndicator.tsx +0 -61
  377. package/src/legacy/components/loading-indicators/LoadingIndicator/index.ts +0 -1
  378. package/src/legacy/components/loading-indicators/LoadingList/LoadingList.stories.tsx +0 -14
  379. package/src/legacy/components/loading-indicators/LoadingList/LoadingList.styles.ts +0 -42
  380. package/src/legacy/components/loading-indicators/LoadingList/LoadingList.tsx +0 -9
  381. package/src/legacy/components/loading-indicators/LoadingList/index.ts +0 -1
  382. package/src/legacy/components/loading-indicators/PercentageRing/PercentageRing.stories.tsx +0 -18
  383. package/src/legacy/components/loading-indicators/PercentageRing/PercentageRing.styles.ts +0 -27
  384. package/src/legacy/components/loading-indicators/PercentageRing/PercentageRing.tsx +0 -76
  385. package/src/legacy/components/loading-indicators/PercentageRing/index.ts +0 -1
  386. package/src/legacy/components/loading-indicators/RandomLoadingMessage/RandomLoadingMessage.stories.tsx +0 -16
  387. package/src/legacy/components/loading-indicators/RandomLoadingMessage/RandomLoadingMessage.tsx +0 -18
  388. package/src/legacy/components/loading-indicators/RandomLoadingMessage/index.ts +0 -1
  389. package/src/legacy/components/loading-indicators/RandomLoadingMessage/random-messages.js +0 -67
  390. package/src/legacy/components/text-truncate/TextTruncate.stories.tsx +0 -19
  391. package/src/legacy/components/text-truncate/TextTruncate.styles.ts +0 -3
  392. package/src/legacy/components/text-truncate/TextTruncate.test.tsx +0 -17
  393. package/src/legacy/components/text-truncate/TextTruncate.tsx +0 -23
  394. package/src/legacy/components/text-truncate/index.ts +0 -1
  395. package/src/legacy/components/user-feedback/Shrug/Shrug.stories.tsx +0 -38
  396. package/src/legacy/components/user-feedback/Shrug/Shrug.styles.ts +0 -25
  397. package/src/legacy/components/user-feedback/Shrug/Shrug.tsx +0 -45
  398. package/src/legacy/components/user-feedback/Shrug/index.ts +0 -1
  399. package/src/legacy/components/user-feedback/index.ts +0 -1
  400. package/src/legacy/styles/globals/buttons.ts +0 -154
  401. package/src/legacy/styles/globals/forms.ts +0 -53
  402. package/src/legacy/styles/globals/index.tsx +0 -22
  403. package/src/legacy/styles/globals/layout.ts +0 -22
  404. package/src/legacy/styles/globals/lists.ts +0 -23
  405. package/src/legacy/styles/globals/margin-padding.ts +0 -33
  406. package/src/legacy/styles/globals/media.ts +0 -13
  407. package/src/legacy/styles/globals/tables.ts +0 -30
  408. package/src/legacy/styles/globals/typography.ts +0 -82
  409. package/src/legacy/styles/globals/utility-classes.ts +0 -76
  410. package/src/legacy/styles/index.ts +0 -1
  411. package/src/legacy/tokens/animation.ts +0 -6
  412. package/src/legacy/tokens/breakpoints.ts +0 -11
  413. package/src/legacy/tokens/colors.ts +0 -293
  414. package/src/legacy/tokens/index.ts +0 -20
  415. package/src/legacy/tokens/margin.ts +0 -5
  416. package/src/legacy/tokens/numbers.js +0 -41
  417. package/src/legacy/tokens/padding.ts +0 -5
  418. package/src/legacy/tokens/spacings.ts +0 -5
  419. package/src/legacy/tokens/typography.ts +0 -43
  420. package/src/legacy/utils/color.ts +0 -139
  421. package/src/legacy/utils/index.ts +0 -5
  422. package/src/legacy/utils/number.ts +0 -29
  423. package/src/legacy/utils/string.ts +0 -87
  424. package/src/styles/assets/fonts/mulish/a.woff2 +0 -0
  425. package/src/styles/assets/fonts/mulish/b.woff2 +0 -0
  426. package/src/styles/assets/fonts/mulish/c.woff2 +0 -0
  427. package/src/styles/assets/fonts/mulish/d.woff2 +0 -0
  428. package/src/styles/assets/fonts/mulish/mulish.css +0 -98
package/lib/index.esm.css CHANGED
@@ -1,6 +1,6 @@
1
- @import './assets/fonts/mulish/mulish.css';
1
+ @import './assets/fonts/noto/notosans.css';
2
2
  :root {
3
- --pf-font-family-base: "Mulish", sans-serif;
3
+ --pf-font-family-base: "Noto Sans", sans-serif;
4
4
  --pf-font-size-base: 1rem;
5
5
  --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
6
6
  --pf-font-size-h2: calc(1.25 * var(--pf-font-size-base));
@@ -25,10 +25,13 @@
25
25
  --pf-label-size-sm: var(--pf-font-size-overline);
26
26
  --pf-label-size-md: var(--pf-font-size-body);
27
27
  --pf-label-size-lg: var(--pf-font-size-h2);
28
+ --pf-line-height-xs: calc(0.75 * var(--pf-font-size-base));
29
+ --pf-line-height-sm: var(--pf-font-size-base);
30
+ --pf-line-height-md: calc(1.25 * var(--pf-font-size-base));
31
+ --pf-line-height-lg: calc(1.5 * var(--pf-font-size-base));
28
32
  }
29
33
 
30
- :root [data-theme=light],
31
- :root {
34
+ :root [data-theme=light] {
32
35
  --pf-primary-color: #6833d0;
33
36
  --pf-primary-color-100: #f0ebfa;
34
37
  --pf-primary-color-200: #d5c6f2;
@@ -109,83 +112,139 @@
109
112
  --pf-link-hover-color: var(--pf-secondary-color-400);
110
113
  }
111
114
 
112
- :root [data-theme=dark] {
113
- --pf-primary-color: #262c3a;
114
- --pf-primary-color-100: #8194c0;
115
- --pf-primary-color-200: #5b6b8f;
116
- --pf-primary-color-300: #3b455e;
117
- --pf-primary-color-400: #323a4d;
118
- --pf-primary-color-500: #262c3a;
119
- --pf-primary-color-600: #182432;
120
- --pf-primary-color-700: #101a26;
121
- --pf-primary-color-800: #1b202c;
115
+ :root [data-theme=dark],
116
+ :root {
117
+ --pf-primary-color: #394c6b;
118
+ --pf-primary-color-50: #bcc7da;
119
+ --pf-primary-color-100: #7989b5;
120
+ --pf-primary-color-200: #8593b3;
121
+ --pf-primary-color-300: #7488a4;
122
+ --pf-primary-color-400: #5c708c;
123
+ --pf-primary-color-500: #394c6b;
124
+ --pf-primary-color-600: #233346;
125
+ --pf-primary-color-700: #182432;
126
+ --pf-primary-color-800: #101a26;
122
127
  --pf-primary-color-900: #141b24;
123
- --pf-primary-color-1000: #271153;
124
- --pf-secondary-color: #0070f5;
125
- --pf-secondary-color-100: #dceafd;
126
- --pf-secondary-color-200: #b3d4fc;
127
- --pf-secondary-color-300: #7ab5fa;
128
- --pf-secondary-color-400: #4797f5;
129
- --pf-secondary-color-500: #2482f5;
130
- --pf-secondary-color-600: #2070d1;
131
- --pf-secondary-color-700: #178ee0;
132
- --pf-secondary-color-800: #3d5a7d;
133
- --pf-secondary-color-900: #0b2647;
134
- --pf-gray-color: #bfc1c3;
128
+ --pf-primary-color-950: #0c141d;
129
+ --pf-secondary-color: #198bdc;
130
+ --pf-secondary-color-50: #bddffa;
131
+ --pf-secondary-color-100: #83c5f6;
132
+ --pf-secondary-color-200: #68afee;
133
+ --pf-secondary-color-300: #66a2d5;
134
+ --pf-secondary-color-400: #36a1ea;
135
+ --pf-secondary-color-500: #198bdc;
136
+ --pf-secondary-color-550: #0070f5;
137
+ --pf-secondary-color-600: #2f6a98;
138
+ --pf-secondary-color-700: #0c6ebd;
139
+ --pf-secondary-color-800: #0b5899;
140
+ --pf-secondary-color-900: #002c4e;
141
+ --pf-secondary-color-950: #112341;
142
+ --pf-tertiary-color: #40464e;
143
+ --pf-tertiary-color-50: #dae3eb;
144
+ --pf-tertiary-color-100: #c2d4df;
145
+ --pf-tertiary-color-200: #a3b2c9;
146
+ --pf-tertiary-color-300: #8593b3;
147
+ --pf-tertiary-color-400: #656f82;
148
+ --pf-tertiary-color-450: #4d5667;
149
+ --pf-tertiary-color-500: #40464e;
150
+ --pf-tertiary-color-600: #334154;
151
+ --pf-tertiary-color-700: #3b415b;
152
+ --pf-tertiary-color-800: #344152;
153
+ --pf-tertiary-color-900: #2d3444;
154
+ --pf-tertiary-color-950: #283243;
155
+ --pf-gray-color: #525252;
156
+ --pf-gray-color-50: #f6f6f6;
135
157
  --pf-gray-color-100: #efefef;
136
- --pf-gray-color-200: #eaeaea;
137
- --pf-gray-color-300: #dcdcdc;
138
- --pf-gray-color-400: #d2d2d2;
139
- --pf-gray-color-500: #bfc1c3;
140
- --pf-gray-color-600: #a0a0a0;
141
- --pf-gray-color-700: #828588;
142
- --pf-gray-color-800: #797979;
143
- --pf-gray-color-900: #585858;
144
- --pf-steel-color: #3e4751;
145
- --pf-steel-color-100: #9aa1b1;
146
- --pf-steel-color-200: #7c8594;
147
- --pf-steel-color-300: #6a717e;
148
- --pf-steel-color-400: #545c67;
149
- --pf-steel-color-500: #3e4751;
150
- --pf-steel-color-600: #2d3444;
151
- --pf-steel-color-700: #232a3a;
152
- --pf-steel-color-800: #1a202f;
153
- --pf-steel-color-900: #11161f;
154
- --pf-green-color: #199d19;
155
- --pf-green-color-100: #98ff98;
156
- --pf-green-color-200: #76ff76;
157
- --pf-green-color-300: #63eb63;
158
- --pf-green-color-400: #41ca41;
159
- --pf-green-color-500: #199d19;
160
- --pf-green-color-600: #168116;
161
- --pf-green-color-700: #106710;
162
- --pf-green-color-800: #0d5a0d;
163
- --pf-green-color-900: #003c00;
164
- --pf-orange-color: #da9534;
165
- --pf-orange-color-100: #ffd599;
166
- --pf-orange-color-200: #ffc676;
167
- --pf-orange-color-300: #f7b75b;
168
- --pf-orange-color-400: #f1ab48;
169
- --pf-orange-color-500: #da9534;
170
- --pf-orange-color-600: #c7892f;
171
- --pf-orange-color-700: #a87428;
172
- --pf-orange-color-800: #825b22;
173
- --pf-orange-color-900: #68481a;
174
- --pf-red-color: #f44d4f;
175
- --pf-red-color-100: #ffa9aa;
176
- --pf-red-color-200: #ff8a8b;
177
- --pf-red-color-300: #ff7577;
178
- --pf-red-color-400: #ff6466;
179
- --pf-red-color-500: #f44d4f;
180
- --pf-red-color-600: #ba5759;
181
- --pf-red-color-700: #b4393a;
182
- --pf-red-color-800: #7b2728;
183
- --pf-red-color-900: #4d1717;
158
+ --pf-gray-color-200: #dcdcdc;
159
+ --pf-gray-color-300: #bdbdbd;
160
+ --pf-gray-color-400: #989898;
161
+ --pf-gray-color-450: #737373;
162
+ --pf-gray-color-500: #525252;
163
+ --pf-gray-color-600: #404040;
164
+ --pf-gray-color-700: #262626;
165
+ --pf-gray-color-800: #171717;
166
+ --pf-gray-color-900: #0a0a0a;
167
+ --pf-red-color: #ce6068;
168
+ --pf-red-color-50: #fcf5f4;
169
+ --pf-red-color-100: #fae9e9;
170
+ --pf-red-color-200: #f4d7d8;
171
+ --pf-red-color-300: #ebb6b8;
172
+ --pf-red-color-400: #df8d91;
173
+ --pf-red-color-500: #ce6068;
174
+ --pf-red-color-600: #b94553;
175
+ --pf-red-color-700: #9b3544;
176
+ --pf-red-color-800: #822f3e;
177
+ --pf-red-color-900: #702b39;
178
+ --pf-red-color-950: #3e131b;
179
+ --pf-orange-color: #f46325;
180
+ --pf-orange-color-50: #fff5ed;
181
+ --pf-orange-color-100: #fee9d6;
182
+ --pf-orange-color-200: #fcceac;
183
+ --pf-orange-color-300: #faac77;
184
+ --pf-orange-color-400: #f67e41;
185
+ --pf-orange-color-500: #f46325;
186
+ --pf-orange-color-600: #e54311;
187
+ --pf-orange-color-700: #be3010;
188
+ --pf-orange-color-800: #972815;
189
+ --pf-orange-color-900: #792315;
190
+ --pf-orange-color-950: #420f08;
191
+ --pf-yellow-color: #f29c22;
192
+ --pf-yellow-color-50: #fbf7eb;
193
+ --pf-yellow-color-100: #f5edcc;
194
+ --pf-yellow-color-200: #ecd99c;
195
+ --pf-yellow-color-300: #deb650;
196
+ --pf-yellow-color-400: #d7a438;
197
+ --pf-yellow-color-500: #f29c22;
198
+ --pf-yellow-color-600: #c88e2a;
199
+ --pf-yellow-color-700: #ac6e22;
200
+ --pf-yellow-color-800: #80670c;
201
+ --pf-yellow-color-900: #463703;
202
+ --pf-yellow-color-950: #312602;
203
+ --pf-green-color: #15b77d;
204
+ --pf-green-color-50: #a9f1ce;
205
+ --pf-green-color-100: #71e4b3;
206
+ --pf-green-color-200: #14b8a6;
207
+ --pf-green-color-300: #03aaaa;
208
+ --pf-green-color-400: #38cf94;
209
+ --pf-green-color-500: #15b77d;
210
+ --pf-green-color-600: #099263;
211
+ --pf-green-color-700: #087950;
212
+ --pf-green-color-800: #085d43;
213
+ --pf-green-color-900: #084c38;
214
+ --pf-green-color-950: #032b20;
215
+ --pf-purple-color: #9776d3;
216
+ --pf-purple-color-50: #f7f6fc;
217
+ --pf-purple-color-100: #f1edfa;
218
+ --pf-purple-color-200: #e4dff5;
219
+ --pf-purple-color-300: #cfc4ee;
220
+ --pf-purple-color-400: #b6a3e2;
221
+ --pf-purple-color-500: #9776d3;
222
+ --pf-purple-color-600: #8b60c7;
223
+ --pf-purple-color-700: #7a4eb3;
224
+ --pf-purple-color-800: #664196;
225
+ --pf-purple-color-900: #55377b;
226
+ --pf-purple-color-950: #352253;
227
+ --pf-white-color: #ffffff;
228
+ --pf-white-color-1: rgba(255, 255, 255, 0.01);
229
+ --pf-white-color-3: rgba(255, 255, 255, 0.03);
230
+ --pf-white-color-5: rgba(255, 255, 255, 0.05);
231
+ --pf-white-color-10: rgba(255, 255, 255, 0.1);
232
+ --pf-white-color-15: rgba(255, 255, 255, 0.15);
233
+ --pf-white-color-20: rgba(255, 255, 255, 0.2);
234
+ --pf-white-color-30: rgba(255, 255, 255, 0.3);
235
+ --pf-white-color-40: rgba(255, 255, 255, 0.4);
236
+ --pf-white-color-50: rgba(255, 255, 255, 0.5);
237
+ --pf-white-color-60: rgba(255, 255, 255, 0.6);
238
+ --pf-white-color-70: rgba(255, 255, 255, 0.7);
239
+ --pf-white-color-80: rgba(255, 255, 255, 0.8);
240
+ --pf-white-color-90: rgba(255, 255, 255, 0.9);
241
+ --pf-white-color-100: rgba(255, 255, 255, 1);
184
242
  --pf-error-color: var(--pf-red-color);
185
243
  --pf-success-color: var(--pf-green-color);
186
- --pf-warning-color: var(--pf-orange-color);
187
- --pf-neutral-color: var(--pf-gray-color);
188
- --pf-info-color: var(--pf-secondary-color);
244
+ --pf-warning-color: var(--pf-yellow-color-300);
245
+ --pf-neutral-color: var(--pf-gray-color-100);
246
+ --pf-info-color: var(--pf-secondary-color-200);
247
+ --pf-brand-color: var(--pf-secondary-color-550);
189
248
  --pf-link-color: var(--pf-gray-color-300);
190
249
  --pf-link-hover-color: var(--pf-gray-color-100);
191
250
  }
@@ -215,24 +274,28 @@
215
274
  --pf-rounded-shaped: 24px 0;
216
275
  }
217
276
 
218
- :root [data-theme=light],
219
- :root {
220
- --pf-border-color: var(--pf-gray-color-200);
277
+ :root [data-theme=light] {
278
+ --pf-border-color: var(--pf-gray-color-300);
221
279
  --pf-border-color-light: var(--pf-gray-color-100);
222
280
  --pf-horizontal-line-color: var(--pf-gray-color-200);
223
281
  }
224
282
 
225
- :root [data-theme=dark] {
283
+ :root [data-theme=dark],
284
+ :root {
226
285
  --pf-horizontal-line-color: var(--pf-primary-color-200);
227
- --pf-border-color: var(--pf-steel-color-600);
228
- --pf-border-color-light: var(--pf-steel-color-400);
286
+ --pf-border-color: var(--pf-tertiary-color-800);
287
+ --pf-border-color-light: var(--pf-white-color-100);
229
288
  }
230
289
 
231
290
  :root {
232
291
  --pf-padding-0: 0;
292
+ --pf-padding-0-5: 2px;
233
293
  --pf-padding-1: 4px;
294
+ --pf-padding-1-5: 6px;
234
295
  --pf-padding-2: 8px;
296
+ --pf-padding-2-5: 10px;
235
297
  --pf-padding-3: 12px;
298
+ --pf-padding-3-5: 14px;
236
299
  --pf-padding-4: 16px;
237
300
  --pf-padding-5: 20px;
238
301
  --pf-padding-6: 24px;
@@ -309,10 +372,10 @@
309
372
  :root [data-theme=light],
310
373
  :root [data-theme=dark] {
311
374
  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
375
+ --pf-focus-box-shadow-alignment: 0px 0px 0px 4px;
312
376
  }
313
377
 
314
- :root [data-theme=light],
315
- :root {
378
+ :root [data-theme=light] {
316
379
  --pf-white-color: #ffffff;
317
380
  --pf-black-color: #000000;
318
381
  --pf-background-color-light: var(--pf-gray-color-100);
@@ -327,12 +390,10 @@
327
390
  --pf-font-color-light-header: var(--pf-primary-color-100);
328
391
  --pf-link-color: var(--pf-primary-color);
329
392
  --pf-active-link-color: var(--pf-primary-color-600);
330
- --pf-border-color: var(--pf-gray-color-200);
331
- --pf-border-color-light: var(--pf-gray-color-100);
332
- --pf-horizontal-line-color: var(--pf-gray-color-200);
333
393
  }
334
394
 
335
- :root [data-theme=dark] {
395
+ :root [data-theme=dark],
396
+ :root {
336
397
  --pf-white-color: #ffffff;
337
398
  --pf-black-color: #000000;
338
399
  --pf-background-color-light: var(--pf-primary-color-300);
@@ -347,9 +408,6 @@
347
408
  --pf-font-color-light-header: var(--pf-primary-color-100);
348
409
  --pf-link-color: var(--pf-gray-color-300);
349
410
  --pf-active-link-color: var(--pf-gray-color-100);
350
- --pf-horizontal-line-color: var(--pf-primary-color-200);
351
- --pf-border-color: var(--pf-steel-color-600);
352
- --pf-border-color-light: var(--pf-steel-color-400);
353
411
  }
354
412
 
355
413
  html,
@@ -362,11 +420,13 @@ body {
362
420
  font-weight: var(--pf-font-weight-regular);
363
421
  }
364
422
 
365
- a, .link {
423
+ a,
424
+ .link {
366
425
  color: var(--pf-link-color);
367
426
  transition: color 0.3s ease-in-out;
368
427
  }
369
- a:hover, .link:hover {
428
+ a:hover,
429
+ .link:hover {
370
430
  color: var(--pf-active-link-color);
371
431
  }
372
432
 
@@ -378,151 +438,142 @@ a:hover, .link:hover {
378
438
  :root,
379
439
  :root [data-theme=light],
380
440
  :root [data-theme=dark] {
381
- --pf-button-font-weight-bold: var(--pf-font-weight-bold);
382
- --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
383
- --pf-button-background-primary-color: var(--pf-primary-color);
384
- --pf-button-disabled-primary-color: var(--pf-primary-color-300);
385
- --pf-button-focus-primary-color: var(--pf-primary-color-900);
386
- --pf-button-hover-primary-color: var(--pf-primary-color-400);
387
- --pf-button-primary-color: var(--pf-primary-color);
388
- --pf-button-primary-text-color: var(--pf-white-color);
389
- --pf-button-background-secondary-color: var(--pf-secondary-color);
390
- --pf-button-disabled-secondary-color: var(--pf-secondary-color-300);
391
- --pf-button-focus-secondary-color: var(--pf-secondary-color-900);
392
- --pf-button-hover-secondary-color: var(--pf-secondary-color-400);
393
- --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-100);
394
- --pf-button-secondary-color: var(--pf-secondary-color);
395
- --pf-button-secondary-text-color: var(--pf-white-color);
396
- --pf-button-background-error-color: var(--pf-error-color);
397
- --pf-button-disabled-error-color: var(--pf-red-color-300);
398
- --pf-button-focus-error-color: var(--pf-red-color-900);
399
- --pf-button-hover-error-color: var(--pf-red-color-400);
400
- --pf-button-error-color: var(--pf-error-color);
401
- --pf-button-error-text-color: var(--pf-white-color);
402
- --pf-button-outline-hover-error-color: var(--pf-red-color-100);
403
- --pf-button-background-success-color: var(--pf-success-color);
404
- --pf-button-focus-success-color: var(--pf-green-color-900);
405
- --pf-button-hover-success-color: var(--pf-green-color-400);
406
- --pf-button-success-color: var(--pf-success-color);
407
- --pf-button-success-text-color: var(--pf-white-color);
408
- --pf-button-outline-hover-success-color: var(--pf-green-color-100);
409
- --pf-button-background-warning-color: var(--pf-warning-color);
410
- --pf-button-focus-warning-color: var(--pf-orange-color-900);
411
- --pf-button-hover-warning-color: var(--pf-orange-color-400);
412
- --pf-button-warning-color: var(--pf-warning-color);
413
- --pf-button-warning-text-color: var(--pf-white-color);
414
- --pf-button-disabled-info-color: var(--pf-gray-color-300);
415
- --pf-button-focus-info-color: var(--pf-gray-color-900);
416
- --pf-button-info-color: var(--pf-info-color);
417
- --pf-button-info-text-color: var(--pf-white-color);
418
- --pf-button-gray-color: var(--pf-gray-color);
419
- --pf-button-gray-disabled-color: var(--pf-gray-color-400);
420
- --pf-button-outline-background-color: var(--pf-white-color);
421
- --pf-button-rounded: var(--pf-rounded);
441
+ --pf-button-font-weight: var(--pf-font-weight-regular);
442
+ --pf-button-font-size-xs: calc(0.875 * var(--pf-font-size-base));
443
+ --pf-button-font-size-sm: calc(0.875 * var(--pf-font-size-base));
444
+ --pf-button-font-size-md: calc(0.875 * var(--pf-font-size-base));
445
+ --pf-button-font-size-lg: var(--pf-font-size-base);
446
+ --pf-button-line-height-xs: var(--pf-line-height-md);
447
+ --pf-button-line-height-sm: var(--pf-line-height-md);
448
+ --pf-button-line-height-md: var(--pf-line-height-md);
449
+ --pf-button-line-height-lg: var(--pf-line-height-lg);
450
+ --pf-button-border-radius: var(--pf-rounded-lg);
451
+ --pf-button-pill-border-radius: 100px;
452
+ --pf-button-focus-box-shadow: var(--pf-focus-box-shadow-alignment) rgba(25, 139, 220, 0.25);
453
+ --pf-button-solid-focus-box-shadow: var(--pf-button-focus-box-shadow);
454
+ --pf-button-action-focus-box-shadow: var(--pf-button-focus-box-shadow);
455
+ --pf-button-outline-focus-box-shadow: var(--pf-focus-box-shadow-alignment)
456
+ rgba(54, 161, 234, 0.25);
457
+ --pf-button-soft-focus-box-shadow: var(--pf-focus-box-shadow-alignment) rgba(92, 112, 140, 0.25);
458
+ --pf-button-destructive-focus-box-shadow: var(--pf-focus-box-shadow-alignment)
459
+ rgba(206, 96, 104, 0.25);
422
460
  }
423
461
 
424
462
  :root [data-theme=light] {
425
- --pf-button-disabled-success-color: var(--pf-green-color-300);
426
- --pf-button-disabled-warning-color: var(--pf-orange-color-300);
427
- --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
428
- --pf-button-background-info-color: var(--pf-info-color);
429
- --pf-button-hover-info-color: var(--pf-gray-color-400);
430
- --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
431
- --pf-button-outline-primary-background-color: var(--pf-white-color);
432
- --pf-button-outline-primary-text-color: var(--pf-primary-color);
433
- --pf-button-outline-primary-border-color: var(--pf-primary-color);
434
- --pf-button-outline-secondary-background-color: var(--pf-white-color);
435
- --pf-button-outline-secondary-text-color: var(--pf-secondary-color);
436
- --pf-button-outline-secondary-border-color: var(--pf-secondary-color);
437
- --pf-button-primary-outline-border-color: var(--pf-primary-color);
438
- --pf-button-secondary-outline-border-color: var(--pf-secondary-color);
439
- --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-400);
440
- --pf-button-outline-hover-primary-color: var(--pf-primary-color-300);
441
- --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-100);
442
- --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
443
- --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-300);
444
- --pf-button-outline-hover-secondary-background-color: var(--pf-secondary-color-100);
445
- --pf-button-disabled-primary-background-color: var(--pf-primary-color-300);
446
- --pf-button-disabled-primary-text-color: var(--pf-gray-color-100);
447
- --pf-button-disabled-primary-border-color: var(--pf-primary-color-300);
448
- --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-300);
449
- --pf-button-disabled-secondary-text-color: var(--pf-gray-color-100);
450
- --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-300);
451
- --pf-button-disabled-primary-outline-background-color: var(--pf-white-color);
452
- --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-300);
453
- --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-300);
454
- --pf-button-disabled-secondary-outline-background-color: var(--pf-white-color);
455
- --pf-button-disabled-secondary-outline-text-color: var(--pf-secondary-color-300);
456
- --pf-button-disabled-secondary-outline-border-color: var(--pf-secondary-color-300);
463
+ --pf-button-solid-background-color: var(--pf-primary-color);
464
+ --pf-button-solid-color: var(--pf-white-color);
465
+ --pf-button-solid-hover-background-color: var(--pf-primary-color-400);
466
+ --pf-button-solid-focus-background-color: var(--pf-primary-color);
467
+ --pf-button-solid-disabled-background-color: var(--pf-primary-color-300);
468
+ --pf-button-solid-disabled-color: var(--pf-gray-color-100);
469
+ --pf-button-outline-color: var(--pf-primary-color);
470
+ --pf-button-outline-border-color: var(--pf-primary-color);
471
+ --pf-button-outline-hover-color: var(--pf-primary-color-400);
472
+ --pf-button-outline-disabled-color: var(--pf-primary-color-300);
473
+ --pf-button-link-color: var(--pf-primary-color);
474
+ --pf-button-link-hover-color: var(--pf-primary-color-600);
475
+ --pf-button-link-disabled-color: var(--pf-primary-color-300);
476
+ --pf-button-action-color: var(--pf-primary-color);
477
+ --pf-button-action-border-color: var(--pf-primary-color);
478
+ --pf-button-action-hover-background-color: var(--pf-primary-color-200);
479
+ --pf-button-action-hover-border-color: var(--pf-primary-color-400);
480
+ --pf-button-action-hover-color: var(--pf-primary-color);
481
+ --pf-button-action-disabled-border-color: var(--pf-primary-color-300);
482
+ --pf-button-action-disabled-color: var(--pf-primary-color-300);
483
+ --pf-button-destructive-background-color: var(--pf-error-color);
484
+ --pf-button-destructive-color: var(--pf-white-color);
485
+ --pf-button-destructive-hover-background-color: var(--pf-red-color-400);
486
+ --pf-button-destructive-hover-color: var(--pf-white-color);
487
+ --pf-button-destructive-focus-background-color: var(--pf-red-color);
488
+ --pf-button-destructive-focus-color: var(--pf-white-color);
489
+ --pf-button-destructive-disabled-background-color: var(--pf-red-color-300);
490
+ --pf-button-destructive-disabled-color: var(--pf-white-color);
491
+ --pf-button-soft-color: var(--pf-primary-color-300);
492
+ --pf-button-soft-border-color: var(--pf-primary-color-300);
493
+ --pf-button-soft-hover-color: var(--pf-primary-color-600);
494
+ --pf-button-soft-hover-border-color: var(--pf-primary-color-600);
495
+ --pf-button-soft-focus-color: var(--pf-primary-color);
496
+ --pf-button-soft-focus-border-color: var(--pf-primary-color);
497
+ --pf-button-soft-disabled-color: var(--pf-primary-color-300);
498
+ --pf-button-soft-disabled-border-color: var(--pf-primary-color-300);
457
499
  }
458
500
 
459
501
  :root [data-theme=dark] {
460
- --pf-button-disabled-success-color: var(--pf-green-color-400);
461
- --pf-button-disabled-warning-color: var(--pf-orange-color-400);
462
- --pf-button-outline-hover-warning-color: var(--pf-orange-color-300);
463
- --pf-button-background-info-color: var(--pf-gray-color-800);
464
- --pf-button-hover-info-color: var(--pf-gray-color-600);
465
- --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
466
- --pf-button-outline-primary-background-color: var(--pf-primary-color-600);
467
- --pf-button-outline-primary-text-color: var(--pf-primary-color-100);
468
- --pf-button-primary-outline-border-color: var(--pf-primary-color-100);
469
- --pf-button-outline-secondary-background-color: var(--pf-primary-color-600);
470
- --pf-button-outline-secondary-text-color: var(--pf-secondary-color-700);
471
- --pf-button-secondary-outline-border-color: var(--pf-secondary-color-700);
472
- --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-200);
473
- --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-600);
474
- --pf-button-outline-hover-primary-border-color: var(--pf-primary-color-200);
475
- --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
476
- --pf-button-outline-hover-secondary-background-color: var(--pf-primary-color-600);
477
- --pf-button-outline-hover-secondary-border-color: var(--pf-secondary-color-400);
478
- --pf-button-disabled-primary-background-color: var(--pf-primary-color-900);
479
- --pf-button-disabled-primary-text-color: var(--pf-primary-color-400);
480
- --pf-button-disabled-primary-border-color: var(--pf-primary-color-900);
481
- --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-900);
482
- --pf-button-disabled-secondary-text-color: var(--pf-secondary-color-400);
483
- --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-900);
484
- --pf-button-disabled-primary-outline-background-color: var(--pf-primary-color-900);
485
- --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-400);
486
- --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-400);
487
- --pf-button-disabled-secondary-outline-background-color: var(--pf-primary-color-900);
488
- --pf-button-disabled-secondary-outline-text-color: var(--pf-primary-color-400);
489
- --pf-button-disabled-secondary-outline-border-color: var(--pf-primary-color-400);
502
+ --pf-button-solid-background-color: var(--pf-secondary-color);
503
+ --pf-button-solid-color: var(--pf-white-color);
504
+ --pf-button-solid-hover-background-color: var(--pf-secondary-color-550);
505
+ --pf-button-solid-focus-background-color: var(--pf-secondary-color);
506
+ --pf-button-solid-disabled-background-color: var(--pf-tertiary-color-600);
507
+ --pf-button-solid-disabled-color: var(--pf-tertiary-color-400);
508
+ --pf-button-outline-color: var(--pf-secondary-color-300);
509
+ --pf-button-outline-border-color: var(--pf-secondary-color-300);
510
+ --pf-button-outline-hover-color: var(--pf-secondary-color-200);
511
+ --pf-button-outline-disabled-color: var(--pf-tertiary-color-450);
512
+ --pf-button-link-color: var(--pf-secondary-color-550);
513
+ --pf-button-link-hover-color: var(--pf-secondary-color-800);
514
+ --pf-button-link-disabled-color: var(--pf-primary-color-200);
515
+ --pf-button-action-color: var(--pf-secondary-color-300);
516
+ --pf-button-action-border-color: #42a7ee;
517
+ --pf-button-action-hover-background-color: var(--pf-tertiary-color-450);
518
+ --pf-button-action-hover-border-color: #455770;
519
+ --pf-button-action-hover-color: var(--pf-white-color);
520
+ --pf-button-action-disabled-border-color: var(--pf-tertiary-color-400);
521
+ --pf-button-action-disabled-color: var(--pf-tertiary-color-400);
522
+ --pf-button-destructive-background-color: var(--pf-error-color);
523
+ --pf-button-destructive-color: var(--pf-white-color);
524
+ --pf-button-destructive-hover-background-color: var(--pf-red-color-600);
525
+ --pf-button-destructive-hover-color: var(--pf-white-color);
526
+ --pf-button-destructive-focus-background-color: var(--pf-red-color);
527
+ --pf-button-destructive-disabled-background-color: var(--pf-red-color-900);
528
+ --pf-button-destructive-disabled-color: var(--pf-white-color-40);
529
+ --pf-button-soft-color: var(--pf-primary-color-400);
530
+ --pf-button-soft-border-color: var(--pf-primary-color-400);
531
+ --pf-button-soft-hover-color: var(--pf-primary-color-300);
532
+ --pf-button-soft-hover-border-color: var(--pf-primary-color-300);
533
+ --pf-button-soft-focus-color: var(--pf-primary-color-400);
534
+ --pf-button-soft-disabled-color: var(--pf-tertiary-color-700);
535
+ --pf-button-soft-disabled-border-color: var(--pf-tertiary-color-450);
490
536
  }
491
537
 
492
538
  .btn {
493
539
  display: inline-flex;
494
- padding: var(--pf-padding-0) var(--pf-padding-3);
495
540
  font-family: var(--pf-font-family-base);
496
541
  align-items: center;
497
- border-radius: var(--pf-button-rounded);
498
- border-width: 1px;
542
+ justify-content: center;
543
+ white-space: nowrap;
544
+ border-width: var(--pf-border-sm);
499
545
  border-style: solid;
500
- font-weight: var(--pf-button-font-weight-bold);
546
+ border-color: transparent;
547
+ border-radius: var(--pf-button-border-radius);
548
+ font-weight: var(--pf-button-font-weight);
501
549
  cursor: pointer;
502
550
  }
503
551
  .btn:disabled {
504
552
  cursor: not-allowed;
505
553
  }
506
554
 
555
+ .btn--xs {
556
+ line-height: var(--pf-button-line-height-xs);
557
+ padding: var(--pf-padding-0-5) var(--pf-padding-3);
558
+ font-size: var(--pf-button-font-size-xs);
559
+ }
560
+
507
561
  .btn--sm {
508
- height: 28px;
509
- padding-left: var(--pf-padding-2);
510
- padding-right: var(--pf-padding-2);
511
- font-size: var(--pf-font-size-body2);
562
+ line-height: var(--pf-button-line-height-sm);
563
+ padding: var(--pf-padding-1-5) var(--pf-padding-3);
564
+ font-size: var(--pf-button-font-size-sm);
512
565
  }
513
566
 
514
567
  .btn--md {
515
- height: 36px;
516
- padding-left: var(--pf-padding-3);
517
- padding-right: var(--pf-padding-3);
518
- font-size: var(--pf-font-size-body);
568
+ line-height: var(--pf-button-line-height-md);
569
+ padding: var(--pf-padding-2-5) var(--pf-padding-3-5);
570
+ font-size: var(--pf-button-font-size-md);
519
571
  }
520
572
 
521
573
  .btn--lg {
522
- height: 40px;
523
- padding-left: var(--pf-padding-4);
524
- padding-right: var(--pf-padding-4);
525
- font-size: var(--pf-font-size-h2);
574
+ line-height: var(--pf-button-line-height-lg);
575
+ padding: var(--pf-padding-2-5) var(--pf-padding-4);
576
+ font-size: var(--pf-button-font-size-lg);
526
577
  }
527
578
 
528
579
  .btn--icon-only {
@@ -530,320 +581,132 @@ a:hover, .link:hover {
530
581
  padding-right: var(--pf-padding-2);
531
582
  }
532
583
 
533
- .btn--primary {
534
- background: var(--pf-button-primary-color);
535
- color: var(--pf-button-primary-text-color);
536
- border-color: var(--pf-button-primary-color);
537
- }
538
- .btn--primary:hover {
539
- border-color: var(--pf-button-hover-primary-color);
540
- background: var(--pf-button-hover-primary-color);
541
- }
542
- .btn--primary:disabled {
543
- background: var(--pf-button-disabled-primary-background-color);
544
- color: var(--pf-button-disabled-primary-text-color);
545
- border-color: var(--pf-button-disabled-primary-border-color);
546
- }
547
- .btn--primary.btn--outline {
548
- color: var(--pf-button-outline-primary-text-color);
549
- background-color: var(--pf-button-outline-primary-background-color);
550
- border-color: var(--pf-button-primary-outline-border-color);
551
- }
552
- .btn--primary.btn--outline:hover {
553
- color: var(--pf-button-outline-primary-hover-text-color);
554
- background-color: var(--pf-button-outline-hover-primary-background-color);
555
- border-color: var(--pf-button-hover-primary-outline-border-color);
556
- }
557
- .btn--primary.btn--outline:disabled {
558
- border-color: var(--pf-button-disabled-primary-outline-border-color);
559
- color: var(--pf-button-disabled-primary-outline-text-color);
560
- background-color: var(--pf-button-disabled-primary-outline-background-color);
561
- }
562
- .btn--primary.btn--outline:disabled:hover {
563
- color: var(--pf-button-disabled-primary-outline-text-color);
564
- background-color: var(--pf-button-disabled-primary-outline-background-color);
565
- }
566
-
567
- .btn--secondary {
568
- background: var(--pf-button-secondary-color);
569
- color: var(--pf-button-secondary-text-color);
570
- border-color: var(--pf-button-secondary-color);
571
- }
572
- .btn--secondary:hover {
573
- border-color: var(--pf-button-hover-secondary-color);
574
- background: var(--pf-button-hover-secondary-color);
575
- }
576
- .btn--secondary:disabled {
577
- background: var(--pf-button-disabled-secondary-background-color);
578
- color: var(--pf-button-disabled-secondary-text-color);
579
- border-color: var(--pf-button-disabled-secondary-border-color);
580
- }
581
- .btn--secondary.btn--outline {
582
- color: var(--pf-button-outline-secondary-text-color);
583
- background-color: var(--pf-button-outline-secondary-background-color);
584
- border-color: var(--pf-button-secondary-outline-border-color);
585
- }
586
- .btn--secondary.btn--outline:hover {
587
- color: var(--pf-button-outline-secondary-hover-text-color);
588
- background-color: var(--pf-button-outline-hover-secondary-background-color);
589
- border-color: var(--pf-button-hover-secondary-outline-border-color);
590
- }
591
- .btn--secondary.btn--outline:disabled {
592
- border-color: var(--pf-button-disabled-secondary-outline-border-color);
593
- color: var(--pf-button-disabled-secondary-outline-text-color);
594
- background-color: var(--pf-button-disabled-secondary-outline-background-color);
595
- }
596
- .btn--secondary.btn--outline:disabled:hover {
597
- color: var(--pf-button-disabled-secondary-outline-text-color);
598
- background-color: var(--pf-button-disabled-secondary-outline-background-color);
599
- }
600
-
601
- .btn--info {
602
- background: var(--pf-button-info-color);
603
- color: var(--pf-button-info-text-color);
604
- border-color: var(--pf-button-info-color);
605
- }
606
- .btn--info:hover {
607
- border-color: var(--pf-button-hover-info-color);
608
- background: var(--pf-button-hover-info-color);
609
- }
610
- .btn--info:disabled {
611
- background: var(--pf-button-disabled-info-background-color);
612
- color: var(--pf-button-disabled-info-text-color);
613
- border-color: var(--pf-button-disabled-info-border-color);
614
- }
615
- .btn--info.btn--outline {
616
- color: var(--pf-button-outline-info-text-color);
617
- background-color: var(--pf-button-outline-info-background-color);
618
- border-color: var(--pf-button-info-outline-border-color);
619
- }
620
- .btn--info.btn--outline:hover {
621
- color: var(--pf-button-outline-info-hover-text-color);
622
- background-color: var(--pf-button-outline-hover-info-background-color);
623
- border-color: var(--pf-button-hover-info-outline-border-color);
624
- }
625
- .btn--info.btn--outline:disabled {
626
- border-color: var(--pf-button-disabled-info-outline-border-color);
627
- color: var(--pf-button-disabled-info-outline-text-color);
628
- background-color: var(--pf-button-disabled-info-outline-background-color);
629
- }
630
- .btn--info.btn--outline:disabled:hover {
631
- color: var(--pf-button-disabled-info-outline-text-color);
632
- background-color: var(--pf-button-disabled-info-outline-background-color);
633
- }
634
-
635
- .btn--error {
636
- background: var(--pf-button-error-color);
637
- color: var(--pf-button-error-text-color);
638
- border-color: var(--pf-button-error-color);
639
- }
640
- .btn--error:hover {
641
- border-color: var(--pf-button-hover-error-color);
642
- background: var(--pf-button-hover-error-color);
643
- }
644
- .btn--error:disabled {
645
- background: var(--pf-button-disabled-error-background-color);
646
- color: var(--pf-button-disabled-error-text-color);
647
- border-color: var(--pf-button-disabled-error-border-color);
648
- }
649
- .btn--error.btn--outline {
650
- color: var(--pf-button-outline-error-text-color);
651
- background-color: var(--pf-button-outline-error-background-color);
652
- border-color: var(--pf-button-error-outline-border-color);
653
- }
654
- .btn--error.btn--outline:hover {
655
- color: var(--pf-button-outline-error-hover-text-color);
656
- background-color: var(--pf-button-outline-hover-error-background-color);
657
- border-color: var(--pf-button-hover-error-outline-border-color);
658
- }
659
- .btn--error.btn--outline:disabled {
660
- border-color: var(--pf-button-disabled-error-outline-border-color);
661
- color: var(--pf-button-disabled-error-outline-text-color);
662
- background-color: var(--pf-button-disabled-error-outline-background-color);
663
- }
664
- .btn--error.btn--outline:disabled:hover {
665
- color: var(--pf-button-disabled-error-outline-text-color);
666
- background-color: var(--pf-button-disabled-error-outline-background-color);
667
- }
668
-
669
- .btn--success {
670
- background: var(--pf-button-success-color);
671
- color: var(--pf-button-success-text-color);
672
- border-color: var(--pf-button-success-color);
673
- }
674
- .btn--success:hover {
675
- border-color: var(--pf-button-hover-success-color);
676
- background: var(--pf-button-hover-success-color);
677
- }
678
- .btn--success:disabled {
679
- background: var(--pf-button-disabled-success-background-color);
680
- color: var(--pf-button-disabled-success-text-color);
681
- border-color: var(--pf-button-disabled-success-border-color);
682
- }
683
- .btn--success.btn--outline {
684
- color: var(--pf-button-outline-success-text-color);
685
- background-color: var(--pf-button-outline-success-background-color);
686
- border-color: var(--pf-button-success-outline-border-color);
687
- }
688
- .btn--success.btn--outline:hover {
689
- color: var(--pf-button-outline-success-hover-text-color);
690
- background-color: var(--pf-button-outline-hover-success-background-color);
691
- border-color: var(--pf-button-hover-success-outline-border-color);
692
- }
693
- .btn--success.btn--outline:disabled {
694
- border-color: var(--pf-button-disabled-success-outline-border-color);
695
- color: var(--pf-button-disabled-success-outline-text-color);
696
- background-color: var(--pf-button-disabled-success-outline-background-color);
697
- }
698
- .btn--success.btn--outline:disabled:hover {
699
- color: var(--pf-button-disabled-success-outline-text-color);
700
- background-color: var(--pf-button-disabled-success-outline-background-color);
701
- }
702
-
703
- .btn--warning {
704
- background: var(--pf-button-warning-color);
705
- color: var(--pf-button-warning-text-color);
706
- border-color: var(--pf-button-warning-color);
707
- }
708
- .btn--warning:hover {
709
- border-color: var(--pf-button-hover-warning-color);
710
- background: var(--pf-button-hover-warning-color);
711
- }
712
- .btn--warning:disabled {
713
- background: var(--pf-button-disabled-warning-background-color);
714
- color: var(--pf-button-disabled-warning-text-color);
715
- border-color: var(--pf-button-disabled-warning-border-color);
716
- }
717
- .btn--warning.btn--outline {
718
- color: var(--pf-button-outline-warning-text-color);
719
- background-color: var(--pf-button-outline-warning-background-color);
720
- border-color: var(--pf-button-warning-outline-border-color);
721
- }
722
- .btn--warning.btn--outline:hover {
723
- color: var(--pf-button-outline-warning-hover-text-color);
724
- background-color: var(--pf-button-outline-hover-warning-background-color);
725
- border-color: var(--pf-button-hover-warning-outline-border-color);
726
- }
727
- .btn--warning.btn--outline:disabled {
728
- border-color: var(--pf-button-disabled-warning-outline-border-color);
729
- color: var(--pf-button-disabled-warning-outline-text-color);
730
- background-color: var(--pf-button-disabled-warning-outline-background-color);
731
- }
732
- .btn--warning.btn--outline:disabled:hover {
733
- color: var(--pf-button-disabled-warning-outline-text-color);
734
- background-color: var(--pf-button-disabled-warning-outline-background-color);
735
- }
736
-
737
- .btn--text {
584
+ .btn--outline,
585
+ .btn--link,
586
+ .btn--soft {
738
587
  background-color: transparent;
739
- border: solid 1px transparent;
740
- color: var(--pf-link-color);
741
- font-weight: var(--pf-button-font-weight-regular);
742
588
  }
743
- .btn--text:hover {
589
+ .btn--outline:hover,
590
+ .btn--link:hover,
591
+ .btn--soft:hover {
744
592
  background-color: transparent;
745
- border: solid 1px transparent;
746
- text-decoration: underline;
747
593
  }
748
- .btn--text:focus {
594
+ .btn--outline:disabled,
595
+ .btn--link:disabled,
596
+ .btn--soft:disabled {
749
597
  background-color: transparent;
750
- border: solid 1px transparent;
751
- color: var(--pf-link-hover-color);
752
- }
753
- .btn--text:disabled {
754
- color: var(--pf-button-gray-disabled-color);
755
- }
756
- .btn--text:disabled:hover {
757
- color: var(--pf-button-gray-disabled-color);
758
598
  }
759
599
 
760
600
  .btn--solid {
761
- color: var(--pf-white-color);
601
+ background-color: var(--pf-button-solid-background-color);
602
+ color: var(--pf-button-solid-color);
603
+ }
604
+ .btn--solid:hover {
605
+ background-color: var(--pf-button-solid-hover-background-color);
606
+ }
607
+ .btn--solid:focus {
608
+ background-color: var(--pf-button-solid-focus-background-color);
609
+ box-shadow: var(--pf-button-solid-focus-box-shadow);
610
+ }
611
+ .btn--solid:disabled {
612
+ background-color: var(--pf-button-solid-disabled-background-color);
613
+ color: var(--pf-button-solid-disabled-color);
762
614
  }
763
615
 
764
- .btn--primary.btn--text,
765
- .btn--secondary.btn--text,
766
- .btn--info.btn--text,
767
- .btn--error.btn--text,
768
- .btn--success.btn--text,
769
- .btn--warning.btn--text {
770
- border: solid 1px transparent;
771
- font-weight: var(--pf-button-font-weight-regular);
772
- }
773
- .btn--primary.btn--text:hover:disabled,
774
- .btn--secondary.btn--text:hover:disabled,
775
- .btn--info.btn--text:hover:disabled,
776
- .btn--error.btn--text:hover:disabled,
777
- .btn--success.btn--text:hover:disabled,
778
- .btn--warning.btn--text:hover:disabled {
616
+ .btn--action {
617
+ padding: var(--pf-padding-2);
779
618
  background-color: transparent;
619
+ border-color: var(--pf-button-action-border-color);
620
+ color: var(--pf-button-action-color);
621
+ }
622
+ .btn--action:hover {
623
+ background-color: var(--pf-button-action-hover-background-color);
624
+ border-color: var(--pf-button-action-hover-border-color);
625
+ color: var(--pf-button-action-hover-color);
780
626
  }
781
- .btn--primary.btn--text:disabled,
782
- .btn--secondary.btn--text:disabled,
783
- .btn--info.btn--text:disabled,
784
- .btn--error.btn--text:disabled,
785
- .btn--success.btn--text:disabled,
786
- .btn--warning.btn--text:disabled {
627
+ .btn--action:focus {
787
628
  background-color: transparent;
788
- border-color: transparent;
789
- color: var(--pf-button-gray-disabled-color);
629
+ border-color: var(--pf-button-action-border-color);
630
+ box-shadow: var(--pf-button-action-focus-box-shadow);
631
+ color: var(--pf-button-action-color);
632
+ }
633
+ .btn--action:disabled {
634
+ background-color: transparent;
635
+ border-color: var(--pf-button-action-disabled-border-color);
636
+ color: var(--pf-button-action-disabled-color);
790
637
  }
791
638
 
792
- .btn--primary.btn--text {
793
- color: var(--pf-button-primary-color);
794
- background: transparent;
639
+ .btn--link {
640
+ color: var(--pf-button-link-color);
795
641
  }
796
- .btn--primary.btn--text:hover {
797
- background: transparent;
798
- color: var(--pf-button-primary-color);
642
+ .btn--link:hover:not(:disabled) {
643
+ text-decoration: underline;
644
+ color: var(--pf-button-link-hover-color);
799
645
  }
800
- .btn--primary.btn--text:disabled {
801
- color: var(--pf-button-gray-disabled-color);
646
+ .btn--link:focus {
647
+ text-decoration: underline;
648
+ color: var(--pf-button-link-hover-color);
649
+ background-color: transparent;
802
650
  }
803
- .btn--primary.btn--text:disabled:hover {
804
- color: var(--pf-button-gray-disabled-color);
651
+ .btn--link:disabled {
652
+ color: var(--pf-button-link-disabled-color);
805
653
  }
806
654
 
807
- .btn--secondary.btn--text {
808
- background: transparent;
809
- color: var(--pf-button-secondary-color);
810
- }
811
- .btn--secondary.btn--text:hover {
812
- background: transparent;
813
- color: var(--pf-button-secondary-color);
655
+ .btn--outline {
656
+ border: var(--pf-border-sm) solid var(--pf-button-outline-border-color);
657
+ color: var(--pf-button-outline-color);
814
658
  }
815
- .btn--secondary.btn--text:disabled {
816
- color: var(--pf-button-gray-disabled-color);
659
+ .btn--outline:hover:not(:disabled) {
660
+ color: var(--pf-button-outline-hover-color);
661
+ border-color: var(--pf-button-outline-hover-color);
817
662
  }
818
- .btn--secondary.btn--text:disabled:hover {
819
- color: var(--pf-button-gray-disabled-color);
663
+ .btn--outline:focus {
664
+ background-color: transparent;
665
+ box-shadow: var(--pf-button-outline-focus-box-shadow);
820
666
  }
821
-
822
- .btn--info {
823
- background-color: var(--pf-button-background-info-color);
667
+ .btn--outline:disabled {
668
+ color: var(--pf-button-outline-disabled-color);
669
+ border-color: var(--pf-button-outline-disabled-color);
824
670
  }
825
671
 
826
- .btn--info.btn--text {
827
- background: transparent;
828
- color: var(--pf-button-info-color);
672
+ .btn--destructive {
673
+ background-color: var(--pf-button-destructive-background-color);
674
+ color: var(--pf-button-destructive-color);
829
675
  }
830
- .btn--info.btn--text:hover {
831
- background: transparent;
832
- color: var(--pf-button-info-color);
676
+ .btn--destructive:hover {
677
+ background-color: var(--pf-button-destructive-hover-background-color);
833
678
  }
834
- .btn--info.btn--text:disabled {
835
- color: var(--pf-button-gray-disabled-color);
679
+ .btn--destructive:focus {
680
+ background-color: var(--pf-button-destructive-focus-background-color);
681
+ color: var(--pf-button-destructive-focus-color);
682
+ box-shadow: var(--pf-button-destructive-focus-box-shadow);
836
683
  }
837
- .btn--info.btn--text:disabled:hover {
838
- color: var(--pf-button-gray-disabled-color);
684
+ .btn--destructive:disabled {
685
+ background-color: var(--pf-button-destructive-disabled-background-color);
686
+ color: var(--pf-button-destructive-disabled-color);
839
687
  }
840
688
 
841
- .btn--outline {
842
- background-color: var(--pf-button-outline-background-color);
689
+ .btn--soft {
690
+ color: var(--pf-button-soft-color);
691
+ border: var(--pf-border-sm) solid var(--pf-button-soft-border-color);
692
+ }
693
+ .btn--soft:hover {
694
+ color: var(--pf-button-soft-hover-color);
695
+ border-color: var(--pf-button-soft-hover-border-color);
696
+ }
697
+ .btn--soft:focus {
698
+ background-color: transparent;
699
+ color: var(--pf-button-soft-focus-color);
700
+ border-color: var(--pf-button-soft-focus-border-color);
701
+ box-shadow: var(--pf-button-soft-focus-box-shadow);
702
+ }
703
+ .btn--soft:disabled {
704
+ color: var(--pf-button-soft-disabled-color);
705
+ border-color: var(--pf-button-soft-disabled-border-color);
843
706
  }
844
707
 
845
- .btn.btn--primary.btn--text {
846
- color: var(--pf-link-color);
708
+ .btn--pill {
709
+ border-radius: var(--pf-button-pill-border-radius);
847
710
  }
848
711
 
849
712
  .icon {
@@ -876,14 +739,14 @@ a:hover, .link:hover {
876
739
  }
877
740
 
878
741
  .sb__sample-cell {
879
- background: var(--pf-primary-color-400);
880
- color: var(--pf-gray-color);
742
+ background: var(--pf-secondary-color-550);
743
+ color: var(--pf-white-color);
881
744
  padding: 1rem;
882
745
  margin: 2px 0;
883
746
  }
884
747
  .sb__sample-cell-secondary {
885
748
  background: var(--pf-secondary-color-400);
886
- color: var(--pf-gray-color);
749
+ color: var(--pf-white-color);
887
750
  padding: 1rem;
888
751
  margin: 2px 0;
889
752
  }
@@ -901,7 +764,7 @@ a:hover, .link:hover {
901
764
  }
902
765
  .sb__sample-cell-red {
903
766
  background: var(--pf-red-color-400);
904
- color: var(--pf-gray-color);
767
+ color: var(--pf-white-color);
905
768
  padding: 1rem;
906
769
  margin: 2px 0;
907
770
  }
@@ -911,7 +774,6 @@ a:hover, .link:hover {
911
774
  margin: 1em 0;
912
775
  }
913
776
 
914
- :root,
915
777
  :root [data-theme=light] {
916
778
  --pf-table-background-color: var(--pf-white-color);
917
779
  --pf-table-font-color: var(--pf-gray-color);
@@ -925,20 +787,27 @@ a:hover, .link:hover {
925
787
  --pf-table-font-size: var(--pf-font-size-body2);
926
788
  }
927
789
 
928
- :root [data-theme=dark] {
929
- --pf-table-background-color: var(--pf-primary-color-700);
930
- --pf-table-font-color: var(--pf-gray-color);
931
- --pf-table-border-color: var(--pf-primary-color-300);
932
- --pf-table-stripe-color: var(--pf-primary-color-600);
933
- --pf-table-hover-color: var(--pf-primary-color-400);
790
+ :root [data-theme=dark],
791
+ :root {
792
+ --pf-table-background-color: var(--pf-primary-color-800);
793
+ --pf-table-font-color: var(--pf-white-color);
794
+ --pf-table-border-color: var(--pf-tertiary-color-800);
795
+ --pf-table-stripe-color: var(--pf-primary-color-700);
796
+ --pf-table-hover-color: var(--pf-primary-color-600);
934
797
  --pf-table-disabled-color: var(--pf-gray-color-900);
935
- --pf-table-checked-color: var(--pf-secondary-color-900);
798
+ --pf-table-checked-color: red;
936
799
  --pf-table-highlighted-color: var(--pf-primary-color-400);
937
800
  --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
938
801
  }
939
802
 
940
803
  .table-loading {
804
+ background-color: var(--pf-table-background-color);
941
805
  color: var(--pf-table-font-color);
806
+ width: 100%;
807
+ height: 50px;
808
+ display: flex;
809
+ align-items: center;
810
+ justify-content: center;
942
811
  }
943
812
 
944
813
  .table {
@@ -1034,65 +903,8 @@ a:hover, .link:hover {
1034
903
  background-color: var(--pf-table-highlighted-color) !important;
1035
904
  }
1036
905
 
1037
- :root,
1038
- :root [data-theme=light],
1039
- :root [data-theme=dark] {
1040
- --pf-input-background-color: var(--pf-white-color);
1041
- --pf-input-border-color: var(--pf-form-input-border-color);
1042
- --pf-input-text-color: var(--pf-gray-color);
1043
- --pf-input-placeholder-text-color: var(--pf-gray-color-300);
1044
- --pf-input-help-text-color: var(--pf-gray-color-400);
1045
- --pf-input-disabled-background-color: var(--pf-gray-color-100);
1046
- --pf-input-disabled-color: var(--pf-gray-color-400);
1047
- --pf-input-rounded: var(--pf-rounded);
1048
- }
1049
-
1050
- :root [data-theme=dark] {
1051
- --pf-input-background-color: var(--pf-primary-color);
1052
- --pf-input-border-color: var(--pf-form-input-border-color);
1053
- --pf-input-text-color: var(--pf-gray-color-100);
1054
- --pf-input-placeholder-text-color: var(--pf-gray-color-600);
1055
- --pf-input-help-text-color: var(--pf-gray-color-200);
1056
- --pf-input-disabled-background-color: var(--pf-primary-color-200);
1057
- --pf-input-disabled-border-color: var(--pf-gray-color-300);
1058
- --pf-input-disabled-color: var(--pf-gray-color-400);
1059
- }
1060
-
1061
906
  .input {
1062
- background-color: var(--pf-input-background-color);
1063
- border: 1px solid var(--pf-input-border-color);
1064
- border-radius: var(--pf-input-rounded);
1065
- color: var(--pf-input-text-color);
1066
907
  padding: 10px;
1067
- width: 100%;
1068
- box-sizing: border-box;
1069
- height: 36px;
1070
- }
1071
- .input::-moz-placeholder {
1072
- color: var(--pf-input-placeholder-text-color);
1073
- }
1074
- .input::placeholder {
1075
- color: var(--pf-input-placeholder-text-color);
1076
- }
1077
- .input:focus {
1078
- border-color: var(--pf-primary-color);
1079
- }
1080
- .input.error {
1081
- border-color: var(--pf-error-color);
1082
- }
1083
- .input.success {
1084
- border-color: var(--pf-success-color);
1085
- }
1086
- .input.warning {
1087
- border-color: var(--pf-warning-color);
1088
- }
1089
- .input.info {
1090
- border-color: var(--pf-info-color);
1091
- }
1092
- .input:disabled {
1093
- background-color: var(--pf-input-disabled-background-color);
1094
- border-color: var(--pf-input-disabled-border-color);
1095
- color: var(--pf-input-disabled-color);
1096
908
  }
1097
909
  .input--has-icon {
1098
910
  padding-left: var(--pf-padding-7);
@@ -1104,7 +916,7 @@ a:hover, .link:hover {
1104
916
  .form-control .help-text {
1105
917
  margin-top: var(--pf-margin-2);
1106
918
  margin-bottom: var(--pf-margin-2);
1107
- color: var(--pf-input-help-text-color);
919
+ color: var(--pf-form-input-help-color);
1108
920
  font-size: var(--pf-font-size-subtitle2);
1109
921
  }
1110
922
  .form-control .input-wrapper {
@@ -1114,52 +926,24 @@ a:hover, .link:hover {
1114
926
  position: absolute;
1115
927
  top: 10px;
1116
928
  left: var(--pf-margin-2);
1117
- color: var(--pf-input-text-color);
929
+ color: var(--pf-form-input-color);
1118
930
  }
1119
931
  .form-control .input-wrapper .clearable-icon {
1120
932
  position: absolute;
1121
933
  top: var(--pf-margin-3);
1122
934
  right: var(--pf-margin-2);
1123
- color: var(--pf-input-text-color);
935
+ color: var(--pf-form-input-color);
1124
936
  cursor: pointer;
1125
937
  }
1126
938
  .form-control .form-label {
1127
939
  margin-bottom: var(--pf-margin-2);
1128
940
  }
1129
941
 
1130
- :root,
1131
- :root [data-theme=light],
1132
- :root [data-theme=dark] {
1133
- --pf-number-input-background-color: var(--pf-white-color);
1134
- --pf-number-input-border-color: var(--pf-form-input-border-color);
1135
- --pf-number-input-text-color: var(--pf-gray-color);
1136
- --pf-number-input-placeholder-text-color: var(--pf-gray-color-300);
1137
- --pf-number-input-help-text-color: var(--pf-gray-color-400);
1138
- --pf-number-input-disabled-background-color: var(--pf-gray-color-100);
1139
- --pf-number-input-disabled-color: var(--pf-gray-color-400);
942
+ :root {
1140
943
  --pf-number-input-padding: 10px;
1141
- --pf-number-input-rounded: var(--pf-rounded);
1142
- }
1143
-
1144
- :root [data-theme=dark] {
1145
- --pf-number-input-background-color: var(--pf-primary-color);
1146
- --pf-number-input-border-color: var(--pf-form-input-border-color);
1147
- --pf-number-input-text-color: var(--pf-gray-color-100);
1148
- --pf-number-input-placeholder-text-color: var(--pf-gray-color-600);
1149
- --pf-number-input-help-text-color: var(--pf-gray-color-200);
1150
- --pf-number-input-disabled-background-color: var(--pf-primary-color-200);
1151
- --pf-number-input-disabled-border-color: var(--pf-gray-color-300);
1152
- --pf-number-input-disabled-color: var(--pf-gray-color-400);
1153
944
  }
1154
945
 
1155
946
  .number-input {
1156
- background-color: var(--pf-number-input-background-color);
1157
- border: var(--pf-border-thin) solid var(--pf-input-border-color);
1158
- border-radius: var(--pf-number-input-rounded);
1159
- color: var(--pf-number-input-text-color);
1160
- width: 100%;
1161
- box-sizing: border-box;
1162
- height: var(--pf-size-9);
1163
947
  padding-right: var(--pf-number-input-padding);
1164
948
  padding-left: var(--pf-number-input-padding);
1165
949
  }
@@ -1169,37 +953,11 @@ a:hover, .link:hover {
1169
953
  .number-input--has-icon {
1170
954
  padding-left: var(--pf-padding-7);
1171
955
  }
1172
- .number-input::-moz-placeholder {
1173
- color: var(--pf-number-input-placeholder-text-color);
1174
- }
1175
- .number-input::placeholder {
1176
- color: var(--pf-number-input-placeholder-text-color);
1177
- }
1178
- .number-input:focus {
1179
- border-color: var(--pf-primary-color);
1180
- }
1181
- .number-input.error {
1182
- border-color: var(--pf-error-color);
1183
- }
1184
- .number-input.success {
1185
- border-color: var(--pf-success-color);
1186
- }
1187
- .number-input.warning {
1188
- border-color: var(--pf-warning-color);
1189
- }
1190
- .number-input.info {
1191
- border-color: var(--pf-info-color);
1192
- }
1193
- .number-input:disabled {
1194
- background-color: var(--pf-number-input-disabled-background-color);
1195
- border-color: var(--pf-number-input-disabled-border-color);
1196
- color: var(--pf-number-input-disabled-color);
1197
- }
1198
956
 
1199
957
  .form-control .help-text {
1200
958
  margin-top: var(--pf-margin-2);
1201
959
  margin-bottom: var(--pf-margin-2);
1202
- color: var(--pf-number-input-help-text-color);
960
+ color: var(--pf-form-input-help-color);
1203
961
  font-size: var(--pf-font-size-subtitle2);
1204
962
  }
1205
963
  .form-control .number-input-wrapper {
@@ -1209,32 +967,27 @@ a:hover, .link:hover {
1209
967
  position: absolute;
1210
968
  top: 10px;
1211
969
  left: var(--pf-margin-2);
1212
- color: var(--pf-number-input-text-color);
970
+ color: var(--pf-form-input-color);
1213
971
  }
1214
972
  .form-control .number-input-wrapper .clearable-icon {
1215
973
  position: absolute;
1216
974
  top: var(--pf-margin-3);
1217
975
  right: var(--pf-margin-2);
1218
- color: var(--pf-number-input-text-color);
976
+ color: var(--pf-form-input-color);
1219
977
  cursor: pointer;
1220
978
  }
1221
979
  .form-control .form-label {
1222
980
  margin-bottom: var(--pf-margin-2);
1223
981
  }
1224
982
 
1225
- :root,
1226
- :root [data-theme=light],
1227
- :root [data-theme=dark] {
1228
- --pf-radio-background-color: var(--pf-white-color);
983
+ :root [data-theme=light] {
1229
984
  --pf-radio-check-color: var(--pf-primary-color);
1230
- --pf-radio-border-color: var(--pf-form-input-border-color);
1231
985
  --pf-radio-disabled-color: var(--pf-gray-color-400);
1232
986
  }
1233
987
 
1234
- :root [data-theme=dark] {
1235
- --pf-radio-background-color: var(--pf-primary-color-600);
988
+ :root [data-theme=dark],
989
+ :root {
1236
990
  --pf-radio-check-color: var(--pf-white-color);
1237
- --pf-radio-border-color: var(--pf-form-input-border-color);
1238
991
  --pf-radio-disabled-color: var(--pf-gray-color-300);
1239
992
  }
1240
993
 
@@ -1272,9 +1025,9 @@ a:hover, .link:hover {
1272
1025
  top: 0;
1273
1026
  width: 18px;
1274
1027
  height: 18px;
1275
- border: 1px solid var(--pf-radio-border-color);
1028
+ border: 1px solid var(--pf-form-input-border-color);
1276
1029
  border-radius: 100%;
1277
- background: var(--pf-radio-background-color);
1030
+ background: var(--pf-form-input-background-color);
1278
1031
  }
1279
1032
  .form-control [type=radio]:checked + label:after,
1280
1033
  .form-control [type=radio]:not(:checked) + label:after {
@@ -1311,19 +1064,14 @@ a:hover, .link:hover {
1311
1064
  background: var(--pf-radio-disabled-color);
1312
1065
  }
1313
1066
 
1314
- :root,
1315
- :root [data-theme=light],
1316
- :root [data-theme=dark] {
1317
- --pf-checkbox-background-color: var(--pf-white-color);
1067
+ :root [data-theme=light] {
1318
1068
  --pf-checkbox-check-color: var(--pf-primary-color);
1319
- --pf-checkbox-border-color: var(--pf-form-input-border-color);
1320
1069
  --pf-checkbox-disabled-color: var(--pf-gray-color-400);
1321
1070
  }
1322
1071
 
1323
- :root [data-theme=dark] {
1324
- --pf-checkbox-background-color: var(--pf-primary-color-500);
1072
+ :root [data-theme=dark],
1073
+ :root {
1325
1074
  --pf-checkbox-check-color: var(--pf-white-color);
1326
- --pf-checkbox-border-color: var(--pf-form-input-border-color);
1327
1075
  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
1328
1076
  }
1329
1077
 
@@ -1361,9 +1109,9 @@ a:hover, .link:hover {
1361
1109
  top: 0;
1362
1110
  width: 18px;
1363
1111
  height: 18px;
1364
- border: 1px solid var(--pf-checkbox-border-color);
1112
+ border: 1px solid var(--pf-form-input-border-color);
1365
1113
  border-radius: var(--pf-rounded);
1366
- background: var(--pf-checkbox-background-color);
1114
+ background: var(--pf-form-input-background-color);
1367
1115
  }
1368
1116
  .form-control .checkbox-input:checked + label:after,
1369
1117
  .form-control .checkbox-input:not(:checked) + label:after {
@@ -1397,50 +1145,11 @@ a:hover, .link:hover {
1397
1145
  border-color: var(--pf-checkbox-disabled-color);
1398
1146
  }
1399
1147
  .form-control .checkbox-input:disabled + label:after {
1400
- background: var(--pf-checkbox-disabled-color);
1401
- }
1402
-
1403
- :root,
1404
- :root [data-theme=light],
1405
- :root [data-theme=dark] {
1406
- --pf-textarea-background-color: var(--pf-white-color);
1407
- --pf-textarea-text-color: var(--pf-gray-color);
1408
- --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
1409
- --pf-textarea-help-text-color: var(--pf-gray-color-400);
1410
- --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
1411
- --pf-textarea-border-color: var(--pf-form-input-border-color);
1412
- --pf-textarea-disabled-color: var(--pf-gray-color-400);
1413
- --pf-textarea-rounded: var(--pf-rounded);
1414
- }
1415
-
1416
- :root [data-theme=dark] {
1417
- --pf-textarea-background-color: var(--pf-primary-color);
1418
- --pf-textarea-border-color: var(--pf-form-input-border-color);
1419
- --pf-textarea-text-color: var(--pf-gray-color-100);
1420
- --pf-textarea-placeholder-text-color: var(--pf-gray-color);
1421
- --pf-textarea-help-text-color: var(--pf-gray-color-200);
1422
- --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
1423
- --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
1424
- --pf-textarea-disabled-color: var(--pf-gray-color-400);
1148
+ background: var(--pf-form-input-disabled-background-color);
1425
1149
  }
1426
1150
 
1427
1151
  .textarea {
1428
- background-color: var(--pf-textarea-background-color);
1429
- border: 1px solid var(--pf-textarea-border-color);
1430
- border-radius: var(--pf-textarea-rounded);
1431
- color: var(--pf-textarea-text-color);
1432
1152
  padding: 10px;
1433
- width: 100%;
1434
- box-sizing: border-box;
1435
- }
1436
- .textarea::-moz-placeholder {
1437
- color: var(--pf-textarea-placeholder-text-color);
1438
- }
1439
- .textarea::placeholder {
1440
- color: var(--pf-textarea-placeholder-text-color);
1441
- }
1442
- .textarea:focus {
1443
- border-color: var(--pf-primary-color);
1444
1153
  }
1445
1154
  .textarea.error {
1446
1155
  border-color: var(--pf-error-color);
@@ -1454,11 +1163,6 @@ a:hover, .link:hover {
1454
1163
  .textarea.info {
1455
1164
  border-color: var(--pf-info-color);
1456
1165
  }
1457
- .textarea:disabled {
1458
- background-color: var(--pf-textarea-disabled-background-color);
1459
- border-color: var(--pf-textarea-disabled-border-color);
1460
- color: var(--pf-textarea-disabled-color);
1461
- }
1462
1166
  .textarea--has-icon {
1463
1167
  padding-left: var(--pf-padding-7);
1464
1168
  }
@@ -1474,72 +1178,15 @@ a:hover, .link:hover {
1474
1178
  .form-control .help-text {
1475
1179
  margin-top: var(--pf-margin-2);
1476
1180
  margin-bottom: var(--pf-margin-2);
1477
- color: var(--pf-textarea-help-text-color);
1181
+ color: var(--pf-form-input-help-color);
1478
1182
  font-size: var(--pf-font-size-subtitle2);
1479
1183
  }
1480
1184
  .form-control .form-label {
1481
1185
  margin-bottom: var(--pf-margin-2);
1482
1186
  }
1483
1187
 
1484
- :root,
1485
- :root [data-theme=light],
1486
- :root [data-theme=dark] {
1487
- --pf-password-input-background-color: var(--pf-white-color);
1488
- --pf-password-input-border-color: var(--pf-form-input-border-color);
1489
- --pf-password-input-text-color: var(--pf-gray-color);
1490
- --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
1491
- --pf-password-input-help-text-color: var(--pf-gray-color-400);
1492
- --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
1493
- --pf-password-input-disabled-color: var(--pf-gray-color-400);
1494
- --pf-password-input-rounded: var(--pf-rounded);
1495
- }
1496
-
1497
- :root [data-theme=dark] {
1498
- --pf-password-input-background-color: var(--pf-primary-color);
1499
- --pf-password-input-border-color: var(--pf-form-input-border-color);
1500
- --pf-password-input-text-color: var(--pf-gray-color-100);
1501
- --pf-password-input-placeholder-text-color: var(--pf-gray-color);
1502
- --pf-password-input-help-text-color: var(--pf-gray-color-200);
1503
- --pf-password-input-disabled-background-color: var(--pf-primary-color-200);
1504
- --pf-password-input-disabled-border-color: var(--pf-gray-color-300);
1505
- --pf-password-input-disabled-color: var(--pf-gray-color-400);
1506
- }
1507
-
1508
1188
  .password-input {
1509
- background-color: var(--pf-password-input-background-color);
1510
- border: 1px solid var(--pf-password-input-border-color);
1511
- border-radius: var(--pf-password-input-rounded);
1512
- color: var(--pf-password-input-text-color);
1513
1189
  padding: 10px;
1514
- width: 100%;
1515
- box-sizing: border-box;
1516
- height: 36px;
1517
- }
1518
- .password-input::-moz-placeholder {
1519
- color: var(--pf-password-input-placeholder-text-color);
1520
- }
1521
- .password-input::placeholder {
1522
- color: var(--pf-password-input-placeholder-text-color);
1523
- }
1524
- .password-input:focus {
1525
- border-color: var(--pf-primary-color);
1526
- }
1527
- .password-input.error {
1528
- border-color: var(--pf-error-color);
1529
- }
1530
- .password-input.success {
1531
- border-color: var(--pf-success-color);
1532
- }
1533
- .password-input.warning {
1534
- border-color: var(--pf-warning-color);
1535
- }
1536
- .password-input.info {
1537
- border-color: var(--pf-info-color);
1538
- }
1539
- .password-input:disabled {
1540
- background-color: var(--pf-password-input-disabled-background-color);
1541
- border-color: var(--pf-password-input-disabled-border-color);
1542
- color: var(--pf-password-input-disabled-color);
1543
1190
  }
1544
1191
  .password-input--has-icon {
1545
1192
  padding-left: var(--pf-padding-7);
@@ -1556,7 +1203,7 @@ a:hover, .link:hover {
1556
1203
  .form-control .help-text {
1557
1204
  margin-top: var(--pf-margin-2);
1558
1205
  margin-bottom: var(--pf-margin-2);
1559
- color: var(--pf-password-input-help-text-color);
1206
+ color: var(--pf-form-input-help-color);
1560
1207
  font-size: var(--pf-font-size-subtitle2);
1561
1208
  }
1562
1209
  .form-control .password-input-wrapper {
@@ -1566,13 +1213,13 @@ a:hover, .link:hover {
1566
1213
  position: absolute;
1567
1214
  top: 10px;
1568
1215
  left: var(--pf-margin-2);
1569
- color: var(--pf-password-input-text-color);
1216
+ color: var(--pf-form-input-color);
1570
1217
  }
1571
1218
  .form-control .password-input-wrapper .toggle-show-password-icon {
1572
1219
  position: absolute;
1573
1220
  top: var(--pf-margin-3);
1574
1221
  right: var(--pf-margin-2);
1575
- color: var(--pf-password-input-text-color);
1222
+ color: var(--pf-form-input-color);
1576
1223
  cursor: pointer;
1577
1224
  }
1578
1225
  .form-control .form-label {
@@ -1583,65 +1230,199 @@ form {
1583
1230
  width: 100%;
1584
1231
  }
1585
1232
 
1586
- :root [data-theme=light],
1587
1233
  :root {
1588
- --pf-form-input-border-color: var(--pf-border-color);
1234
+ --pf-form-input-rounded: var(--pf-rounded);
1589
1235
  }
1590
1236
 
1591
- :root [data-theme=dark] {
1237
+ :root [data-theme=light] {
1238
+ --pf-form-input-border-color: var(--pf-border-color);
1239
+ --pf-form-input-background-color: var(--pf-white-color);
1240
+ --pf-form-input-color: var(--pf-gray-color);
1241
+ --pf-form-input-placeholder-color: var(--pf-gray-color-300);
1242
+ --pf-form-input-help-color: var(--pf-gray-color-400);
1243
+ --pf-form-input-hover-background-color: var(--pf-gray-color-100);
1244
+ --pf-form-input-focus-background-color: var(--pf-gray-color-100);
1245
+ --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
1246
+ --pf-form-input-focus-outline-color: var(--pf-primary-color);
1247
+ --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
1248
+ --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
1249
+ --pf-form-input-disabled-color: var(--pf-gray-color-400);
1250
+ }
1251
+
1252
+ :root [data-theme=dark],
1253
+ :root {
1592
1254
  --pf-form-input-border-color: var(--pf-border-color);
1255
+ --pf-form-input-background-color: var(--pf-primary-color-700);
1256
+ --pf-form-input-color: var(--pf-gray-color-100);
1257
+ --pf-form-input-placeholder-color: var(--pf-primary-color-50);
1258
+ --pf-form-input-help-color: var(--pf-gray-color-200);
1259
+ --pf-form-input-hover-background-color: var(--pf-primary-color-800);
1260
+ --pf-form-input-focus-background-color: var(--pf-primary-color-800);
1261
+ --pf-form-input-focus-border-color: var(--pf-secondary-color-700);
1262
+ --pf-form-input-focus-outline-color: var(--pf-primary-color);
1263
+ --pf-form-input-disabled-background-color: var(--pf-tertiary-color-450);
1264
+ --pf-form-input-disabled-border-color: var(--pf-tertiary-color-450);
1265
+ --pf-form-input-disabled-color: var(--pf-tertiary-color-950);
1266
+ }
1267
+
1268
+ .input-wrapper input,
1269
+ .number-input-wrapper input,
1270
+ .password-input-wrapper input,
1271
+ .textarea-wrapper input {
1272
+ height: var(--pf-size-9);
1273
+ }
1274
+ .input-wrapper input,
1275
+ .input-wrapper textarea,
1276
+ .number-input-wrapper input,
1277
+ .number-input-wrapper textarea,
1278
+ .password-input-wrapper input,
1279
+ .password-input-wrapper textarea,
1280
+ .textarea-wrapper input,
1281
+ .textarea-wrapper textarea {
1282
+ background-color: var(--pf-form-input-background-color);
1283
+ border: 1px solid var(--pf-form-input-border-color);
1284
+ border-radius: var(--pf-form-input-rounded);
1285
+ color: var(--pf-form-input-color);
1286
+ width: 100%;
1287
+ box-sizing: border-box;
1288
+ }
1289
+ .input-wrapper input::-moz-placeholder, .input-wrapper textarea::-moz-placeholder, .number-input-wrapper input::-moz-placeholder, .number-input-wrapper textarea::-moz-placeholder, .password-input-wrapper input::-moz-placeholder, .password-input-wrapper textarea::-moz-placeholder, .textarea-wrapper input::-moz-placeholder, .textarea-wrapper textarea::-moz-placeholder {
1290
+ color: var(--pf-form-input-placeholder-color);
1291
+ }
1292
+ .input-wrapper input::placeholder,
1293
+ .input-wrapper textarea::placeholder,
1294
+ .number-input-wrapper input::placeholder,
1295
+ .number-input-wrapper textarea::placeholder,
1296
+ .password-input-wrapper input::placeholder,
1297
+ .password-input-wrapper textarea::placeholder,
1298
+ .textarea-wrapper input::placeholder,
1299
+ .textarea-wrapper textarea::placeholder {
1300
+ color: var(--pf-form-input-placeholder-color);
1301
+ }
1302
+ .input-wrapper input:hover,
1303
+ .input-wrapper textarea:hover,
1304
+ .number-input-wrapper input:hover,
1305
+ .number-input-wrapper textarea:hover,
1306
+ .password-input-wrapper input:hover,
1307
+ .password-input-wrapper textarea:hover,
1308
+ .textarea-wrapper input:hover,
1309
+ .textarea-wrapper textarea:hover {
1310
+ background-color: var(--pf-form-input-hover-background-color);
1311
+ }
1312
+ .input-wrapper input:focus,
1313
+ .input-wrapper textarea:focus,
1314
+ .number-input-wrapper input:focus,
1315
+ .number-input-wrapper textarea:focus,
1316
+ .password-input-wrapper input:focus,
1317
+ .password-input-wrapper textarea:focus,
1318
+ .textarea-wrapper input:focus,
1319
+ .textarea-wrapper textarea:focus {
1320
+ border-color: var(--pf-form-input-focus-border-color);
1321
+ background-color: var(--pf-form-input-focus-background-color);
1322
+ }
1323
+ .input-wrapper input:focus-visible,
1324
+ .input-wrapper textarea:focus-visible,
1325
+ .number-input-wrapper input:focus-visible,
1326
+ .number-input-wrapper textarea:focus-visible,
1327
+ .password-input-wrapper input:focus-visible,
1328
+ .password-input-wrapper textarea:focus-visible,
1329
+ .textarea-wrapper input:focus-visible,
1330
+ .textarea-wrapper textarea:focus-visible {
1331
+ outline: 1px solid var(--pf-form-input-focus-outline-color);
1332
+ }
1333
+ .input-wrapper input:disabled,
1334
+ .input-wrapper textarea:disabled,
1335
+ .number-input-wrapper input:disabled,
1336
+ .number-input-wrapper textarea:disabled,
1337
+ .password-input-wrapper input:disabled,
1338
+ .password-input-wrapper textarea:disabled,
1339
+ .textarea-wrapper input:disabled,
1340
+ .textarea-wrapper textarea:disabled {
1341
+ background-color: var(--pf-form-input-disabled-background-color);
1342
+ border-color: var(--pf-form-input-disabled-border-color);
1343
+ color: var(--pf-form-input-disabled-color);
1344
+ }
1345
+ .input-wrapper input.error,
1346
+ .input-wrapper textarea.error,
1347
+ .number-input-wrapper input.error,
1348
+ .number-input-wrapper textarea.error,
1349
+ .password-input-wrapper input.error,
1350
+ .password-input-wrapper textarea.error,
1351
+ .textarea-wrapper input.error,
1352
+ .textarea-wrapper textarea.error {
1353
+ border-color: var(--pf-error-color);
1354
+ }
1355
+ .input-wrapper input.success,
1356
+ .input-wrapper textarea.success,
1357
+ .number-input-wrapper input.success,
1358
+ .number-input-wrapper textarea.success,
1359
+ .password-input-wrapper input.success,
1360
+ .password-input-wrapper textarea.success,
1361
+ .textarea-wrapper input.success,
1362
+ .textarea-wrapper textarea.success {
1363
+ border-color: var(--pf-success-color);
1364
+ }
1365
+ .input-wrapper input.warning,
1366
+ .input-wrapper textarea.warning,
1367
+ .number-input-wrapper input.warning,
1368
+ .number-input-wrapper textarea.warning,
1369
+ .password-input-wrapper input.warning,
1370
+ .password-input-wrapper textarea.warning,
1371
+ .textarea-wrapper input.warning,
1372
+ .textarea-wrapper textarea.warning {
1373
+ border-color: var(--pf-warning-color);
1374
+ }
1375
+ .input-wrapper input.info,
1376
+ .input-wrapper textarea.info,
1377
+ .number-input-wrapper input.info,
1378
+ .number-input-wrapper textarea.info,
1379
+ .password-input-wrapper input.info,
1380
+ .password-input-wrapper textarea.info,
1381
+ .textarea-wrapper input.info,
1382
+ .textarea-wrapper textarea.info {
1383
+ border-color: var(--pf-info-color);
1593
1384
  }
1594
1385
 
1595
- :root,
1596
1386
  :root [data-theme=light] {
1597
- --pf-select-background-color: var(--pf-white-color);
1598
- --pf-select-border-color: var(--pf-form-input-border-color);
1599
- --pf-select-text-color: var(--pf-gray-color);
1600
1387
  --pf-select-indicator-color: var(--pf-gray-color);
1601
- --pf-select-placeholder-text-color: var(--pf-gray-color);
1602
- --pf-select-hover-color: var(--pf-gray-color);
1603
1388
  --pf-select-option-selected-color: var(--pf-primary-color-100);
1604
- --pf-select-option-text-color: var(--pf-gray-color);
1389
+ --pf-select-option-color: var(--pf-gray-color);
1605
1390
  --pf-select-option-hover-color: var(--pf-primary-color-100);
1606
- --pf-select-disabled-background-color: var(--pf-gray-color-100);
1607
- --pf-select-disabled-color: var(--pf-gray-color-400);
1608
1391
  }
1609
1392
 
1610
- :root [data-theme=dark] {
1611
- --pf-select-background-color: var(--pf-primary-color);
1612
- --pf-select-border-color: var(--pf-form-input-border-color);
1613
- --pf-select-text-color: var(--pf-gray-color-100);
1393
+ :root [data-theme=dark],
1394
+ :root {
1614
1395
  --pf-select-indicator-color: var(--pf-gray-color-100);
1615
- --pf-select-placeholder-text-color: var(--pf-gray-color-100);
1616
- --pf-select-hover-color: var(--pf-gray-color-100);
1617
- --pf-select-option-selected-color: var(--pf-primary-color-900);
1618
- --pf-select-option-text-color: var(--pf-gray-color-100);
1619
- --pf-select-option-hover-color: var(--pf-primary-color-300);
1620
- --pf-select-disabled-background-color: var(--pf-primary-color-200);
1621
- --pf-select-disabled-color: var(--pf-gray-color-400);
1396
+ --pf-select-option-selected-color: var(--pf-tertiary-color-700);
1397
+ --pf-select-option-color: var(--pf-gray-color-100);
1398
+ --pf-select-option-hover-color: var(--pf-primary-color);
1622
1399
  }
1623
1400
 
1624
1401
  .select-wrapper .select__control {
1625
- background-color: var(--pf-select-background-color);
1626
- border: 1px solid var(--pf-select-border-color);
1627
- color: var(--pf-select-text-color);
1402
+ background-color: var(--pf-form-input-background-color);
1403
+ border: 1px solid var(--pf-form-input-border-color);
1404
+ color: var(--pf-form-input-color);
1628
1405
  box-shadow: none;
1629
1406
  }
1630
- .select-wrapper .select__control:hover, .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
1631
- border: 1px solid var(--pf-select-hover-color);
1407
+ .select-wrapper .select__control:hover:not(:focus) {
1408
+ background-color: var(--pf-form-input-hover-background-color);
1409
+ border-color: var(--pf-form-input-border-color);
1410
+ }
1411
+ .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
1412
+ border: 1px solid var(--pf-form-input-focus-border-color);
1632
1413
  }
1633
1414
  .select-wrapper .select__control--is-disabled {
1634
- background-color: var(--pf-select-disabled-background-color);
1635
- color: var(--pf-select-disabled-color);
1415
+ background-color: var(--pf-form-input-disabled-background-color);
1416
+ color: var(--pf-form-input-disabled-color);
1636
1417
  }
1637
1418
  .select-wrapper .select__placeholder {
1638
- color: var(--pf-select-placeholder-text-color);
1419
+ color: var(--pf-form-input-placeholder-color);
1639
1420
  }
1640
1421
  .select-wrapper .select__value-container {
1641
1422
  cursor: text;
1642
1423
  }
1643
1424
  .select-wrapper .select__input-container {
1644
- color: var(--pf-select-text-color);
1425
+ color: var(--pf-form-input-color);
1645
1426
  }
1646
1427
  .select-wrapper .select__multi-value {
1647
1428
  background-color: var(--pf-select-option-selected-color);
@@ -1649,24 +1430,24 @@ form {
1649
1430
  }
1650
1431
  .select-wrapper .select__multi-value__label {
1651
1432
  padding-top: 5px;
1652
- color: var(--pf-select-option-text-color);
1433
+ color: var(--pf-select-option-color);
1653
1434
  }
1654
1435
  .select-wrapper .select__multi-value__remove {
1655
- color: var(--pf-select-option-text-color);
1436
+ color: var(--pf-select-option-color);
1656
1437
  cursor: pointer;
1657
1438
  }
1658
1439
  .select-wrapper .select__multi-value__remove:hover {
1659
1440
  background-color: var(--pf-select-option-hover-color);
1660
- color: var(--pf-select-hover-color);
1441
+ color: var(--pf-form-input-hover-color);
1661
1442
  }
1662
1443
  .select-wrapper .select__menu {
1663
- border: 1px solid var(--pf-select-border-color);
1444
+ border: 1px solid var(--pf-form-input-border-color);
1664
1445
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
1665
1446
  margin: 4px 0px;
1666
- background-color: var(--pf-select-background-color);
1447
+ background-color: var(--pf-form-input-background-color);
1667
1448
  }
1668
1449
  .select-wrapper .select__menu-notice {
1669
- color: var(--pf-select-text-color);
1450
+ color: var(--pf-form-input-color);
1670
1451
  }
1671
1452
  .select-wrapper .select__indicator-separator {
1672
1453
  background-color: var(--pf-select-indicator-color);
@@ -1676,7 +1457,7 @@ form {
1676
1457
  color: var(--pf-select-indicator-color);
1677
1458
  }
1678
1459
  .select-wrapper .select__indicator:hover, .select-wrapper .select__indicator:focus {
1679
- color: var(--pf-select-hover-color);
1460
+ color: var(--pf-form-input-color);
1680
1461
  }
1681
1462
  .select-wrapper .select__items {
1682
1463
  display: flex;
@@ -1688,7 +1469,7 @@ form {
1688
1469
  .select-wrapper .select__option {
1689
1470
  cursor: pointer;
1690
1471
  overflow-wrap: break-word;
1691
- color: var(--pf-select-option-text-color);
1472
+ color: var(--pf-select-option-color);
1692
1473
  }
1693
1474
  .select-wrapper .select__option--is-focused, .select-wrapper .select__option:active {
1694
1475
  background: var(--pf-select-option-hover-color);
@@ -1697,26 +1478,25 @@ form {
1697
1478
  background: var(--pf-select-option-selected-color);
1698
1479
  }
1699
1480
  .select-wrapper .select__single-value {
1700
- color: var(--pf-select-option-text-color);
1481
+ color: var(--pf-select-option-color);
1701
1482
  }
1702
1483
 
1703
- :root,
1704
- :root [data-theme=light],
1705
- :root [data-theme=dark] {
1706
- --pf-toggle-background-color: var(--pf-gray-color-200);
1484
+ :root [data-theme=light] {
1485
+ --pf-toggle-background-color: var(--pf-form-input-background-color);
1707
1486
  --pf-toggle-circle-color: var(--pf-primary-color);
1708
1487
  --pf-toggle-border-color: var(--pf-form-input-border-color);
1709
- --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
1710
- --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
1711
- --pf-toggle-checked-background-color: var(--pf-primary-color-200);
1488
+ --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
1489
+ --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
1490
+ --pf-toggle-checked-background-color: var(--pf-primary-color-300);
1712
1491
  }
1713
1492
 
1714
- :root [data-theme=dark] {
1715
- --pf-toggle-background-color: var(--pf-primary-color-100);
1493
+ :root [data-theme=dark],
1494
+ :root {
1495
+ --pf-toggle-background-color: var(--pf-form-input-background-color);
1716
1496
  --pf-toggle-circle-color: var(--pf-white-color);
1717
- --pf-toggle-border-color: var(--pf-form-input-border-color);
1718
- --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
1719
- --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
1497
+ --pf-toggle-border-color: var(--pf-primary-color);
1498
+ --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
1499
+ --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
1720
1500
  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
1721
1501
  }
1722
1502
 
@@ -1729,6 +1509,7 @@ form {
1729
1509
  border-radius: 20px;
1730
1510
  transition: all 0.3s;
1731
1511
  cursor: pointer;
1512
+ border: 1px solid var(--pf-toggle-border-color);
1732
1513
  }
1733
1514
 
1734
1515
  .switch::after {
@@ -1784,8 +1565,8 @@ form {
1784
1565
  }
1785
1566
 
1786
1567
  :root [data-theme=dark] {
1787
- --pf-skeleton-color-one: var(--pf-primary-color-200);
1788
- --pf-skeleton-color-two: var(--pf-primary-color-100);
1568
+ --pf-skeleton-color-one: var(--pf-primary-color-500);
1569
+ --pf-skeleton-color-two: var(--pf-primary-color-400);
1789
1570
  }
1790
1571
 
1791
1572
  .skeleton {
@@ -1813,20 +1594,19 @@ form {
1813
1594
  }
1814
1595
  }
1815
1596
 
1816
- :root,
1817
- :root [data-theme=light],
1818
- :root [data-theme=dark] {
1819
- --pf-card-background-color: var(--pf-white-color);
1820
- --pf-card-text-color: var(--pf-gray-color);
1821
- --pf-card-border-color: var(--pf-gray-color);
1597
+ :root {
1822
1598
  --pf-card-rounded: var(--pf-rounded);
1823
1599
  }
1824
1600
 
1825
- :root [data-theme=dark] {
1826
- --pf-card-background-color: var(--pf-primary-color);
1827
- --pf-card-border-color: var(--pf-primary-color-200);
1828
- --pf-card-text-color: var(--pf-gray-color-100);
1829
- --pf-card-border-color: var(--pf-steel-color-600);
1601
+ :root [data-theme=light] {
1602
+ --pf-card-background-color: var(--pf-white-color);
1603
+ --pf-card-border-color: var(--pf-border-color);
1604
+ }
1605
+
1606
+ :root [data-theme=dark],
1607
+ :root {
1608
+ --pf-card-background-color: var(--pf-primary-color-600);
1609
+ --pf-card-border-color: var(--pf-border-color);
1830
1610
  }
1831
1611
 
1832
1612
  .card {
@@ -1855,19 +1635,23 @@ form {
1855
1635
  box-shadow: var(--pf-dropshadow);
1856
1636
  }
1857
1637
 
1858
- :root,
1859
- :root [data-theme=light],
1860
- :root [data-theme=dark] {
1638
+ :root {
1861
1639
  --pf-menu-rounded: var(--pf-rounded);
1640
+ }
1641
+
1642
+ :root [data-theme=light] {
1862
1643
  --pf-menu-item-hover-color: var(--pf-primary-color-100);
1863
1644
  --pf-menu-item-background-color: var(--pf-white-color);
1864
1645
  --pf-menu-item-color: var(--pf-gray-color);
1646
+ --pf-menu-item-focus-color: var(--pf-primary-color-300);
1865
1647
  }
1866
1648
 
1867
- :root [data-theme=dark] {
1868
- --pf-menu-item-hover-color: var(--pf-primary-color-300);
1649
+ :root [data-theme=dark],
1650
+ :root {
1651
+ --pf-menu-item-hover-color: var(--pf-primary-color-500);
1869
1652
  --pf-menu-item-background-color: var(--pf-primary-color-600);
1870
- --pf-menu-item-color: var(--pf-gray-color-100);
1653
+ --pf-menu-item-color: var(--pf-gray-color-50);
1654
+ --pf-menu-item-focus-color: var(--pf-primary-color-500);
1871
1655
  }
1872
1656
 
1873
1657
  .menu {
@@ -1881,22 +1665,29 @@ form {
1881
1665
  width: 100%;
1882
1666
  text-align: left;
1883
1667
  border: none;
1668
+ box-shadow: none;
1884
1669
  }
1885
1670
  .menu .menu-item:hover {
1886
1671
  background: var(--pf-menu-item-hover-color);
1887
1672
  }
1673
+ .menu .menu-item:focus {
1674
+ background-color: var(--pf-menu-item-focus-color);
1675
+ }
1888
1676
 
1889
- :root,
1890
- :root [data-theme=light],
1891
- :root [data-theme=dark] {
1892
- --pf-floatui-background-color: var(--pf-white-color);
1893
- --pf-floatui-border-color: var(--pf-border-color-900);
1677
+ :root {
1894
1678
  --pf-floatui-border-radius: var(--pf-rounded);
1679
+ --pf-floatui-box-shadow: var(--pf-dropshadow);
1680
+ --pf-floatui-border: none;
1681
+ --pf-floatui-border-color: var(--pf-border-color);
1895
1682
  }
1896
1683
 
1897
- :root [data-theme=dark] {
1684
+ :root [data-theme=light] {
1685
+ --pf-floatui-background-color: var(--pf-white-color);
1686
+ }
1687
+
1688
+ :root [data-theme=dark],
1689
+ :root {
1898
1690
  --pf-floatui-background-color: var(--pf-primary-color-600);
1899
- --pf-floatui-border-color: var(--pf-border-color);
1900
1691
  }
1901
1692
 
1902
1693
  .floatui-container {
@@ -1905,8 +1696,7 @@ form {
1905
1696
 
1906
1697
  .floatui-content {
1907
1698
  border-radius: var(--pf-floatui-border-radius);
1908
- border: solid 1px;
1909
- border-color: var(--pf-floatui-border-color);
1699
+ box-shadow: var(--pf-floatui-box-shadow);
1910
1700
  background: var(--pf-floatui-background-color);
1911
1701
  }
1912
1702
 
@@ -1914,6 +1704,7 @@ form {
1914
1704
  --pf-date-picker-background-color: var(--pf-white-color);
1915
1705
  --pf-date-picker-selected-date-background-color: var(--pf-primary-color);
1916
1706
  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
1707
+ --pf-date-picker-today-background-color: var(--pf-primary-color-200);
1917
1708
  }
1918
1709
  :root [data-theme=light] .rdp-root {
1919
1710
  --rdp-accent-color: var(--pf-link-color);
@@ -1921,16 +1712,19 @@ form {
1921
1712
  --rdp-range_middle-background-color: var(--pf-primary-color-300);
1922
1713
  }
1923
1714
 
1924
- :root [data-theme=dark] {
1925
- --pf-date-picker-background-color: var(--pf-primary-color-400);
1926
- --pf-date-picker-selected-date-background-color: var(--pf-secondary-color-300);
1715
+ :root [data-theme=dark],
1716
+ :root {
1717
+ --pf-date-picker-background-color: var(--pf-primary-color-600);
1718
+ --pf-date-picker-selected-date-background-color: var(--pf-secondary-color-400);
1927
1719
  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
1720
+ --pf-date-picker-today-background-color: var(--pf-primary-color);
1928
1721
  }
1929
- :root [data-theme=dark] .rdp-root {
1722
+ :root [data-theme=dark] .rdp-root,
1723
+ :root .rdp-root {
1930
1724
  --rdp-accent-color: var(--pf-link-color);
1931
1725
  --rdp-accent-background-color: var(--pf-primary-color-200);
1932
1726
  --rdp-font-family: var(--pf-font-family-base);
1933
- --rdp-range_middle-background-color: var(--pf-primary-color-600);
1727
+ --rdp-range_middle-background-color: var(--pf-primary-color-700);
1934
1728
  }
1935
1729
 
1936
1730
  .rdp-chevron {
@@ -1959,20 +1753,19 @@ form {
1959
1753
  border: none;
1960
1754
  }
1961
1755
  .rdp-day.rdp-today .rdp-day_button {
1962
- background-color: var(--pf-primary-color-300);
1756
+ background-color: var(--pf-date-picker-today-background-color);
1963
1757
  color: var(--pf-date-picker-selected-date-font-color);
1964
1758
  }
1965
1759
  .rdp-day.rdp-selected .rdp-day_button {
1966
1760
  background-color: var(--pf-date-picker-selected-date-background-color);
1967
1761
  color: var(--pf-date-picker-selected-date-font-color);
1762
+ border-color: var(--pf-border-color);
1968
1763
  }
1969
1764
  .rdp-day.rdp-range_middle .rdp-day_button {
1970
1765
  background-color: transparent;
1971
1766
  }
1972
1767
 
1973
- :root,
1974
- :root [data-theme=light],
1975
- :root [data-theme=dark] {
1768
+ :root [data-theme=light] {
1976
1769
  --pf-pill-primary-background-color: var(--pf-primary-color);
1977
1770
  --pf-pill-primary-font-color: var(--pf-white-color);
1978
1771
  --pf-pill-primary-border-color: var(--pf-primary-color);
@@ -1996,7 +1789,8 @@ form {
1996
1789
  --pf-pill-neutral-border-color: var(--pf-gray-color);
1997
1790
  }
1998
1791
 
1999
- :root [data-theme=dark] {
1792
+ :root [data-theme=dark],
1793
+ :root {
2000
1794
  --pf-pill-primary-background-color: var(--pf-primary-color-900);
2001
1795
  --pf-pill-primary-font-color: var(--pf-white-color);
2002
1796
  --pf-pill-primary-border-color: var(--pf-primary-color-100);
@@ -2078,17 +1872,17 @@ form {
2078
1872
  border-color: var(--pf-pill-secondary-border-color);
2079
1873
  }
2080
1874
 
2081
- :root [data-theme=light],
2082
- :root {
1875
+ :root [data-theme=light] {
2083
1876
  --sheets-background-color: var(--pf-gray-color-100);
2084
1877
  }
2085
1878
 
2086
- :root [data-theme=dark] {
1879
+ :root [data-theme=dark],
1880
+ :root {
2087
1881
  --sheets-background-color: var(--pf-primary-color-400);
2088
1882
  }
2089
1883
 
2090
1884
  :root {
2091
- --pf-font-family-base: "Mulish", sans-serif;
1885
+ --pf-font-family-base: "Noto Sans", sans-serif;
2092
1886
  --pf-font-size-base: 1rem;
2093
1887
  --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
2094
1888
  --pf-font-size-h2: calc(1.25 * var(--pf-font-size-base));
@@ -2113,6 +1907,10 @@ form {
2113
1907
  --pf-label-size-sm: var(--pf-font-size-overline);
2114
1908
  --pf-label-size-md: var(--pf-font-size-body);
2115
1909
  --pf-label-size-lg: var(--pf-font-size-h2);
1910
+ --pf-line-height-xs: calc(0.75 * var(--pf-font-size-base));
1911
+ --pf-line-height-sm: var(--pf-font-size-base);
1912
+ --pf-line-height-md: calc(1.25 * var(--pf-font-size-base));
1913
+ --pf-line-height-lg: calc(1.5 * var(--pf-font-size-base));
2116
1914
  }
2117
1915
 
2118
1916
  html {
@@ -2389,6 +2187,14 @@ p,
2389
2187
  background-color: var(--pf-primary-color);
2390
2188
  }
2391
2189
 
2190
+ .color-primary-50 {
2191
+ color: var(--pf-primary-color-50);
2192
+ }
2193
+
2194
+ .bg-primary-50 {
2195
+ background-color: var(--pf-primary-color-50);
2196
+ }
2197
+
2392
2198
  .color-primary-100 {
2393
2199
  color: var(--pf-primary-color-100);
2394
2200
  }
@@ -2397,6 +2203,14 @@ p,
2397
2203
  background-color: var(--pf-primary-color-100);
2398
2204
  }
2399
2205
 
2206
+ .color-primary-150 {
2207
+ color: var(--pf-primary-color-150);
2208
+ }
2209
+
2210
+ .bg-primary-150 {
2211
+ background-color: var(--pf-primary-color-150);
2212
+ }
2213
+
2400
2214
  .color-primary-200 {
2401
2215
  color: var(--pf-primary-color-200);
2402
2216
  }
@@ -2405,6 +2219,14 @@ p,
2405
2219
  background-color: var(--pf-primary-color-200);
2406
2220
  }
2407
2221
 
2222
+ .color-primary-250 {
2223
+ color: var(--pf-primary-color-250);
2224
+ }
2225
+
2226
+ .bg-primary-250 {
2227
+ background-color: var(--pf-primary-color-250);
2228
+ }
2229
+
2408
2230
  .color-primary-300 {
2409
2231
  color: var(--pf-primary-color-300);
2410
2232
  }
@@ -2413,6 +2235,14 @@ p,
2413
2235
  background-color: var(--pf-primary-color-300);
2414
2236
  }
2415
2237
 
2238
+ .color-primary-350 {
2239
+ color: var(--pf-primary-color-350);
2240
+ }
2241
+
2242
+ .bg-primary-350 {
2243
+ background-color: var(--pf-primary-color-350);
2244
+ }
2245
+
2416
2246
  .color-primary-400 {
2417
2247
  color: var(--pf-primary-color-400);
2418
2248
  }
@@ -2421,6 +2251,14 @@ p,
2421
2251
  background-color: var(--pf-primary-color-400);
2422
2252
  }
2423
2253
 
2254
+ .color-primary-450 {
2255
+ color: var(--pf-primary-color-450);
2256
+ }
2257
+
2258
+ .bg-primary-450 {
2259
+ background-color: var(--pf-primary-color-450);
2260
+ }
2261
+
2424
2262
  .color-primary-500 {
2425
2263
  color: var(--pf-primary-color-500);
2426
2264
  }
@@ -2429,6 +2267,14 @@ p,
2429
2267
  background-color: var(--pf-primary-color-500);
2430
2268
  }
2431
2269
 
2270
+ .color-primary-550 {
2271
+ color: var(--pf-primary-color-550);
2272
+ }
2273
+
2274
+ .bg-primary-550 {
2275
+ background-color: var(--pf-primary-color-550);
2276
+ }
2277
+
2432
2278
  .color-primary-600 {
2433
2279
  color: var(--pf-primary-color-600);
2434
2280
  }
@@ -2437,6 +2283,14 @@ p,
2437
2283
  background-color: var(--pf-primary-color-600);
2438
2284
  }
2439
2285
 
2286
+ .color-primary-650 {
2287
+ color: var(--pf-primary-color-650);
2288
+ }
2289
+
2290
+ .bg-primary-650 {
2291
+ background-color: var(--pf-primary-color-650);
2292
+ }
2293
+
2440
2294
  .color-primary-700 {
2441
2295
  color: var(--pf-primary-color-700);
2442
2296
  }
@@ -2445,6 +2299,14 @@ p,
2445
2299
  background-color: var(--pf-primary-color-700);
2446
2300
  }
2447
2301
 
2302
+ .color-primary-750 {
2303
+ color: var(--pf-primary-color-750);
2304
+ }
2305
+
2306
+ .bg-primary-750 {
2307
+ background-color: var(--pf-primary-color-750);
2308
+ }
2309
+
2448
2310
  .color-primary-800 {
2449
2311
  color: var(--pf-primary-color-800);
2450
2312
  }
@@ -2453,6 +2315,14 @@ p,
2453
2315
  background-color: var(--pf-primary-color-800);
2454
2316
  }
2455
2317
 
2318
+ .color-primary-850 {
2319
+ color: var(--pf-primary-color-850);
2320
+ }
2321
+
2322
+ .bg-primary-850 {
2323
+ background-color: var(--pf-primary-color-850);
2324
+ }
2325
+
2456
2326
  .color-primary-900 {
2457
2327
  color: var(--pf-primary-color-900);
2458
2328
  }
@@ -2461,6 +2331,22 @@ p,
2461
2331
  background-color: var(--pf-primary-color-900);
2462
2332
  }
2463
2333
 
2334
+ .color-primary-950 {
2335
+ color: var(--pf-primary-color-950);
2336
+ }
2337
+
2338
+ .bg-primary-950 {
2339
+ background-color: var(--pf-primary-color-950);
2340
+ }
2341
+
2342
+ .color-primary-1000 {
2343
+ color: var(--pf-primary-color-1000);
2344
+ }
2345
+
2346
+ .bg-primary-1000 {
2347
+ background-color: var(--pf-primary-color-1000);
2348
+ }
2349
+
2464
2350
  .color-secondary {
2465
2351
  color: var(--pf-secondary-color);
2466
2352
  }
@@ -2469,6 +2355,14 @@ p,
2469
2355
  background-color: var(--pf-secondary-color);
2470
2356
  }
2471
2357
 
2358
+ .color-secondary-50 {
2359
+ color: var(--pf-secondary-color-50);
2360
+ }
2361
+
2362
+ .bg-secondary-50 {
2363
+ background-color: var(--pf-secondary-color-50);
2364
+ }
2365
+
2472
2366
  .color-secondary-100 {
2473
2367
  color: var(--pf-secondary-color-100);
2474
2368
  }
@@ -2477,6 +2371,14 @@ p,
2477
2371
  background-color: var(--pf-secondary-color-100);
2478
2372
  }
2479
2373
 
2374
+ .color-secondary-150 {
2375
+ color: var(--pf-secondary-color-150);
2376
+ }
2377
+
2378
+ .bg-secondary-150 {
2379
+ background-color: var(--pf-secondary-color-150);
2380
+ }
2381
+
2480
2382
  .color-secondary-200 {
2481
2383
  color: var(--pf-secondary-color-200);
2482
2384
  }
@@ -2485,6 +2387,14 @@ p,
2485
2387
  background-color: var(--pf-secondary-color-200);
2486
2388
  }
2487
2389
 
2390
+ .color-secondary-250 {
2391
+ color: var(--pf-secondary-color-250);
2392
+ }
2393
+
2394
+ .bg-secondary-250 {
2395
+ background-color: var(--pf-secondary-color-250);
2396
+ }
2397
+
2488
2398
  .color-secondary-300 {
2489
2399
  color: var(--pf-secondary-color-300);
2490
2400
  }
@@ -2493,6 +2403,14 @@ p,
2493
2403
  background-color: var(--pf-secondary-color-300);
2494
2404
  }
2495
2405
 
2406
+ .color-secondary-350 {
2407
+ color: var(--pf-secondary-color-350);
2408
+ }
2409
+
2410
+ .bg-secondary-350 {
2411
+ background-color: var(--pf-secondary-color-350);
2412
+ }
2413
+
2496
2414
  .color-secondary-400 {
2497
2415
  color: var(--pf-secondary-color-400);
2498
2416
  }
@@ -2501,6 +2419,14 @@ p,
2501
2419
  background-color: var(--pf-secondary-color-400);
2502
2420
  }
2503
2421
 
2422
+ .color-secondary-450 {
2423
+ color: var(--pf-secondary-color-450);
2424
+ }
2425
+
2426
+ .bg-secondary-450 {
2427
+ background-color: var(--pf-secondary-color-450);
2428
+ }
2429
+
2504
2430
  .color-secondary-500 {
2505
2431
  color: var(--pf-secondary-color-500);
2506
2432
  }
@@ -2509,6 +2435,14 @@ p,
2509
2435
  background-color: var(--pf-secondary-color-500);
2510
2436
  }
2511
2437
 
2438
+ .color-secondary-550 {
2439
+ color: var(--pf-secondary-color-550);
2440
+ }
2441
+
2442
+ .bg-secondary-550 {
2443
+ background-color: var(--pf-secondary-color-550);
2444
+ }
2445
+
2512
2446
  .color-secondary-600 {
2513
2447
  color: var(--pf-secondary-color-600);
2514
2448
  }
@@ -2517,6 +2451,14 @@ p,
2517
2451
  background-color: var(--pf-secondary-color-600);
2518
2452
  }
2519
2453
 
2454
+ .color-secondary-650 {
2455
+ color: var(--pf-secondary-color-650);
2456
+ }
2457
+
2458
+ .bg-secondary-650 {
2459
+ background-color: var(--pf-secondary-color-650);
2460
+ }
2461
+
2520
2462
  .color-secondary-700 {
2521
2463
  color: var(--pf-secondary-color-700);
2522
2464
  }
@@ -2525,6 +2467,14 @@ p,
2525
2467
  background-color: var(--pf-secondary-color-700);
2526
2468
  }
2527
2469
 
2470
+ .color-secondary-750 {
2471
+ color: var(--pf-secondary-color-750);
2472
+ }
2473
+
2474
+ .bg-secondary-750 {
2475
+ background-color: var(--pf-secondary-color-750);
2476
+ }
2477
+
2528
2478
  .color-secondary-800 {
2529
2479
  color: var(--pf-secondary-color-800);
2530
2480
  }
@@ -2533,6 +2483,14 @@ p,
2533
2483
  background-color: var(--pf-secondary-color-800);
2534
2484
  }
2535
2485
 
2486
+ .color-secondary-850 {
2487
+ color: var(--pf-secondary-color-850);
2488
+ }
2489
+
2490
+ .bg-secondary-850 {
2491
+ background-color: var(--pf-secondary-color-850);
2492
+ }
2493
+
2536
2494
  .color-secondary-900 {
2537
2495
  color: var(--pf-secondary-color-900);
2538
2496
  }
@@ -2541,350 +2499,406 @@ p,
2541
2499
  background-color: var(--pf-secondary-color-900);
2542
2500
  }
2543
2501
 
2544
- .color-gray {
2545
- color: var(--pf-gray-color);
2502
+ .color-secondary-950 {
2503
+ color: var(--pf-secondary-color-950);
2546
2504
  }
2547
2505
 
2548
- .bg-gray {
2549
- background-color: var(--pf-gray-color);
2506
+ .bg-secondary-950 {
2507
+ background-color: var(--pf-secondary-color-950);
2550
2508
  }
2551
2509
 
2552
- .color-gray-100 {
2553
- color: var(--pf-gray-color-100);
2510
+ .color-secondary-1000 {
2511
+ color: var(--pf-secondary-color-1000);
2554
2512
  }
2555
2513
 
2556
- .bg-gray-100 {
2557
- background-color: var(--pf-gray-color-100);
2514
+ .bg-secondary-1000 {
2515
+ background-color: var(--pf-secondary-color-1000);
2558
2516
  }
2559
2517
 
2560
- .color-gray-200 {
2561
- color: var(--pf-gray-color-200);
2518
+ .color-tertiary {
2519
+ color: var(--pf-tertiary-color);
2562
2520
  }
2563
2521
 
2564
- .bg-gray-200 {
2565
- background-color: var(--pf-gray-color-200);
2522
+ .bg-tertiary {
2523
+ background-color: var(--pf-tertiary-color);
2566
2524
  }
2567
2525
 
2568
- .color-gray-300 {
2569
- color: var(--pf-gray-color-300);
2526
+ .color-tertiary-50 {
2527
+ color: var(--pf-tertiary-color-50);
2570
2528
  }
2571
2529
 
2572
- .bg-gray-300 {
2573
- background-color: var(--pf-gray-color-300);
2530
+ .bg-tertiary-50 {
2531
+ background-color: var(--pf-tertiary-color-50);
2574
2532
  }
2575
2533
 
2576
- .color-gray-400 {
2577
- color: var(--pf-gray-color-400);
2534
+ .color-tertiary-100 {
2535
+ color: var(--pf-tertiary-color-100);
2578
2536
  }
2579
2537
 
2580
- .bg-gray-400 {
2581
- background-color: var(--pf-gray-color-400);
2538
+ .bg-tertiary-100 {
2539
+ background-color: var(--pf-tertiary-color-100);
2582
2540
  }
2583
2541
 
2584
- .color-gray-500 {
2585
- color: var(--pf-gray-color-500);
2542
+ .color-tertiary-150 {
2543
+ color: var(--pf-tertiary-color-150);
2586
2544
  }
2587
2545
 
2588
- .bg-gray-500 {
2589
- background-color: var(--pf-gray-color-500);
2546
+ .bg-tertiary-150 {
2547
+ background-color: var(--pf-tertiary-color-150);
2590
2548
  }
2591
2549
 
2592
- .color-gray-600 {
2593
- color: var(--pf-gray-color-600);
2550
+ .color-tertiary-200 {
2551
+ color: var(--pf-tertiary-color-200);
2594
2552
  }
2595
2553
 
2596
- .bg-gray-600 {
2597
- background-color: var(--pf-gray-color-600);
2554
+ .bg-tertiary-200 {
2555
+ background-color: var(--pf-tertiary-color-200);
2598
2556
  }
2599
2557
 
2600
- .color-gray-700 {
2601
- color: var(--pf-gray-color-700);
2558
+ .color-tertiary-250 {
2559
+ color: var(--pf-tertiary-color-250);
2602
2560
  }
2603
2561
 
2604
- .bg-gray-700 {
2605
- background-color: var(--pf-gray-color-700);
2562
+ .bg-tertiary-250 {
2563
+ background-color: var(--pf-tertiary-color-250);
2606
2564
  }
2607
2565
 
2608
- .color-gray-800 {
2609
- color: var(--pf-gray-color-800);
2566
+ .color-tertiary-300 {
2567
+ color: var(--pf-tertiary-color-300);
2610
2568
  }
2611
2569
 
2612
- .bg-gray-800 {
2613
- background-color: var(--pf-gray-color-800);
2570
+ .bg-tertiary-300 {
2571
+ background-color: var(--pf-tertiary-color-300);
2614
2572
  }
2615
2573
 
2616
- .color-gray-900 {
2617
- color: var(--pf-gray-color-900);
2574
+ .color-tertiary-350 {
2575
+ color: var(--pf-tertiary-color-350);
2618
2576
  }
2619
2577
 
2620
- .bg-gray-900 {
2621
- background-color: var(--pf-gray-color-900);
2578
+ .bg-tertiary-350 {
2579
+ background-color: var(--pf-tertiary-color-350);
2622
2580
  }
2623
2581
 
2624
- .color-steel {
2625
- color: var(--pf-steel-color);
2582
+ .color-tertiary-400 {
2583
+ color: var(--pf-tertiary-color-400);
2626
2584
  }
2627
2585
 
2628
- .bg-steel {
2629
- background-color: var(--pf-steel-color);
2586
+ .bg-tertiary-400 {
2587
+ background-color: var(--pf-tertiary-color-400);
2630
2588
  }
2631
2589
 
2632
- .color-steel-100 {
2633
- color: var(--pf-steel-color-100);
2590
+ .color-tertiary-450 {
2591
+ color: var(--pf-tertiary-color-450);
2634
2592
  }
2635
2593
 
2636
- .bg-steel-100 {
2637
- background-color: var(--pf-steel-color-100);
2594
+ .bg-tertiary-450 {
2595
+ background-color: var(--pf-tertiary-color-450);
2638
2596
  }
2639
2597
 
2640
- .color-steel-200 {
2641
- color: var(--pf-steel-color-200);
2598
+ .color-tertiary-500 {
2599
+ color: var(--pf-tertiary-color-500);
2642
2600
  }
2643
2601
 
2644
- .bg-steel-200 {
2645
- background-color: var(--pf-steel-color-200);
2602
+ .bg-tertiary-500 {
2603
+ background-color: var(--pf-tertiary-color-500);
2646
2604
  }
2647
2605
 
2648
- .color-steel-300 {
2649
- color: var(--pf-steel-color-300);
2606
+ .color-tertiary-550 {
2607
+ color: var(--pf-tertiary-color-550);
2650
2608
  }
2651
2609
 
2652
- .bg-steel-300 {
2653
- background-color: var(--pf-steel-color-300);
2610
+ .bg-tertiary-550 {
2611
+ background-color: var(--pf-tertiary-color-550);
2654
2612
  }
2655
2613
 
2656
- .color-steel-400 {
2657
- color: var(--pf-steel-color-400);
2614
+ .color-tertiary-600 {
2615
+ color: var(--pf-tertiary-color-600);
2658
2616
  }
2659
2617
 
2660
- .bg-steel-400 {
2661
- background-color: var(--pf-steel-color-400);
2618
+ .bg-tertiary-600 {
2619
+ background-color: var(--pf-tertiary-color-600);
2662
2620
  }
2663
2621
 
2664
- .color-steel-500 {
2665
- color: var(--pf-steel-color-500);
2622
+ .color-tertiary-650 {
2623
+ color: var(--pf-tertiary-color-650);
2666
2624
  }
2667
2625
 
2668
- .bg-steel-500 {
2669
- background-color: var(--pf-steel-color-500);
2626
+ .bg-tertiary-650 {
2627
+ background-color: var(--pf-tertiary-color-650);
2670
2628
  }
2671
2629
 
2672
- .color-steel-600 {
2673
- color: var(--pf-steel-color-600);
2630
+ .color-tertiary-700 {
2631
+ color: var(--pf-tertiary-color-700);
2674
2632
  }
2675
2633
 
2676
- .bg-steel-600 {
2677
- background-color: var(--pf-steel-color-600);
2634
+ .bg-tertiary-700 {
2635
+ background-color: var(--pf-tertiary-color-700);
2678
2636
  }
2679
2637
 
2680
- .color-steel-700 {
2681
- color: var(--pf-steel-color-700);
2638
+ .color-tertiary-750 {
2639
+ color: var(--pf-tertiary-color-750);
2682
2640
  }
2683
2641
 
2684
- .bg-steel-700 {
2685
- background-color: var(--pf-steel-color-700);
2642
+ .bg-tertiary-750 {
2643
+ background-color: var(--pf-tertiary-color-750);
2686
2644
  }
2687
2645
 
2688
- .color-steel-800 {
2689
- color: var(--pf-steel-color-800);
2646
+ .color-tertiary-800 {
2647
+ color: var(--pf-tertiary-color-800);
2690
2648
  }
2691
2649
 
2692
- .bg-steel-800 {
2693
- background-color: var(--pf-steel-color-800);
2650
+ .bg-tertiary-800 {
2651
+ background-color: var(--pf-tertiary-color-800);
2694
2652
  }
2695
2653
 
2696
- .color-steel-900 {
2697
- color: var(--pf-steel-color-900);
2654
+ .color-tertiary-850 {
2655
+ color: var(--pf-tertiary-color-850);
2698
2656
  }
2699
2657
 
2700
- .bg-steel-900 {
2701
- background-color: var(--pf-steel-color-900);
2658
+ .bg-tertiary-850 {
2659
+ background-color: var(--pf-tertiary-color-850);
2702
2660
  }
2703
2661
 
2704
- .color-green {
2705
- color: var(--pf-green-color);
2662
+ .color-tertiary-900 {
2663
+ color: var(--pf-tertiary-color-900);
2706
2664
  }
2707
2665
 
2708
- .bg-green {
2709
- background-color: var(--pf-green-color);
2666
+ .bg-tertiary-900 {
2667
+ background-color: var(--pf-tertiary-color-900);
2710
2668
  }
2711
2669
 
2712
- .color-green-100 {
2713
- color: var(--pf-green-color-100);
2670
+ .color-tertiary-950 {
2671
+ color: var(--pf-tertiary-color-950);
2714
2672
  }
2715
2673
 
2716
- .bg-green-100 {
2717
- background-color: var(--pf-green-color-100);
2674
+ .bg-tertiary-950 {
2675
+ background-color: var(--pf-tertiary-color-950);
2718
2676
  }
2719
2677
 
2720
- .color-green-200 {
2721
- color: var(--pf-green-color-200);
2678
+ .color-tertiary-1000 {
2679
+ color: var(--pf-tertiary-color-1000);
2722
2680
  }
2723
2681
 
2724
- .bg-green-200 {
2725
- background-color: var(--pf-green-color-200);
2682
+ .bg-tertiary-1000 {
2683
+ background-color: var(--pf-tertiary-color-1000);
2726
2684
  }
2727
2685
 
2728
- .color-green-300 {
2729
- color: var(--pf-green-color-300);
2686
+ .color-gray {
2687
+ color: var(--pf-gray-color);
2730
2688
  }
2731
2689
 
2732
- .bg-green-300 {
2733
- background-color: var(--pf-green-color-300);
2690
+ .bg-gray {
2691
+ background-color: var(--pf-gray-color);
2734
2692
  }
2735
2693
 
2736
- .color-green-400 {
2737
- color: var(--pf-green-color-400);
2694
+ .color-gray-50 {
2695
+ color: var(--pf-gray-color-50);
2738
2696
  }
2739
2697
 
2740
- .bg-green-400 {
2741
- background-color: var(--pf-green-color-400);
2698
+ .bg-gray-50 {
2699
+ background-color: var(--pf-gray-color-50);
2742
2700
  }
2743
2701
 
2744
- .color-green-500 {
2745
- color: var(--pf-green-color-500);
2702
+ .color-gray-100 {
2703
+ color: var(--pf-gray-color-100);
2746
2704
  }
2747
2705
 
2748
- .bg-green-500 {
2749
- background-color: var(--pf-green-color-500);
2706
+ .bg-gray-100 {
2707
+ background-color: var(--pf-gray-color-100);
2750
2708
  }
2751
2709
 
2752
- .color-green-600 {
2753
- color: var(--pf-green-color-600);
2710
+ .color-gray-150 {
2711
+ color: var(--pf-gray-color-150);
2754
2712
  }
2755
2713
 
2756
- .bg-green-600 {
2757
- background-color: var(--pf-green-color-600);
2714
+ .bg-gray-150 {
2715
+ background-color: var(--pf-gray-color-150);
2758
2716
  }
2759
2717
 
2760
- .color-green-700 {
2761
- color: var(--pf-green-color-700);
2718
+ .color-gray-200 {
2719
+ color: var(--pf-gray-color-200);
2762
2720
  }
2763
2721
 
2764
- .bg-green-700 {
2765
- background-color: var(--pf-green-color-700);
2722
+ .bg-gray-200 {
2723
+ background-color: var(--pf-gray-color-200);
2766
2724
  }
2767
2725
 
2768
- .color-green-800 {
2769
- color: var(--pf-green-color-800);
2726
+ .color-gray-250 {
2727
+ color: var(--pf-gray-color-250);
2770
2728
  }
2771
2729
 
2772
- .bg-green-800 {
2773
- background-color: var(--pf-green-color-800);
2730
+ .bg-gray-250 {
2731
+ background-color: var(--pf-gray-color-250);
2774
2732
  }
2775
2733
 
2776
- .color-green-900 {
2777
- color: var(--pf-green-color-900);
2734
+ .color-gray-300 {
2735
+ color: var(--pf-gray-color-300);
2778
2736
  }
2779
2737
 
2780
- .bg-green-900 {
2781
- background-color: var(--pf-green-color-900);
2738
+ .bg-gray-300 {
2739
+ background-color: var(--pf-gray-color-300);
2782
2740
  }
2783
2741
 
2784
- .color-orange {
2785
- color: var(--pf-orange-color);
2742
+ .color-gray-350 {
2743
+ color: var(--pf-gray-color-350);
2786
2744
  }
2787
2745
 
2788
- .bg-orange {
2789
- background-color: var(--pf-orange-color);
2746
+ .bg-gray-350 {
2747
+ background-color: var(--pf-gray-color-350);
2790
2748
  }
2791
2749
 
2792
- .color-orange-100 {
2793
- color: var(--pf-orange-color-100);
2750
+ .color-gray-400 {
2751
+ color: var(--pf-gray-color-400);
2794
2752
  }
2795
2753
 
2796
- .bg-orange-100 {
2797
- background-color: var(--pf-orange-color-100);
2754
+ .bg-gray-400 {
2755
+ background-color: var(--pf-gray-color-400);
2798
2756
  }
2799
2757
 
2800
- .color-orange-200 {
2801
- color: var(--pf-orange-color-200);
2758
+ .color-gray-450 {
2759
+ color: var(--pf-gray-color-450);
2802
2760
  }
2803
2761
 
2804
- .bg-orange-200 {
2805
- background-color: var(--pf-orange-color-200);
2762
+ .bg-gray-450 {
2763
+ background-color: var(--pf-gray-color-450);
2806
2764
  }
2807
2765
 
2808
- .color-orange-300 {
2809
- color: var(--pf-orange-color-300);
2766
+ .color-gray-500 {
2767
+ color: var(--pf-gray-color-500);
2810
2768
  }
2811
2769
 
2812
- .bg-orange-300 {
2813
- background-color: var(--pf-orange-color-300);
2770
+ .bg-gray-500 {
2771
+ background-color: var(--pf-gray-color-500);
2814
2772
  }
2815
2773
 
2816
- .color-orange-400 {
2817
- color: var(--pf-orange-color-400);
2774
+ .color-gray-550 {
2775
+ color: var(--pf-gray-color-550);
2818
2776
  }
2819
2777
 
2820
- .bg-orange-400 {
2821
- background-color: var(--pf-orange-color-400);
2778
+ .bg-gray-550 {
2779
+ background-color: var(--pf-gray-color-550);
2822
2780
  }
2823
2781
 
2824
- .color-orange-500 {
2825
- color: var(--pf-orange-color-500);
2782
+ .color-gray-600 {
2783
+ color: var(--pf-gray-color-600);
2826
2784
  }
2827
2785
 
2828
- .bg-orange-500 {
2829
- background-color: var(--pf-orange-color-500);
2786
+ .bg-gray-600 {
2787
+ background-color: var(--pf-gray-color-600);
2830
2788
  }
2831
2789
 
2832
- .color-orange-600 {
2833
- color: var(--pf-orange-color-600);
2790
+ .color-gray-650 {
2791
+ color: var(--pf-gray-color-650);
2834
2792
  }
2835
2793
 
2836
- .bg-orange-600 {
2837
- background-color: var(--pf-orange-color-600);
2794
+ .bg-gray-650 {
2795
+ background-color: var(--pf-gray-color-650);
2838
2796
  }
2839
2797
 
2840
- .color-orange-700 {
2841
- color: var(--pf-orange-color-700);
2798
+ .color-gray-700 {
2799
+ color: var(--pf-gray-color-700);
2842
2800
  }
2843
2801
 
2844
- .bg-orange-700 {
2845
- background-color: var(--pf-orange-color-700);
2802
+ .bg-gray-700 {
2803
+ background-color: var(--pf-gray-color-700);
2846
2804
  }
2847
2805
 
2848
- .color-orange-800 {
2849
- color: var(--pf-orange-color-800);
2806
+ .color-gray-750 {
2807
+ color: var(--pf-gray-color-750);
2850
2808
  }
2851
2809
 
2852
- .bg-orange-800 {
2853
- background-color: var(--pf-orange-color-800);
2810
+ .bg-gray-750 {
2811
+ background-color: var(--pf-gray-color-750);
2854
2812
  }
2855
2813
 
2856
- .color-orange-900 {
2857
- color: var(--pf-orange-color-900);
2814
+ .color-gray-800 {
2815
+ color: var(--pf-gray-color-800);
2858
2816
  }
2859
2817
 
2860
- .bg-orange-900 {
2861
- background-color: var(--pf-orange-color-900);
2818
+ .bg-gray-800 {
2819
+ background-color: var(--pf-gray-color-800);
2862
2820
  }
2863
2821
 
2864
- .color-red {
2865
- color: var(--pf-red-color);
2822
+ .color-gray-850 {
2823
+ color: var(--pf-gray-color-850);
2866
2824
  }
2867
2825
 
2868
- .bg-red {
2869
- background-color: var(--pf-red-color);
2826
+ .bg-gray-850 {
2827
+ background-color: var(--pf-gray-color-850);
2870
2828
  }
2871
2829
 
2872
- .color-red-100 {
2873
- color: var(--pf-red-color-100);
2830
+ .color-gray-900 {
2831
+ color: var(--pf-gray-color-900);
2874
2832
  }
2875
2833
 
2876
- .bg-red-100 {
2877
- background-color: var(--pf-red-color-100);
2834
+ .bg-gray-900 {
2835
+ background-color: var(--pf-gray-color-900);
2878
2836
  }
2879
2837
 
2880
- .color-red-200 {
2881
- color: var(--pf-red-color-200);
2838
+ .color-gray-950 {
2839
+ color: var(--pf-gray-color-950);
2882
2840
  }
2883
2841
 
2884
- .bg-red-200 {
2842
+ .bg-gray-950 {
2843
+ background-color: var(--pf-gray-color-950);
2844
+ }
2845
+
2846
+ .color-gray-1000 {
2847
+ color: var(--pf-gray-color-1000);
2848
+ }
2849
+
2850
+ .bg-gray-1000 {
2851
+ background-color: var(--pf-gray-color-1000);
2852
+ }
2853
+
2854
+ .color-red {
2855
+ color: var(--pf-red-color);
2856
+ }
2857
+
2858
+ .bg-red {
2859
+ background-color: var(--pf-red-color);
2860
+ }
2861
+
2862
+ .color-red-50 {
2863
+ color: var(--pf-red-color-50);
2864
+ }
2865
+
2866
+ .bg-red-50 {
2867
+ background-color: var(--pf-red-color-50);
2868
+ }
2869
+
2870
+ .color-red-100 {
2871
+ color: var(--pf-red-color-100);
2872
+ }
2873
+
2874
+ .bg-red-100 {
2875
+ background-color: var(--pf-red-color-100);
2876
+ }
2877
+
2878
+ .color-red-150 {
2879
+ color: var(--pf-red-color-150);
2880
+ }
2881
+
2882
+ .bg-red-150 {
2883
+ background-color: var(--pf-red-color-150);
2884
+ }
2885
+
2886
+ .color-red-200 {
2887
+ color: var(--pf-red-color-200);
2888
+ }
2889
+
2890
+ .bg-red-200 {
2885
2891
  background-color: var(--pf-red-color-200);
2886
2892
  }
2887
2893
 
2894
+ .color-red-250 {
2895
+ color: var(--pf-red-color-250);
2896
+ }
2897
+
2898
+ .bg-red-250 {
2899
+ background-color: var(--pf-red-color-250);
2900
+ }
2901
+
2888
2902
  .color-red-300 {
2889
2903
  color: var(--pf-red-color-300);
2890
2904
  }
@@ -2893,6 +2907,14 @@ p,
2893
2907
  background-color: var(--pf-red-color-300);
2894
2908
  }
2895
2909
 
2910
+ .color-red-350 {
2911
+ color: var(--pf-red-color-350);
2912
+ }
2913
+
2914
+ .bg-red-350 {
2915
+ background-color: var(--pf-red-color-350);
2916
+ }
2917
+
2896
2918
  .color-red-400 {
2897
2919
  color: var(--pf-red-color-400);
2898
2920
  }
@@ -2901,6 +2923,14 @@ p,
2901
2923
  background-color: var(--pf-red-color-400);
2902
2924
  }
2903
2925
 
2926
+ .color-red-450 {
2927
+ color: var(--pf-red-color-450);
2928
+ }
2929
+
2930
+ .bg-red-450 {
2931
+ background-color: var(--pf-red-color-450);
2932
+ }
2933
+
2904
2934
  .color-red-500 {
2905
2935
  color: var(--pf-red-color-500);
2906
2936
  }
@@ -2909,6 +2939,14 @@ p,
2909
2939
  background-color: var(--pf-red-color-500);
2910
2940
  }
2911
2941
 
2942
+ .color-red-550 {
2943
+ color: var(--pf-red-color-550);
2944
+ }
2945
+
2946
+ .bg-red-550 {
2947
+ background-color: var(--pf-red-color-550);
2948
+ }
2949
+
2912
2950
  .color-red-600 {
2913
2951
  color: var(--pf-red-color-600);
2914
2952
  }
@@ -2917,6 +2955,14 @@ p,
2917
2955
  background-color: var(--pf-red-color-600);
2918
2956
  }
2919
2957
 
2958
+ .color-red-650 {
2959
+ color: var(--pf-red-color-650);
2960
+ }
2961
+
2962
+ .bg-red-650 {
2963
+ background-color: var(--pf-red-color-650);
2964
+ }
2965
+
2920
2966
  .color-red-700 {
2921
2967
  color: var(--pf-red-color-700);
2922
2968
  }
@@ -2925,6 +2971,14 @@ p,
2925
2971
  background-color: var(--pf-red-color-700);
2926
2972
  }
2927
2973
 
2974
+ .color-red-750 {
2975
+ color: var(--pf-red-color-750);
2976
+ }
2977
+
2978
+ .bg-red-750 {
2979
+ background-color: var(--pf-red-color-750);
2980
+ }
2981
+
2928
2982
  .color-red-800 {
2929
2983
  color: var(--pf-red-color-800);
2930
2984
  }
@@ -2933,6 +2987,14 @@ p,
2933
2987
  background-color: var(--pf-red-color-800);
2934
2988
  }
2935
2989
 
2990
+ .color-red-850 {
2991
+ color: var(--pf-red-color-850);
2992
+ }
2993
+
2994
+ .bg-red-850 {
2995
+ background-color: var(--pf-red-color-850);
2996
+ }
2997
+
2936
2998
  .color-red-900 {
2937
2999
  color: var(--pf-red-color-900);
2938
3000
  }
@@ -2941,6 +3003,694 @@ p,
2941
3003
  background-color: var(--pf-red-color-900);
2942
3004
  }
2943
3005
 
3006
+ .color-red-950 {
3007
+ color: var(--pf-red-color-950);
3008
+ }
3009
+
3010
+ .bg-red-950 {
3011
+ background-color: var(--pf-red-color-950);
3012
+ }
3013
+
3014
+ .color-red-1000 {
3015
+ color: var(--pf-red-color-1000);
3016
+ }
3017
+
3018
+ .bg-red-1000 {
3019
+ background-color: var(--pf-red-color-1000);
3020
+ }
3021
+
3022
+ .color-orange {
3023
+ color: var(--pf-orange-color);
3024
+ }
3025
+
3026
+ .bg-orange {
3027
+ background-color: var(--pf-orange-color);
3028
+ }
3029
+
3030
+ .color-orange-50 {
3031
+ color: var(--pf-orange-color-50);
3032
+ }
3033
+
3034
+ .bg-orange-50 {
3035
+ background-color: var(--pf-orange-color-50);
3036
+ }
3037
+
3038
+ .color-orange-100 {
3039
+ color: var(--pf-orange-color-100);
3040
+ }
3041
+
3042
+ .bg-orange-100 {
3043
+ background-color: var(--pf-orange-color-100);
3044
+ }
3045
+
3046
+ .color-orange-150 {
3047
+ color: var(--pf-orange-color-150);
3048
+ }
3049
+
3050
+ .bg-orange-150 {
3051
+ background-color: var(--pf-orange-color-150);
3052
+ }
3053
+
3054
+ .color-orange-200 {
3055
+ color: var(--pf-orange-color-200);
3056
+ }
3057
+
3058
+ .bg-orange-200 {
3059
+ background-color: var(--pf-orange-color-200);
3060
+ }
3061
+
3062
+ .color-orange-250 {
3063
+ color: var(--pf-orange-color-250);
3064
+ }
3065
+
3066
+ .bg-orange-250 {
3067
+ background-color: var(--pf-orange-color-250);
3068
+ }
3069
+
3070
+ .color-orange-300 {
3071
+ color: var(--pf-orange-color-300);
3072
+ }
3073
+
3074
+ .bg-orange-300 {
3075
+ background-color: var(--pf-orange-color-300);
3076
+ }
3077
+
3078
+ .color-orange-350 {
3079
+ color: var(--pf-orange-color-350);
3080
+ }
3081
+
3082
+ .bg-orange-350 {
3083
+ background-color: var(--pf-orange-color-350);
3084
+ }
3085
+
3086
+ .color-orange-400 {
3087
+ color: var(--pf-orange-color-400);
3088
+ }
3089
+
3090
+ .bg-orange-400 {
3091
+ background-color: var(--pf-orange-color-400);
3092
+ }
3093
+
3094
+ .color-orange-450 {
3095
+ color: var(--pf-orange-color-450);
3096
+ }
3097
+
3098
+ .bg-orange-450 {
3099
+ background-color: var(--pf-orange-color-450);
3100
+ }
3101
+
3102
+ .color-orange-500 {
3103
+ color: var(--pf-orange-color-500);
3104
+ }
3105
+
3106
+ .bg-orange-500 {
3107
+ background-color: var(--pf-orange-color-500);
3108
+ }
3109
+
3110
+ .color-orange-550 {
3111
+ color: var(--pf-orange-color-550);
3112
+ }
3113
+
3114
+ .bg-orange-550 {
3115
+ background-color: var(--pf-orange-color-550);
3116
+ }
3117
+
3118
+ .color-orange-600 {
3119
+ color: var(--pf-orange-color-600);
3120
+ }
3121
+
3122
+ .bg-orange-600 {
3123
+ background-color: var(--pf-orange-color-600);
3124
+ }
3125
+
3126
+ .color-orange-650 {
3127
+ color: var(--pf-orange-color-650);
3128
+ }
3129
+
3130
+ .bg-orange-650 {
3131
+ background-color: var(--pf-orange-color-650);
3132
+ }
3133
+
3134
+ .color-orange-700 {
3135
+ color: var(--pf-orange-color-700);
3136
+ }
3137
+
3138
+ .bg-orange-700 {
3139
+ background-color: var(--pf-orange-color-700);
3140
+ }
3141
+
3142
+ .color-orange-750 {
3143
+ color: var(--pf-orange-color-750);
3144
+ }
3145
+
3146
+ .bg-orange-750 {
3147
+ background-color: var(--pf-orange-color-750);
3148
+ }
3149
+
3150
+ .color-orange-800 {
3151
+ color: var(--pf-orange-color-800);
3152
+ }
3153
+
3154
+ .bg-orange-800 {
3155
+ background-color: var(--pf-orange-color-800);
3156
+ }
3157
+
3158
+ .color-orange-850 {
3159
+ color: var(--pf-orange-color-850);
3160
+ }
3161
+
3162
+ .bg-orange-850 {
3163
+ background-color: var(--pf-orange-color-850);
3164
+ }
3165
+
3166
+ .color-orange-900 {
3167
+ color: var(--pf-orange-color-900);
3168
+ }
3169
+
3170
+ .bg-orange-900 {
3171
+ background-color: var(--pf-orange-color-900);
3172
+ }
3173
+
3174
+ .color-orange-950 {
3175
+ color: var(--pf-orange-color-950);
3176
+ }
3177
+
3178
+ .bg-orange-950 {
3179
+ background-color: var(--pf-orange-color-950);
3180
+ }
3181
+
3182
+ .color-orange-1000 {
3183
+ color: var(--pf-orange-color-1000);
3184
+ }
3185
+
3186
+ .bg-orange-1000 {
3187
+ background-color: var(--pf-orange-color-1000);
3188
+ }
3189
+
3190
+ .color-yellow {
3191
+ color: var(--pf-yellow-color);
3192
+ }
3193
+
3194
+ .bg-yellow {
3195
+ background-color: var(--pf-yellow-color);
3196
+ }
3197
+
3198
+ .color-yellow-50 {
3199
+ color: var(--pf-yellow-color-50);
3200
+ }
3201
+
3202
+ .bg-yellow-50 {
3203
+ background-color: var(--pf-yellow-color-50);
3204
+ }
3205
+
3206
+ .color-yellow-100 {
3207
+ color: var(--pf-yellow-color-100);
3208
+ }
3209
+
3210
+ .bg-yellow-100 {
3211
+ background-color: var(--pf-yellow-color-100);
3212
+ }
3213
+
3214
+ .color-yellow-150 {
3215
+ color: var(--pf-yellow-color-150);
3216
+ }
3217
+
3218
+ .bg-yellow-150 {
3219
+ background-color: var(--pf-yellow-color-150);
3220
+ }
3221
+
3222
+ .color-yellow-200 {
3223
+ color: var(--pf-yellow-color-200);
3224
+ }
3225
+
3226
+ .bg-yellow-200 {
3227
+ background-color: var(--pf-yellow-color-200);
3228
+ }
3229
+
3230
+ .color-yellow-250 {
3231
+ color: var(--pf-yellow-color-250);
3232
+ }
3233
+
3234
+ .bg-yellow-250 {
3235
+ background-color: var(--pf-yellow-color-250);
3236
+ }
3237
+
3238
+ .color-yellow-300 {
3239
+ color: var(--pf-yellow-color-300);
3240
+ }
3241
+
3242
+ .bg-yellow-300 {
3243
+ background-color: var(--pf-yellow-color-300);
3244
+ }
3245
+
3246
+ .color-yellow-350 {
3247
+ color: var(--pf-yellow-color-350);
3248
+ }
3249
+
3250
+ .bg-yellow-350 {
3251
+ background-color: var(--pf-yellow-color-350);
3252
+ }
3253
+
3254
+ .color-yellow-400 {
3255
+ color: var(--pf-yellow-color-400);
3256
+ }
3257
+
3258
+ .bg-yellow-400 {
3259
+ background-color: var(--pf-yellow-color-400);
3260
+ }
3261
+
3262
+ .color-yellow-450 {
3263
+ color: var(--pf-yellow-color-450);
3264
+ }
3265
+
3266
+ .bg-yellow-450 {
3267
+ background-color: var(--pf-yellow-color-450);
3268
+ }
3269
+
3270
+ .color-yellow-500 {
3271
+ color: var(--pf-yellow-color-500);
3272
+ }
3273
+
3274
+ .bg-yellow-500 {
3275
+ background-color: var(--pf-yellow-color-500);
3276
+ }
3277
+
3278
+ .color-yellow-550 {
3279
+ color: var(--pf-yellow-color-550);
3280
+ }
3281
+
3282
+ .bg-yellow-550 {
3283
+ background-color: var(--pf-yellow-color-550);
3284
+ }
3285
+
3286
+ .color-yellow-600 {
3287
+ color: var(--pf-yellow-color-600);
3288
+ }
3289
+
3290
+ .bg-yellow-600 {
3291
+ background-color: var(--pf-yellow-color-600);
3292
+ }
3293
+
3294
+ .color-yellow-650 {
3295
+ color: var(--pf-yellow-color-650);
3296
+ }
3297
+
3298
+ .bg-yellow-650 {
3299
+ background-color: var(--pf-yellow-color-650);
3300
+ }
3301
+
3302
+ .color-yellow-700 {
3303
+ color: var(--pf-yellow-color-700);
3304
+ }
3305
+
3306
+ .bg-yellow-700 {
3307
+ background-color: var(--pf-yellow-color-700);
3308
+ }
3309
+
3310
+ .color-yellow-750 {
3311
+ color: var(--pf-yellow-color-750);
3312
+ }
3313
+
3314
+ .bg-yellow-750 {
3315
+ background-color: var(--pf-yellow-color-750);
3316
+ }
3317
+
3318
+ .color-yellow-800 {
3319
+ color: var(--pf-yellow-color-800);
3320
+ }
3321
+
3322
+ .bg-yellow-800 {
3323
+ background-color: var(--pf-yellow-color-800);
3324
+ }
3325
+
3326
+ .color-yellow-850 {
3327
+ color: var(--pf-yellow-color-850);
3328
+ }
3329
+
3330
+ .bg-yellow-850 {
3331
+ background-color: var(--pf-yellow-color-850);
3332
+ }
3333
+
3334
+ .color-yellow-900 {
3335
+ color: var(--pf-yellow-color-900);
3336
+ }
3337
+
3338
+ .bg-yellow-900 {
3339
+ background-color: var(--pf-yellow-color-900);
3340
+ }
3341
+
3342
+ .color-yellow-950 {
3343
+ color: var(--pf-yellow-color-950);
3344
+ }
3345
+
3346
+ .bg-yellow-950 {
3347
+ background-color: var(--pf-yellow-color-950);
3348
+ }
3349
+
3350
+ .color-yellow-1000 {
3351
+ color: var(--pf-yellow-color-1000);
3352
+ }
3353
+
3354
+ .bg-yellow-1000 {
3355
+ background-color: var(--pf-yellow-color-1000);
3356
+ }
3357
+
3358
+ .color-green {
3359
+ color: var(--pf-green-color);
3360
+ }
3361
+
3362
+ .bg-green {
3363
+ background-color: var(--pf-green-color);
3364
+ }
3365
+
3366
+ .color-green-50 {
3367
+ color: var(--pf-green-color-50);
3368
+ }
3369
+
3370
+ .bg-green-50 {
3371
+ background-color: var(--pf-green-color-50);
3372
+ }
3373
+
3374
+ .color-green-100 {
3375
+ color: var(--pf-green-color-100);
3376
+ }
3377
+
3378
+ .bg-green-100 {
3379
+ background-color: var(--pf-green-color-100);
3380
+ }
3381
+
3382
+ .color-green-150 {
3383
+ color: var(--pf-green-color-150);
3384
+ }
3385
+
3386
+ .bg-green-150 {
3387
+ background-color: var(--pf-green-color-150);
3388
+ }
3389
+
3390
+ .color-green-200 {
3391
+ color: var(--pf-green-color-200);
3392
+ }
3393
+
3394
+ .bg-green-200 {
3395
+ background-color: var(--pf-green-color-200);
3396
+ }
3397
+
3398
+ .color-green-250 {
3399
+ color: var(--pf-green-color-250);
3400
+ }
3401
+
3402
+ .bg-green-250 {
3403
+ background-color: var(--pf-green-color-250);
3404
+ }
3405
+
3406
+ .color-green-300 {
3407
+ color: var(--pf-green-color-300);
3408
+ }
3409
+
3410
+ .bg-green-300 {
3411
+ background-color: var(--pf-green-color-300);
3412
+ }
3413
+
3414
+ .color-green-350 {
3415
+ color: var(--pf-green-color-350);
3416
+ }
3417
+
3418
+ .bg-green-350 {
3419
+ background-color: var(--pf-green-color-350);
3420
+ }
3421
+
3422
+ .color-green-400 {
3423
+ color: var(--pf-green-color-400);
3424
+ }
3425
+
3426
+ .bg-green-400 {
3427
+ background-color: var(--pf-green-color-400);
3428
+ }
3429
+
3430
+ .color-green-450 {
3431
+ color: var(--pf-green-color-450);
3432
+ }
3433
+
3434
+ .bg-green-450 {
3435
+ background-color: var(--pf-green-color-450);
3436
+ }
3437
+
3438
+ .color-green-500 {
3439
+ color: var(--pf-green-color-500);
3440
+ }
3441
+
3442
+ .bg-green-500 {
3443
+ background-color: var(--pf-green-color-500);
3444
+ }
3445
+
3446
+ .color-green-550 {
3447
+ color: var(--pf-green-color-550);
3448
+ }
3449
+
3450
+ .bg-green-550 {
3451
+ background-color: var(--pf-green-color-550);
3452
+ }
3453
+
3454
+ .color-green-600 {
3455
+ color: var(--pf-green-color-600);
3456
+ }
3457
+
3458
+ .bg-green-600 {
3459
+ background-color: var(--pf-green-color-600);
3460
+ }
3461
+
3462
+ .color-green-650 {
3463
+ color: var(--pf-green-color-650);
3464
+ }
3465
+
3466
+ .bg-green-650 {
3467
+ background-color: var(--pf-green-color-650);
3468
+ }
3469
+
3470
+ .color-green-700 {
3471
+ color: var(--pf-green-color-700);
3472
+ }
3473
+
3474
+ .bg-green-700 {
3475
+ background-color: var(--pf-green-color-700);
3476
+ }
3477
+
3478
+ .color-green-750 {
3479
+ color: var(--pf-green-color-750);
3480
+ }
3481
+
3482
+ .bg-green-750 {
3483
+ background-color: var(--pf-green-color-750);
3484
+ }
3485
+
3486
+ .color-green-800 {
3487
+ color: var(--pf-green-color-800);
3488
+ }
3489
+
3490
+ .bg-green-800 {
3491
+ background-color: var(--pf-green-color-800);
3492
+ }
3493
+
3494
+ .color-green-850 {
3495
+ color: var(--pf-green-color-850);
3496
+ }
3497
+
3498
+ .bg-green-850 {
3499
+ background-color: var(--pf-green-color-850);
3500
+ }
3501
+
3502
+ .color-green-900 {
3503
+ color: var(--pf-green-color-900);
3504
+ }
3505
+
3506
+ .bg-green-900 {
3507
+ background-color: var(--pf-green-color-900);
3508
+ }
3509
+
3510
+ .color-green-950 {
3511
+ color: var(--pf-green-color-950);
3512
+ }
3513
+
3514
+ .bg-green-950 {
3515
+ background-color: var(--pf-green-color-950);
3516
+ }
3517
+
3518
+ .color-green-1000 {
3519
+ color: var(--pf-green-color-1000);
3520
+ }
3521
+
3522
+ .bg-green-1000 {
3523
+ background-color: var(--pf-green-color-1000);
3524
+ }
3525
+
3526
+ .color-purple {
3527
+ color: var(--pf-purple-color);
3528
+ }
3529
+
3530
+ .bg-purple {
3531
+ background-color: var(--pf-purple-color);
3532
+ }
3533
+
3534
+ .color-purple-50 {
3535
+ color: var(--pf-purple-color-50);
3536
+ }
3537
+
3538
+ .bg-purple-50 {
3539
+ background-color: var(--pf-purple-color-50);
3540
+ }
3541
+
3542
+ .color-purple-100 {
3543
+ color: var(--pf-purple-color-100);
3544
+ }
3545
+
3546
+ .bg-purple-100 {
3547
+ background-color: var(--pf-purple-color-100);
3548
+ }
3549
+
3550
+ .color-purple-150 {
3551
+ color: var(--pf-purple-color-150);
3552
+ }
3553
+
3554
+ .bg-purple-150 {
3555
+ background-color: var(--pf-purple-color-150);
3556
+ }
3557
+
3558
+ .color-purple-200 {
3559
+ color: var(--pf-purple-color-200);
3560
+ }
3561
+
3562
+ .bg-purple-200 {
3563
+ background-color: var(--pf-purple-color-200);
3564
+ }
3565
+
3566
+ .color-purple-250 {
3567
+ color: var(--pf-purple-color-250);
3568
+ }
3569
+
3570
+ .bg-purple-250 {
3571
+ background-color: var(--pf-purple-color-250);
3572
+ }
3573
+
3574
+ .color-purple-300 {
3575
+ color: var(--pf-purple-color-300);
3576
+ }
3577
+
3578
+ .bg-purple-300 {
3579
+ background-color: var(--pf-purple-color-300);
3580
+ }
3581
+
3582
+ .color-purple-350 {
3583
+ color: var(--pf-purple-color-350);
3584
+ }
3585
+
3586
+ .bg-purple-350 {
3587
+ background-color: var(--pf-purple-color-350);
3588
+ }
3589
+
3590
+ .color-purple-400 {
3591
+ color: var(--pf-purple-color-400);
3592
+ }
3593
+
3594
+ .bg-purple-400 {
3595
+ background-color: var(--pf-purple-color-400);
3596
+ }
3597
+
3598
+ .color-purple-450 {
3599
+ color: var(--pf-purple-color-450);
3600
+ }
3601
+
3602
+ .bg-purple-450 {
3603
+ background-color: var(--pf-purple-color-450);
3604
+ }
3605
+
3606
+ .color-purple-500 {
3607
+ color: var(--pf-purple-color-500);
3608
+ }
3609
+
3610
+ .bg-purple-500 {
3611
+ background-color: var(--pf-purple-color-500);
3612
+ }
3613
+
3614
+ .color-purple-550 {
3615
+ color: var(--pf-purple-color-550);
3616
+ }
3617
+
3618
+ .bg-purple-550 {
3619
+ background-color: var(--pf-purple-color-550);
3620
+ }
3621
+
3622
+ .color-purple-600 {
3623
+ color: var(--pf-purple-color-600);
3624
+ }
3625
+
3626
+ .bg-purple-600 {
3627
+ background-color: var(--pf-purple-color-600);
3628
+ }
3629
+
3630
+ .color-purple-650 {
3631
+ color: var(--pf-purple-color-650);
3632
+ }
3633
+
3634
+ .bg-purple-650 {
3635
+ background-color: var(--pf-purple-color-650);
3636
+ }
3637
+
3638
+ .color-purple-700 {
3639
+ color: var(--pf-purple-color-700);
3640
+ }
3641
+
3642
+ .bg-purple-700 {
3643
+ background-color: var(--pf-purple-color-700);
3644
+ }
3645
+
3646
+ .color-purple-750 {
3647
+ color: var(--pf-purple-color-750);
3648
+ }
3649
+
3650
+ .bg-purple-750 {
3651
+ background-color: var(--pf-purple-color-750);
3652
+ }
3653
+
3654
+ .color-purple-800 {
3655
+ color: var(--pf-purple-color-800);
3656
+ }
3657
+
3658
+ .bg-purple-800 {
3659
+ background-color: var(--pf-purple-color-800);
3660
+ }
3661
+
3662
+ .color-purple-850 {
3663
+ color: var(--pf-purple-color-850);
3664
+ }
3665
+
3666
+ .bg-purple-850 {
3667
+ background-color: var(--pf-purple-color-850);
3668
+ }
3669
+
3670
+ .color-purple-900 {
3671
+ color: var(--pf-purple-color-900);
3672
+ }
3673
+
3674
+ .bg-purple-900 {
3675
+ background-color: var(--pf-purple-color-900);
3676
+ }
3677
+
3678
+ .color-purple-950 {
3679
+ color: var(--pf-purple-color-950);
3680
+ }
3681
+
3682
+ .bg-purple-950 {
3683
+ background-color: var(--pf-purple-color-950);
3684
+ }
3685
+
3686
+ .color-purple-1000 {
3687
+ color: var(--pf-purple-color-1000);
3688
+ }
3689
+
3690
+ .bg-purple-1000 {
3691
+ background-color: var(--pf-purple-color-1000);
3692
+ }
3693
+
2944
3694
  .color-success {
2945
3695
  color: var(--pf-success-color);
2946
3696
  }
@@ -2981,6 +3731,14 @@ p,
2981
3731
  background-color: var(--pf-error-color);
2982
3732
  }
2983
3733
 
3734
+ .color-brand {
3735
+ color: var(--pf-brand-color);
3736
+ }
3737
+
3738
+ .bg-brand {
3739
+ background-color: var(--pf-brand-color);
3740
+ }
3741
+
2984
3742
  .link-color {
2985
3743
  color: var(--pf-link-color);
2986
3744
  }