@indico-data/design-system 2.43.1 → 2.45.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 +1778 -1019
  17. package/lib/index.d.ts +148 -885
  18. package/lib/index.esm.css +1778 -1019
  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 +11 -9
  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 +7 -18
  102. package/src/styles/index.scss +1 -2
  103. package/src/styles/storybook.scss +1 -1
  104. package/src/styles/variables/_borders.scss +7 -7
  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.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] {
226
- --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);
283
+ :root [data-theme=dark],
284
+ :root {
285
+ --pf-horizontal-line-color: var(--pf-tertiary-color-800);
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,29 +390,24 @@
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
- --pf-background-color-light: var(--pf-primary-color-300);
399
+ --pf-background-color-light: var(--pf-primary-color);
339
400
  --pf-background-color: var(--pf-primary-color-600);
340
401
  --pf-background-color-dark: var(--pf-primary-color-900);
341
402
  --pf-background-secondary-color-light: var(--pf-secondary-color-300);
342
403
  --pf-background-color-secondary: var(--pf-secondary-color-500);
343
- --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
404
+ --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
344
405
  --pf-font-color: var(--pf-gray-color);
345
406
  --pf-font-color-emphasis: var(--pf-gray-color-300);
346
407
  --pf-font-color-light: var(--pf-gray-color-100);
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,28 @@ 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);
936
- --pf-table-highlighted-color: var(--pf-primary-color-400);
798
+ --pf-table-checked-color: var(--pf-secondary-color-100);
799
+ --pf-table-highlighted-color: var(--pf-primary-color);
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);
801
+ --pf-table-font-size: var(--pf-font-size-body2);
938
802
  }
939
803
 
940
804
  .table-loading {
805
+ background-color: var(--pf-table-background-color);
941
806
  color: var(--pf-table-font-color);
807
+ width: 100%;
808
+ height: 50px;
809
+ display: flex;
810
+ align-items: center;
811
+ justify-content: center;
942
812
  }
943
813
 
944
814
  .table {
@@ -1034,65 +904,8 @@ a:hover, .link:hover {
1034
904
  background-color: var(--pf-table-highlighted-color) !important;
1035
905
  }
1036
906
 
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
907
  .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
908
  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
909
  }
