@patternfly/react-styles 5.2.0-prerelease.5 → 6.0.0-alpha.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (76) hide show
  1. package/CHANGELOG.md +11 -3
  2. package/css/assets/images/logo__pf--reverse-on-md.svg +1 -1
  3. package/css/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  4. package/css/components/Accordion/accordion.css +1 -10
  5. package/css/components/Accordion/accordion.d.ts +0 -1
  6. package/css/components/Accordion/accordion.js +0 -1
  7. package/css/components/Accordion/accordion.mjs +0 -1
  8. package/css/components/Alert/alert-group.css +20 -16
  9. package/css/components/Alert/alert.css +57 -84
  10. package/css/components/Alert/alert.d.ts +1 -2
  11. package/css/components/Alert/alert.js +1 -2
  12. package/css/components/Alert/alert.mjs +1 -2
  13. package/css/components/Button/button.css +142 -179
  14. package/css/components/Button/button.d.ts +1 -2
  15. package/css/components/Button/button.js +1 -2
  16. package/css/components/Button/button.mjs +1 -2
  17. package/css/components/Check/check.css +8 -10
  18. package/css/components/Content/content.css +67 -67
  19. package/css/components/Drawer/drawer.css +0 -1
  20. package/css/components/Dropdown/dropdown.css +3 -1
  21. package/css/components/Dropdown/dropdown.d.ts +1 -0
  22. package/css/components/Dropdown/dropdown.js +1 -0
  23. package/css/components/Dropdown/dropdown.mjs +1 -0
  24. package/css/components/Masthead/masthead.css +49 -103
  25. package/css/components/Masthead/masthead.d.ts +1 -6
  26. package/css/components/Masthead/masthead.js +1 -6
  27. package/css/components/Masthead/masthead.mjs +1 -6
  28. package/css/components/Menu/menu.css +0 -3
  29. package/css/components/Menu/menu.d.ts +0 -1
  30. package/css/components/Menu/menu.js +0 -1
  31. package/css/components/Menu/menu.mjs +0 -1
  32. package/css/components/MenuToggle/menu-toggle.css +59 -80
  33. package/css/components/Nav/nav.css +42 -40
  34. package/css/components/NotificationBadge/notification-badge.css +56 -81
  35. package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
  36. package/css/components/NotificationBadge/notification-badge.js +1 -5
  37. package/css/components/NotificationBadge/notification-badge.mjs +1 -5
  38. package/css/components/Page/page.css +110 -209
  39. package/css/components/Page/page.d.ts +5 -12
  40. package/css/components/Page/page.js +5 -12
  41. package/css/components/Page/page.mjs +5 -12
  42. package/css/components/Radio/radio.css +10 -13
  43. package/css/components/Switch/switch.css +1 -1
  44. package/css/components/Table/table-grid.css +8 -8
  45. package/css/components/Table/table.css +81 -94
  46. package/css/components/Table/table.d.ts +0 -2
  47. package/css/components/Table/table.js +0 -2
  48. package/css/components/Table/table.mjs +0 -2
  49. package/css/components/Toolbar/toolbar.css +5 -11
  50. package/css/components/Toolbar/toolbar.d.ts +0 -1
  51. package/css/components/Toolbar/toolbar.js +0 -1
  52. package/css/components/Toolbar/toolbar.mjs +0 -1
  53. package/css/docs/components/Nav/examples/Navigation.css +2 -1
  54. package/css/docs/components/Page/examples/Page.css +0 -8
  55. package/css/docs/components/Page/examples/Page.d.ts +0 -7
  56. package/css/docs/components/Page/examples/Page.js +0 -7
  57. package/css/docs/components/Page/examples/Page.mjs +0 -7
  58. package/css/docs/demos/Toolbar/examples/Toolbar.css +0 -10
  59. package/css/docs/demos/Toolbar/examples/Toolbar.d.ts +1 -6
  60. package/css/docs/demos/Toolbar/examples/Toolbar.js +1 -6
  61. package/css/docs/demos/Toolbar/examples/Toolbar.mjs +1 -6
  62. package/package.json +5 -4
  63. package/css/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  64. package/css/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  65. package/css/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  66. package/css/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  67. package/css/assets/images/pf_logo_white.hbs +0 -35
  68. package/css/assets/images/pf_logo_white.svg +0 -38
  69. package/css/docs/components/Brand/examples/Brand.css +0 -12
  70. package/css/docs/components/Brand/examples/Brand.d.ts +0 -10
  71. package/css/docs/components/Brand/examples/Brand.js +0 -11
  72. package/css/docs/components/Brand/examples/Brand.mjs +0 -9
  73. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
  74. package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
  75. package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
  76. package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
