@patternfly/react-styles 6.0.0-alpha.6 → 6.0.0-alpha.8

package/css/components/ToggleGroup/toggle-group.css

@@ -1,38 +1,39 @@
-.pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-toggle-group__button--LineHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+:where(:root),
+:where(.pf-v5-c-toggle-group) {
+  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v5-c-toggle-group__button--ZIndex: auto;
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--focus--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--focus--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
-  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-toggle-group__button--m-selected--Color: initial;
-  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-v5-global--FontSize--xs);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
+}
+
+.pf-v5-c-toggle-group {
   display: flex;
 }
 .pf-v5-c-toggle-group.pf-m-compact {
@@ -79,17 +80,12 @@
   content: "";
   border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
 }
-.pf-v5-c-toggle-group__button:hover {
+.pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
   --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--hover--ZIndex);
   --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--hover--before--BorderColor);
   text-decoration: none;
 }
-.pf-v5-c-toggle-group__button:focus {
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--focus--BackgroundColor);
-  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--focus--ZIndex);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--focus--before--BorderColor);
-}
 .pf-v5-c-toggle-group__button.pf-m-selected {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
   --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
@@ -105,13 +101,4 @@
 .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
 .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
   margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
 }

package/css/components/ToggleGroup/toggle-group.d.ts

@@ -5,7 +5,6 @@ declare const _default: {
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },
-  "themeDark": "pf-v5-theme-dark",
   "toggleGroup": "pf-v5-c-toggle-group",
   "toggleGroupButton": "pf-v5-c-toggle-group__button",
   "toggleGroupIcon": "pf-v5-c-toggle-group__icon",

package/css/components/ToggleGroup/toggle-group.js

@@ -7,7 +7,6 @@ exports.default = {
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },
-  "themeDark": "pf-v5-theme-dark",
   "toggleGroup": "pf-v5-c-toggle-group",
   "toggleGroupButton": "pf-v5-c-toggle-group__button",
   "toggleGroupIcon": "pf-v5-c-toggle-group__icon",

package/css/components/ToggleGroup/toggle-group.mjs

@@ -5,7 +5,6 @@ export default {
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },
-  "themeDark": "pf-v5-theme-dark",
   "toggleGroup": "pf-v5-c-toggle-group",
   "toggleGroupButton": "pf-v5-c-toggle-group__button",
   "toggleGroupIcon": "pf-v5-c-toggle-group__icon",

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,41 +1,3 @@
-#ws-core-c-navigation-default,
-#ws-core-c-navigation-basic,
-#ws-core-c-navigation-grouped,
-#ws-core-c-navigation-grouped-nav,
-#ws-core-c-navigation-grouped-nav-no-titles,
-#ws-core-c-navigation-expanded,
-#ws-core-c-navigation-expanded-with-subnav-titles,
-#ws-core-c-navigation-mixed,
-#ws-core-c-navigation-horizontal,
-#ws-core-c-navigation-horizontal-overflow,
-#ws-core-c-navigation-horizontal-subnav,
-#ws-core-c-navigation-horizontal-subnav-overflow,
-#ws-core-c-navigation-drilldown,
-#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
-#ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
-#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
-  padding: 0;
-}
-
-#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;
@@ -43,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,8 +5,6 @@ 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",
   "wsPreviewHtml": "ws-preview-html"
 };

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

@@ -7,8 +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",
   "wsPreviewHtml": "ws-preview-html"
 };

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

@@ -5,8 +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",
   "wsPreviewHtml": "ws-preview-html"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.0.0-alpha.6",
+  "version": "6.0.0-alpha.8",
   "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": "6.0.0-alpha.49",
+    "@patternfly/patternfly": "6.0.0-alpha.63",
     "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": "5aae45c06fbd78c00fc09de587cb833b9a7d077d"
+  "gitHead": "33b82ec94f4742d6ffca49a9ac03cb5593a2b34a"
 }