@patternfly/react-styles 6.0.0-alpha.3 → 6.0.0-alpha.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/css/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/css/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/css/components/Accordion/accordion.css +1 -1
  6. package/css/components/Alert/alert.css +2 -2
  7. package/css/components/Avatar/avatar.css +10 -13
  8. package/css/components/Avatar/avatar.d.ts +1 -2
  9. package/css/components/Avatar/avatar.js +1 -2
  10. package/css/components/Avatar/avatar.mjs +1 -2
  11. package/css/components/Backdrop/backdrop.css +6 -2
  12. package/css/components/Banner/banner.css +5 -1
  13. package/css/components/Banner/banner.d.ts +1 -0
  14. package/css/components/Banner/banner.js +1 -0
  15. package/css/components/Banner/banner.mjs +1 -0
  16. package/css/components/Breadcrumb/breadcrumb.css +19 -16
  17. package/css/components/Button/button.css +1 -1
  18. package/css/components/Card/card.css +3 -0
  19. package/css/components/Card/card.d.ts +2 -0
  20. package/css/components/Card/card.js +2 -0
  21. package/css/components/Card/card.mjs +2 -0
  22. package/css/components/Content/content.css +7 -7
  23. package/css/components/EmptyState/empty-state.css +57 -34
  24. package/css/components/EmptyState/empty-state.d.ts +6 -1
  25. package/css/components/EmptyState/empty-state.js +6 -1
  26. package/css/components/EmptyState/empty-state.mjs +6 -1
  27. package/css/components/ExpandableSection/expandable-section.css +10 -17
  28. package/css/components/ExpandableSection/expandable-section.d.ts +1 -1
  29. package/css/components/ExpandableSection/expandable-section.js +1 -1
  30. package/css/components/ExpandableSection/expandable-section.mjs +1 -1
  31. package/css/components/Form/form.css +6 -0
  32. package/css/components/HelperText/helper-text.css +28 -34
  33. package/css/components/HelperText/helper-text.d.ts +1 -2
  34. package/css/components/HelperText/helper-text.js +1 -2
  35. package/css/components/HelperText/helper-text.mjs +1 -2
  36. package/css/components/Hint/hint.css +2 -2
  37. package/css/components/InlineEdit/inline-edit.css +5 -5
  38. package/css/components/Login/login.css +1 -1
  39. package/css/components/MenuToggle/menu-toggle.css +2 -1
  40. package/css/components/ModalBox/modal-box.css +1 -1
  41. package/css/components/Nav/nav.css +2 -2
  42. package/css/components/Pagination/pagination.css +61 -121
  43. package/css/components/Pagination/pagination.d.ts +2 -5
  44. package/css/components/Pagination/pagination.js +2 -5
  45. package/css/components/Pagination/pagination.mjs +2 -5
  46. package/css/components/Popover/popover.css +0 -2
  47. package/css/components/SimpleList/simple-list.css +35 -52
  48. package/css/components/SimpleList/simple-list.d.ts +2 -2
  49. package/css/components/SimpleList/simple-list.js +2 -2
  50. package/css/components/SimpleList/simple-list.mjs +2 -2
  51. package/css/components/Table/table.css +6 -6
  52. package/css/components/Title/title.css +6 -6
  53. package/css/components/Tooltip/tooltip.css +0 -2
  54. package/css/components/Truncate/truncate.css +4 -0
  55. package/css/docs/components/Nav/examples/Navigation.css +18 -2
  56. package/css/docs/components/Nav/examples/Navigation.d.ts +0 -1
  57. package/css/docs/components/Nav/examples/Navigation.js +0 -1
  58. package/css/docs/components/Nav/examples/Navigation.mjs +0 -1
  59. package/css/docs/components/Truncate/examples/Truncate.css +2 -2
  60. package/package.json +3 -3
  61. package/css/docs/components/Avatar/examples/Avatar.css +0 -3
  62. package/css/docs/components/Avatar/examples/Avatar.d.ts +0 -3
  63. package/css/docs/components/Avatar/examples/Avatar.js +0 -4
  64. package/css/docs/components/Avatar/examples/Avatar.mjs +0 -2
@@ -63,7 +63,7 @@
63
63
  --pf-v5-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
64
64
  --pf-v5-c-table--BorderColor: var(--pf-t--global--border--color--default);
65
65
  --pf-v5-c-table--border-width--base: var(--pf-t--global--border--width--divider--default);