package/CHANGELOG.md CHANGED
@@ -3,11 +3,19 @@
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
- # 5.2.0-prerelease.5 (2023-11-10)
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
7
 
8
- **Note:** Version bump only for package @patternfly/react-styles
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)
9
11
 
10
- # 5.2.0-prerelease.4 (2023-11-03)
12
+ # 6.0.0-alpha.1 (2023-09-29)
13
+
14
+ ### Bug Fixes
15
+
16
+ - Release alphas from v6 and rebase from main ([#9692](https://github.com/patternfly/patternfly-react/issues/9692)) ([bb022ff](https://github.com/patternfly/patternfly-react/commit/bb022ffc65da8e8c5b5c984412f936cea9424676)), closes [#9651](https://github.com/patternfly/patternfly-react/issues/9651) [#9627](https://github.com/patternfly/patternfly-react/issues/9627) [#9555](https://github.com/patternfly/patternfly-react/issues/9555) [#9543](https://github.com/patternfly/patternfly-react/issues/9543) [#9578](https://github.com/patternfly/patternfly-react/issues/9578) [#9519](https://github.com/patternfly/patternfly-react/issues/9519) [#9603](https://github.com/patternfly/patternfly-react/issues/9603) [#9655](https://github.com/patternfly/patternfly-react/issues/9655) [#9614](https://github.com/patternfly/patternfly-react/issues/9614) [#9606](https://github.com/patternfly/patternfly-react/issues/9606) [#9628](https://github.com/patternfly/patternfly-react/issues/9628) [#9635](https://github.com/patternfly/patternfly-react/issues/9635) [#9649](https://github.com/patternfly/patternfly-react/issues/9649) [#9642](https://github.com/patternfly/patternfly-react/issues/9642) [#9633](https://github.com/patternfly/patternfly-react/issues/9633) [#9637](https://github.com/patternfly/patternfly-react/issues/9637) [#9584](https://github.com/patternfly/patternfly-react/issues/9584) [#9284](https://github.com/patternfly/patternfly-react/issues/9284)
17
+
18
+ ## 5.1.1-prerelease.7 (2023-09-21)
11
19
 
12
20
  **Note:** Version bump only for package @patternfly/react-styles
13
21
 
@@ -6,7 +6,7 @@
6
6
  .st0{fill:#FFFFFF;}
7
7
  .st1{fill:url(#SVGID_1_);}
8
8
  </style>
9
- <g fill="#8a8d90">
9
+ <g>
10
10
  <path class="st0" d="M56.4,25.7V14.4h4.8c0.7,0,1.3,0.1,1.8,0.3s0.9,0.5,1.2,0.8c0.3,0.3,0.5,0.7,0.7,1.1c0.1,0.4,0.2,0.9,0.2,1.3
11
11
  c0,0.3,0,0.5-0.1,0.8s-0.2,0.6-0.3,0.8c-0.1,0.3-0.3,0.5-0.5,0.7c-0.2,0.2-0.5,0.4-0.7,0.6c-0.3,0.2-0.6,0.3-1,0.4
12
12
  s-0.8,0.1-1.2,0.1h-2.7v4.1L56.4,25.7L56.4,25.7z M61.3,19.5c0.3,0,0.5,0,0.7-0.1s0.3-0.2,0.5-0.3c0.1-0.1,0.2-0.3,0.3-0.5
@@ -9,7 +9,7 @@
9
9
  <stop offset="0" style="stop-color:#60EFFF"/>
10
10
  <stop offset="1" style="stop-color:#1F89C7"/>
11
11
  </linearGradient>
12
- <path fill="#8a8d90" class="st0" d="M23.7,12.3L12,0.8L0.3,12.3L5,18.9l3.6-0.8L12,23l3.5-4.9l3.5,0.8L23.7,12.3z M11.5,3L10,17L7.1,13L11.5,3z
12
+ <path class="st0" d="M23.7,12.3L12,0.8L0.3,12.3L5,18.9l3.6-0.8L12,23l3.5-4.9l3.5,0.8L23.7,12.3z M11.5,3L10,17L7.1,13L11.5,3z
13
13
  M6.8,12.6L5,10.1l6.2-7.5L6.8,12.6z M9.5,17.1L9.5,17.1l0.2,0.2l-1,0.2l-2.2-3.1l0.4-0.9L9.5,17.1z M12,2.8l1.5,14.9L12,19.7
14
14
  l-1.5-2.1L12,2.8z M14.5,17.1l2.7-3.6l0.4,0.9l-2.2,3.1l-1-0.2L14.5,17.1L14.5,17.1z M14,17l-1.5-14l4.4,10L14,17z M12.9,2.6
15
15
  l6.2,7.5l-1.8,2.4L12.9,2.6z M5.2,18.4l-4.3-6l8.3-8.1l-4.8,5.9l2.2,3L6,14.5l2.3,3.2L5.2,18.4z M12,22.2L9,18l1-0.2l2,2.8l2-2.8
@@ -26,10 +26,6 @@
26
26
  --pf-v5-c-accordion__toggle--after--Width: var(--pf-v5-global--BorderWidth--lg);
27
27
  --pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
28
28
  --pf-v5-c-accordion__toggle--BackgroundColor: transparent;
29
- --pf-v5-c-accordion__toggle--JustifyContent: space-between;
30
- --pf-v5-c-accordion__toggle--ColumnGap: 0;
31
- --pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent: start;
32
- --pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-v5-global--spacer--md);
33
29
  --pf-v5-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-v5-global--spacer--lg));
34
30
  --pf-v5-c-accordion__toggle--hover__toggle-text--Color: var(--pf-v5-global--link--Color);
35
31
  --pf-v5-c-accordion__toggle--active__toggle-text--Color: var(--pf-v5-global--link--Color);
@@ -83,10 +79,6 @@
83
79
  color: var(--pf-v5-global--Color--100);
84
80
  background-color: var(--pf-v5-c-accordion--BackgroundColor);
85
81
  }
86
- .pf-v5-c-accordion.pf-m-toggle-start {
87
- --pf-v5-c-accordion__toggle--JustifyContent: var(--pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent);
88
- --pf-v5-c-accordion__toggle--ColumnGap: var(--pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap);
89
- }
90
82
  .pf-v5-c-accordion.pf-m-display-lg {
91
83
  --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingTop);
92
84
  --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingRight);
