@patternfly/react-styles 5.2.0-prerelease.6 → 6.0.0-alpha.10

package/css/components/Truncate/truncate.css

@@ -1,6 +1,10 @@
+:root,
 .pf-v5-c-truncate {
   --pf-v5-c-truncate--MinWidth: 12ch;
   --pf-v5-c-truncate__start--MinWidth: 6ch;
+}
+
+.pf-v5-c-truncate {
   display: inline-grid;
   grid-auto-flow: column;
   align-items: baseline;

package/css/docs/components/Button/examples/Button.css

@@ -2,3 +2,7 @@
   margin-inline-end: 6px;
   margin-block-end: 6px;
 }
+
+#ws-core-c-button-plain-with-no-padding .pf-v5-c-button {
+  margin: 0;
+}

package/css/docs/components/Divider/examples/Divider.css

@@ -3,11 +3,13 @@
   align-items: center;
 }
 
+[id*="divider-vertical"],
 [id*="ws-core-c-divider-vertical"],
 #ws-core-c-divider-horizontal-on-lg {
-  height: 4rem;
+  height: 6rem;
 }
 
 [id*="ws-core-c-divider"] .ws-preview-html {
   height: 100%;
 }
+

package/css/docs/components/DragDrop/examples/DragDrop.css

@@ -3,7 +3,7 @@
 }
 
 .pf-v5-c-draggable.pf-m-dragging {
-  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   position: absolute;
   inset-block-start: 23%;

package/css/docs/components/Label/examples/Label.css

@@ -1,9 +1,13 @@
 #ws-core-c-label-filled .ws-preview-html,
+#ws-core-c-label-outline .ws-preview-html,
+#ws-core-c-label-compact .ws-preview-html,
 #ws-core-c-label-overflow .ws-preview-html {
   margin: -4px;
 }
 
 #ws-core-c-label-filled .pf-v5-c-label,
+#ws-core-c-label-outline .pf-v5-c-label,
+#ws-core-c-label-compact .pf-v5-c-label,
 #ws-core-c-label-overflow .pf-v5-c-label {
   margin: 4px;
 }

package/css/docs/components/Nav/examples/Navigation.css

@@ -1,24 +1,3 @@
-.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav{
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-horizontal-in-masthead,
-#ws-core-c-navigation-horizontal-in-masthead-overflow {
-  grid-template-rows: auto;
-}
-
-#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
-  min-height: 0;
-}
-
-@media screen and (min-width: 1200px) {
-  #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
-  #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
-    min-height: var(--pf-v5-c-page__header--MinHeight);
-  }
-}
-
 #ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
 #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
   grid-row: 1;
@@ -26,7 +5,7 @@
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
 [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
-  width: 260px;
+  width: 280px;
 }
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html {

package/css/docs/components/Nav/examples/Navigation.d.ts

@@ -5,10 +5,7 @@ declare const _default: {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-v5-c-nav",
-  "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
-  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Nav/examples/Navigation.js

@@ -7,9 +7,6 @@ exports.default = {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-v5-c-nav",
-  "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
-  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Nav/examples/Navigation.mjs

@@ -5,9 +5,6 @@ export default {
     "flyout": "pf-m-flyout",
     "nav": "pf-m-nav"
   },
-  "nav": "pf-v5-c-nav",
-  "pageHeader": "pf-v5-c-page__header",
   "pageHeaderNav": "pf-v5-c-page__header-nav",
-  "wsCoreCNavigation": "ws-core-c-navigation",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Page/examples/Page.css

@@ -1,11 +1,3 @@
-.ws-core-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
-  color: var(--pf-v5-global--Color--light-100);
-}
-
-.ws-core-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
-  color: var(--pf-v5-global--Color--dark-100);
-}
-
 #ws-core-c-page-with-or-without-fill .ws-preview-html,
 #ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
   height: 500px;

package/css/docs/components/Page/examples/Page.d.ts

@@ -1,12 +1,5 @@
 import './Page.css';
 declare const _default: {
-  "modifiers": {
-    "dark_200": "pf-m-dark-200"
-  },
-  "pageMainSection": "pf-v5-c-page__main-section",
-  "pageMainSubnav": "pf-v5-c-page__main-subnav",
-  "pageSidebar": "pf-v5-c-page__sidebar",
-  "wsCoreCPage": "ws-core-c-page",
   "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Page/examples/Page.js

@@ -2,12 +2,5 @@
 exports.__esModule = true;
 require('./Page.css');
 exports.default = {
-  "modifiers": {
-    "dark_200": "pf-m-dark-200"
-  },
-  "pageMainSection": "pf-v5-c-page__main-section",
-  "pageMainSubnav": "pf-v5-c-page__main-subnav",
-  "pageSidebar": "pf-v5-c-page__sidebar",
-  "wsCoreCPage": "ws-core-c-page",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Page/examples/Page.mjs

@@ -1,11 +1,4 @@
 import './Page.css';
 export default {
-  "modifiers": {
-    "dark_200": "pf-m-dark-200"
-  },
-  "pageMainSection": "pf-v5-c-page__main-section",
-  "pageMainSubnav": "pf-v5-c-page__main-subnav",
-  "pageSidebar": "pf-v5-c-page__sidebar",
-  "wsCoreCPage": "ws-core-c-page",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Toolbar/examples/Toolbar.css

@@ -18,27 +18,20 @@
   min-height: 28rem;
 }
 
+#ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar,
+#ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar__group,
 #ws-core-e-toolbar-simple .pf-v5-c-toolbar,
 #ws-core-e-toolbar-simple .pf-v5-c-toolbar__group,
-#ws-core-e-toolbar-simple .pf-v5-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-spacers .pf-v5-c-toolbar,
-#ws-core-e-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v5-c-toolbar,
-#ws-core-e-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v5-c-toolbar,
 #ws-core-c-toolbar-simple .pf-v5-c-toolbar__group,
-#ws-core-c-toolbar-simple .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v5-c-toolbar,
-#ws-core-c-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v5-c-toolbar,
-#ws-core-c-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-insets .pf-v5-c-toolbar,
-#ws-core-c-toolbar-insets .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-page-insets .pf-v5-c-toolbar,
-#ws-core-c-toolbar-page-insets .pf-v5-c-toolbar__item,
-#ws-core-c-toolbar-width-control .pf-v5-c-toolbar,
-#ws-core-c-toolbar-width-control .pf-v5-c-toolbar__item {
-  border: 2px dashed #393f44;
+#ws-core-c-toolbar-width-control .pf-v5-c-toolbar {
+  border: var(--pf-t--global--border--width--control--default) dashed var(--pf-t--global--border--color--default);
 }
 
 #ws-core-e-toolbar-simple .pf-v5-c-toolbar__group .pf-v5-c-toolbar__item,
@@ -46,17 +39,29 @@
   border: none;
 }
 
+#ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar__item,
+#ws-core-e-toolbar-simple .pf-v5-c-toolbar__item,
+#ws-core-e-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
+#ws-core-e-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
+#ws-core-c-toolbar-simple .pf-v5-c-toolbar__item,
+#ws-core-c-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
+#ws-core-c-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
+#ws-core-c-toolbar-insets .pf-v5-c-toolbar__item,
+#ws-core-c-toolbar-page-insets .pf-v5-c-toolbar__item,
+#ws-core-c-toolbar-width-control .pf-v5-c-toolbar__item {
+  padding-block: .25rem;
+  padding-inline: .5rem;
+}
+
+#ws-core-c-toolbar-adjusted-group-column-gap .pf-v5-c-toolbar__item,
 #ws-core-e-toolbar-simple .pf-v5-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v5-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v5-c-toolbar__item,