1097
910
  .input--has-icon {
1098
911
  padding-left: var(--pf-padding-7);
@@ -1104,7 +917,7 @@ a:hover, .link:hover {
1104
917
  .form-control .help-text {
1105
918
  margin-top: var(--pf-margin-2);
1106
919
  margin-bottom: var(--pf-margin-2);
1107
- color: var(--pf-input-help-text-color);
920
+ color: var(--pf-form-input-help-color);
1108
921
  font-size: var(--pf-font-size-subtitle2);
1109
922
  }
1110
923
  .form-control .input-wrapper {
@@ -1114,52 +927,24 @@ a:hover, .link:hover {
1114
927
  position: absolute;
1115
928
  top: 10px;
1116
929
  left: var(--pf-margin-2);
1117
- color: var(--pf-input-text-color);
930
+ color: var(--pf-form-input-color);
1118
931
  }
1119
932
  .form-control .input-wrapper .clearable-icon {
1120
933
  position: absolute;
1121
934
  top: var(--pf-margin-3);
1122
935
  right: var(--pf-margin-2);
1123
- color: var(--pf-input-text-color);
936
+ color: var(--pf-form-input-color);
1124
937
  cursor: pointer;
1125
938
  }
1126
939
  .form-control .form-label {
1127
940
  margin-bottom: var(--pf-margin-2);
1128
941
  }
1129
942
 
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);
943
+ :root {
1140
944
  --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
945
  }
1154
946
 
1155
947
  .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
948
  padding-right: var(--pf-number-input-padding);
1164
949
  padding-left: var(--pf-number-input-padding);
1165
950
  }
@@ -1169,37 +954,11 @@ a:hover, .link:hover {
1169
954
  .number-input--has-icon {
1170
955
  padding-left: var(--pf-padding-7);
1171
956
  }
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
957
 
1199
958
  .form-control .help-text {
1200
959
  margin-top: var(--pf-margin-2);
1201
960
  margin-bottom: var(--pf-margin-2);
1202
- color: var(--pf-number-input-help-text-color);
961
+ color: var(--pf-form-input-help-color);
1203
962
  font-size: var(--pf-font-size-subtitle2);
1204
963
  }
1205
964
  .form-control .number-input-wrapper {
@@ -1209,32 +968,27 @@ a:hover, .link:hover {
1209
968
  position: absolute;
1210
969
  top: 10px;
1211
970
  left: var(--pf-margin-2);
1212
- color: var(--pf-number-input-text-color);
971
+ color: var(--pf-form-input-color);
1213
972
  }
1214
973
  .form-control .number-input-wrapper .clearable-icon {
1215
974
  position: absolute;
1216
975
  top: var(--pf-margin-3);
1217
976
  right: var(--pf-margin-2);
1218
- color: var(--pf-number-input-text-color);
977
+ color: var(--pf-form-input-color);
1219
978
  cursor: pointer;
1220
979
  }
1221
980
  .form-control .form-label {
1222
981
  margin-bottom: var(--pf-margin-2);
1223
982
  }
1224
983
 
1225
- :root,
1226
- :root [data-theme=light],
1227
- :root [data-theme=dark] {
1228
- --pf-radio-background-color: var(--pf-white-color);
984
+ :root [data-theme=light] {
1229
985
  --pf-radio-check-color: var(--pf-primary-color);
1230
- --pf-radio-border-color: var(--pf-form-input-border-color);
1231
986
  --pf-radio-disabled-color: var(--pf-gray-color-400);
1232
987
  }
1233
988
 
1234
- :root [data-theme=dark] {
1235
- --pf-radio-background-color: var(--pf-primary-color-600);
989
+ :root [data-theme=dark],
990
+ :root {
1236
991
  --pf-radio-check-color: var(--pf-white-color);
1237
- --pf-radio-border-color: var(--pf-form-input-border-color);
1238
992
  --pf-radio-disabled-color: var(--pf-gray-color-300);
1239
993
  }
1240
994
 
@@ -1272,9 +1026,9 @@ a:hover, .link:hover {
1272
1026
  top: 0;
1273
1027
  width: 18px;
1274
1028
  height: 18px;
1275
- border: 1px solid var(--pf-radio-border-color);
1029
+ border: 1px solid var(--pf-form-input-border-color);
1276
1030
  border-radius: 100%;
1277
- background: var(--pf-radio-background-color);
1031
+ background: var(--pf-form-input-background-color);
1278
1032
  }
1279
1033
  .form-control [type=radio]:checked + label:after,
1280
1034
  .form-control [type=radio]:not(:checked) + label:after {
@@ -1311,19 +1065,14 @@ a:hover, .link:hover {
1311
1065
  background: var(--pf-radio-disabled-color);
1312
1066
  }
1313
1067
 
1314
- :root,
1315
- :root [data-theme=light],
1316
- :root [data-theme=dark] {
1317
- --pf-checkbox-background-color: var(--pf-white-color);
1068
+ :root [data-theme=light] {
1318
1069
  --pf-checkbox-check-color: var(--pf-primary-color);
1319
- --pf-checkbox-border-color: var(--pf-form-input-border-color);
1320
1070
  --pf-checkbox-disabled-color: var(--pf-gray-color-400);
1321
1071
  }
1322
1072
 
1323
- :root [data-theme=dark] {
1324
- --pf-checkbox-background-color: var(--pf-primary-color-500);
1073
+ :root [data-theme=dark],
1074
+ :root {
1325
1075
  --pf-checkbox-check-color: var(--pf-white-color);
1326
- --pf-checkbox-border-color: var(--pf-form-input-border-color);
1327
1076
  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
1328
1077
  }
1329
1078
 
@@ -1361,9 +1110,9 @@ a:hover, .link:hover {
1361
1110
  top: 0;
1362
1111
  width: 18px;
1363
1112
  height: 18px;
1364
- border: 1px solid var(--pf-checkbox-border-color);
1113
+ border: 1px solid var(--pf-form-input-border-color);
1365
1114
  border-radius: var(--pf-rounded);
1366
- background: var(--pf-checkbox-background-color);
1115
+ background: var(--pf-form-input-background-color);
1367
1116
  }
1368
1117
  .form-control .checkbox-input:checked + label:after,
1369
1118
  .form-control .checkbox-input:not(:checked) + label:after {
@@ -1397,50 +1146,11 @@ a:hover, .link:hover {
1397
1146
  border-color: var(--pf-checkbox-disabled-color);
1398
1147
  }
1399
1148
  .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);
1149
+ background: var(--pf-form-input-disabled-background-color);
1425
1150
  }
1426
1151
 
1427
1152
  .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
1153
  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
1154
  }
1445
1155
  .textarea.error {
1446
1156
  border-color: var(--pf-error-color);
@@ -1454,11 +1164,6 @@ a:hover, .link:hover {
1454
1164
  .textarea.info {
1455
1165
  border-color: var(--pf-info-color);
1456
1166
  }
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
1167
  .textarea--has-icon {
1463
1168
  padding-left: var(--pf-padding-7);
1464
1169
  }
@@ -1474,72 +1179,15 @@ a:hover, .link:hover {
1474
1179
  .form-control .help-text {
1475
1180
  margin-top: var(--pf-margin-2);
1476
1181
  margin-bottom: var(--pf-margin-2);
1477
- color: var(--pf-textarea-help-text-color);
1182
+ color: var(--pf-form-input-help-color);
1478
1183
  font-size: var(--pf-font-size-subtitle2);
1479
1184
  }
1480
1185
  .form-control .form-label {
1481
1186
  margin-bottom: var(--pf-margin-2);
1482
1187
  }
1483
1188
 
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
1189
  .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
1190
  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
1191
  }
1544
1192
  .password-input--has-icon {
1545
1193
  padding-left: var(--pf-padding-7);
@@ -1556,7 +1204,7 @@ a:hover, .link:hover {
1556
1204
  .form-control .help-text {
1557
1205
  margin-top: var(--pf-margin-2);
1558
1206
  margin-bottom: var(--pf-margin-2);
1559
- color: var(--pf-password-input-help-text-color);
1207
+ color: var(--pf-form-input-help-color);
1560
1208
  font-size: var(--pf-font-size-subtitle2);
1561
1209
  }
1562
1210
  .form-control .password-input-wrapper {
@@ -1566,13 +1214,13 @@ a:hover, .link:hover {
1566
1214
  position: absolute;
1567
1215
  top: 10px;
1568
1216
  left: var(--pf-margin-2);
1569
- color: var(--pf-password-input-text-color);
1217
+ color: var(--pf-form-input-color);
1570
1218
  }
1571
1219
  .form-control .password-input-wrapper .toggle-show-password-icon {
1572
1220
  position: absolute;
1573
1221
  top: var(--pf-margin-3);
1574
1222
  right: var(--pf-margin-2);
1575
- color: var(--pf-password-input-text-color);
1223
+ color: var(--pf-form-input-color);
1576
1224
  cursor: pointer;
1577
1225
  }
1578
1226
  .form-control .form-label {
@@ -1583,65 +1231,199 @@ form {
1583
1231
  width: 100%;
1584
1232
  }
1585
1233
 
1586
- :root [data-theme=light],
1587
1234
  :root {
1588
- --pf-form-input-border-color: var(--pf-border-color);
1235
+ --pf-form-input-rounded: var(--pf-rounded);
1589
1236
  }
1590
1237
 
1591
- :root [data-theme=dark] {
1238
+ :root [data-theme=light] {
1239
+ --pf-form-input-border-color: var(--pf-border-color);
1240
+ --pf-form-input-background-color: var(--pf-white-color);
1241
+ --pf-form-input-color: var(--pf-gray-color);
1242
+ --pf-form-input-placeholder-color: var(--pf-gray-color-300);
1243
+ --pf-form-input-help-color: var(--pf-gray-color-400);
1244
+ --pf-form-input-hover-background-color: var(--pf-gray-color-100);
1245
+ --pf-form-input-focus-background-color: var(--pf-gray-color-100);
1246
+ --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
1247
+ --pf-form-input-focus-outline-color: var(--pf-primary-color);
1248
+ --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
1249
+ --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
1250
+ --pf-form-input-disabled-color: var(--pf-gray-color-400);
1251
+ }
1252
+
1253
+ :root [data-theme=dark],
1254
+ :root {
1592
1255
  --pf-form-input-border-color: var(--pf-border-color);
1256
+ --pf-form-input-background-color: var(--pf-primary-color-700);
1257
+ --pf-form-input-color: var(--pf-gray-color-100);
1258
+ --pf-form-input-placeholder-color: var(--pf-primary-color-50);
1259
+ --pf-form-input-help-color: var(--pf-gray-color-200);
1260
+ --pf-form-input-hover-background-color: var(--pf-primary-color-800);
1261
+ --pf-form-input-focus-background-color: var(--pf-primary-color-800);
1262
+ --pf-form-input-focus-border-color: var(--pf-secondary-color-700);
1263
+ --pf-form-input-focus-outline-color: var(--pf-primary-color);
1264
+ --pf-form-input-disabled-background-color: var(--pf-tertiary-color-450);
1265
+ --pf-form-input-disabled-border-color: var(--pf-tertiary-color-450);
1266
+ --pf-form-input-disabled-color: var(--pf-tertiary-color-950);
1267
+ }
1268
+
1269
+ .input-wrapper input,
1270
+ .number-input-wrapper input,
1271
+ .password-input-wrapper input,
1272
+ .textarea-wrapper input {
1273
+ height: var(--pf-size-9);
1274
+ }
1275
+ .input-wrapper input,
1276
+ .input-wrapper textarea,
1277
+ .number-input-wrapper input,
1278
+ .number-input-wrapper textarea,
1279
+ .password-input-wrapper input,
1280
+ .password-input-wrapper textarea,
1281
+ .textarea-wrapper input,
1282
+ .textarea-wrapper textarea {
1283
+ background-color: var(--pf-form-input-background-color);
1284
+ border: 1px solid var(--pf-form-input-border-color);
1285
+ border-radius: var(--pf-form-input-rounded);
1286
+ color: var(--pf-form-input-color);
1287
+ width: 100%;
1288
+ box-sizing: border-box;
1289
+ }
1290
+ .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 {
1291
+ color: var(--pf-form-input-placeholder-color);
1292
+ }
1293
+ .input-wrapper input::placeholder,
1294
+ .input-wrapper textarea::placeholder,
1295
+ .number-input-wrapper input::placeholder,
1296
+ .number-input-wrapper textarea::placeholder,
1297
+ .password-input-wrapper input::placeholder,
1298
+ .password-input-wrapper textarea::placeholder,
1299
+ .textarea-wrapper input::placeholder,
1300
+ .textarea-wrapper textarea::placeholder {
1301
+ color: var(--pf-form-input-placeholder-color);
1302
+ }
1303
+ .input-wrapper input:hover,
1304
+ .input-wrapper textarea:hover,
1305
+ .number-input-wrapper input:hover,
1306
+ .number-input-wrapper textarea:hover,
1307
+ .password-input-wrapper input:hover,
1308
+ .password-input-wrapper textarea:hover,
1309
+ .textarea-wrapper input:hover,
1310
+ .textarea-wrapper textarea:hover {
1311
+ background-color: var(--pf-form-input-hover-background-color);
1312
+ }
1313
+ .input-wrapper input:focus,
1314
+ .input-wrapper textarea:focus,
1315
+ .number-input-wrapper input:focus,
1316
+ .number-input-wrapper textarea:focus,
1317
+ .password-input-wrapper input:focus,
1318
+ .password-input-wrapper textarea:focus,
1319
+ .textarea-wrapper input:focus,
1320
+ .textarea-wrapper textarea:focus {
1321
+ border-color: var(--pf-form-input-focus-border-color);
1322
+ background-color: var(--pf-form-input-focus-background-color);
1323
+ }
1324
+ .input-wrapper input:focus-visible,
1325
+ .input-wrapper textarea:focus-visible,
1326
+ .number-input-wrapper input:focus-visible,
1327
+ .number-input-wrapper textarea:focus-visible,
1328
+ .password-input-wrapper input:focus-visible,
1329
+ .password-input-wrapper textarea:focus-visible,
1330
+ .textarea-wrapper input:focus-visible,
1331
+ .textarea-wrapper textarea:focus-visible {
1332
+ outline: 1px solid var(--pf-form-input-focus-outline-color);
1333
+ }
1334
+ .input-wrapper input:disabled,
1335
+ .input-wrapper textarea:disabled,
1336
+ .number-input-wrapper input:disabled,
1337
+ .number-input-wrapper textarea:disabled,
1338
+ .password-input-wrapper input:disabled,
1339
+ .password-input-wrapper textarea:disabled,
1340
+ .textarea-wrapper input:disabled,
1341
+ .textarea-wrapper textarea:disabled {
1342
+ background-color: var(--pf-form-input-disabled-background-color);
1343
+ border-color: var(--pf-form-input-disabled-border-color);
1344
+ color: var(--pf-form-input-disabled-color);
1345
+ }
1346
+ .input-wrapper input.error,
1347
+ .input-wrapper textarea.error,
1348
+ .number-input-wrapper input.error,
1349
+ .number-input-wrapper textarea.error,
1350
+ .password-input-wrapper input.error,
1351
+ .password-input-wrapper textarea.error,
1352
+ .textarea-wrapper input.error,
1353
+ .textarea-wrapper textarea.error {
1354
+ border-color: var(--pf-error-color);
1355
+ }
1356
+ .input-wrapper input.success,
1357
+ .input-wrapper textarea.success,
1358
+ .number-input-wrapper input.success,
1359
+ .number-input-wrapper textarea.success,
1360
+ .password-input-wrapper input.success,
1361
+ .password-input-wrapper textarea.success,
1362
+ .textarea-wrapper input.success,
1363
+ .textarea-wrapper textarea.success {
1364
+ border-color: var(--pf-success-color);
1365
+ }
1366
+ .input-wrapper input.warning,
1367
+ .input-wrapper textarea.warning,
1368
+ .number-input-wrapper input.warning,
1369
+ .number-input-wrapper textarea.warning,
1370
+ .password-input-wrapper input.warning,
1371
+ .password-input-wrapper textarea.warning,
1372
+ .textarea-wrapper input.warning,
1373
+ .textarea-wrapper textarea.warning {
1374
+ border-color: var(--pf-warning-color);
1375
+ }
1376
+ .input-wrapper input.info,
1377
+ .input-wrapper textarea.info,
1378
+ .number-input-wrapper input.info,
1379
+ .number-input-wrapper textarea.info,
1380
+ .password-input-wrapper input.info,
1381
+ .password-input-wrapper textarea.info,
1382
+ .textarea-wrapper input.info,
1383
+ .textarea-wrapper textarea.info {
1384
+ border-color: var(--pf-info-color);
1593
1385
  }
1594
1386
 
1595
- :root,
1596
1387
  :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
1388
  --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
1389
  --pf-select-option-selected-color: var(--pf-primary-color-100);
1604
- --pf-select-option-text-color: var(--pf-gray-color);
1390
+ --pf-select-option-color: var(--pf-gray-color);
1605
1391
  --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
1392
  }
1609
1393
 
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);
1394
+ :root [data-theme=dark],
1395
+ :root {
1614
1396
  --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);
1397
+ --pf-select-option-selected-color: var(--pf-tertiary-color-700);
1398
+ --pf-select-option-color: var(--pf-gray-color-100);
1399
+ --pf-select-option-hover-color: var(--pf-primary-color);
1622
1400
  }
1623
1401
 
1624
1402
  .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);
1403
+ background-color: var(--pf-form-input-background-color);
1404
+ border: 1px solid var(--pf-form-input-border-color);
1405
+ color: var(--pf-form-input-color);
1628
1406
  box-shadow: none;
1629
1407
  }
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);
1408
+ .select-wrapper .select__control:hover:not(:focus) {
1409
+ background-color: var(--pf-form-input-hover-background-color);
1410
+ border-color: var(--pf-form-input-border-color);
1411
+ }
1412
+ .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
1413
+ border: 1px solid var(--pf-form-input-focus-border-color);
1632
1414
  }
1633
1415
  .select-wrapper .select__control--is-disabled {
1634
- background-color: var(--pf-select-disabled-background-color);
1635
- color: var(--pf-select-disabled-color);
1416
+ background-color: var(--pf-form-input-disabled-background-color);
1417
+ color: var(--pf-form-input-disabled-color);
1636
1418
  }
1637
1419
  .select-wrapper .select__placeholder {
1638
- color: var(--pf-select-placeholder-text-color);
1420
+ color: var(--pf-form-input-placeholder-color);
1639
1421
  }
1640
1422
  .select-wrapper .select__value-container {
1641
1423
  cursor: text;
1642
1424
  }
1643
1425
  .select-wrapper .select__input-container {
1644
- color: var(--pf-select-text-color);
1426
+ color: var(--pf-form-input-color);
1645
1427
  }
1646
1428
  .select-wrapper .select__multi-value {
1647
1429
  background-color: var(--pf-select-option-selected-color);
@@ -1649,24 +1431,24 @@ form {
1649
1431
  }
1650
1432
  .select-wrapper .select__multi-value__label {
1651
1433
  padding-top: 5px;
1652
- color: var(--pf-select-option-text-color);
1434
+ color: var(--pf-select-option-color);
1653
1435
  }
1654
1436
  .select-wrapper .select__multi-value__remove {
1655
- color: var(--pf-select-option-text-color);
1437
+ color: var(--pf-select-option-color);
1656
1438
  cursor: pointer;
1657
1439
  }
1658
1440
  .select-wrapper .select__multi-value__remove:hover {
1659
1441
  background-color: var(--pf-select-option-hover-color);
1660
- color: var(--pf-select-hover-color);
1442
+ color: var(--pf-form-input-hover-color);
1661
1443
  }
1662
1444
  .select-wrapper .select__menu {
1663
- border: 1px solid var(--pf-select-border-color);
1445
+ border: 1px solid var(--pf-form-input-border-color);
1664
1446
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
1665
1447
  margin: 4px 0px;
1666
- background-color: var(--pf-select-background-color);
1448
+ background-color: var(--pf-form-input-background-color);
1667
1449
  }
1668
1450
  .select-wrapper .select__menu-notice {
1669
- color: var(--pf-select-text-color);
1451
+ color: var(--pf-form-input-color);
1670
1452
  }
1671
1453
  .select-wrapper .select__indicator-separator {
1672
1454
  background-color: var(--pf-select-indicator-color);
@@ -1676,7 +1458,7 @@ form {
1676
1458
  color: var(--pf-select-indicator-color);
1677
1459
  }
1678
1460
  .select-wrapper .select__indicator:hover, .select-wrapper .select__indicator:focus {
1679
- color: var(--pf-select-hover-color);
1461
+ color: var(--pf-form-input-color);
1680
1462
  }
1681
1463
  .select-wrapper .select__items {
1682
1464
  display: flex;
@@ -1688,7 +1470,7 @@ form {
1688
1470
  .select-wrapper .select__option {
1689
1471
  cursor: pointer;
1690
1472
  overflow-wrap: break-word;
1691
- color: var(--pf-select-option-text-color);
1473
+ color: var(--pf-select-option-color);
1692
1474
  }
1693
1475
  .select-wrapper .select__option--is-focused, .select-wrapper .select__option:active {
1694
1476
  background: var(--pf-select-option-hover-color);
@@ -1697,26 +1479,25 @@ form {
1697
1479
  background: var(--pf-select-option-selected-color);
1698
1480
  }
1699
1481
  .select-wrapper .select__single-value {
1700
- color: var(--pf-select-option-text-color);
1482
+ color: var(--pf-select-option-color);
1701
1483
  }
1702
1484
 
1703
- :root,
1704
- :root [data-theme=light],
1705
- :root [data-theme=dark] {
1706
- --pf-toggle-background-color: var(--pf-gray-color-200);
1485
+ :root [data-theme=light] {
1486
+ --pf-toggle-background-color: var(--pf-form-input-background-color);
1707
1487
  --pf-toggle-circle-color: var(--pf-primary-color);
1708
1488
  --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);
1489
+ --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
1490
+ --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
1491
+ --pf-toggle-checked-background-color: var(--pf-primary-color-300);
1712
1492
  }
1713
1493
 
1714
- :root [data-theme=dark] {
1715
- --pf-toggle-background-color: var(--pf-primary-color-100);
1494
+ :root [data-theme=dark],
1495
+ :root {
1496
+ --pf-toggle-background-color: var(--pf-form-input-background-color);
1716
1497
  --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);
1498
+ --pf-toggle-border-color: var(--pf-primary-color);
1499
+ --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
1500
+ --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
1720
1501
  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
1721
1502
  }
1722
1503
 
@@ -1729,6 +1510,7 @@ form {
1729
1510
  border-radius: 20px;
1730
1511
  transition: all 0.3s;
1731
1512
  cursor: pointer;
1513
+ border: 1px solid var(--pf-toggle-border-color);
1732
1514
  }
1733
1515
 
1734
1516
  .switch::after {
@@ -1784,8 +1566,8 @@ form {
1784
1566
  }
1785
1567
 
1786
1568
  :root [data-theme=dark] {
1787
- --pf-skeleton-color-one: var(--pf-primary-color-200);
1788
- --pf-skeleton-color-two: var(--pf-primary-color-100);
1569
+ --pf-skeleton-color-one: var(--pf-primary-color-500);
1570
+ --pf-skeleton-color-two: var(--pf-primary-color-400);
1789
1571
  }
1790
1572
 
1791
1573
  .skeleton {
@@ -1813,20 +1595,19 @@ form {
1813
1595
  }
1814
1596
  }
1815
1597
 
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);
1598
+ :root {
1822
1599
  --pf-card-rounded: var(--pf-rounded);
1823
1600
  }
1824
1601
 
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);
1602
+ :root [data-theme=light] {
1603
+ --pf-card-background-color: var(--pf-white-color);
1604
+ --pf-card-border-color: var(--pf-border-color);
1605
+ }
1606
+
1607
+ :root [data-theme=dark],
1608
+ :root {
1609
+ --pf-card-background-color: var(--pf-primary-color-600);
1610
+ --pf-card-border-color: var(--pf-border-color);
1830
1611
  }
1831
1612
 
1832
1613
  .card {
@@ -1855,19 +1636,23 @@ form {
1855
1636
  box-shadow: var(--pf-dropshadow);
1856
1637
  }
1857
1638
 
1858
- :root,
1859
- :root [data-theme=light],
1860
- :root [data-theme=dark] {
1639
+ :root {
1861
1640
  --pf-menu-rounded: var(--pf-rounded);
1641
+ }
1642
+
1643
+ :root [data-theme=light] {
1862
1644
  --pf-menu-item-hover-color: var(--pf-primary-color-100);
1863
1645
  --pf-menu-item-background-color: var(--pf-white-color);
1864
1646
  --pf-menu-item-color: var(--pf-gray-color);
1647
+ --pf-menu-item-focus-color: var(--pf-primary-color-300);
1865
1648
  }
1866
1649
 
1867
- :root [data-theme=dark] {
1868
- --pf-menu-item-hover-color: var(--pf-primary-color-300);
1650
+ :root [data-theme=dark],
1651
+ :root {
1652
+ --pf-menu-item-hover-color: var(--pf-primary-color-500);
1869
1653
  --pf-menu-item-background-color: var(--pf-primary-color-600);
1870
- --pf-menu-item-color: var(--pf-gray-color-100);
1654
+ --pf-menu-item-color: var(--pf-gray-color-50);
1655
+ --pf-menu-item-focus-color: var(--pf-primary-color-500);
1871
1656
  }
1872
1657
 
1873
1658
  .menu {
@@ -1881,22 +1666,29 @@ form {
1881
1666
  width: 100%;
1882
1667
  text-align: left;
1883
1668
  border: none;
1669
+ box-shadow: none;
1884
1670
  }
1885
1671
  .menu .menu-item:hover {
1886
1672
  background: var(--pf-menu-item-hover-color);
1887
1673
  }
1674
+ .menu .menu-item:focus {
1675
+ background-color: var(--pf-menu-item-focus-color);
1676
+ }
1888
1677
 
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);
1678
+ :root {
1894
1679
  --pf-floatui-border-radius: var(--pf-rounded);
1680
+ --pf-floatui-box-shadow: var(--pf-dropshadow);
1681
+ --pf-floatui-border: none;
1682
+ --pf-floatui-border-color: var(--pf-border-color);
1895
1683
  }
1896
1684
 
1897
- :root [data-theme=dark] {
1685
+ :root [data-theme=light] {
1686
+ --pf-floatui-background-color: var(--pf-white-color);
1687
+ }
1688
+
1689
+ :root [data-theme=dark],
1690
+ :root {
1898
1691
  --pf-floatui-background-color: var(--pf-primary-color-600);
1899
- --pf-floatui-border-color: var(--pf-border-color);
1900
1692
  }
1901
1693
 
1902
1694
  .floatui-container {
@@ -1905,8 +1697,7 @@ form {
1905
1697
 
1906
1698
  .floatui-content {
1907
1699
  border-radius: var(--pf-floatui-border-radius);
1908
- border: solid 1px;
1909
- border-color: var(--pf-floatui-border-color);
1700
+ box-shadow: var(--pf-floatui-box-shadow);
1910
1701
  background: var(--pf-floatui-background-color);
1911
1702
  }
1912
1703
 
@@ -1914,6 +1705,7 @@ form {
1914
1705
  --pf-date-picker-background-color: var(--pf-white-color);
1915
1706
  --pf-date-picker-selected-date-background-color: var(--pf-primary-color);
1916
1707
  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
1708
+ --pf-date-picker-today-background-color: var(--pf-primary-color-200);
1917
1709
  }
1918
1710
  :root [data-theme=light] .rdp-root {
1919
1711
  --rdp-accent-color: var(--pf-link-color);
@@ -1921,16 +1713,19 @@ form {
1921
1713
  --rdp-range_middle-background-color: var(--pf-primary-color-300);
1922
1714
  }
1923
1715
 
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);
1716
+ :root [data-theme=dark],
1717
+ :root {
1718
+ --pf-date-picker-background-color: var(--pf-primary-color-600);
1719
+ --pf-date-picker-selected-date-background-color: var(--pf-secondary-color-400);
1927
1720
  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
1721
+ --pf-date-picker-today-background-color: var(--pf-primary-color);
1928
1722
  }
1929
- :root [data-theme=dark] .rdp-root {
1723
+ :root [data-theme=dark] .rdp-root,
1724
+ :root .rdp-root {
1930
1725
  --rdp-accent-color: var(--pf-link-color);
1931
1726
  --rdp-accent-background-color: var(--pf-primary-color-200);
1932
1727
  --rdp-font-family: var(--pf-font-family-base);
1933
- --rdp-range_middle-background-color: var(--pf-primary-color-600);
1728
+ --rdp-range_middle-background-color: var(--pf-primary-color-700);
1934
1729
  }
1935
1730
 
1936
1731
  .rdp-chevron {
@@ -1959,20 +1754,19 @@ form {
1959
1754
  border: none;
1960
1755
  }
1961
1756
  .rdp-day.rdp-today .rdp-day_button {
1962
- background-color: var(--pf-primary-color-300);
1757
+ background-color: var(--pf-date-picker-today-background-color);
1963
1758
  color: var(--pf-date-picker-selected-date-font-color);
1964
1759
  }
1965
1760
  .rdp-day.rdp-selected .rdp-day_button {
1966
1761
  background-color: var(--pf-date-picker-selected-date-background-color);
1967
1762
  color: var(--pf-date-picker-selected-date-font-color);
1763
+ border-color: var(--pf-border-color);
1968
1764
  }
1969
1765
  .rdp-day.rdp-range_middle .rdp-day_button {
1970
1766
  background-color: transparent;
1971
1767
  }
1972
1768
 
1973
- :root,
1974
- :root [data-theme=light],
1975
- :root [data-theme=dark] {
1769
+ :root [data-theme=light] {
1976
1770
  --pf-pill-primary-background-color: var(--pf-primary-color);
1977
1771
  --pf-pill-primary-font-color: var(--pf-white-color);
1978
1772
  --pf-pill-primary-border-color: var(--pf-primary-color);
@@ -1996,7 +1790,8 @@ form {
1996
1790
  --pf-pill-neutral-border-color: var(--pf-gray-color);
1997
1791
  }
1998
1792
 
1999
- :root [data-theme=dark] {
1793
+ :root [data-theme=dark],
1794
+ :root {
2000
1795
  --pf-pill-primary-background-color: var(--pf-primary-color-900);
2001
1796
  --pf-pill-primary-font-color: var(--pf-white-color);
2002
1797
  --pf-pill-primary-border-color: var(--pf-primary-color-100);
@@ -2078,17 +1873,17 @@ form {
2078
1873
  border-color: var(--pf-pill-secondary-border-color);
2079
1874
  }
2080
1875
 
2081
- :root [data-theme=light],
2082
- :root {
1876
+ :root [data-theme=light] {
2083
1877
  --sheets-background-color: var(--pf-gray-color-100);
2084
1878
  }
2085
1879
 
2086
- :root [data-theme=dark] {
1880
+ :root [data-theme=dark],
1881
+ :root {
2087
1882
  --sheets-background-color: var(--pf-primary-color-400);
2088
1883
  }
2089
1884
 
2090
1885
  :root {
2091
- --pf-font-family-base: "Mulish", sans-serif;
1886
+ --pf-font-family-base: "Noto Sans", sans-serif;
2092
1887
  --pf-font-size-base: 1rem;
2093
1888
  --pf-font-size-h1: calc(1.5 * var(--pf-font-size-base));
2094
1889
  --pf-font-size-h2: calc(1.25 * var(--pf-font-size-base));
@@ -2113,6 +1908,10 @@ form {
2113
1908
  --pf-label-size-sm: var(--pf-font-size-overline);
2114
1909
  --pf-label-size-md: var(--pf-font-size-body);
2115
1910
  --pf-label-size-lg: var(--pf-font-size-h2);
1911
+ --pf-line-height-xs: calc(0.75 * var(--pf-font-size-base));
1912
+ --pf-line-height-sm: var(--pf-font-size-base);
1913
+ --pf-line-height-md: calc(1.25 * var(--pf-font-size-base));
1914
+ --pf-line-height-lg: calc(1.5 * var(--pf-font-size-base));
2116
1915
  }
2117
1916
 
2118
1917
  html {
@@ -2389,6 +2188,14 @@ p,
2389
2188
  background-color: var(--pf-primary-color);
2390
2189
  }
2391
2190
 
2191
+ .color-primary-50 {
2192
+ color: var(--pf-primary-color-50);
2193
+ }
2194
+
2195
+ .bg-primary-50 {
2196
+ background-color: var(--pf-primary-color-50);
2197
+ }
2198
+
2392
2199
  .color-primary-100 {
2393
2200
  color: var(--pf-primary-color-100);
2394
2201
  }
@@ -2397,6 +2204,14 @@ p,
2397
2204
  background-color: var(--pf-primary-color-100);
2398
2205
  }
2399
2206
 
2207
+ .color-primary-150 {
2208
+ color: var(--pf-primary-color-150);
2209
+ }
2210
+
2211
+ .bg-primary-150 {
2212
+ background-color: var(--pf-primary-color-150);
2213
+ }
2214
+
2400
2215
  .color-primary-200 {
2401
2216
  color: var(--pf-primary-color-200);
2402
2217
  }
@@ -2405,6 +2220,14 @@ p,
2405
2220
  background-color: var(--pf-primary-color-200);
2406
2221
  }
2407
2222
 
2223
+ .color-primary-250 {
2224
+ color: var(--pf-primary-color-250);
2225
+ }
2226
+
2227
+ .bg-primary-250 {
2228
+ background-color: var(--pf-primary-color-250);
2229
+ }
2230
+
2408
2231
  .color-primary-300 {
2409
2232
  color: var(--pf-primary-color-300);
2410
2233
  }
@@ -2413,6 +2236,14 @@ p,
2413
2236
  background-color: var(--pf-primary-color-300);
2414
2237
  }
2415
2238
 
2239
+ .color-primary-350 {
2240
+ color: var(--pf-primary-color-350);
2241
+ }
2242
+
2243
+ .bg-primary-350 {
2244
+ background-color: var(--pf-primary-color-350);
2245
+ }
2246
+
2416
2247
  .color-primary-400 {
2417
2248
  color: var(--pf-primary-color-400);
2418
2249
  }
@@ -2421,6 +2252,14 @@ p,
2421
2252
  background-color: var(--pf-primary-color-400);
2422
2253
  }
2423
2254
 
2255
+ .color-primary-450 {
2256
+ color: var(--pf-primary-color-450);
2257
+ }
2258
+
2259
+ .bg-primary-450 {
2260
+ background-color: var(--pf-primary-color-450);
2261
+ }
2262
+
2424
2263
  .color-primary-500 {
2425
2264
  color: var(--pf-primary-color-500);
2426
2265
  }
@@ -2429,6 +2268,14 @@ p,
2429
2268
  background-color: var(--pf-primary-color-500);
2430
2269
  }
2431
2270
 
2271
+ .color-primary-550 {
2272
+ color: var(--pf-primary-color-550);
2273
+ }
2274
+
2275
+ .bg-primary-550 {
2276
+ background-color: var(--pf-primary-color-550);
2277
+ }
2278
+
2432
2279
  .color-primary-600 {
2433
2280
  color: var(--pf-primary-color-600);
2434
2281
  }
@@ -2437,6 +2284,14 @@ p,
2437
2284
  background-color: var(--pf-primary-color-600);
2438
2285
  }
2439
2286
 
2287
+ .color-primary-650 {
2288
+ color: var(--pf-primary-color-650);
2289
+ }
2290
+
2291
+ .bg-primary-650 {
2292
+ background-color: var(--pf-primary-color-650);
2293
+ }
2294
+
2440
2295
  .color-primary-700 {
2441
2296
  color: var(--pf-primary-color-700);
2442
2297
  }
@@ -2445,6 +2300,14 @@ p,
2445
2300
  background-color: var(--pf-primary-color-700);
2446
2301
  }
2447
2302
 
2303
+ .color-primary-750 {
2304
+ color: var(--pf-primary-color-750);
2305
+ }
2306
+
2307
+ .bg-primary-750 {
2308
+ background-color: var(--pf-primary-color-750);
2309
+ }
2310
+
2448
2311
  .color-primary-800 {
2449
2312
  color: var(--pf-primary-color-800);
2450
2313
  }
@@ -2453,6 +2316,14 @@ p,
2453
2316
  background-color: var(--pf-primary-color-800);
2454
2317
  }
2455
2318
 
2319
+ .color-primary-850 {
2320
+ color: var(--pf-primary-color-850);
2321
+ }
2322
+
2323
+ .bg-primary-850 {
2324
+ background-color: var(--pf-primary-color-850);
2325
+ }
2326
+
2456
2327
  .color-primary-900 {
2457
2328
  color: var(--pf-primary-color-900);
2458
2329
  }
@@ -2461,6 +2332,22 @@ p,
2461
2332
  background-color: var(--pf-primary-color-900);
2462
2333
  }
2463
2334
 
2335
+ .color-primary-950 {
2336
+ color: var(--pf-primary-color-950);
2337
+ }
2338
+
2339
+ .bg-primary-950 {
2340
+ background-color: var(--pf-primary-color-950);
2341
+ }
2342
+
2343
+ .color-primary-1000 {
2344
+ color: var(--pf-primary-color-1000);
2345
+ }
2346
+
2347
+ .bg-primary-1000 {
2348
+ background-color: var(--pf-primary-color-1000);
2349
+ }
2350
+
2464
2351
  .color-secondary {
2465
2352
  color: var(--pf-secondary-color);
2466
2353
  }
@@ -2469,6 +2356,14 @@ p,
2469
2356
  background-color: var(--pf-secondary-color);
2470
2357
  }
2471
2358
 
2359
+ .color-secondary-50 {
2360
+ color: var(--pf-secondary-color-50);
2361
+ }
2362
+
2363
+ .bg-secondary-50 {
2364
+ background-color: var(--pf-secondary-color-50);
2365
+ }
2366
+
2472
2367
  .color-secondary-100 {
2473
2368
  color: var(--pf-secondary-color-100);
2474
2369
  }
@@ -2477,6 +2372,14 @@ p,
2477
2372
  background-color: var(--pf-secondary-color-100);
2478
2373
  }
2479
2374
 
2375
+ .color-secondary-150 {
2376
+ color: var(--pf-secondary-color-150);
2377
+ }
2378
+
2379
+ .bg-secondary-150 {
2380
+ background-color: var(--pf-secondary-color-150);
2381
+ }
2382
+
2480
2383
  .color-secondary-200 {
2481
2384
  color: var(--pf-secondary-color-200);
2482
2385
  }
@@ -2485,6 +2388,14 @@ p,
2485
2388
  background-color: var(--pf-secondary-color-200);
2486
2389
  }
2487
2390
 
2391
+ .color-secondary-250 {
2392
+ color: var(--pf-secondary-color-250);
2393
+ }
2394
+
2395
+ .bg-secondary-250 {
2396
+ background-color: var(--pf-secondary-color-250);
2397
+ }
2398
+
2488
2399
  .color-secondary-300 {
2489
2400
  color: var(--pf-secondary-color-300);
2490
2401
  }
@@ -2493,6 +2404,14 @@ p,
2493
2404
  background-color: var(--pf-secondary-color-300);
2494
2405
  }
2495
2406
 
2407
+ .color-secondary-350 {
2408
+ color: var(--pf-secondary-color-350);
2409
+ }
2410
+
2411
+ .bg-secondary-350 {
2412
+ background-color: var(--pf-secondary-color-350);
2413
+ }
2414
+
2496
2415
  .color-secondary-400 {
2497
2416
  color: var(--pf-secondary-color-400);
2498
2417
  }
@@ -2501,6 +2420,14 @@ p,
2501
2420
  background-color: var(--pf-secondary-color-400);
2502
2421
  }
2503
2422
 
2423
+ .color-secondary-450 {
2424
+ color: var(--pf-secondary-color-450);
2425
+ }
2426
+
2427
+ .bg-secondary-450 {
2428
+ background-color: var(--pf-secondary-color-450);
2429
+ }
2430
+
2504
2431
  .color-secondary-500 {
2505
2432
  color: var(--pf-secondary-color-500);
2506
2433
  }
@@ -2509,6 +2436,14 @@ p,
2509
2436
  background-color: var(--pf-secondary-color-500);
2510
2437
  }
2511
2438
 
2439
+ .color-secondary-550 {
2440
+ color: var(--pf-secondary-color-550);
2441
+ }
2442
+
2443
+ .bg-secondary-550 {
2444
+ background-color: var(--pf-secondary-color-550);
2445
+ }
2446
+
2512
2447
  .color-secondary-600 {
2513
2448
  color: var(--pf-secondary-color-600);
2514
2449
  }
@@ -2517,6 +2452,14 @@ p,
2517
2452
  background-color: var(--pf-secondary-color-600);
2518
2453
  }
2519
2454
 
2455
+ .color-secondary-650 {
2456
+ color: var(--pf-secondary-color-650);
2457
+ }
2458
+
2459
+ .bg-secondary-650 {
2460
+ background-color: var(--pf-secondary-color-650);
2461
+ }
2462
+
2520
2463
  .color-secondary-700 {
2521
2464
  color: var(--pf-secondary-color-700);
2522
2465
  }
@@ -2525,6 +2468,14 @@ p,
2525
2468
  background-color: var(--pf-secondary-color-700);
2526
2469
  }
2527
2470
 
2471
+ .color-secondary-750 {
2472
+ color: var(--pf-secondary-color-750);
2473
+ }
2474
+
2475
+ .bg-secondary-750 {
2476
+ background-color: var(--pf-secondary-color-750);
2477
+ }
2478
+
2528
2479
  .color-secondary-800 {
2529
2480
  color: var(--pf-secondary-color-800);
2530
2481
  }
@@ -2533,6 +2484,14 @@ p,
2533
2484
  background-color: var(--pf-secondary-color-800);
2534
2485
  }
2535
2486
 
2487
+ .color-secondary-850 {
2488
+ color: var(--pf-secondary-color-850);
2489
+ }
2490
+
2491
+ .bg-secondary-850 {
2492
+ background-color: var(--pf-secondary-color-850);
2493
+ }
2494
+
2536
2495
  .color-secondary-900 {
2537
2496
  color: var(--pf-secondary-color-900);
2538
2497
  }
@@ -2541,343 +2500,391 @@ p,
2541
2500
  background-color: var(--pf-secondary-color-900);
2542
2501
  }
2543
2502
 
2544
- .color-gray {
2545
- color: var(--pf-gray-color);
2503
+ .color-secondary-950 {
2504
+ color: var(--pf-secondary-color-950);
2546
2505
  }
2547
2506
 
2548
- .bg-gray {
2549
- background-color: var(--pf-gray-color);
2507
+ .bg-secondary-950 {
2508
+ background-color: var(--pf-secondary-color-950);
2550
2509
  }
2551
2510
 
2552
- .color-gray-100 {
2553
- color: var(--pf-gray-color-100);
2511
+ .color-secondary-1000 {
2512
+ color: var(--pf-secondary-color-1000);
2554
2513
  }
2555
2514
 
2556
- .bg-gray-100 {
2557
- background-color: var(--pf-gray-color-100);
2515
+ .bg-secondary-1000 {
2516
+ background-color: var(--pf-secondary-color-1000);
2558
2517
  }
2559
2518
 
2560
- .color-gray-200 {
2561
- color: var(--pf-gray-color-200);
2519
+ .color-tertiary {
2520
+ color: var(--pf-tertiary-color);
2562
2521
  }
2563
2522
 
2564
- .bg-gray-200 {
2565
- background-color: var(--pf-gray-color-200);
2523
+ .bg-tertiary {
2524
+ background-color: var(--pf-tertiary-color);
2566
2525
  }
2567
2526
 
2568
- .color-gray-300 {
2569
- color: var(--pf-gray-color-300);
2527
+ .color-tertiary-50 {
2528
+ color: var(--pf-tertiary-color-50);
2570
2529
  }
2571
2530
 
2572
- .bg-gray-300 {
2573
- background-color: var(--pf-gray-color-300);
2531
+ .bg-tertiary-50 {
2532
+ background-color: var(--pf-tertiary-color-50);
2574
2533
  }
2575
2534
 
2576
- .color-gray-400 {
2577
- color: var(--pf-gray-color-400);
2535
+ .color-tertiary-100 {
2536
+ color: var(--pf-tertiary-color-100);
2578
2537
  }
2579
2538
 
2580
- .bg-gray-400 {
2581
- background-color: var(--pf-gray-color-400);
2539
+ .bg-tertiary-100 {
2540
+ background-color: var(--pf-tertiary-color-100);
2582
2541
  }
2583
2542
 
2584
- .color-gray-500 {
2585
- color: var(--pf-gray-color-500);
2543
+ .color-tertiary-150 {
2544
+ color: var(--pf-tertiary-color-150);
2586
2545
  }
2587
2546
 
2588
- .bg-gray-500 {
2589
- background-color: var(--pf-gray-color-500);
2547
+ .bg-tertiary-150 {
2548
+ background-color: var(--pf-tertiary-color-150);
2590
2549
  }
2591
2550
 
2592
- .color-gray-600 {
2593
- color: var(--pf-gray-color-600);
2551
+ .color-tertiary-200 {
2552
+ color: var(--pf-tertiary-color-200);
2594
2553
  }
2595
2554
 
2596
- .bg-gray-600 {
2597
- background-color: var(--pf-gray-color-600);
2555
+ .bg-tertiary-200 {
2556
+ background-color: var(--pf-tertiary-color-200);
2598
2557
  }
2599
2558
 
2600
- .color-gray-700 {
2601
- color: var(--pf-gray-color-700);
2559
+ .color-tertiary-250 {
2560
+ color: var(--pf-tertiary-color-250);
2602
2561
  }
2603
2562
 
2604
- .bg-gray-700 {
2605
- background-color: var(--pf-gray-color-700);
2563
+ .bg-tertiary-250 {
2564
+ background-color: var(--pf-tertiary-color-250);
2606
2565
  }
2607
2566
 
2608
- .color-gray-800 {
2609
- color: var(--pf-gray-color-800);
2567
+ .color-tertiary-300 {
2568
+ color: var(--pf-tertiary-color-300);
2610
2569
  }
2611
2570
 
2612
- .bg-gray-800 {
2613
- background-color: var(--pf-gray-color-800);
2571
+ .bg-tertiary-300 {
2572
+ background-color: var(--pf-tertiary-color-300);
2614
2573
  }
2615
2574
 
2616
- .color-gray-900 {
2617
- color: var(--pf-gray-color-900);
2575
+ .color-tertiary-350 {
2576
+ color: var(--pf-tertiary-color-350);
2618
2577
  }
2619
2578
 
2620
- .bg-gray-900 {
2621
- background-color: var(--pf-gray-color-900);
2579
+ .bg-tertiary-350 {
2580
+ background-color: var(--pf-tertiary-color-350);
2622
2581
  }
2623
2582
 
2624
- .color-steel {
2625
- color: var(--pf-steel-color);
2583
+ .color-tertiary-400 {
2584
+ color: var(--pf-tertiary-color-400);
2626
2585
  }
2627
2586
 
2628
- .bg-steel {
2629
- background-color: var(--pf-steel-color);
2587
+ .bg-tertiary-400 {
2588
+ background-color: var(--pf-tertiary-color-400);
2630
2589
  }
2631
2590
 
2632
- .color-steel-100 {
2633
- color: var(--pf-steel-color-100);
2591
+ .color-tertiary-450 {
2592
+ color: var(--pf-tertiary-color-450);
2634
2593
  }
2635
2594
 
2636
- .bg-steel-100 {
2637
- background-color: var(--pf-steel-color-100);
2595
+ .bg-tertiary-450 {
2596
+ background-color: var(--pf-tertiary-color-450);
2638
2597
  }
2639
2598
 
2640
- .color-steel-200 {
2641
- color: var(--pf-steel-color-200);
2599
+ .color-tertiary-500 {
2600
+ color: var(--pf-tertiary-color-500);
2642
2601
  }
2643
2602
 
2644
- .bg-steel-200 {
2645
- background-color: var(--pf-steel-color-200);
2603
+ .bg-tertiary-500 {
2604
+ background-color: var(--pf-tertiary-color-500);
2646
2605
  }
2647
2606
 
2648
- .color-steel-300 {
2649
- color: var(--pf-steel-color-300);
2607
+ .color-tertiary-550 {
2608
+ color: var(--pf-tertiary-color-550);
2650
2609
  }
2651
2610
 
2652
- .bg-steel-300 {
2653
- background-color: var(--pf-steel-color-300);
2611
+ .bg-tertiary-550 {
2612
+ background-color: var(--pf-tertiary-color-550);
2654
2613
  }
2655
2614
 
2656
- .color-steel-400 {
2657
- color: var(--pf-steel-color-400);
2615
+ .color-tertiary-600 {
2616
+ color: var(--pf-tertiary-color-600);
2658
2617
  }
2659
2618
 
2660
- .bg-steel-400 {
2661
- background-color: var(--pf-steel-color-400);
2619
+ .bg-tertiary-600 {
2620
+ background-color: var(--pf-tertiary-color-600);
2662
2621
  }
2663
2622
 
2664
- .color-steel-500 {
2665
- color: var(--pf-steel-color-500);
2623
+ .color-tertiary-650 {
2624
+ color: var(--pf-tertiary-color-650);
2666
2625
  }
2667
2626
 
2668
- .bg-steel-500 {
2669
- background-color: var(--pf-steel-color-500);
2627
+ .bg-tertiary-650 {
2628
+ background-color: var(--pf-tertiary-color-650);
2670
2629
  }
2671
2630
 
2672
- .color-steel-600 {
2673
- color: var(--pf-steel-color-600);
2631
+ .color-tertiary-700 {
2632
+ color: var(--pf-tertiary-color-700);
2674
2633
  }
2675
2634
 
2676
- .bg-steel-600 {
2677
- background-color: var(--pf-steel-color-600);
2635
+ .bg-tertiary-700 {
2636
+ background-color: var(--pf-tertiary-color-700);
2678
2637
  }
2679
2638
 
2680
- .color-steel-700 {
2681
- color: var(--pf-steel-color-700);
2639
+ .color-tertiary-750 {
2640
+ color: var(--pf-tertiary-color-750);
2682
2641
  }
2683
2642
 
2684
- .bg-steel-700 {
2685
- background-color: var(--pf-steel-color-700);
2643
+ .bg-tertiary-750 {
2644
+ background-color: var(--pf-tertiary-color-750);
2686
2645
  }
2687
2646
 
2688
- .color-steel-800 {
2689
- color: var(--pf-steel-color-800);
2647
+ .color-tertiary-800 {
2648
+ color: var(--pf-tertiary-color-800);
2690
2649
  }
2691
2650
 
2692
- .bg-steel-800 {
2693
- background-color: var(--pf-steel-color-800);
2651
+ .bg-tertiary-800 {
2652
+ background-color: var(--pf-tertiary-color-800);
2694
2653
  }
2695
2654
 
2696
- .color-steel-900 {
2697
- color: var(--pf-steel-color-900);
2655
+ .color-tertiary-850 {
2656
+ color: var(--pf-tertiary-color-850);
2698
2657
  }
2699
2658
 
2700
- .bg-steel-900 {
2701
- background-color: var(--pf-steel-color-900);
2659
+ .bg-tertiary-850 {
2660
+ background-color: var(--pf-tertiary-color-850);
2702
2661
  }
2703
2662
 
2704
- .color-green {
2705
- color: var(--pf-green-color);
2663
+ .color-tertiary-900 {
2664
+ color: var(--pf-tertiary-color-900);
2706
2665
  }
2707
2666
 
2708
- .bg-green {
2709
- background-color: var(--pf-green-color);
2667
+ .bg-tertiary-900 {
2668
+ background-color: var(--pf-tertiary-color-900);
2710
2669
  }
2711
2670
 
2712
- .color-green-100 {
2713
- color: var(--pf-green-color-100);
2671
+ .color-tertiary-950 {
2672
+ color: var(--pf-tertiary-color-950);
2714
2673
  }
2715
2674
 
2716
- .bg-green-100 {
2717
- background-color: var(--pf-green-color-100);
2675
+ .bg-tertiary-950 {
2676
+ background-color: var(--pf-tertiary-color-950);
2718
2677
  }
2719
2678
 
2720
- .color-green-200 {
2721
- color: var(--pf-green-color-200);
2679
+ .color-tertiary-1000 {
2680
+ color: var(--pf-tertiary-color-1000);
2722
2681
  }
2723
2682
 
2724
- .bg-green-200 {
2725
- background-color: var(--pf-green-color-200);
2683
+ .bg-tertiary-1000 {
2684
+ background-color: var(--pf-tertiary-color-1000);
2726
2685
  }
2727
2686
 
2728
- .color-green-300 {
2729
- color: var(--pf-green-color-300);
2687
+ .color-gray {
2688
+ color: var(--pf-gray-color);
2730
2689
  }
2731
2690
 
2732
- .bg-green-300 {
2733
- background-color: var(--pf-green-color-300);
2691
+ .bg-gray {
2692
+ background-color: var(--pf-gray-color);
2734
2693
  }
2735
2694
 
2736
- .color-green-400 {
2737
- color: var(--pf-green-color-400);
2695
+ .color-gray-50 {
2696
+ color: var(--pf-gray-color-50);
2738
2697
  }
2739
2698
 
2740
- .bg-green-400 {
2741
- background-color: var(--pf-green-color-400);
2699
+ .bg-gray-50 {
2700
+ background-color: var(--pf-gray-color-50);
2742
2701
  }
2743
2702
 
2744
- .color-green-500 {
2745
- color: var(--pf-green-color-500);
2703
+ .color-gray-100 {
2704
+ color: var(--pf-gray-color-100);
2746
2705
  }
2747
2706
 
2748
- .bg-green-500 {
2749
- background-color: var(--pf-green-color-500);
2707
+ .bg-gray-100 {
2708
+ background-color: var(--pf-gray-color-100);
2750
2709
  }
2751
2710
 
2752
- .color-green-600 {
2753
- color: var(--pf-green-color-600);
2711
+ .color-gray-150 {
2712
+ color: var(--pf-gray-color-150);
2754
2713
  }
2755
2714
 
2756
- .bg-green-600 {
2757
- background-color: var(--pf-green-color-600);
2715
+ .bg-gray-150 {
2716
+ background-color: var(--pf-gray-color-150);
2758
2717
  }
2759
2718
 
2760
- .color-green-700 {
2761
- color: var(--pf-green-color-700);
2719
+ .color-gray-200 {
2720
+ color: var(--pf-gray-color-200);
2762
2721
  }
2763
2722
 
2764
- .bg-green-700 {
2765
- background-color: var(--pf-green-color-700);
2723
+ .bg-gray-200 {
2724
+ background-color: var(--pf-gray-color-200);
2766
2725
  }
2767
2726
 
2768
- .color-green-800 {
2769
- color: var(--pf-green-color-800);
2727
+ .color-gray-250 {
2728
+ color: var(--pf-gray-color-250);
2770
2729
  }
2771
2730
 
2772
- .bg-green-800 {
2773
- background-color: var(--pf-green-color-800);
2731
+ .bg-gray-250 {
2732
+ background-color: var(--pf-gray-color-250);
2774
2733
  }
2775
2734
 
2776
- .color-green-900 {
2777
- color: var(--pf-green-color-900);
2735
+ .color-gray-300 {
2736
+ color: var(--pf-gray-color-300);
2778
2737
  }
2779
2738
 
2780
- .bg-green-900 {
2781
- background-color: var(--pf-green-color-900);
2739
+ .bg-gray-300 {
2740
+ background-color: var(--pf-gray-color-300);
2782
2741
  }
2783
2742
 
2784
- .color-orange {
2785
- color: var(--pf-orange-color);
2743
+ .color-gray-350 {
2744
+ color: var(--pf-gray-color-350);
2786
2745
  }
2787
2746
 
2788
- .bg-orange {
2789
- background-color: var(--pf-orange-color);
2747
+ .bg-gray-350 {
2748
+ background-color: var(--pf-gray-color-350);
2790
2749
  }
2791
2750
 
2792
- .color-orange-100 {
2793
- color: var(--pf-orange-color-100);
2751
+ .color-gray-400 {
2752
+ color: var(--pf-gray-color-400);
2794
2753
  }
2795
2754
 
2796
- .bg-orange-100 {
2797
- background-color: var(--pf-orange-color-100);
2755
+ .bg-gray-400 {
2756
+ background-color: var(--pf-gray-color-400);
2798
2757
  }
2799
2758
 
2800
- .color-orange-200 {
2801
- color: var(--pf-orange-color-200);
2759
+ .color-gray-450 {
2760
+ color: var(--pf-gray-color-450);
2802
2761
  }
2803
2762
 
2804
- .bg-orange-200 {
2805
- background-color: var(--pf-orange-color-200);
2763
+ .bg-gray-450 {
2764
+ background-color: var(--pf-gray-color-450);
2806
2765
  }
2807
2766
 
2808
- .color-orange-300 {
2809
- color: var(--pf-orange-color-300);
2767
+ .color-gray-500 {
2768
+ color: var(--pf-gray-color-500);
2810
2769
  }
2811
2770
 
2812
- .bg-orange-300 {
2813
- background-color: var(--pf-orange-color-300);
2771
+ .bg-gray-500 {
2772
+ background-color: var(--pf-gray-color-500);
2814
2773
  }
2815
2774
 
2816
- .color-orange-400 {
2817
- color: var(--pf-orange-color-400);
2775
+ .color-gray-550 {
2776
+ color: var(--pf-gray-color-550);
2818
2777
  }
2819
2778
 
2820
- .bg-orange-400 {
2821
- background-color: var(--pf-orange-color-400);
2779
+ .bg-gray-550 {
2780
+ background-color: var(--pf-gray-color-550);
2822
2781
  }
2823
2782
 
2824
- .color-orange-500 {
2825
- color: var(--pf-orange-color-500);
2783
+ .color-gray-600 {
2784
+ color: var(--pf-gray-color-600);
2826
2785
  }
2827
2786
 
2828
- .bg-orange-500 {
2829
- background-color: var(--pf-orange-color-500);
2787
+ .bg-gray-600 {
2788
+ background-color: var(--pf-gray-color-600);
2830
2789
  }
2831
2790
 
2832
- .color-orange-600 {
2833
- color: var(--pf-orange-color-600);
2791
+ .color-gray-650 {
2792
+ color: var(--pf-gray-color-650);
2834
2793
  }
2835
2794
 
2836
- .bg-orange-600 {
2837
- background-color: var(--pf-orange-color-600);
2795
+ .bg-gray-650 {
2796
+ background-color: var(--pf-gray-color-650);
2838
2797
  }
2839
2798
 
2840
- .color-orange-700 {
2841
- color: var(--pf-orange-color-700);
2799
+ .color-gray-700 {
2800
+ color: var(--pf-gray-color-700);
2842
2801
  }
2843
2802
 
2844
- .bg-orange-700 {
2845
- background-color: var(--pf-orange-color-700);
2803
+ .bg-gray-700 {
2804
+ background-color: var(--pf-gray-color-700);
2846
2805
  }
2847
2806
 
2848
- .color-orange-800 {
2849
- color: var(--pf-orange-color-800);
2807
+ .color-gray-750 {
2808
+ color: var(--pf-gray-color-750);
2850
2809
  }
2851
2810
 
2852
- .bg-orange-800 {
2853
- background-color: var(--pf-orange-color-800);
2811
+ .bg-gray-750 {
2812
+ background-color: var(--pf-gray-color-750);
2854
2813
  }
2855
2814
 
2856
- .color-orange-900 {
2857
- color: var(--pf-orange-color-900);
2815
+ .color-gray-800 {
2816
+ color: var(--pf-gray-color-800);
2858
2817
  }
2859
2818
 
2860
- .bg-orange-900 {
2861
- background-color: var(--pf-orange-color-900);
2819
+ .bg-gray-800 {
2820
+ background-color: var(--pf-gray-color-800);
2862
2821
  }
2863
2822
 
2864
- .color-red {
2865
- color: var(--pf-red-color);
2823
+ .color-gray-850 {
2824
+ color: var(--pf-gray-color-850);
2866
2825
  }
2867
2826
 
2868
- .bg-red {
2869
- background-color: var(--pf-red-color);
2827
+ .bg-gray-850 {
2828
+ background-color: var(--pf-gray-color-850);
2870
2829
  }
2871
2830
 
2872
- .color-red-100 {
2873
- color: var(--pf-red-color-100);
2831
+ .color-gray-900 {
2832
+ color: var(--pf-gray-color-900);
2874
2833
  }
2875
2834
 
2876
- .bg-red-100 {
2877
- background-color: var(--pf-red-color-100);
2835
+ .bg-gray-900 {
2836
+ background-color: var(--pf-gray-color-900);
2878
2837
  }
2879
2838
 
2880
- .color-red-200 {
2839
+ .color-gray-950 {
2840
+ color: var(--pf-gray-color-950);
2841
+ }
2842
+
2843
+ .bg-gray-950 {
2844
+ background-color: var(--pf-gray-color-950);
2845
+ }
2846
+
2847
+ .color-gray-1000 {
2848
+ color: var(--pf-gray-color-1000);
2849
+ }
2850
+
2851
+ .bg-gray-1000 {
2852
+ background-color: var(--pf-gray-color-1000);
2853
+ }
2854
+
2855
+ .color-red {
2856
+ color: var(--pf-red-color);
2857
+ }
2858
+
2859
+ .bg-red {
2860
+ background-color: var(--pf-red-color);
2861
+ }
2862
+
2863
+ .color-red-50 {
2864
+ color: var(--pf-red-color-50);
2865
+ }
2866
+
2867
+ .bg-red-50 {
2868
+ background-color: var(--pf-red-color-50);
2869
+ }
2870
+
2871
+ .color-red-100 {
2872
+ color: var(--pf-red-color-100);
2873
+ }
2874
+
2875
+ .bg-red-100 {
2876
+ background-color: var(--pf-red-color-100);
2877
+ }
2878
+
2879
+ .color-red-150 {
2880
+ color: var(--pf-red-color-150);
2881
+ }
2882
+
2883
+ .bg-red-150 {
2884
+ background-color: var(--pf-red-color-150);
2885
+ }
2886
+
2887
+ .color-red-200 {
2881
2888
  color: var(--pf-red-color-200);
2882
2889
  }
2883
2890
 
@@ -2885,6 +2892,14 @@ p,
2885
2892
  background-color: var(--pf-red-color-200);
2886
2893
  }
2887
2894
 
2895
+ .color-red-250 {
2896
+ color: var(--pf-red-color-250);
2897
+ }
2898
+
2899
+ .bg-red-250 {
2900
+ background-color: var(--pf-red-color-250);
2901
+ }
2902
+
2888
2903
  .color-red-300 {
2889
2904
  color: var(--pf-red-color-300);
2890
2905
  }
@@ -2893,6 +2908,14 @@ p,
2893
2908
  background-color: var(--pf-red-color-300);
2894
2909
  }
2895
2910
 
2911
+ .color-red-350 {
2912
+ color: var(--pf-red-color-350);
2913
+ }
2914
+
2915
+ .bg-red-350 {
2916
+ background-color: var(--pf-red-color-350);
2917
+ }
2918
+
2896
2919
  .color-red-400 {
2897
2920
  color: var(--pf-red-color-400);
2898
2921
  }
@@ -2901,6 +2924,14 @@ p,
2901
2924
  background-color: var(--pf-red-color-400);
2902
2925
  }
2903
2926
 
2927
+ .color-red-450 {
2928
+ color: var(--pf-red-color-450);
2929
+ }
2930
+
2931
+ .bg-red-450 {
2932
+ background-color: var(--pf-red-color-450);
2933
+ }
2934
+
2904
2935
  .color-red-500 {
2905
2936
  color: var(--pf-red-color-500);
2906
2937
  }
@@ -2909,6 +2940,14 @@ p,
2909
2940
  background-color: var(--pf-red-color-500);
2910
2941
  }
2911
2942
 
2943
+ .color-red-550 {
2944
+ color: var(--pf-red-color-550);
2945
+ }
2946
+
2947
+ .bg-red-550 {
2948
+ background-color: var(--pf-red-color-550);
2949
+ }
2950
+
2912
2951
  .color-red-600 {
2913
2952
  color: var(--pf-red-color-600);
2914
2953
  }
@@ -2917,6 +2956,14 @@ p,
2917
2956
  background-color: var(--pf-red-color-600);
2918
2957
  }
2919
2958
 
2959
+ .color-red-650 {
2960
+ color: var(--pf-red-color-650);
2961
+ }
2962
+
2963
+ .bg-red-650 {
2964
+ background-color: var(--pf-red-color-650);
2965
+ }
2966
+
2920
2967
  .color-red-700 {
2921
2968
  color: var(--pf-red-color-700);
2922
2969
  }
@@ -2925,6 +2972,14 @@ p,
2925
2972
  background-color: var(--pf-red-color-700);
2926
2973
  }
2927
2974
 
2975
+ .color-red-750 {
2976
+ color: var(--pf-red-color-750);
2977
+ }
2978
+
2979
+ .bg-red-750 {
2980
+ background-color: var(--pf-red-color-750);
2981
+ }
2982
+
2928
2983
  .color-red-800 {
2929
2984
  color: var(--pf-red-color-800);
2930
2985
  }
@@ -2933,6 +2988,14 @@ p,
2933
2988
  background-color: var(--pf-red-color-800);
2934
2989
  }
2935
2990
 
2991
+ .color-red-850 {
2992
+ color: var(--pf-red-color-850);
2993
+ }
2994
+
2995
+ .bg-red-850 {
2996
+ background-color: var(--pf-red-color-850);
2997
+ }
2998
+
2936
2999
  .color-red-900 {
2937
3000
  color: var(--pf-red-color-900);
2938
3001
  }
@@ -2941,6 +3004,694 @@ p,
2941
3004
  background-color: var(--pf-red-color-900);
2942
3005
  }
2943
3006
 
3007
+ .color-red-950 {
3008
+ color: var(--pf-red-color-950);
3009
+ }
3010
+
3011
+ .bg-red-950 {
3012
+ background-color: var(--pf-red-color-950);
3013
+ }
3014
+
3015
+ .color-red-1000 {
3016
+ color: var(--pf-red-color-1000);
3017
+ }
3018
+
3019
+ .bg-red-1000 {
3020
+ background-color: var(--pf-red-color-1000);
3021
+ }
3022
+
3023
+ .color-orange {
3024
+ color: var(--pf-orange-color);
3025
+ }
3026
+
3027
+ .bg-orange {
3028
+ background-color: var(--pf-orange-color);
3029
+ }
3030
+
3031
+ .color-orange-50 {
3032
+ color: var(--pf-orange-color-50);
3033
+ }
3034
+
3035
+ .bg-orange-50 {
3036
+ background-color: var(--pf-orange-color-50);
3037
+ }
3038
+
3039
+ .color-orange-100 {
3040
+ color: var(--pf-orange-color-100);
3041
+ }
3042
+
3043
+ .bg-orange-100 {
3044
+ background-color: var(--pf-orange-color-100);
3045
+ }
3046
+
3047
+ .color-orange-150 {
3048
+ color: var(--pf-orange-color-150);
3049
+ }
3050
+
3051
+ .bg-orange-150 {
3052
+ background-color: var(--pf-orange-color-150);
3053
+ }
3054
+
3055
+ .color-orange-200 {
3056
+ color: var(--pf-orange-color-200);
3057
+ }
3058
+
3059
+ .bg-orange-200 {
3060
+ background-color: var(--pf-orange-color-200);
3061
+ }
3062
+
3063
+ .color-orange-250 {
3064
+ color: var(--pf-orange-color-250);
3065
+ }
3066
+
3067
+ .bg-orange-250 {
3068
+ background-color: var(--pf-orange-color-250);
3069
+ }
3070
+
3071
+ .color-orange-300 {
3072
+ color: var(--pf-orange-color-300);
3073
+ }
3074
+
3075
+ .bg-orange-300 {
3076
+ background-color: var(--pf-orange-color-300);
3077
+ }
3078
+
3079
+ .color-orange-350 {
3080
+ color: var(--pf-orange-color-350);
3081
+ }
3082
+
3083
+ .bg-orange-350 {
3084
+ background-color: var(--pf-orange-color-350);
3085
+ }
3086
+
3087
+ .color-orange-400 {
3088
+ color: var(--pf-orange-color-400);
3089
+ }
3090
+
3091
+ .bg-orange-400 {
3092
+ background-color: var(--pf-orange-color-400);
3093
+ }
3094
+
3095
+ .color-orange-450 {
3096
+ color: var(--pf-orange-color-450);
3097
+ }
3098
+
3099
+ .bg-orange-450 {
3100
+ background-color: var(--pf-orange-color-450);
3101
+ }
3102
+
3103
+ .color-orange-500 {
3104
+ color: var(--pf-orange-color-500);
3105
+ }
3106
+
3107
+ .bg-orange-500 {
3108
+ background-color: var(--pf-orange-color-500);
3109
+ }
3110
+
3111
+ .color-orange-550 {
3112
+ color: var(--pf-orange-color-550);
3113
+ }
3114
+
3115
+ .bg-orange-550 {
3116
+ background-color: var(--pf-orange-color-550);
3117
+ }
3118
+
3119
+ .color-orange-600 {
3120
+ color: var(--pf-orange-color-600);
3121
+ }
3122
+
3123
+ .bg-orange-600 {
3124
+ background-color: var(--pf-orange-color-600);
3125
+ }
3126
+
3127
+ .color-orange-650 {
3128
+ color: var(--pf-orange-color-650);
3129
+ }
3130
+
3131
+ .bg-orange-650 {
3132
+ background-color: var(--pf-orange-color-650);
3133
+ }
3134
+
3135
+ .color-orange-700 {
3136
+ color: var(--pf-orange-color-700);
3137
+ }
3138
+
3139
+ .bg-orange-700 {
3140
+ background-color: var(--pf-orange-color-700);
3141
+ }
3142
+
3143
+ .color-orange-750 {
3144
+ color: var(--pf-orange-color-750);
3145
+ }
3146
+
3147
+ .bg-orange-750 {
3148
+ background-color: var(--pf-orange-color-750);
3149
+ }
3150
+
3151
+ .color-orange-800 {
3152
+ color: var(--pf-orange-color-800);
3153
+ }
3154
+
3155
+ .bg-orange-800 {
3156
+ background-color: var(--pf-orange-color-800);
3157
+ }
3158
+
3159
+ .color-orange-850 {
3160
+ color: var(--pf-orange-color-850);
3161
+ }
3162
+
3163
+ .bg-orange-850 {
3164
+ background-color: var(--pf-orange-color-850);
3165
+ }
3166
+
3167
+ .color-orange-900 {
3168
+ color: var(--pf-orange-color-900);
3169
+ }
3170
+
3171
+ .bg-orange-900 {
3172
+ background-color: var(--pf-orange-color-900);
3173
+ }
3174
+
3175
+ .color-orange-950 {
3176
+ color: var(--pf-orange-color-950);
3177
+ }
3178
+
3179
+ .bg-orange-950 {
3180
+ background-color: var(--pf-orange-color-950);
3181
+ }
3182
+
3183
+ .color-orange-1000 {
3184
+ color: var(--pf-orange-color-1000);
3185
+ }
3186
+
3187
+ .bg-orange-1000 {
3188
+ background-color: var(--pf-orange-color-1000);
3189
+ }
3190
+
3191
+ .color-yellow {
3192
+ color: var(--pf-yellow-color);
3193
+ }
3194
+
3195
+ .bg-yellow {
3196
+ background-color: var(--pf-yellow-color);
3197
+ }
3198
+
3199
+ .color-yellow-50 {
3200
+ color: var(--pf-yellow-color-50);
3201
+ }
3202
+
3203
+ .bg-yellow-50 {
3204
+ background-color: var(--pf-yellow-color-50);
3205
+ }
3206
+
3207
+ .color-yellow-100 {
3208
+ color: var(--pf-yellow-color-100);
3209
+ }
3210
+
3211
+ .bg-yellow-100 {
3212
+ background-color: var(--pf-yellow-color-100);
3213
+ }
3214
+
3215
+ .color-yellow-150 {
3216
+ color: var(--pf-yellow-color-150);
3217
+ }
3218
+
3219
+ .bg-yellow-150 {
3220
+ background-color: var(--pf-yellow-color-150);
3221
+ }
3222
+
3223
+ .color-yellow-200 {
3224
+ color: var(--pf-yellow-color-200);
3225
+ }
3226
+
3227
+ .bg-yellow-200 {
3228
+ background-color: var(--pf-yellow-color-200);
3229
+ }
3230
+
3231
+ .color-yellow-250 {
3232
+ color: var(--pf-yellow-color-250);
3233
+ }
3234
+
3235
+ .bg-yellow-250 {
3236
+ background-color: var(--pf-yellow-color-250);
3237
+ }
3238
+
3239
+ .color-yellow-300 {
3240
+ color: var(--pf-yellow-color-300);
3241
+ }
3242
+
3243
+ .bg-yellow-300 {
3244
+ background-color: var(--pf-yellow-color-300);
3245
+ }
3246
+
3247
+ .color-yellow-350 {
3248
+ color: var(--pf-yellow-color-350);
3249
+ }
3250
+
3251
+ .bg-yellow-350 {
3252
+ background-color: var(--pf-yellow-color-350);
3253
+ }
3254
+
3255
+ .color-yellow-400 {
3256
+ color: var(--pf-yellow-color-400);
3257
+ }
3258
+
3259
+ .bg-yellow-400 {
3260
+ background-color: var(--pf-yellow-color-400);
3261
+ }
3262
+
3263
+ .color-yellow-450 {
3264
+ color: var(--pf-yellow-color-450);
3265
+ }
3266
+
3267
+ .bg-yellow-450 {
3268
+ background-color: var(--pf-yellow-color-450);
3269
+ }
3270
+
3271
+ .color-yellow-500 {
3272
+ color: var(--pf-yellow-color-500);
3273
+ }
3274
+
3275
+ .bg-yellow-500 {
3276
+ background-color: var(--pf-yellow-color-500);
3277
+ }
3278
+
3279
+ .color-yellow-550 {
3280
+ color: var(--pf-yellow-color-550);
3281
+ }
3282
+
3283
+ .bg-yellow-550 {
3284
+ background-color: var(--pf-yellow-color-550);
3285
+ }
3286
+
3287
+ .color-yellow-600 {
3288
+ color: var(--pf-yellow-color-600);
3289
+ }
3290
+
3291
+ .bg-yellow-600 {
3292
+ background-color: var(--pf-yellow-color-600);
3293
+ }
3294
+
3295
+ .color-yellow-650 {
3296
+ color: var(--pf-yellow-color-650);
3297
+ }
3298
+
3299
+ .bg-yellow-650 {
3300
+ background-color: var(--pf-yellow-color-650);
3301
+ }
3302
+
3303
+ .color-yellow-700 {
3304
+ color: var(--pf-yellow-color-700);
3305
+ }
3306
+
3307
+ .bg-yellow-700 {
3308
+ background-color: var(--pf-yellow-color-700);
3309
+ }
3310
+
3311
+ .color-yellow-750 {
3312
+ color: var(--pf-yellow-color-750);
3313
+ }
3314
+
3315
+ .bg-yellow-750 {
3316
+ background-color: var(--pf-yellow-color-750);
3317
+ }
3318
+
3319
+ .color-yellow-800 {
3320
+ color: var(--pf-yellow-color-800);
3321
+ }
3322
+
3323
+ .bg-yellow-800 {
3324
+ background-color: var(--pf-yellow-color-800);
3325
+ }
3326
+
3327
+ .color-yellow-850 {
3328
+ color: var(--pf-yellow-color-850);
3329
+ }
3330
+
3331
+ .bg-yellow-850 {
3332
+ background-color: var(--pf-yellow-color-850);
3333
+ }
3334
+
3335
+ .color-yellow-900 {
3336
+ color: var(--pf-yellow-color-900);
3337
+ }
3338
+
3339
+ .bg-yellow-900 {
3340
+ background-color: var(--pf-yellow-color-900);
3341
+ }
3342
+
3343
+ .color-yellow-950 {
3344
+ color: var(--pf-yellow-color-950);
3345
+ }
3346
+
3347
+ .bg-yellow-950 {
3348
+ background-color: var(--pf-yellow-color-950);
3349
+ }
3350
+
3351
+ .color-yellow-1000 {
3352
+ color: var(--pf-yellow-color-1000);
3353
+ }
3354
+
3355
+ .bg-yellow-1000 {
3356
+ background-color: var(--pf-yellow-color-1000);
3357
+ }
3358
+
3359
+ .color-green {
3360
+ color: var(--pf-green-color);
3361
+ }
3362
+
3363
+ .bg-green {
3364
+ background-color: var(--pf-green-color);
3365
+ }
3366
+
3367
+ .color-green-50 {
3368
+ color: var(--pf-green-color-50);
3369
+ }
3370
+
3371
+ .bg-green-50 {
3372
+ background-color: var(--pf-green-color-50);
3373
+ }
3374
+
3375
+ .color-green-100 {
3376
+ color: var(--pf-green-color-100);
3377
+ }
3378
+
3379
+ .bg-green-100 {
3380
+ background-color: var(--pf-green-color-100);
3381
+ }
3382
+
3383
+ .color-green-150 {
3384
+ color: var(--pf-green-color-150);
3385
+ }
3386
+
3387
+ .bg-green-150 {
3388
+ background-color: var(--pf-green-color-150);
3389
+ }
3390
+
3391
+ .color-green-200 {
3392
+ color: var(--pf-green-color-200);
3393
+ }
3394
+
3395
+ .bg-green-200 {
3396
+ background-color: var(--pf-green-color-200);
3397
+ }
3398
+
3399
+ .color-green-250 {
3400
+ color: var(--pf-green-color-250);
3401
+ }
3402
+
3403
+ .bg-green-250 {
3404
+ background-color: var(--pf-green-color-250);
3405
+ }
3406
+
3407
+ .color-green-300 {
3408
+ color: var(--pf-green-color-300);
3409
+ }
3410
+
3411
+ .bg-green-300 {
3412
+ background-color: var(--pf-green-color-300);
3413
+ }
3414
+
3415
+ .color-green-350 {
3416
+ color: var(--pf-green-color-350);
3417
+ }
3418
+
3419
+ .bg-green-350 {
3420
+ background-color: var(--pf-green-color-350);
3421
+ }
3422
+
3423
+ .color-green-400 {
3424
+ color: var(--pf-green-color-400);
3425
+ }
3426
+
3427
+ .bg-green-400 {
3428
+ background-color: var(--pf-green-color-400);
3429
+ }
3430
+
3431
+ .color-green-450 {
3432
+ color: var(--pf-green-color-450);
3433
+ }
3434
+
3435
+ .bg-green-450 {
3436
+ background-color: var(--pf-green-color-450);
3437
+ }
3438
+
3439
+ .color-green-500 {
3440
+ color: var(--pf-green-color-500);
3441
+ }
3442
+
3443
+ .bg-green-500 {
3444
+ background-color: var(--pf-green-color-500);
3445
+ }
3446
+
3447
+ .color-green-550 {
3448
+ color: var(--pf-green-color-550);
3449
+ }
3450
+
3451
+ .bg-green-550 {
3452
+ background-color: var(--pf-green-color-550);
3453
+ }
3454
+
3455
+ .color-green-600 {
3456
+ color: var(--pf-green-color-600);
3457
+ }
3458
+
3459
+ .bg-green-600 {
3460
+ background-color: var(--pf-green-color-600);
3461
+ }
3462
+
3463
+ .color-green-650 {
3464
+ color: var(--pf-green-color-650);
3465
+ }
3466
+
3467
+ .bg-green-650 {
3468
+ background-color: var(--pf-green-color-650);
3469
+ }
3470
+
3471
+ .color-green-700 {
3472
+ color: var(--pf-green-color-700);
3473
+ }
3474
+
3475
+ .bg-green-700 {
3476
+ background-color: var(--pf-green-color-700);
3477
+ }
3478
+
3479
+ .color-green-750 {
3480
+ color: var(--pf-green-color-750);
3481
+ }
3482
+
3483
+ .bg-green-750 {
3484
+ background-color: var(--pf-green-color-750);
3485
+ }
3486
+
3487
+ .color-green-800 {
3488
+ color: var(--pf-green-color-800);
3489
+ }
3490
+
3491
+ .bg-green-800 {
3492
+ background-color: var(--pf-green-color-800);
3493
+ }
3494
+
3495
+ .color-green-850 {
3496
+ color: var(--pf-green-color-850);
3497
+ }
3498
+
3499
+ .bg-green-850 {
3500
+ background-color: var(--pf-green-color-850);
3501
+ }
3502
+
3503
+ .color-green-900 {
3504
+ color: var(--pf-green-color-900);
3505
+ }
3506
+
3507
+ .bg-green-900 {
3508
+ background-color: var(--pf-green-color-900);
3509
+ }
3510
+
3511
+ .color-green-950 {
3512
+ color: var(--pf-green-color-950);
3513
+ }
3514
+
3515
+ .bg-green-950 {
3516
+ background-color: var(--pf-green-color-950);
3517
+ }
3518
+
3519
+ .color-green-1000 {
3520
+ color: var(--pf-green-color-1000);
3521
+ }
3522
+
3523
+ .bg-green-1000 {
3524
+ background-color: var(--pf-green-color-1000);
3525
+ }
3526
+
3527
+ .color-purple {
3528
+ color: var(--pf-purple-color);
3529
+ }
3530
+
3531
+ .bg-purple {
3532
+ background-color: var(--pf-purple-color);
3533
+ }
3534
+
3535
+ .color-purple-50 {
3536
+ color: var(--pf-purple-color-50);
3537
+ }
3538
+
3539
+ .bg-purple-50 {
3540
+ background-color: var(--pf-purple-color-50);
3541
+ }
3542
+
3543
+ .color-purple-100 {
3544
+ color: var(--pf-purple-color-100);
3545
+ }
3546
+
3547
+ .bg-purple-100 {
3548
+ background-color: var(--pf-purple-color-100);
3549
+ }
3550
+
3551
+ .color-purple-150 {
3552
+ color: var(--pf-purple-color-150);
3553
+ }
3554
+
3555
+ .bg-purple-150 {
3556
+ background-color: var(--pf-purple-color-150);
3557
+ }
3558
+
3559
+ .color-purple-200 {
3560
+ color: var(--pf-purple-color-200);
3561
+ }
3562
+
3563
+ .bg-purple-200 {
3564
+ background-color: var(--pf-purple-color-200);
3565
+ }
3566
+
3567
+ .color-purple-250 {
3568
+ color: var(--pf-purple-color-250);
3569
+ }
3570
+
3571
+ .bg-purple-250 {
3572
+ background-color: var(--pf-purple-color-250);
3573
+ }
3574
+
3575
+ .color-purple-300 {
3576
+ color: var(--pf-purple-color-300);
3577
+ }
3578
+
3579
+ .bg-purple-300 {
3580
+ background-color: var(--pf-purple-color-300);
3581
+ }
3582
+
3583
+ .color-purple-350 {
3584
+ color: var(--pf-purple-color-350);
3585
+ }
3586
+
3587
+ .bg-purple-350 {
3588
+ background-color: var(--pf-purple-color-350);
3589
+ }
3590
+
3591
+ .color-purple-400 {
3592
+ color: var(--pf-purple-color-400);
3593
+ }
3594
+
3595
+ .bg-purple-400 {
3596
+ background-color: var(--pf-purple-color-400);
3597
+ }
3598
+
3599
+ .color-purple-450 {
3600
+ color: var(--pf-purple-color-450);
3601
+ }
3602
+
3603
+ .bg-purple-450 {
3604
+ background-color: var(--pf-purple-color-450);
3605
+ }
3606
+
3607
+ .color-purple-500 {
3608
+ color: var(--pf-purple-color-500);
3609
+ }
3610
+
3611
+ .bg-purple-500 {
3612
+ background-color: var(--pf-purple-color-500);
3613
+ }
3614
+
3615
+ .color-purple-550 {
3616
+ color: var(--pf-purple-color-550);
3617
+ }
3618
+
3619
+ .bg-purple-550 {
3620
+ background-color: var(--pf-purple-color-550);
3621
+ }
3622
+
3623
+ .color-purple-600 {
3624
+ color: var(--pf-purple-color-600);
3625
+ }
3626
+
3627
+ .bg-purple-600 {
3628
+ background-color: var(--pf-purple-color-600);
3629
+ }
3630
+
3631
+ .color-purple-650 {
3632
+ color: var(--pf-purple-color-650);
3633
+ }
3634
+
3635
+ .bg-purple-650 {
3636
+ background-color: var(--pf-purple-color-650);
3637
+ }
3638
+
3639
+ .color-purple-700 {
3640
+ color: var(--pf-purple-color-700);
3641
+ }
3642
+
3643
+ .bg-purple-700 {
3644
+ background-color: var(--pf-purple-color-700);
3645
+ }
3646
+
3647
+ .color-purple-750 {
3648
+ color: var(--pf-purple-color-750);
3649
+ }
3650
+
3651
+ .bg-purple-750 {
3652
+ background-color: var(--pf-purple-color-750);
3653
+ }
3654
+
3655
+ .color-purple-800 {
3656
+ color: var(--pf-purple-color-800);
3657
+ }
3658
+
3659
+ .bg-purple-800 {
3660
+ background-color: var(--pf-purple-color-800);
3661
+ }
3662
+
3663
+ .color-purple-850 {
3664
+ color: var(--pf-purple-color-850);
3665
+ }
3666
+
3667
+ .bg-purple-850 {
3668
+ background-color: var(--pf-purple-color-850);
3669
+ }
3670
+
3671
+ .color-purple-900 {
3672
+ color: var(--pf-purple-color-900);
3673
+ }
3674
+
3675
+ .bg-purple-900 {
3676
+ background-color: var(--pf-purple-color-900);
3677
+ }
3678
+
3679
+ .color-purple-950 {
3680
+ color: var(--pf-purple-color-950);
3681
+ }
3682
+
3683
+ .bg-purple-950 {
3684
+ background-color: var(--pf-purple-color-950);
3685
+ }
3686
+
3687
+ .color-purple-1000 {
3688
+ color: var(--pf-purple-color-1000);
3689
+ }
3690
+
3691
+ .bg-purple-1000 {
3692
+ background-color: var(--pf-purple-color-1000);
3693
+ }
3694
+
2944
3695
  .color-success {
2945
3696
  color: var(--pf-success-color);
2946
3697
  }
@@ -2981,6 +3732,14 @@ p,
2981
3732
  background-color: var(--pf-error-color);
2982
3733
  }
2983
3734
 
3735
+ .color-brand {
3736
+ color: var(--pf-brand-color);
3737
+ }
3738
+
3739
+ .bg-brand {
3740
+ background-color: var(--pf-brand-color);
3741
+ }
3742
+
2984
3743
  .link-color {
2985
3744
  color: var(--pf-link-color);
2986
3745
  }