66
- --pf-v5-c-table__caption--FontSize: var(--pf-t--global--font--size--body);
66
+ --pf-v5-c-table__caption--FontSize: var(--pf-t--global--font--size--body--default);
67
67
  --pf-v5-c-table__caption--Color: var(--pf-t--global--text--color--subtle);
68
68
  --pf-v5-c-table__caption--PaddingTop: var(--pf-v5-global--spacer--md);
69
69
  --pf-v5-c-table__caption--PaddingRight: var(--pf-v5-global--spacer--lg);
@@ -71,13 +71,13 @@
71
71
  --pf-v5-c-table__caption--PaddingLeft: var(--pf-v5-global--spacer--lg);
72
72
  --pf-v5-c-table__caption--xl--PaddingRight: var(--pf-v5-global--spacer--md);
73
73
  --pf-v5-c-table__caption--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
74
- --pf-v5-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body);
74
+ --pf-v5-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--default);
75
75
  --pf-v5-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
76
76
  --pf-v5-c-table__tbody--cell--PaddingTop: var(--pf-t--global--spacer--md);
77
77
  --pf-v5-c-table__tbody--cell--PaddingBottom: var(--pf-t--global--spacer--md);
78
78
  --pf-v5-c-table__tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
79
79
  --pf-v5-c-table--cell--Padding--base: var(--pf-v5-global--spacer--md);
80
- --pf-v5-c-table--cell--FontSize: var(--pf-t--global--font--size--body);
80
+ --pf-v5-c-table--cell--FontSize: var(--pf-t--global--font--size--body--default);
81
81
  --pf-v5-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
82
82
  --pf-v5-c-table--cell--Color: var(--pf-t--global--text--color--regular);
83
83
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--cell--Padding--base);
@@ -119,10 +119,10 @@
119
119
  --pf-v5-c-table--m-compact__toggle--PaddingBottom: 0;
120
120
  --pf-v5-c-table__check--input--MarginTop: 0.1875rem;
121
121
  --pf-v5-c-table__thead__check--input--TranslateY: var(--pf-v5-c-table__check--input--MarginTop);
122
- --pf-v5-c-table__check--input--FontSize: var(--pf-t--global--font--size--body);
122
+ --pf-v5-c-table__check--input--FontSize: var(--pf-t--global--font--size--body--default);
123
123
  --pf-v5-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
124
124
  --pf-v5-c-table__favorite--c-button--Color: var(--pf-t--global--text--color--subtle);
125
- --pf-v5-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body);
125
+ --pf-v5-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
126
126
  --pf-v5-c-table__favorite--c-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
127
127
  --pf-v5-c-table__favorite--c-button--MarginRight: calc(var(--pf-v5-global--spacer--md) * -1);
128
128
  --pf-v5-c-table__favorite--c-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
@@ -210,7 +210,7 @@
210
210
  --pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-v5-global--spacer--md);
211
211
  --pf-v5-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
212
212
  --pf-v5-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
213
- --pf-v5-c-table--m-compact--FontSize: var(--pf-t--global--font--size--body);
213
+ --pf-v5-c-table--m-compact--FontSize: var(--pf-t--global--font--size--body--default);
214
214
  --pf-v5-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-v5-global--spacer--lg);
215
215
  --pf-v5-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-v5-global--spacer--lg);
216
216
  --pf-v5-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-v5-global--spacer--lg);
@@ -19,22 +19,22 @@
19
19
  --pf-v5-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
20
20
  --pf-v5-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
21
21
  --pf-v5-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
22
- --pf-v5-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--lg);
22
+ --pf-v5-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
23
23
  --pf-v5-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
24
24
  --pf-v5-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
25
- --pf-v5-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--md);
25
+ --pf-v5-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
26
26
  --pf-v5-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
27
27
  --pf-v5-c-title--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
28
- --pf-v5-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--sm);
28
+ --pf-v5-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
29
29
  --pf-v5-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
30
30
  --pf-v5-c-title--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
31
- --pf-v5-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--xs);
31
+ --pf-v5-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
32
32
  --pf-v5-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
33
33
  --pf-v5-c-title--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
34
- --pf-v5-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--xs);
34
+ --pf-v5-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
35
35
  --pf-v5-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
36
36
  --pf-v5-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
37
- --pf-v5-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--xs);
37
+ --pf-v5-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
38
38
  --pf-v5-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
39
39
  }
40
40
 
@@ -108,12 +108,10 @@
108
108
 