@@ -146,9 +138,8 @@
146
138
  .pf-v5-c-accordion__toggle {
147
139
  position: relative;
148
140
  display: flex;
149
- column-gap: var(--pf-v5-c-accordion__toggle--ColumnGap);
150
141
  align-items: center;
151
- justify-content: var(--pf-v5-c-accordion__toggle--JustifyContent);
142
+ justify-content: space-between;
152
143
  width: 100%;
153
144
  padding-block-start: var(--pf-v5-c-accordion__toggle--PaddingTop);
154
145
  padding-block-end: var(--pf-v5-c-accordion__toggle--PaddingBottom);
@@ -8,7 +8,6 @@ declare const _default: {
8
8
  "accordionToggleText": "pf-v5-c-accordion__toggle-text",
9
9
  "dirRtl": "pf-v5-m-dir-rtl",
10
10
  "modifiers": {
11
- "toggleStart": "pf-m-toggle-start",
12
11
  "displayLg": "pf-m-display-lg",
13
12
  "bordered": "pf-m-bordered",
14
13
  "expanded": "pf-m-expanded",
@@ -10,7 +10,6 @@ exports.default = {
10
10
  "accordionToggleText": "pf-v5-c-accordion__toggle-text",
11
11
  "dirRtl": "pf-v5-m-dir-rtl",
12
12
  "modifiers": {
13
- "toggleStart": "pf-m-toggle-start",
14
13
  "displayLg": "pf-m-display-lg",
15
14
  "bordered": "pf-m-bordered",
16
15
  "expanded": "pf-m-expanded",
@@ -8,7 +8,6 @@ export default {
8
8
  "accordionToggleText": "pf-v5-c-accordion__toggle-text",
9
9
  "dirRtl": "pf-v5-m-dir-rtl",
10
10
  "modifiers": {
11
- "toggleStart": "pf-m-toggle-start",
12
11
  "displayLg": "pf-m-display-lg",
13
12
  "bordered": "pf-m-bordered",
14
13
  "expanded": "pf-m-expanded",
@@ -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
  };