@patternfly/react-styles 5.0.0-alpha.18 → 5.0.0-alpha.19

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.0.0-alpha.18...@patternfly/react-styles@5.0.0-alpha.19) (2023-06-02)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # 5.0.0-alpha.18 (2023-06-01)
 
 ### Bug Fixes

package/css/components/BackgroundImage/background-image.css

@@ -1,5 +1,6 @@
 .pf-v5-c-background-image {
   --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-c-background-image--BackgroundImage: none;
   --pf-v5-c-background-image--BackgroundPosition: bottom right;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
@@ -12,7 +13,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--pf-v5-c-background-image--BackgroundColor);
-  background-image: var(--pf-v5-c-background-image--BackgroundImage, none);
+  background-image: var(--pf-v5-c-background-image--BackgroundImage);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-background-image--BackgroundPosition);
   background-size: var(--pf-v5-c-background-image--BackgroundSize);

package/css/components/CodeEditor/code-editor.css

@@ -77,6 +77,7 @@
 
 .pf-v5-c-code-editor__main {
   position: relative;
+  color: var(--pf-v5-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
   border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
   border-color: var(--pf-v5-c-code-editor__main--BorderColor);
@@ -135,6 +136,10 @@
   margin-left: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
 }
 
+:where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
+  --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+}
 :where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
   border-left: 1px solid var(--pf-v5-global--palette--black-700);
 }

package/css/components/FormControl/form-control.css

@@ -275,14 +275,14 @@
   --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
   --pf-v5-c-form-control--BorderLeftColor: transparent;
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-form-control--disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-form-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-form-control--readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
+  --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
+  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--300);
   color: var(--pf-v5-global--Color--100);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-form-control::-webkit-calendar-picker-indicator {
   filter: invert(1);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-form-control.pf-m-readonly {
-  border-bottom-color: var(--pf-v5-global--palette--black-700);
 }

package/css/components/MenuToggle/menu-toggle.css

@@ -107,9 +107,11 @@
   --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
   --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
+  --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
   position: relative;
@@ -360,6 +362,8 @@
   --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
   --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
   --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
+  padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
+  padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
   color: inherit;
   background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
   border: 0;

package/css/components/Page/page.css

@@ -67,7 +67,7 @@
   }
 }
 
-.pf-v5-c-page {
+:root {
   --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
   --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
   --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -181,40 +181,32 @@
   --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  display: grid;
-  grid-template-areas: "header" "main";
-  grid-template-rows: max-content 1fr;
-  grid-template-columns: 1fr;
-  height: 100vh;
-  height: 100dvh;
-  max-height: 100%;
-  background-color: var(--pf-v5-c-page--BackgroundColor);
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
     --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
     --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
     --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
     --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
     --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -222,17 +214,28 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
     --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
     --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
   }
 }
+
+.pf-v5-c-page {
+  display: grid;
+  grid-template-areas: "header" "main";
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+  height: 100vh;
+  height: 100dvh;
+  max-height: 100%;
+  background-color: var(--pf-v5-c-page--BackgroundColor);
+}
 @media (min-width: 1200px) {
   .pf-v5-c-page {
     grid-template-areas: "header header" "nav main";
@@ -961,7 +964,7 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page {
+:where(.pf-v5-theme-dark):root {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);

package/css/layouts/Flex/flex.css

@@ -29,6 +29,7 @@
 }
 
 .pf-v5-l-flex > * {
+  --pf-v5-l-flex--spacer: initial;
   --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
   --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
   order: var(--pf-v5-l-flex--item--Order);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.0.0-alpha.18",
+  "version": "5.0.0-alpha.19",
   "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.0.0-alpha.69",
+    "@patternfly/patternfly": "5.0.0-alpha.74",
     "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": "026c5f69bb0f7280c796d28f2d3fd52891793229"
+  "gitHead": "ed9000303ee57e753010e884ab9f3db6acea5b15"
 }