@patternfly/react-styles 4.74.13 → 4.75.0

package/css/utilities/BackgroundColor/BackgroundColor.d.ts

@@ -95,6 +95,7 @@ declare const _default: {
   "backgroundColor_200OnMd": "pf-u-background-color-200-on-md",
   "backgroundColor_200OnSm": "pf-u-background-color-200-on-sm",
   "backgroundColor_200OnXl": "pf-u-background-color-200-on-xl",
-  "backgroundColor_200On_2xl": "pf-u-background-color-200-on-2xl"
+  "backgroundColor_200On_2xl": "pf-u-background-color-200-on-2xl",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/utilities/BackgroundColor/BackgroundColor.js

@@ -97,5 +97,6 @@ exports.default = {
   "backgroundColor_200OnMd": "pf-u-background-color-200-on-md",
   "backgroundColor_200OnSm": "pf-u-background-color-200-on-sm",
   "backgroundColor_200OnXl": "pf-u-background-color-200-on-xl",
-  "backgroundColor_200On_2xl": "pf-u-background-color-200-on-2xl"
+  "backgroundColor_200On_2xl": "pf-u-background-color-200-on-2xl",
+  "themeDark": "pf-theme-dark"
 };

package/css/utilities/BackgroundColor/BackgroundColor.mjs

@@ -95,5 +95,6 @@ export default {
   "backgroundColor_200OnMd": "pf-u-background-color-200-on-md",
   "backgroundColor_200OnSm": "pf-u-background-color-200-on-sm",
   "backgroundColor_200OnXl": "pf-u-background-color-200-on-xl",
-  "backgroundColor_200On_2xl": "pf-u-background-color-200-on-2xl"
+  "backgroundColor_200On_2xl": "pf-u-background-color-200-on-2xl",
+  "themeDark": "pf-theme-dark"
 };

package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.d.ts

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

package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.js

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

package/css/utilities/BackgroundColor/themes/dark/BackgroundColor.mjs

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

package/css/utilities/Text/text.css

@@ -942,4 +942,177 @@
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
+}
+
+:where(.pf-theme-dark) .pf-u-color-300 {
+  color: var(--pf-global--Color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-color-light-100 {
+  color: var(--pf-global--Color-100) !important;
+}
+:where(.pf-theme-dark) .pf-u-color-light-200 {
+  color: var(--pf-global--Color-200) !important;
+}
+:where(.pf-theme-dark) .pf-u-link-color-visited {
+  color: var(--pf-global--palette--purple-200) !important;
+}
+:where(.pf-theme-dark) .pf-u-default-color-300 {
+  color: var(--pf-global--default-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-success-color-200 {
+  color: var(--pf-global--success-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-info-color-200 {
+  color: var(--pf-global--info-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-danger-color-300 {
+  color: var(--pf-global--danger-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-icon-color-dark {
+  color: var(--pf-global--icon--Color--dark) !important;
+}
+@media screen and (min-width: 576px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-sm {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-sm {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-link-color-visited-on-sm {
+    color: var(--pf-global--palette--purple-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-sm {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-sm {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-sm {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-md {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-md {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-link-color-visited-on-md {
+    color: var(--pf-global--palette--purple-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-md {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-md {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-md {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 992px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-lg {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-lg {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-link-color-visited-on-lg {
+    color: var(--pf-global--palette--purple-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-lg {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-lg {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-lg {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 1200px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-xl {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-xl {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-link-color-visited-on-xl {
+    color: var(--pf-global--palette--purple-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-xl {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-xl {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-xl {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 1450px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-2xl {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-2xl {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-link-color-visited-on-2xl {
+    color: var(--pf-global--palette--purple-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-2xl {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-2xl {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-2xl {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
 }

package/css/utilities/Text/text.d.ts

@@ -271,6 +271,7 @@ declare const _default: {
   "textWrapOnSm": "pf-u-text-wrap-on-sm",
   "textWrapOnXl": "pf-u-text-wrap-on-xl",
   "textWrapOn_2xl": "pf-u-text-wrap-on-2xl",
+  "themeDark": "pf-theme-dark",
   "warningColor_100": "pf-u-warning-color-100",
   "warningColor_100OnLg": "pf-u-warning-color-100-on-lg",
   "warningColor_100OnMd": "pf-u-warning-color-100-on-md",

package/css/utilities/Text/text.js

@@ -273,6 +273,7 @@ exports.default = {
   "textWrapOnSm": "pf-u-text-wrap-on-sm",
   "textWrapOnXl": "pf-u-text-wrap-on-xl",
   "textWrapOn_2xl": "pf-u-text-wrap-on-2xl",
+  "themeDark": "pf-theme-dark",
   "warningColor_100": "pf-u-warning-color-100",
   "warningColor_100OnLg": "pf-u-warning-color-100-on-lg",
   "warningColor_100OnMd": "pf-u-warning-color-100-on-md",

package/css/utilities/Text/text.mjs

@@ -271,6 +271,7 @@ export default {
   "textWrapOnSm": "pf-u-text-wrap-on-sm",
   "textWrapOnXl": "pf-u-text-wrap-on-xl",
   "textWrapOn_2xl": "pf-u-text-wrap-on-2xl",
+  "themeDark": "pf-theme-dark",
   "warningColor_100": "pf-u-warning-color-100",
   "warningColor_100OnLg": "pf-u-warning-color-100-on-lg",
   "warningColor_100OnMd": "pf-u-warning-color-100-on-md",

package/css/utilities/Text/themes/dark/text.d.ts

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

package/css/utilities/Text/themes/dark/text.js

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

package/css/utilities/Text/themes/dark/text.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.74.13",
+  "version": "4.75.0",
   "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": "4.203.1",
+    "@patternfly/patternfly": "4.203.2",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "3da666f00f7e848913704c049a51c4085c4044a0"
+  "gitHead": "8d3e22b79bd4cf8aa1cd3ffd6b87e7a09822cbde"
 }

package/src/css/components/Topology/topology-components.css

@@ -14,7 +14,7 @@
   --pf-topology__node__background--Stroke: var(--pf-global--BorderColor--100);
   --pf-topology__node__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
   --pf-topology__node--m-dragging--background--StrokeWidth: var(--pf-global--BorderWidth--sm);
-  
+
   --pf-topology__node--m-hover--background--Stroke: unset;
   --pf-topology__node--m-hover--label__background--Stroke: unset;
 
@@ -46,7 +46,7 @@
   /* node labels */
   --pf-topology__node__label__text--Fill: var(--pf-global--palette--black-1000);
   --pf-topology__node__label__text--m-secondary--Fill: var(--pf-global--Color--200);
-  
+
   --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-global--Color--light-100);
   --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-global--Color--light-100);
   --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-global--Color--light-100);
@@ -111,7 +111,7 @@
 
   --pf-topology__group__label__node__label__background--Fill: var(--pf-global--BackgroundColor--dark-300);
   --pf-topology__group__label__node__label__background--StrokeWidth: var(--pf-global--BorderWidth--sm);
-  --pf-topology__group__label__text--Fill: var(--pf-global--palette--white); 
+  --pf-topology__group__label__text--Fill: var(--pf-global--palette--white);
   --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-global--palette--white);
   --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-global--active-color--100);
 
@@ -160,7 +160,7 @@
 :root:where(.pf-theme-dark) {
   --pf-topology-visualization-surface--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
-  --pf-topology__node--Color: var(--pf-global--Color--100); 
+  --pf-topology__node--Color: var(--pf-global--Color--100);
 
   /* dark create connector */
   --pf-topology__create-connector-color--Stroke: var(--pf-global--palette--black-300);
@@ -176,9 +176,9 @@
 
   --pf-topology__node--m-disabled--Background--Fill: var(--pf-topology__node__background--Fill);
   --pf-topology__node--m-disabled--Background--Stroke: var(--pf-global--palette--black-500);
-  
+
   --pf-topology__node--m-dragging--background--StrokeWidth: 2px;
-  
+
   --pf-topology__node--m-hover--background--Stroke: var(--pf-global--palette--black-100);
   --pf-topology__node--m-hover--label__background--Stroke: var(--pf-global--palette--black-100);
 
@@ -199,7 +199,7 @@
   --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-global--palette--black-900);
   --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-global--palette--black-900);
   --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-global--palette--black-900);
-  
+
   --pf-topology__node__label__icon--Color: var(--pf-global--palette--black-600);
 
   --pf-topology__node__action-icon__icon--Color: var(--pf-global--Color--100);
@@ -209,7 +209,7 @@
   --pf-topology__group__background--Stroke: var(--pf-global--palette--black-300);
   --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-global--palette--black-500);
   --pf-topology__group--m-alt-group--topology__group__background--Stroke: var(--pf-global--BorderColor--100);
-  --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-global--palette--black-700);
+  --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-global--primary-color--300);
   --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-global--active-color--300);
   --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-global--palette--black-800);
   --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-global--palette--black-100);
@@ -247,7 +247,7 @@
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
-  position: relative; 
+  position: relative;
 }
 
 .pf-topology-visualization-surface__svg {
@@ -560,6 +560,12 @@
   --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke);
 }
 
+.pf-topology__group.pf-m-hover.pf-m-selected .pf-topology__group__background {
+  --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill);
+  --pf-topology__group__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke);
+  --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke);
+}
+
 .pf-topology__group.pf-m-drop-target .pf-topology__group__background {
   --pf-topology__group__background--Stroke: var(--pf-topology__group--m-drop-target--topology__group__background--Stroke);
   stroke-dasharray: 12;