109
109
  .pf-v5-c-tooltip__arrow {
110
110
  position: absolute;
111
- /* stylelint-disable liberty/use-logical-spec */
112
111
  top: var(--pf-v5-c-tooltip__arrow--Top, auto);
113
112
  right: var(--pf-v5-c-tooltip__arrow--Right, auto);
114
113
  bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
115
114
  left: var(--pf-v5-c-tooltip__arrow--Left, auto);
116
- /* stylelint-enable */
117
115
  width: var(--pf-v5-c-tooltip__arrow--Width);
118
116
  height: var(--pf-v5-c-tooltip__arrow--Height);
119
117
  pointer-events: none;
@@ -1,6 +1,10 @@
1
+ :root,
1
2
  .pf-v5-c-truncate {
2
3
  --pf-v5-c-truncate--MinWidth: 12ch;
3
4
  --pf-v5-c-truncate__start--MinWidth: 6ch;
5
+ }
6
+
7
+ .pf-v5-c-truncate {
4
8
  display: inline-grid;
5
9
  grid-auto-flow: column;
6
10
  align-items: baseline;
@@ -1,6 +1,22 @@
1
- .ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
1
+ #ws-core-c-navigation-default,
2
+ #ws-core-c-navigation-basic,
3
+ #ws-core-c-navigation-grouped,
4
+ #ws-core-c-navigation-grouped-nav,
5
+ #ws-core-c-navigation-grouped-nav-no-titles,
6
+ #ws-core-c-navigation-expanded,
7
+ #ws-core-c-navigation-expanded-with-subnav-titles,
8
+ #ws-core-c-navigation-mixed,
9
+ #ws-core-c-navigation-horizontal,
10
+ #ws-core-c-navigation-horizontal-overflow,
11
+ #ws-core-c-navigation-horizontal-subnav,
12
+ #ws-core-c-navigation-horizontal-subnav-overflow,
13
+ #ws-core-c-navigation-drilldown,
14
+ #ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
15
+ #ws-core-c-navigation-level-2-drilldown,
16
+ #ws-core-c-navigation-level-3-drilldown,
17
+ #ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
18
+ #ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
2
19
  padding: 0;
3
- background-color: var(--pf-v5-global--BackgroundColor--dark-300);
4
20
  }
5
21
 
6
22
  #ws-core-c-navigation-horizontal-in-masthead,
@@ -8,7 +8,6 @@ declare const _default: {
8
8
  "nav": "pf-v5-c-nav",
9
9
  "pageHeader": "pf-v5-c-page__header",
10
10
  "pageHeaderNav": "pf-v5-c-page__header-nav",
11
- "wsCoreCNavigation": "ws-core-c-navigation",
12
11
  "wsPreviewHtml": "ws-preview-html"
13
12
  };
14
13
  export default _default;
@@ -10,6 +10,5 @@ exports.default = {
10
10
  "nav": "pf-v5-c-nav",
11
11
  "pageHeader": "pf-v5-c-page__header",
12
12
  "pageHeaderNav": "pf-v5-c-page__header-nav",
13
- "wsCoreCNavigation": "ws-core-c-navigation",
14
13
  "wsPreviewHtml": "ws-preview-html"
15
14
  };
@@ -8,6 +8,5 @@ export default {
8
8
  "nav": "pf-v5-c-nav",
9
9
  "pageHeader": "pf-v5-c-page__header",
10
10
  "pageHeaderNav": "pf-v5-c-page__header-nav",
11
- "wsCoreCNavigation": "ws-core-c-navigation",
12
11
  "wsPreviewHtml": "ws-preview-html"
13
12
  };
@@ -4,6 +4,6 @@
4
4
  overflow: auto;
5
5
  min-width: 161px;
6
6
  max-width: 100%;
7
- padding: var(--pf-v5-global--spacer--md);
8
- border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
7
+ padding: var(--pf-t--global--spacer--sm);
8
+ border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
9
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.0.0-alpha.3",
3
+ "version": "6.0.0-alpha.4",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.0.0-alpha.28",
22
+ "@patternfly/patternfly": "6.0.0-alpha.38",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^11.1.1",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.7.4"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "da36134a3effa82a166c47f5b1c2689869a0f52a"
32
+ "gitHead": "0213323de9e62364f8cd3f401bec86f1f34ee4fe"
33
33
  }
@@ -1,3 +0,0 @@
1
- #ws-core-c-avatar-bordered---dark {
2
- background: var(--pf-v5-global--BackgroundColor--dark-100);
3
- }
@@ -1,3 +0,0 @@
1
- import './Avatar.css';
2
- declare const _default: {};
3
- export default _default;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- exports.__esModule = true;
3
- require('./Avatar.css');
4
- exports.default = {};
@@ -1,2 +0,0 @@
1
- import './Avatar.css';
2
- export default {};