@patternfly/react-styles 4.70.1 → 4.71.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.71.1 (2022-06-01)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+# 4.71.0 (2022-06-01)
+
+
+### Features
+
+* **table:** full screen demo for sticky first column ([#7451](https://github.com/patternfly/patternfly-react/issues/7451)) ([f610dd4](https://github.com/patternfly/patternfly-react/commit/f610dd4726b16d73a166f7a57da0fa3588b8201d))
+
+
+
+
+
+## 4.70.2 (2022-05-31)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.70.1 (2022-05-31)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/assets/images/icon-github.hbs

@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <title>GitHub logo</title>
+  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+</svg>

package/css/assets/images/icon-google.hbs

@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#4285F4">
+  <title>Google logo</title>
+  <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
+</svg>

package/css/assets/images/icon-red-hat.hbs

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 145"><defs><style>.cls-1{fill:#e00;}</style></defs><title>RedHat-Logo-Hat-Color</title><path d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"/><path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/></svg>

package/css/components/AboutModalBox/about-modal-box.css

@@ -260,4 +260,32 @@
     background-size: var(--pf-c-about-modal-box__hero--sm--BackgroundSize);
     grid-area: hero;
   }
+}
+
+:where(.pf-theme-dark) .pf-c-about-modal-box {
+  --pf-global--Color--100: #e0e0e0;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-about-modal-box {
+  color: var(--pf-global--Color--100);
 }