-#ws-core-c-toolbar-insets .pf-v5-c-toolbar,
 #ws-core-c-toolbar-insets .pf-v5-c-toolbar__item,
-#ws-core-c-toolbar-page-insets .pf-v5-c-toolbar,
 #ws-core-c-toolbar-page-insets .pf-v5-c-toolbar__item,
-#ws-core-c-toolbar-width-control .pf-v5-c-toolbar,
 #ws-core-c-toolbar-width-control .pf-v5-c-toolbar__item {
-  padding: .5rem;
+  background-color: var(--pf-t--global--background--color--secondary--default);
 }

package/css/docs/components/Truncate/examples/Truncate.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v5-global--spacer--md);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.2.0-prerelease.6",
+  "version": "6.0.0-alpha.10",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -11,14 +11,15 @@
   "description": "CSS-in-JS class maps and utilities for PatternFly.",
   "author": "Red Hat",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   },
   "scripts": {
     "generate": "rimraf css && node scripts/writeClassMaps.js && node scripts/copyStyles.js",
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.7",
+    "@patternfly/patternfly": "6.0.0-alpha.66",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -28,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "5aa83c597337a00e9b93414dbca7db86df0544e6"
+  "gitHead": "d00a526836d0f533fdbf7f6144dd7a89dfad6542"
 }

package/css/docs/components/Avatar/examples/Avatar.css

@@ -1,3 +0,0 @@
-#ws-core-c-avatar-bordered---dark {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}

package/css/docs/components/Avatar/examples/Avatar.d.ts

@@ -1,3 +0,0 @@
-import './Avatar.css';
-declare const _default: {};
-export default _default;

package/css/docs/components/Avatar/examples/Avatar.js

@@ -1,4 +0,0 @@
-"use strict";
-exports.__esModule = true;
-require('./Avatar.css');
-exports.default = {};

package/css/docs/components/Avatar/examples/Avatar.mjs

@@ -1,2 +0,0 @@
-import './Avatar.css';
-export default {};

package/css/docs/components/NotificationBadge/examples/NotificationBadge.css

@@ -1,3 +0,0 @@
-.ws-core-c-notification-badge {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}

package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts

@@ -1,5 +0,0 @@
-import './NotificationBadge.css';
-declare const _default: {
-  "wsCoreCNotificationBadge": "ws-core-c-notification-badge"
-};
-export default _default;

package/css/docs/components/NotificationBadge/examples/NotificationBadge.js

@@ -1,6 +0,0 @@
-"use strict";
-exports.__esModule = true;
-require('./NotificationBadge.css');
-exports.default = {
-  "wsCoreCNotificationBadge": "ws-core-c-notification-badge"
-};

package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs

@@ -1,4 +0,0 @@
-import './NotificationBadge.css';
-export default {
-  "wsCoreCNotificationBadge": "ws-core-c-notification-badge"
-};