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

package/css/components/Tooltip/tooltip.css

@@ -1,17 +1,18 @@
-.pf-v5-c-tooltip {
+:root {
   --pf-v5-c-tooltip--MaxWidth: 18.75rem;
-  --pf-v5-c-tooltip--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__content--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
+  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-tooltip__arrow--Width: 0.9375rem;
   --pf-v5-c-tooltip__arrow--Height: 0.9375rem;
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v5-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-v5-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-v5-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -24,6 +25,9 @@
   --pf-v5-c-tooltip__arrow--m-left--TranslateX: 50%;
   --pf-v5-c-tooltip__arrow--m-left--TranslateY: -50%;
   --pf-v5-c-tooltip__arrow--m-left--Rotate: 45deg;
+}
+
+.pf-v5-c-tooltip {
   position: relative;
   max-width: var(--pf-v5-c-tooltip--MaxWidth);
   box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
@@ -96,6 +100,7 @@
   text-align: center;
   word-break: break-word;
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
+  border-radius: var(--pf-v5-c-tooltip__content--BorderRadius);
 }
 .pf-v5-c-tooltip__content.pf-m-text-align-left {
   text-align: start;
@@ -115,9 +120,4 @@
   background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
   box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
   transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/Tooltip/tooltip.d.ts

@@ -15,7 +15,6 @@ declare const _default: {
     "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
   "tooltipContent": "pf-v5-c-tooltip__content"

package/css/components/Tooltip/tooltip.js

@@ -17,7 +17,6 @@ exports.default = {
     "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
   "tooltipContent": "pf-v5-c-tooltip__content"

package/css/components/Tooltip/tooltip.mjs

@@ -15,7 +15,6 @@ export default {
     "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
   "tooltipContent": "pf-v5-c-tooltip__content"

package/css/docs/components/Brand/examples/Brand.css

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v5-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v5-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}

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

@@ -0,0 +1,10 @@
+import './Brand.css';
+declare const _default: {
+  "modifiers": {
+    "picture": "pf-m-picture"
+  },
+  "showDark": "show-dark",
+  "showLight": "show-light",
+  "themeDark": "pf-v5-theme-dark"
+};
+export default _default;

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

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+require('./Brand.css');
+exports.default = {
+  "modifiers": {
+    "picture": "pf-m-picture"
+  },
+  "showDark": "show-dark",
+  "showLight": "show-light",
+  "themeDark": "pf-v5-theme-dark"
+};

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

@@ -0,0 +1,9 @@
+import './Brand.css';
+export default {
+  "modifiers": {
+    "picture": "pf-m-picture"
+  },
+  "showDark": "show-dark",
+  "showLight": "show-light",
+  "themeDark": "pf-v5-theme-dark"
+};

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

@@ -1,4 +1,5 @@
-.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav{
+.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
+  padding: 0;
   background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 

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/demos/Toolbar/examples/Toolbar.css

@@ -5,6 +5,21 @@
   min-height: 420px;
 }
 
+#ws-html-demos-c-toolbar-toolbar-attribute-value-single-select-filter-on-desktop,
+#ws-html-demos-c-toolbar-toolbar-attribute-value-checkbox-select-filter-on-desktop {
+  min-height: 320px;
+}
+
 #ws-html-demos-c-toolbar-toolbar-attribute-value-search-filter-on-mobile {
   min-height: 175px;
 }
+
+.pf-v5-c-menu-toggle + .pf-v5-c-panel {
+  position: absolute;
+  top: calc(100% + 2px);
+  z-index: var(--pf-v5-global--ZIndex--sm);
+}
+
+.ws-html-demos-c-toolbar .pf-v5-c-toolbar__item {
+  position: relative;
+}

package/css/docs/demos/Toolbar/examples/Toolbar.d.ts

@@ -1,3 +1,8 @@
 import './Toolbar.css';
-declare const _default: {};
+declare const _default: {
+  "menuToggle": "pf-v5-c-menu-toggle",
+  "panel": "pf-v5-c-panel",
+  "toolbarItem": "pf-v5-c-toolbar__item",
+  "wsHtmlDemosCToolbar": "ws-html-demos-c-toolbar"
+};
 export default _default;

package/css/docs/demos/Toolbar/examples/Toolbar.js

@@ -1,4 +1,9 @@
 "use strict";
 exports.__esModule = true;
 require('./Toolbar.css');
-exports.default = {};
+exports.default = {
+  "menuToggle": "pf-v5-c-menu-toggle",
+  "panel": "pf-v5-c-panel",
+  "toolbarItem": "pf-v5-c-toolbar__item",
+  "wsHtmlDemosCToolbar": "ws-html-demos-c-toolbar"
+};

package/css/docs/demos/Toolbar/examples/Toolbar.mjs

@@ -1,2 +1,7 @@
 import './Toolbar.css';
-export default {};
+export default {
+  "menuToggle": "pf-v5-c-menu-toggle",
+  "panel": "pf-v5-c-panel",
+  "toolbarItem": "pf-v5-c-toolbar__item",
+  "wsHtmlDemosCToolbar": "ws-html-demos-c-toolbar"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.3",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.28",
+    "@patternfly/patternfly": "6.0.0-alpha.28",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "abccf530a0a642a4d7b4eda6ada09c5822c855b0"
+  "gitHead": "da36134a3effa82a166c47f5b1c2689869a0f52a"
 }

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"
-};