package/css/components/AboutModalBox/about-modal-box.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
   "card": "pf-c-card",
   "modifiers": {
     "plain": "pf-m-plain"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/AboutModalBox/about-modal-box.js

@@ -14,5 +14,6 @@ exports.default = {
   "card": "pf-c-card",
   "modifiers": {
     "plain": "pf-m-plain"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/AboutModalBox/about-modal-box.mjs

@@ -12,5 +12,6 @@ export default {
   "card": "pf-c-card",
   "modifiers": {
     "plain": "pf-m-plain"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Accordion/accordion.css

@@ -215,4 +215,10 @@
 }
 .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
   --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
+}
+
+:where(.pf-theme-dark) .pf-c-accordion {
+  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/css/components/Accordion/accordion.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Accordion/accordion.js

@@ -13,5 +13,6 @@ exports.default = {
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Accordion/accordion.mjs

@@ -11,5 +11,6 @@ export default {
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Alert/alert.css

@@ -201,4 +201,18 @@
 
 .pf-m-overpass-font .pf-c-alert__title {
   --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
+}
+
+:where(.pf-theme-dark) .pf-c-alert {
+  --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert__title--Color: var(--pf-global--default-color--200);
+  --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
+  --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
+  --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
+  --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100);
+  --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600);
 }

package/css/components/Alert/alert.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate",
     "overpassFont": "pf-m-overpass-font"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Alert/alert.js

@@ -22,5 +22,6 @@ exports.default = {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate",
     "overpassFont": "pf-m-overpass-font"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Alert/alert.mjs

@@ -20,5 +20,6 @@ export default {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate",
     "overpassFont": "pf-m-overpass-font"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/AppLauncher/app-launcher.css

@@ -209,4 +209,16 @@
   font-size: var(--pf-c-app-launcher__group-title--FontSize);
   font-weight: var(--pf-c-app-launcher__group-title--FontWeight);
   color: var(--pf-c-app-launcher__group-title--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-app-launcher {
+  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-app-launcher__menu--Top: 100%;
+  --pf-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-app-launcher__menu-item--disabled--Color: var(--pf-global--palette--black-300);
+  --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
+  --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }

package/css/components/AppLauncher/app-launcher.d.ts

@@ -22,6 +22,7 @@ declare const _default: {
     "external": "pf-m-external",
     "link": "pf-m-link",
     "action": "pf-m-action"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/AppLauncher/app-launcher.js

@@ -24,5 +24,6 @@ exports.default = {
     "external": "pf-m-external",
     "link": "pf-m-link",
     "action": "pf-m-action"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/AppLauncher/app-launcher.mjs

@@ -22,5 +22,6 @@ export default {
     "external": "pf-m-external",
     "link": "pf-m-link",
     "action": "pf-m-action"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Badge/badge.css

@@ -28,4 +28,9 @@
 .pf-c-badge.pf-m-unread {
   --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
   --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
+}
+
+:where(.pf-theme-dark) .pf-c-badge {
+  --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
 }

package/css/components/Badge/badge.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
   "modifiers": {
     "read": "pf-m-read",
     "unread": "pf-m-unread"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Badge/badge.js

@@ -6,5 +6,6 @@ exports.default = {
   "modifiers": {
     "read": "pf-m-read",
     "unread": "pf-m-unread"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Badge/badge.mjs

@@ -4,5 +4,6 @@ export default {
   "modifiers": {
     "read": "pf-m-read",
     "unread": "pf-m-unread"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Banner/banner.css

@@ -124,4 +124,35 @@
 .pf-c-banner .pf-c-button.pf-m-inline:disabled, .pf-c-banner .pf-c-button.pf-m-inline.pf-m-disabled {
   --pf-c-banner--link--TextDecoration: var(--pf-c-banner--link--disabled--TextDecoration);
   cursor: not-allowed;
+}
+
+:where(.pf-theme-dark) .pf-c-banner {
+  --pf-global--Color--100: #e0e0e0;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-banner .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-banner {
+  color: var(--pf-global--Color--100);
+}
+:where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
+  color: var(--pf-global--palette--black-900);
 }

package/css/components/Banner/banner.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Banner/banner.js

@@ -13,5 +13,6 @@ exports.default = {
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Banner/banner.mjs

@@ -11,5 +11,6 @@ export default {
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Breadcrumb/breadcrumb.css

@@ -93,4 +93,8 @@ button.pf-c-breadcrumb__link {
 .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
   display: none;
   visibility: hidden;
+}
+
+:where(.pf-theme-dark) .pf-c-breadcrumb {
+  --pf-c-breadcrumb__item-divider--Color: var(--pf-global--BorderColor--100);
 }

package/css/components/Breadcrumb/breadcrumb.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
   "modifiers": {
     "current": "pf-m-current",
     "overpassFont": "pf-m-overpass-font"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Breadcrumb/breadcrumb.js

@@ -13,5 +13,6 @@ exports.default = {
   "modifiers": {
     "current": "pf-m-current",
     "overpassFont": "pf-m-overpass-font"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Breadcrumb/breadcrumb.mjs

@@ -11,5 +11,6 @@ export default {
   "modifiers": {
     "current": "pf-m-current",
     "overpassFont": "pf-m-overpass-font"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Button/button.css

@@ -474,4 +474,42 @@
 
 .pf-m-overpass-font .pf-c-button {
   --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
+}
+
+:where(.pf-theme-dark) .pf-c-button {
+  --pf-c-button--disabled--Color: var(--pf-global--disabled-color--300);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--hover--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
+  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
+  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
+  --pf-c-button--m-danger--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-danger--hover--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-danger--focus--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-danger--active--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-button--m-control--after--BorderTopColor: transparent;
+  --pf-c-button--m-control--after--BorderRightColor: transparent;
+  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-button--m-control--after--BorderLeftColor: transparent;
+  --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+}
+:where(.pf-theme-dark) .pf-c-button.pf-m-control:disabled::after {
+  border: 0;
+  border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--palette--black-700);
 }

package/css/components/Button/button.d.ts

@@ -26,6 +26,7 @@ declare const _default: {
     "end": "pf-m-end",
     "overpassFont": "pf-m-overpass-font"
   },
-  "spinner": "pf-c-spinner"
+  "spinner": "pf-c-spinner",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Button/button.js

@@ -28,5 +28,6 @@ exports.default = {
     "end": "pf-m-end",
     "overpassFont": "pf-m-overpass-font"
   },
-  "spinner": "pf-c-spinner"
+  "spinner": "pf-c-spinner",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Button/button.mjs

@@ -26,5 +26,6 @@ export default {
     "end": "pf-m-end",
     "overpassFont": "pf-m-overpass-font"
   },
-  "spinner": "pf-c-spinner"
+  "spinner": "pf-c-spinner",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/CalendarMonth/calendar-month.css

@@ -19,10 +19,10 @@
   --pf-c-calendar-month__header-year--Width: 8ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
-  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
-  --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: calc(var(--pf-global--spacer--md) * -1);
-  --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;
+  --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: 0;
+  --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: 0;
+  --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: 0;
   --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
@@ -196,4 +196,26 @@
   pointer-events: none;
   --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
   --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
+}
+
+:where(.pf-theme-dark) .pf-c-calendar-month {
+  --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--palette--black-900);
+  --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--palette--blue-400);
+  --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-calendar-month__date--focus--after--BorderColor: transparent;
+}
+:where(.pf-theme-dark) .pf-c-calendar-month__date:hover, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-hover {
+  --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+}
+:where(.pf-theme-dark) .pf-c-calendar-month__date:focus, :where(.pf-theme-dark) .pf-c-calendar-month__date.pf-m-focus {
+  --pf-c-calendar-month__date--after--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-calendar-month__date--BackgroundColor: var(--pf-global--primary-color--300);
 }

package/css/components/CalendarMonth/calendar-month.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
     "disabled": "pf-m-disabled",
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/CalendarMonth/calendar-month.js

@@ -25,5 +25,6 @@ exports.default = {
     "disabled": "pf-m-disabled",
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/CalendarMonth/calendar-month.mjs

@@ -23,5 +23,6 @@ export default {
     "disabled": "pf-m-disabled",
     "hover": "pf-m-hover",
     "focus": "pf-m-focus"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Chip/chip.css

@@ -95,4 +95,10 @@
 .pf-c-chip__icon + .pf-c-chip__text,
 .pf-c-chip__text + .pf-c-chip__icon {
   margin-left: var(--pf-c-chip__icon--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-chip {
+  --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
 }

package/css/components/Chip/chip.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
   "modifiers": {
     "overflow": "pf-m-overflow",
     "draggable": "pf-m-draggable"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Chip/chip.js

@@ -10,5 +10,6 @@ exports.default = {
   "modifiers": {
     "overflow": "pf-m-overflow",
     "draggable": "pf-m-draggable"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Chip/chip.mjs

@@ -8,5 +8,6 @@ export default {
   "modifiers": {
     "overflow": "pf-m-overflow",
     "draggable": "pf-m-draggable"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/ChipGroup/chip-group.css

@@ -25,6 +25,7 @@
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
   --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
+  max-width: 100%;
 }
 .pf-c-chip-group.pf-m-category {
   padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
@@ -54,7 +55,6 @@
   flex-wrap: wrap;
   align-items: center;
   min-width: 0;
-  max-width: 100%;
 }
 
 .pf-c-chip-group__list-item {

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -86,4 +86,15 @@
   --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight);
   --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom);
   --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-clipboard-copy {
+  --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--400);
+}
+:where(.pf-theme-dark) .pf-c-clipboard-copy__group > * + * {
+  margin-left: 0;
+  border-left: 1px solid var(--pf-global--palette--black-700) !important;
+}
+:where(.pf-theme-dark) .pf-c-clipboard-copy__expandable-content {
+  border: 0;
 }

package/css/components/ClipboardCopy/clipboard-copy.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/ClipboardCopy/clipboard-copy.js

@@ -15,5 +15,6 @@ exports.default = {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/ClipboardCopy/clipboard-copy.mjs

@@ -13,5 +13,6 @@ export default {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };