@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +1 -1
  3. package/css/components/Alert/alert-group.css +20 -16
  4. package/css/components/Alert/alert.css +57 -84
  5. package/css/components/Alert/alert.d.ts +1 -2
  6. package/css/components/Alert/alert.js +1 -2
  7. package/css/components/Alert/alert.mjs +1 -2
  8. package/css/components/Button/button.css +142 -179
  9. package/css/components/Button/button.d.ts +1 -2
  10. package/css/components/Button/button.js +1 -2
  11. package/css/components/Button/button.mjs +1 -2
  12. package/css/components/Content/content.css +67 -67
  13. package/css/components/Drawer/drawer.css +0 -1
  14. package/css/components/Masthead/masthead.css +49 -103
  15. package/css/components/Masthead/masthead.d.ts +1 -6
  16. package/css/components/Masthead/masthead.js +1 -6
  17. package/css/components/Masthead/masthead.mjs +1 -6
  18. package/css/components/MenuToggle/menu-toggle.css +57 -79
  19. package/css/components/Nav/nav.css +42 -40
  20. package/css/components/NotificationBadge/notification-badge.css +56 -81
  21. package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
  22. package/css/components/NotificationBadge/notification-badge.js +1 -5
  23. package/css/components/NotificationBadge/notification-badge.mjs +1 -5
  24. package/css/components/Page/page.css +110 -209
  25. package/css/components/Page/page.d.ts +5 -12
  26. package/css/components/Page/page.js +5 -12
  27. package/css/components/Page/page.mjs +5 -12
  28. package/css/components/Table/table-grid.css +8 -8
  29. package/css/components/Table/table.css +79 -88
  30. package/css/components/Toolbar/toolbar.css +4 -2
  31. package/css/docs/components/Nav/examples/Navigation.css +2 -1
  32. package/css/docs/components/Page/examples/Page.css +0 -8
  33. package/css/docs/components/Page/examples/Page.d.ts +0 -7
  34. package/css/docs/components/Page/examples/Page.js +0 -7
  35. package/css/docs/components/Page/examples/Page.mjs +0 -7
  36. package/css/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  37. package/package.json +3 -3
  38. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
  39. package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
  40. package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
  41. package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.0.0-alpha.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.1...@patternfly/react-styles@6.0.0-alpha.2) (2023-11-16)
7
+
8
+ ### Reverts
9
+
10
+ - Revert "Merge remote-tracking branch 'upstream/main' into v6" (#9791) ([b7e8065](https://github.com/patternfly/patternfly-react/commit/b7e80650d3e4cad7a657f6e5a3177485ca4f8c26)), closes [#9791](https://github.com/patternfly/patternfly-react/issues/9791)
11
+
6
12
  # 6.0.0-alpha.1 (2023-09-29)
7
13
 
8
14
  ### Bug Fixes
@@ -13,6 +19,36 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
13
19
 
14
20
  **Note:** Version bump only for package @patternfly/react-styles
15
21
 
22
+ # 5.2.0-prerelease.3 (2023-10-26)
23
+
24
+ **Note:** Version bump only for package @patternfly/react-styles
25
+
26
+ # 5.2.0-prerelease.2 (2023-10-10)
27
+
28
+ **Note:** Version bump only for package @patternfly/react-styles
29
+
30
+ # 5.2.0-prerelease.1 (2023-10-09)
31
+
32
+ **Note:** Version bump only for package @patternfly/react-styles
33
+
34
+ # [5.2.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.1.1...@patternfly/react-styles@5.2.0-prerelease.0) (2023-10-05)
35
+
36
+ **Note:** Version bump only for package @patternfly/react-styles
37
+
38
+ ## [5.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.1.1-prerelease.8...@patternfly/react-styles@5.1.1) (2023-10-05)
39
+
40
+ **Note:** Version bump only for package @patternfly/react-styles
41
+
42
+ ## 5.1.1-prerelease.8 (2023-10-03)
43
+
44
+ ### Bug Fixes
45
+
46
+ - whitespace changes to trigger prereleases ([#9702](https://github.com/patternfly/patternfly-react/issues/9702)) ([741c248](https://github.com/patternfly/patternfly-react/commit/741c24825b503e116c77cf304aa3e4e3a9ff7841))
47
+
48
+ ## 5.1.1-prerelease.7 (2023-09-21)
49
+
50
+ **Note:** Version bump only for package @patternfly/react-styles
51
+
16
52
  ## 5.1.1-prerelease.6 (2023-09-18)
17
53
 
18
54
  **Note:** Version bump only for package @patternfly/react-styles
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Library that provides CSS-in-JS capabilities
4
4
 
5
- #### Example
5
+ #### Example
6
6
 
7
7
  ```jsx
8
8
  import { css } from '@patternfly/react-styles';
@@ -1,23 +1,25 @@
1
1
  .pf-v5-c-alert-group {
2
- --pf-v5-c-alert-group__item--MarginTop: var(--pf-v5-global--spacer--sm);
3
- --pf-v5-c-alert-group--m-toast--Top: var(--pf-v5-global--spacer--2xl);
4
- --pf-v5-c-alert-group--m-toast--Right: var(--pf-v5-global--spacer--xl);
2
+ --pf-v5-c-alert-group__item--MarginTop: var(--pf-t--global--spacer--md);
3
+ --pf-v5-c-alert-group--m-toast--Top: var(--pf-t--global--spacer--2xl);
4
+ --pf-v5-c-alert-group--m-toast--Right: var(--pf-t--global--spacer--xl);
5
5
  --pf-v5-c-alert-group--m-toast--MaxWidth: 37.5rem;
6
6
  --pf-v5-c-alert-group--m-toast--ZIndex: var(--pf-v5-global--ZIndex--2xl);
7
7
  --pf-v5-c-alert-group__overflow-button--BorderWidth: 0;
8
- --pf-v5-c-alert-group__overflow-button--PaddingTop: var(--pf-v5-global--spacer--lg);
9
- --pf-v5-c-alert-group__overflow-button--PaddingRight: var(--pf-v5-global--spacer--md);
10
- --pf-v5-c-alert-group__overflow-button--PaddingBottom: var(--pf-v5-global--spacer--lg);
11
- --pf-v5-c-alert-group__overflow-button--PaddingLeft: var(--pf-v5-global--spacer--md);
12
- --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-global--link--Color);
13
- --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
14
- --pf-v5-c-alert-group__overflow-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15
- --pf-v5-c-alert-group__overflow-button--hover--Color: var(--pf-v5-global--link--Color--hover);
16
- --pf-v5-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
17
- --pf-v5-c-alert-group__overflow-button--focus--Color: var(--pf-v5-global--link--Color--hover);
18
- --pf-v5-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
19
- --pf-v5-c-alert-group__overflow-button--active--Color: var(--pf-v5-global--link--Color--hover);
20
- --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
8
+ --pf-v5-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
9
+ --pf-v5-c-alert-group__overflow-button--PaddingTop: var(--pf-t--global--spacer--md);
10
+ --pf-v5-c-alert-group__overflow-button--PaddingRight: var(--pf-t--global--spacer--md);
11
+ --pf-v5-c-alert-group__overflow-button--PaddingBottom: var(--pf-t--global--spacer--md);
12
+ --pf-v5-c-alert-group__overflow-button--PaddingLeft: var(--pf-t--global--spacer--md);
13
+ --pf-v5-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
14
+ --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
15
+ --pf-v5-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
16
+ --pf-v5-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
17
+ --pf-v5-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
18
+ --pf-v5-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
19
+ --pf-v5-c-alert-group__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover);
20
+ --pf-v5-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
21
+ --pf-v5-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
22
+ --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
21
23
  }
22
24
  .pf-v5-c-alert-group > * + * {
23
25
  margin-block-start: var(--pf-v5-c-alert-group__item--MarginTop);
@@ -41,10 +43,12 @@
41
43
  color: var(--pf-v5-c-alert-group__overflow-button--Color);
42
44
  background-color: var(--pf-v5-c-alert-group__overflow-button--BackgroundColor);
43
45
  border-width: var(--pf-v5-c-alert-group__overflow-button--BorderWidth);
46
+ border-radius: var(--pf-v5-c-alert-group__overflow-button--BorderRadius);
44
47
  box-shadow: var(--pf-v5-c-alert-group__overflow-button--BoxShadow);
45
48
  }
46
49
  .pf-v5-c-alert-group__overflow-button:hover {
47
50
  --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-c-alert-group__overflow-button--hover--Color);
51
+ --pf-v5-c-alert-group__overflow-button--BackgroundColor: var(--pf-v5-c-alert-group__overflow-button--hover--BackgroundColor);
48
52
  --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-c-alert-group__overflow-button--hover--BoxShadow);
49
53
  }
50
54
  .pf-v5-c-alert-group__overflow-button:focus {
@@ -1,74 +1,61 @@
1
- .pf-v5-c-alert {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-alert {
14
- --pf-v5-c-alert--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
15
- --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1
+ :root {
2
+ --pf-v5-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg);
3
+ --pf-v5-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default);
16
4
  --pf-v5-c-alert--GridTemplateColumns: max-content 1fr max-content;
17
5
  --pf-v5-c-alert--GridTemplateAreas:
18
6
  "icon title action"
19
7
  ". description description"
20
8
  ". actiongroup actiongroup";
21
- --pf-v5-c-alert--BorderTopWidth: var(--pf-v5-global--BorderWidth--md);
22
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-global--BorderColor--100);
23
- --pf-v5-c-alert--PaddingTop: var(--pf-v5-global--spacer--md);
24
- --pf-v5-c-alert--PaddingRight: var(--pf-v5-global--spacer--md);
25
- --pf-v5-c-alert--PaddingBottom: var(--pf-v5-global--spacer--md);
26
- --pf-v5-c-alert--PaddingLeft: var(--pf-v5-global--spacer--md);
27
- --pf-v5-c-alert__FontSize: var(--pf-v5-global--FontSize--sm);
9
+ --pf-v5-c-alert--BorderWidth: var(--pf-t--global--border--width--200);
10
+ --pf-v5-c-alert--BorderColor: transparent;
11
+ --pf-v5-c-alert--BorderRadius: var(--pf-t--global--border--radius--medium);
12
+ --pf-v5-c-alert--PaddingTop: var(--pf-t--global--spacer--md);
13
+ --pf-v5-c-alert--PaddingRight: var(--pf-t--global--spacer--md);
14
+ --pf-v5-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
15
+ --pf-v5-c-alert--PaddingLeft: var(--pf-t--global--spacer--md);
16
+ --pf-v5-c-alert--FontSize: var(--pf-t--global--font--size--body);
28
17
  --pf-v5-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element) - 0.0625rem);
29
18
  --pf-v5-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
30
- --pf-v5-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
19
+ --pf-v5-c-alert__toggle--MarginRight: var(--pf-t--global--spacer--sm);
31
20
  --pf-v5-c-alert__toggle-icon--Rotate: 0;
32
21
  --pf-v5-c-alert__toggle-icon--Transition: var(--pf-v5-global--Transition);
33
- --pf-v5-c-alert__icon--Color: var(--pf-v5-global--Color--100);
34
- --pf-v5-c-alert__icon--MarginTop: 0.0625rem;
35
- --pf-v5-c-alert__icon--MarginRight: var(--pf-v5-global--spacer--sm);
36
- --pf-v5-c-alert__icon--FontSize: var(--pf-v5-global--icon--FontSize--md);
37
- --pf-v5-c-alert__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
38
- --pf-v5-c-alert__title--Color: var(--pf-v5-global--Color--100);
22
+ --pf-v5-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
23
+ --pf-v5-c-alert__icon--MarginTop: 0.25rem;
24
+ --pf-v5-c-alert__icon--MarginRight: var(--pf-t--global--spacer--sm);
25
+ --pf-v5-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
26
+ --pf-v5-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
27
+ --pf-v5-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
28
+ --pf-v5-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
29
+ --pf-v5-c-alert__title--Color: var(--pf-t--global--text--color--regular);
39
30
  --pf-v5-c-alert__title--max-lines: 1;
40
31
  --pf-v5-c-alert__action--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
41
32
  --pf-v5-c-alert__action--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
42
33
  --pf-v5-c-alert__action--TranslateY: 0.125rem;
43
- --pf-v5-c-alert__action--MarginRight: calc(var(--pf-v5-global--spacer--sm) * -1);
44
- --pf-v5-c-alert__description--PaddingTop: var(--pf-v5-global--spacer--xs);
45
- --pf-v5-c-alert__action-group--PaddingTop-base: var(--pf-v5-global--spacer--xs);
34
+ --pf-v5-c-alert__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
35
+ --pf-v5-c-alert__description--PaddingTop: var(--pf-t--global--spacer--xs);
36
+ --pf-v5-c-alert__action-group--PaddingTop-base: var(--pf-t--global--spacer--xs);
46
37
  --pf-v5-c-alert__action-group--PaddingTop: var(--pf-v5-c-alert__action-group--PaddingTop-base);
47
- --pf-v5-c-alert__description--action-group--PaddingTop-base: var(--pf-v5-global--spacer--md);
38
+ --pf-v5-c-alert__description--action-group--PaddingTop-base: var(--pf-t--global--spacer--sm);
48
39
  --pf-v5-c-alert__description--action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop-base);
49
- --pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-v5-global--spacer--lg);
50
- --pf-v5-c-alert--m-custom--BorderTopColor: var(--pf-v5-global--custom-color--200);
51
- --pf-v5-c-alert--m-custom__icon--Color: var(--pf-v5-global--custom-color--200);
52
- --pf-v5-c-alert--m-custom__title--Color: var(--pf-v5-global--custom-color--300);
53
- --pf-v5-c-alert--m-success--BorderTopColor: var(--pf-v5-global--success-color--100);
54
- --pf-v5-c-alert--m-success__icon--Color: var(--pf-v5-global--success-color--100);
55
- --pf-v5-c-alert--m-success__title--Color: var(--pf-v5-global--success-color--200);
56
- --pf-v5-c-alert--m-danger--BorderTopColor: var(--pf-v5-global--danger-color--100);
57
- --pf-v5-c-alert--m-danger__icon--Color: var(--pf-v5-global--danger-color--100);
58
- --pf-v5-c-alert--m-danger__title--Color: var(--pf-v5-global--danger-color--200);
59
- --pf-v5-c-alert--m-warning--BorderTopColor: var(--pf-v5-global--warning-color--100);
60
- --pf-v5-c-alert--m-warning__icon--Color: var(--pf-v5-global--warning-color--100);
61
- --pf-v5-c-alert--m-warning__title--Color: var(--pf-v5-global--warning-color--200);
62
- --pf-v5-c-alert--m-info--BorderTopColor: var(--pf-v5-global--info-color--100);
63
- --pf-v5-c-alert--m-info__icon--Color: var(--pf-v5-global--info-color--100);
64
- --pf-v5-c-alert--m-info__title--Color: var(--pf-v5-global--info-color--200);
40
+ --pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-t--global--spacer--lg);
41
+ --pf-v5-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default);
42
+ --pf-v5-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
43
+ --pf-v5-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular);
44
+ --pf-v5-c-alert--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
45
+ --pf-v5-c-alert--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
46
+ --pf-v5-c-alert--m-success__title--Color: var(--pf-t--global--text--color--regular);
47
+ --pf-v5-c-alert--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
48
+ --pf-v5-c-alert--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
49
+ --pf-v5-c-alert--m-danger__title--Color: var(--pf-t--global--text--color--regular);
50
+ --pf-v5-c-alert--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
51
+ --pf-v5-c-alert--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
52
+ --pf-v5-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--regular);
53
+ --pf-v5-c-alert--m-info--BorderColor: var(--pf-t--global--border--color--status--info--default);
54
+ --pf-v5-c-alert--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
55
+ --pf-v5-c-alert--m-info__title--Color: var(--pf-t--global--text--color--regular);
56
+ --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
65
57
  --pf-v5-c-alert--m-inline--BoxShadow: none;
66
- --pf-v5-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-v5-global--palette--cyan-50);
67
- --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--palette--green-50);
68
- --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--palette--red-50);
69
- --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--palette--gold-50);
70
- --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--palette--blue-50);
71
- --pf-v5-c-alert--m-inline--m-plain--BorderTopWidth: 0;
58
+ --pf-v5-c-alert--m-inline--m-plain--BorderWidth: 0;
72
59
  --pf-v5-c-alert--m-inline--m-plain--BackgroundColor: transparent;
73
60
  --pf-v5-c-alert--m-inline--m-plain--PaddingTop: 0;
74
61
  --pf-v5-c-alert--m-inline--m-plain--PaddingRight: 0;
@@ -82,7 +69,9 @@
82
69
  --pf-v5-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-v5-c-alert__action-group--PaddingTop-base);
83
70
  --pf-v5-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
84
71
  --pf-v5-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop-base);
85
- color: var(--pf-v5-global--Color--100);
72
+ }
73
+
74
+ .pf-v5-c-alert {
86
75
  position: relative;
87
76
  display: grid;
88
77
  grid-template-areas: var(--pf-v5-c-alert--GridTemplateAreas);
@@ -91,47 +80,43 @@
91
80
  padding-block-end: var(--pf-v5-c-alert--PaddingBottom);
92
81
  padding-inline-start: var(--pf-v5-c-alert--PaddingLeft);
93
82
  padding-inline-end: var(--pf-v5-c-alert--PaddingRight);
94
- font-size: var(--pf-v5-c-alert__FontSize);
83
+ font-size: var(--pf-v5-c-alert--FontSize);
95
84
  background-color: var(--pf-v5-c-alert--BackgroundColor);
96
- border-block-start: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
85
+ border: var(--pf-v5-c-alert--BorderWidth) solid var(--pf-v5-c-alert--BorderColor);
86
+ border-radius: var(--pf-v5-c-alert--BorderRadius);
97
87
  box-shadow: var(--pf-v5-c-alert--BoxShadow);
98
88
  }
99
89
  .pf-v5-c-alert.pf-m-custom {
100
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-custom--BorderTopColor);
90
+ --pf-v5-c-alert--BorderColor: var(--pf-v5-c-alert--m-custom--BorderColor);
101
91
  --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-custom__icon--Color);
102
92
  --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-custom__title--Color);
103
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-custom--BackgroundColor);
104
93
  }
105
94
  .pf-v5-c-alert.pf-m-success {
106
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-success--BorderTopColor);
95
+ --pf-v5-c-alert--BorderColor: var(--pf-v5-c-alert--m-success--BorderColor);
107
96
  --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-success__icon--Color);
108
97
  --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-success__title--Color);
109
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-success--BackgroundColor);
110
98
  }
111
99
  .pf-v5-c-alert.pf-m-danger {
112
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-danger--BorderTopColor);
100
+ --pf-v5-c-alert--BorderColor: var(--pf-v5-c-alert--m-danger--BorderColor);
113
101
  --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-danger__icon--Color);
114
102
  --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-danger__title--Color);
115
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-danger--BackgroundColor);
116
103
  }
117
104
  .pf-v5-c-alert.pf-m-warning {
118
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-warning--BorderTopColor);
105
+ --pf-v5-c-alert--BorderColor: var(--pf-v5-c-alert--m-warning--BorderColor);
119
106
  --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-warning__icon--Color);
120
107
  --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-warning__title--Color);
121
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-warning--BackgroundColor);
122
108
  }
123
109
  .pf-v5-c-alert.pf-m-info {
124
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-info--BorderTopColor);
110
+ --pf-v5-c-alert--BorderColor: var(--pf-v5-c-alert--m-info--BorderColor);
125
111
  --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-info__icon--Color);
126
112
  --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-info__title--Color);
127
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-info--BackgroundColor);
128
113
  }
129
114
  .pf-v5-c-alert.pf-m-inline {
130
115
  --pf-v5-c-alert--BoxShadow: var(--pf-v5-c-alert--m-inline--BoxShadow);
131
116
  --pf-v5-c-alert--BackgroundColor: var(--pf-v5-c-alert--m-inline--BackgroundColor);
132
117
  }
133
118
  .pf-v5-c-alert.pf-m-plain {
134
- --pf-v5-c-alert--BorderTopWidth: var(--pf-v5-c-alert--m-inline--m-plain--BorderTopWidth);
119
+ --pf-v5-c-alert--BorderWidth: var(--pf-v5-c-alert--m-inline--m-plain--BorderWidth);
135
120
  --pf-v5-c-alert--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-plain--BackgroundColor);
136
121
  --pf-v5-c-alert--PaddingTop: var(--pf-v5-c-alert--m-inline--m-plain--PaddingTop);
137
122
  --pf-v5-c-alert--PaddingRight: var(--pf-v5-c-alert--m-inline--m-plain--PaddingRight);
@@ -151,7 +136,7 @@
151
136
  .pf-v5-c-alert__toggle {
152
137
  margin-block-start: var(--pf-v5-c-alert__toggle--MarginTop);
153
138
  margin-block-end: var(--pf-v5-c-alert__toggle--MarginBottom);
154
- margin-inline-start: var(--pf-v5-c-alert__toggle--MarginLeft);
139
+ margin-inline-end: var(--pf-v5-c-alert__toggle--MarginRight);
155
140
  }
156
141
 
157
142
  .pf-v5-c-alert__toggle-icon {
@@ -174,7 +159,9 @@
174
159
 
175
160
  .pf-v5-c-alert__title {
176
161
  grid-area: title;
162
+ font-size: var(--pf-v5-c-alert__title--FontSize);
177
163
  font-weight: var(--pf-v5-c-alert__title--FontWeight);
164
+ line-height: var(--pf-v5-c-alert__title--LineHeight);
178
165
  color: var(--pf-v5-c-alert__title--Color);
179
166
  word-break: break-word;
180
167
  }
@@ -214,18 +201,4 @@
214
201
  }
215
202
  .pf-v5-c-alert__action-group > .pf-v5-c-button:not(:last-child) {
216
203
  margin-inline-end: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
217
- }
218
-
219
- :where(.pf-v5-theme-dark) .pf-v5-c-alert {
220
- --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
221
- --pf-v5-c-alert--m-custom__title--Color: var(--pf-v5-global--custom-color--200);
222
- --pf-v5-c-alert--m-success__title--Color: var(--pf-v5-global--success-color--100);
223
- --pf-v5-c-alert--m-danger__title--Color: var(--pf-v5-global--danger-color--100);
224
- --pf-v5-c-alert--m-warning__title--Color: var(--pf-v5-global--warning-color--100);
225
- --pf-v5-c-alert--m-info__title--Color: var(--pf-v5-global--info-color--100);
226
- --pf-v5-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
227
- --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
228
- --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
229
- --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
230
- --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
231
204
  }
@@ -21,7 +21,6 @@ declare const _default: {
21
21
  "expandable": "pf-m-expandable",
22
22
  "expanded": "pf-m-expanded",
23
23
  "truncate": "pf-m-truncate"
24
- },
25
- "themeDark": "pf-v5-theme-dark"
24
+ }
26
25
  };
27
26
  export default _default;
@@ -23,6 +23,5 @@ exports.default = {
23
23
  "expandable": "pf-m-expandable",
24
24
  "expanded": "pf-m-expanded",
25
25
  "truncate": "pf-m-truncate"
26
- },
27
- "themeDark": "pf-v5-theme-dark"
26
+ }
28
27
  };
@@ -21,6 +21,5 @@ export default {
21
21
  "expandable": "pf-m-expandable",
22
22
  "expanded": "pf-m-expanded",
23
23
  "truncate": "pf-m-truncate"
24
- },
25
- "themeDark": "pf-v5-theme-dark"
24
+ }
26
25
  };