diff --git a/.github/upload-preview.js b/.github/upload-preview.js index 6ec0f19d97..43f3645577 100644 --- a/.github/upload-preview.js +++ b/.github/upload-preview.js @@ -20,7 +20,7 @@ if (!uploadFolder) { } const uploadFolderName = path.basename(uploadFolder); -let uploadURL = `${repo}-${prnum ? `pr-${prnum}` : prbranch}`.replace(/[\/|\.]/g, '-'); +let uploadURL = `pf-${prnum ? `pr-${prnum}` : prbranch}`.replace(/[\/|\.]/g, '-'); switch(uploadFolderName) { case 'coverage': @@ -28,7 +28,7 @@ switch(uploadFolderName) { break; case 'public': if (!prnum && prbranch === 'main') { - uploadURL = 'core-staging.patternfly.org'; + uploadURL = 'pf-core-staging.patternfly.org'; fs.writeFileSync(path.join(__dirname, '../public/CNAME'), uploadURL); } else { diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml index c7ad87d61e..9286f86e14 100644 --- a/.github/workflows/pr-preview.yml +++ b/.github/workflows/pr-preview.yml @@ -17,10 +17,10 @@ jobs: git checkout tmp - run: | - git rev-parse origin/main + git rev-parse origin/high-contrast-q3 git rev-parse HEAD - git rev-parse origin/main..HEAD - git log origin/main..HEAD --format="%b" + git rev-parse origin/high-contrast-q3..HEAD + git log origin/high-contrast-q3..HEAD --format="%b" # Yes, we really want to checkout the PR # Injected by generate-workflows.js diff --git a/README.md b/README.md index 2f3d2584c1..ff50ca032b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # PatternFly - + ## Install - This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json). @@ -63,19 +63,19 @@ When making visual changes to a full page example, new example preview screensho ## Guidelines for CSS development -- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://core-staging.patternfly.org, and information detailing the change. +- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://pf-core-staging.patternfly.org, and information detailing the change. - If global variables are modified in Core, a React issue should be opened to address this. - CSS developers should ensure that animation is well documented and communicated to the respective React developer. - Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes. ### Handlebars guidelines -[For information on how to contribute, refer to our guidelines.](https://core-staging.patternfly.org/contribution) +[For information on how to contribute, refer to our guidelines.](https://pf-core-staging.patternfly.org/contribution) ### CSS/Sass guidelines -[For more information on using CSS and Sass, refer to our guidelines.](https://core-staging.patternfly.org/guidelines) +[For more information on using CSS and Sass, refer to our guidelines.](https://pf-core-staging.patternfly.org/guidelines) ### Custom icon guidelines -[For more information on custom icons, refer to our guidelines.](https://core-staging.patternfly.org/adding-custom-icons) +[For more information on custom icons, refer to our guidelines.](https://pf-core-staging.patternfly.org/adding-custom-icons) ## Beta components @@ -112,7 +112,7 @@ If you have any suggestions about ways that we can improve how we use this tool, ## FAQ #### CSS Variables -[How do I use CSS variables to customize the library?](https://core-staging.patternfly.org/guidelines#variables) +[How do I use CSS variables to customize the library?](https://pf-core-staging.patternfly.org/guidelines#variables) #### Browser support PatternFly is supported on the latest two major versions of the following browsers: diff --git a/backstop_data/bitmaps_reference/pf-core__components_back-to-top_html-demos_basic_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_back-to-top_html-demos_basic_0_document_0_mobile.png index 5450fafb84..9868926e38 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_back-to-top_html-demos_basic_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_back-to-top_html-demos_basic_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_basic_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_basic_0_document_0_mobile.png index ed4ae08da9..3efd6a367c 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_basic_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_basic_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_topbottom_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_topbottom_0_document_0_mobile.png index 58eff5c639..ba02169690 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_topbottom_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_banner_html-demos_topbottom_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_button_html-demos_progress-button---loading_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_button_html-demos_progress-button---loading_0_document_0_mobile.png index f3dd89dd4d..af2b409dac 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_button_html-demos_progress-button---loading_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_button_html-demos_progress-button---loading_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_0_mobile.png index 2cb46e0bd2..cd74ca4d72 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_1_tablet.png index 40667eac8f..64d077a807 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_2_desktop.png index cdebf735c0..0251c47a24 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_button_html_progress_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_events-view_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_events-view_0_document_0_mobile.png index 8fd511887e..4652e62da3 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_events-view_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_events-view_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_0_mobile.png index 22ffd1bf3d..5280ba7dfd 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_1_tablet.png index b7d4862f67..6b7f6ad75d 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_2_desktop.png index f440893254..054eee6bb4 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-card-expanded-with-popover_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_0_mobile.png index 6127cc6247..da00ccaec5 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_1_tablet.png index f90245042d..4ad8c7f86e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_card_html-demos_status-tabbed-card_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_actionable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_actionable_0_document_0_mobile.png index 040d04e1e3..503aec76ab 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_actionable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_actionable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_basic_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_basic_0_document_0_mobile.png index c59fd2b159..ee98f36b45 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_basic_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_basic_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_static-bottom-pagination_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_static-bottom-pagination_0_document_0_mobile.png index acbe54cdaa..5c2bc66792 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_static-bottom-pagination_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_data-list_html-demos_static-bottom-pagination_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_0_mobile.png index 9c89704d29..860cca07fc 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_1_tablet.png index 2b1ca1d63e..54b47726ac 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_2_desktop.png index 90f5796392..dada00d53e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_data-list_html_draggable_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_0_mobile.png index fea6b2d2e5..ca0b3a4df7 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_1_tablet.png index f7b7b8dd01..a271b2149c 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_2_desktop.png index 5fae900141..cb4079c06e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_basic-file-upload_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_0_mobile.png index 47496b97b6..0a23c72ea3 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_1_tablet.png index 3976e8c24b..39a4ee62ba 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_2_desktop.png index 28d79743c0..0ba127a665 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-in-form-with-error_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_0_mobile.png index f843523adb..54c370b943 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_1_tablet.png index 8003c76bfc..1dc3bf9f58 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_2_desktop.png index d2ad210d19..bd0f3f96f8 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_file-upload-loading_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_0_mobile.png index 974716fd98..d2146053b9 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_1_tablet.png index 49b18505a6..800b21c1a5 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_2_desktop.png index 07b78e133c..b874af3b22 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-editable_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_0_mobile.png index 735c557d7d..2e3254a009 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_1_tablet.png index bf9150973b..bf4f41c084 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_2_desktop.png index cbe4bf77d8..4ed80c263a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_upload-complete-non-editable_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_0_mobile.png index d5ad08e967..efa3b93d85 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_1_tablet.png index f5afddec47..8602406ca0 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_2_desktop.png index 392b607e44..9dd0e69c8e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_file-upload_simple-file-upload_html_with-helper-text_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_0_mobile.png index 7022bd78ea..9ee783a01a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_1_tablet.png index 3a40c50d38..818818cb29 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_2_desktop.png index a86248f74e..f6243a880c 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_input_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_0_mobile.png index 9af31f3a6c..4b9af34712 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_2_desktop.png index 8bb9351d57..19a9d70cd4 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_select_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_textarea_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_textarea_0_document_1_tablet.png index 00bf5cf85c..cb6434008a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_textarea_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form-control_html_textarea_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_0_mobile.png index fdc68df1fb..161563abb5 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_1_tablet.png index 284daf234c..f2e4beec8b 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_2_desktop.png index 152bc85874..341ae8d6ce 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html-demos_complex-form_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_0_mobile.png index 1fe3681364..b7435b2bbc 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_1_tablet.png index cb8a2c3b24..1c31779a4b 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_2_desktop.png index 27e6882445..971eaa71b5 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_expandable-and-nested-field-groups_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_0_mobile.png index b714ba3c0b..73bb2700cf 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_1_tablet.png index 99376b019d..1e9e58536e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_2_desktop.png index 6bc7282231..7ec1435bed 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_field-group-non-expandable_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_0_mobile.png index c7e726b07f..780fa13c3f 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_1_tablet.png index 06d31d0ad1..a2f6c81198 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_2_desktop.png index 0305588f6a..39912689b0 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_forms_form_html_help-text_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_0_mobile.png index 72354de9e5..fc69da4e9f 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_1_tablet.png index f37fff7e8d..6c77efbe56 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_2_desktop.png index aadf041945..7105058209 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html-demos_helper-text-on-a-form_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html_static_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html_static_0_document_1_tablet.png index 3f79e01d2f..13f9a1a2d3 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_helper-text_html_static_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_helper-text_html_static_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_icon_html_in-progress_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_icon_html_in-progress_0_document_0_mobile.png index 7ca9e7fab6..981c946d56 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_icon_html_in-progress_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_icon_html_in-progress_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_0_mobile.png index c0dae2a51d..1fb0e65093 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_1_tablet.png index 593e6d579d..dd57c371b1 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_2_desktop.png index 172c2fd2f9..8df898c6d5 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_input-group_html_variations_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_jump-links_html-demos_vertical-jump-links-toggle-text-on-mobile_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_jump-links_html-demos_vertical-jump-links-toggle-text-on-mobile_0_document_0_mobile.png index 2a722b6395..2b849c4958 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_jump-links_html-demos_vertical-jump-links-toggle-text-on-mobile_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_jump-links_html-demos_vertical-jump-links-toggle-text-on-mobile_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_advanced-integration-with-menu-options_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_advanced-integration-with-menu-options_0_document_0_mobile.png index a3c233d575..64d5c05726 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_advanced-integration-with-menu-options_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_advanced-integration-with-menu-options_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_basic_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_basic_0_document_0_mobile.png index a3c233d575..64d5c05726 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_basic_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_basic_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-collapsed_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-collapsed_0_document_0_mobile.png index 962baaf175..aa78456628 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-collapsed_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-collapsed_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-expanded_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-expanded_0_document_0_mobile.png index 8a8791134b..6fd61e9b5a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-expanded_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_masthead_html-demos_with-expandable-search-expanded_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_0_mobile.png index 17e7fcf185..36f1840079 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_1_tablet.png index b6df5cea8b..defe4bc98f 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_menus_menu_html_loading_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-nav-with-horizontal-subnav_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-nav-with-horizontal-subnav_0_document_0_mobile.png index c471f90b7c..76e634ea1e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-nav-with-horizontal-subnav_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-nav-with-horizontal-subnav_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-subnav_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-subnav_0_document_0_mobile.png index 80746abcae..c5797b5d79 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-subnav_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_navigation_html-demos_horizontal-subnav_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_context-selector-in-sidebar_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_context-selector-in-sidebar_0_document_0_mobile.png index a3c233d575..64d5c05726 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_context-selector-in-sidebar_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_context-selector-in-sidebar_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_multiple-sidebar-body-elements_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_multiple-sidebar-body-elements_0_document_0_mobile.png index e64d4ae952..3bbcd37cae 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_multiple-sidebar-body-elements_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_multiple-sidebar-body-elements_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-breadcrumb_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-breadcrumb_0_document_0_mobile.png index d9f925de3a..69700affa8 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-breadcrumb_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-breadcrumb_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-horizontal-subnav_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-horizontal-subnav_0_document_0_mobile.png index f00ad30c85..05073e7e8e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-horizontal-subnav_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_page_html-demos_sticky-horizontal-subnav_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_basic-in-process_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_basic-in-process_0_document_0_mobile.png index 77e057c97b..c5b2be822b 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_basic-in-process_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_basic-in-process_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_compact_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_compact_0_document_0_mobile.png index e75168d5c7..b95ff9a139 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_compact_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_progress-stepper_html_compact_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_0_mobile.png index a7c6159f6d..6b9ff5d4d4 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_1_tablet.png index 85b1875054..a4b65666ff 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_2_desktop.png index 4904a18880..1a859ea9b2 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure-without-measure_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_1_tablet.png index 459c631d65..94ecbe8cad 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_2_desktop.png index 08e0e4c047..654b2ace62 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_progress_html_failure_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_0_mobile.png index 2ef6cd183a..1fd9709bbd 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_1_tablet.png index 725bc59db2..053ab9615d 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_basic_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_0_mobile.png index 7b32fa37d3..4458226e97 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_1_tablet.png index b82aee4ecb..3c1dffb843 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_2_desktop.png index 42ce11442d..8ac3683298 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_custom-size_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_inline_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_inline_0_document_0_mobile.png index fccfc477dc..706fc8a888 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_inline_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_inline_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_0_mobile.png index f19a48ed06..2fe01dbaf2 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_1_tablet.png index a8cd03234d..6c1cf86405 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_2_desktop.png index ccec45b01e..7cb73a1b0b 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_spinner_html_sizes_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_0_mobile.png index ee93c4fea9..9a272e0656 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_1_tablet.png index 4c64ce36c9..f0eac7eb40 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_2_desktop.png index 01c9eb62d3..9cf535d784 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_basic_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_0_mobile.png index dd008f9daa..406e2e63a8 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_1_tablet.png index 93c3346c0c..6ae21b2983 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_2_desktop.png index baeed800c3..c04fb4ac79 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_cell-with-image-alignment_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_0_mobile.png index b4d240a31f..c62e67c0d9 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_1_tablet.png index 05dd025301..db22e7a11d 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_2_desktop.png index 82fc23a064..954d768fa9 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_column-management-modal_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_0_mobile.png index ac1d37248d..beaafda726 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_1_tablet.png index d04760e891..a53d62d01a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_2_desktop.png index eda9d05442..a6c2c79d8f 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compact_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_0_mobile.png index 2ae981d0a4..b663183145 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_1_tablet.png index 5f841b0927..1030598b7f 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_2_desktop.png index 00e713070c..206f9da199 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_compound-expansion_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_0_mobile.png index a97528dd4d..d431dc8f72 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_1_tablet.png index 5892a8688e..36d5c39d95 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_2_desktop.png index c648992a57..866e415785 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_empty-state_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_0_mobile.png index 3944fb1f97..cdc829b692 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_1_tablet.png index 036c61cb73..585f87a01b 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_2_desktop.png index 75459ea0fa..4cf4f5be63 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_expandable_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_0_mobile.png index 91d0cf9ffd..9c5e32c511 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_1_tablet.png index ae487dca41..8e84d1d2b5 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_2_desktop.png index 1cd439d3ac..ba138d315c 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_loading-state-demo_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_0_mobile.png index 591080dfb1..d222670656 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_1_tablet.png index a109598bc9..1768f05908 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_2_desktop.png index bf237898e9..2c1f73e3e7 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sortable_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_0_mobile.png index 19c3649184..e0657f2d9a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_1_tablet.png index 607d5f3c42..a411e5d007 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_2_desktop.png index cd00ad928c..5aa14e1217 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_static-bottom-pagination_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_0_mobile.png index 73778f9feb..341abb8387 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_1_tablet.png index 919d9b25bf..5522306057 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_2_desktop.png index 57416377b6..72ffd8035d 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-first-column_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_0_mobile.png index e5e0e5ecfd..3ae3fa63d1 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_1_tablet.png index d6cc6822aa..4385cfa25a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_2_desktop.png index edcd41fd57..0db3ec16df 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-last-column_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_0_mobile.png index 038c18a149..126cfb4fcb 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_1_tablet.png index 2ddd465e35..3bfb646a92 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_2_desktop.png index f743fd0845..f0c4df4e1a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header-and-multiple-columns_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_0_mobile.png index 914da84f14..377a05c978 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_1_tablet.png index 289522dd59..8828d3732a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_2_desktop.png index f27240210a..00701ca822 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-header_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_0_mobile.png index 071ae318a5..1228fadacb 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_1_tablet.png index bf0b14bddf..2b1c49f918 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_2_desktop.png index 477eaac674..dd7f447c38 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html-demos_sticky-multiple-columns_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_expandable-with-set-width-columns-example_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_expandable-with-set-width-columns-example_0_document_1_tablet.png index f82958914a..4488b0e24d 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_expandable-with-set-width-columns-example_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_expandable-with-set-width-columns-example_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_0_mobile.png index 101d88cc97..738330f522 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_1_tablet.png index c03403ce7e..d927a61ebc 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_2_desktop.png index c84e13f4e2..9ca767bb6a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-examples_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_0_mobile.png index dcf92240dc..a8bbbe9f28 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_1_tablet.png index e2eadfd6e8..1b11b5221e 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_2_desktop.png index ffcb87ede6..b11173d428 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_favorites-sortable-example_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_0_mobile.png index cab6884d13..5031edea34 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_1_tablet.png index 508fb99fb2..a9199b42e6 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_2_desktop.png index d1e71afe22..b5c88f3405 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-example_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_1_tablet.png index 508fb99fb2..a9199b42e6 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_2_desktop.png index d1e71afe22..b5c88f3405 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_nested-column-headers-sticky-header_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_1_tablet.png index f539c6d565..e4d204c38c 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_2_desktop.png index 69e8b2a4cd..5e8eff5816 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_sortable-example_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_sticky-right-column_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_sticky-right-column_0_document_0_mobile.png index 699f57ec69..ffc11e326b 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_sticky-right-column_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_sticky-right-column_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_0_mobile.png new file mode 100644 index 0000000000..9544b90b96 Binary files /dev/null and b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_1_tablet.png new file mode 100644 index 0000000000..8909143687 Binary files /dev/null and b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_2_desktop.png new file mode 100644 index 0000000000..6b408c2f96 Binary files /dev/null and b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-buttons-and-actions_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-long-strings-in-the-content_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-long-strings-in-the-content_0_document_0_mobile.png index 5970519e3b..3cbddaedce 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-long-strings-in-the-content_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_table-with-long-strings-in-the-content_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_0_mobile.png index f40f9b6d85..1b68fe5d8c 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_1_tablet.png index 5660b86f9e..f0f3ef19e0 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes-and-icons_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_0_mobile.png index 73076abcdb..01212059f0 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_1_tablet.png index 53eedb495a..a4e0b97ee9 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_table_html_tree-table-with-checkboxes_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-tabs_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-tabs_0_document_0_mobile.png index 6319e3097f..bcde421c02 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-tabs_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-tabs_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-unindented-tabs_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-unindented-tabs_0_document_0_mobile.png index dd8b7cf0fc..0ca36d4ef8 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-unindented-tabs_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_nested-unindented-tabs_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs-with-secondary-tabs_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs-with-secondary-tabs_0_document_0_mobile.png index 1f8d3a7b7a..1ffbd464c2 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs-with-secondary-tabs_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs-with-secondary-tabs_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs_0_document_0_mobile.png index 5d1ed8d935..9291d68787 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_tabs_html-demos_open-tabs_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_0_mobile.png index 7d59c18001..0f1eae11da 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_1_tablet.png index d6de8b0b77..0ab7d7423a 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_2_desktop.png index 6e8aa64ed5..0d4c5a69f6 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_search-input-group-expandable_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_0_mobile.png index 79bd84e143..670e316003 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_1_tablet.png index 1b9df0dbf3..a7c14f1d85 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_2_desktop.png index df21b3556a..7761ea43c1 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_text-input-group_html_with-validation_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-pagination-management-on-mobile_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-pagination-management-on-mobile_0_document_0_mobile.png index 613b5b5fed..bf09af8dc1 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-pagination-management-on-mobile_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-pagination-management-on-mobile_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_1_tablet.png b/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_1_tablet.png index 0c6249e86a..f23bed3227 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_1_tablet.png and b/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_1_tablet.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_2_desktop.png b/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_2_desktop.png index f11b2271f8..1cc26beb91 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_2_desktop.png and b/backstop_data/bitmaps_reference/pf-core__components_toolbar_html-demos_toolbar-with-validation-on-desktop_0_document_2_desktop.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page-nav-expanded-mobile_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page-nav-expanded-mobile_0_document_0_mobile.png index 30fa3090fe..45e51076cd 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page-nav-expanded-mobile_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page-nav-expanded-mobile_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page_0_document_0_mobile.png index f4b4c1482f..0a274e2782 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_in-page_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page-expanded_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page-expanded_0_document_0_mobile.png index 05c8cc87ca..a235d96f79 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page-expanded_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page-expanded_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page_0_document_0_mobile.png index c346184595..6c35b93fb7 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__components_wizard_html-demos_with-drawer-in-page_0_document_0_mobile.png differ diff --git a/backstop_data/bitmaps_reference/pf-core__patterns_card-view_html-demos_card-view_0_document_0_mobile.png b/backstop_data/bitmaps_reference/pf-core__patterns_card-view_html-demos_card-view_0_document_0_mobile.png index a17c5f0a91..75a8e719b1 100644 Binary files a/backstop_data/bitmaps_reference/pf-core__patterns_card-view_html-demos_card-view_0_document_0_mobile.png and b/backstop_data/bitmaps_reference/pf-core__patterns_card-view_html-demos_card-view_0_document_0_mobile.png differ diff --git a/backstop_data/engine_scripts/puppet/onReady.js b/backstop_data/engine_scripts/puppet/onReady.js index 7428abd320..1c71e39cbf 100644 --- a/backstop_data/engine_scripts/puppet/onReady.js +++ b/backstop_data/engine_scripts/puppet/onReady.js @@ -1,8 +1,20 @@ module.exports = async (page, scenario, vp) => { await require('./overrideCSS')(page, scenario); - // add dark theme class to html tag if --dark flag passed if (process.argv.includes('--dark')) { + // Emulate dark mode + if (page.emulateMediaFeatures) { + await page.emulateMediaFeatures([ + { name: 'prefers-color-scheme', value: 'dark' } + ]); + } await require('./addDarkThemeClass')(page, scenario); + } else { + // Emulate light mode + if (page.emulateMediaFeatures) { + await page.emulateMediaFeatures([ + { name: 'prefers-color-scheme', value: 'light' } + ]); + } } }; diff --git a/backstop_data/engine_scripts/puppet/overrideCSS.js b/backstop_data/engine_scripts/puppet/overrideCSS.js index 6e8abea79d..9b4eeee834 100644 --- a/backstop_data/engine_scripts/puppet/overrideCSS.js +++ b/backstop_data/engine_scripts/puppet/overrideCSS.js @@ -1,6 +1,6 @@ module.exports = async (page, scenario) => { + // disable animations/transitions await page.evaluate(() => { - // disable animations/transitions - document.querySelector('html').classList.add('pf-m-no-motion'); + document.documentElement.classList.add('pf-v6-m-no-motion'); }); }; diff --git a/package.json b/package.json index 1c1f39e79f..a4ca2fc94e 100644 --- a/package.json +++ b/package.json @@ -47,11 +47,11 @@ "@commitlint/config-conventional": "^19.1.0", "@fortawesome/fontawesome": "^1.1.8", "@octokit/rest": "^20.1.0", - "@patternfly/documentation-framework": "6.11.2", + "@patternfly/documentation-framework": "6.18.2", "@patternfly/patternfly-a11y": "5.1.0", - "@patternfly/react-code-editor": "6.2.2", - "@patternfly/react-core": "6.2.2", - "@patternfly/react-table": "6.2.2", + "@patternfly/react-code-editor": "6.3.1", + "@patternfly/react-core": "6.3.1", + "@patternfly/react-table": "6.3.1", "@starptech/prettyhtml": "^0.10.0", "backstopjs": "^6.3.23", "cheerio": "^1.0.0-rc.12", diff --git a/src/patternfly/base/normalize.scss b/src/patternfly/base/normalize.scss index cb67e6592b..75d6368eca 100644 --- a/src/patternfly/base/normalize.scss +++ b/src/patternfly/base/normalize.scss @@ -122,6 +122,10 @@ cursor: pointer; } + :where(:root) { + color-scheme: light; + } + :where(.pf-v6-theme-dark) { color-scheme: dark; } diff --git a/src/patternfly/base/patternfly-variables.scss b/src/patternfly/base/patternfly-variables.scss index e7bb5248a1..d4fbd524ba 100644 --- a/src/patternfly/base/patternfly-variables.scss +++ b/src/patternfly/base/patternfly-variables.scss @@ -2,6 +2,8 @@ @use "./tokens/tokens-palette" as palette; @use "./tokens/tokens-default" as default; @use "./tokens/tokens-dark" as dark; +@use "./tokens/tokens-highcontrast" as highcontrast; +@use "./tokens/tokens-highcontrast-dark" as highcontrast-dark; @use "./tokens/tokens-local" as local; :root { @@ -15,6 +17,26 @@ @include dark.pf-v6-tokens; } +// :root:where(.pf-v6-theme-high-contrast) { +// @include highcontrast.pf-v6-tokens; +// } + +@media (prefers-contrast: more) { + :root { + @include highcontrast.pf-v6-tokens; + } +} + +// :root:where(.pf-v6-theme-high-contrast.pf-v6-theme-dark) { +// @include highcontrast-dark.pf-v6-tokens; +// } + +@media (prefers-contrast: more) { + :root:where(.pf-v6-theme-dark) { + @include highcontrast-dark.pf-v6-tokens; + } +} + @include pf-v6-rtl(false) { @include pf-v6-set-inverse; } diff --git a/src/patternfly/base/tokens/tokens-charts-dark.scss b/src/patternfly/base/tokens/tokens-charts-dark.scss index 373837a726..e331a6cfd9 100644 --- a/src/patternfly/base/tokens/tokens-charts-dark.scss +++ b/src/patternfly/base/tokens/tokens-charts-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Mon, 23 Sep 2024 22:48:17 GMT +// Generated on Mon, 25 Aug 2025 19:17:30 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/src/patternfly/base/tokens/tokens-charts.scss b/src/patternfly/base/tokens/tokens-charts.scss index a159bef1be..ab7fb4a855 100644 --- a/src/patternfly/base/tokens/tokens-charts.scss +++ b/src/patternfly/base/tokens/tokens-charts.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Mon, 23 Sep 2024 22:48:17 GMT +// Generated on Mon, 25 Aug 2025 19:17:30 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/src/patternfly/base/tokens/tokens-dark.scss b/src/patternfly/base/tokens/tokens-dark.scss index 6557007086..6a362d9818 100644 --- a/src/patternfly/base/tokens/tokens-dark.scss +++ b/src/patternfly/base/tokens/tokens-dark.scss @@ -1,9 +1,10 @@ // Do not edit directly -// Generated on Mon, 23 Sep 2024 22:48:17 GMT +// Generated on Mon, 25 Aug 2025 19:17:30 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); + --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000); --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000); --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500); --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000); @@ -27,6 +28,7 @@ --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30); --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); + --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30); --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60); --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20); @@ -34,6 +36,7 @@ --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70); + --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90); --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30); @@ -42,6 +45,7 @@ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60); --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40); + --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70); --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30); --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20); --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10); @@ -64,6 +68,7 @@ --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10); --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50); + --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40); --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30); --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30); @@ -71,16 +76,20 @@ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40); --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30); + --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20); --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50); --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30); --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20); --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30); --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20); + --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10); --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40); --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30); + --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20); --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20); + --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30); --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10); --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90); @@ -91,6 +100,7 @@ --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30); + --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20); --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200); --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300); @@ -191,6 +201,7 @@ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200); --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100); --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200); + --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100); --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200); --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300); @@ -225,6 +236,7 @@ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--border--color--page--default: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); diff --git a/src/patternfly/base/tokens/tokens-default.scss b/src/patternfly/base/tokens/tokens-default.scss index 90282f2196..f319c82899 100644 --- a/src/patternfly/base/tokens/tokens-default.scss +++ b/src/patternfly/base/tokens/tokens-default.scss @@ -1,11 +1,12 @@ // Do not edit directly -// Generated on Mon, 23 Sep 2024 22:48:17 GMT +// Generated on Mon, 25 Aug 2025 19:17:30 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); + --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000); --pf-t--global--border--radius--0: 0px; --pf-t--global--border--radius--100: 4px; --pf-t--global--border--radius--200: 6px; @@ -15,6 +16,13 @@ --pf-t--global--border--width--100: 1px; --pf-t--global--border--width--200: 2px; --pf-t--global--border--width--300: 3px; + --pf-t--global--border--width--400: 4px; + --pf-t--global--border--width--action--plain--clicked: 0px; + --pf-t--global--border--width--action--plain--default: 0px; + --pf-t--global--border--width--action--plain--hover: 0px; + --pf-t--global--border--width--high-contrast--extra-strong: 0px; + --pf-t--global--border--width--high-contrast--regular: 0px; + --pf-t--global--border--width--high-contrast--strong: 0px; --pf-t--global--box-shadow--X--100: -10px; --pf-t--global--box-shadow--X--200: -4px; --pf-t--global--box-shadow--X--300: -1px; @@ -51,6 +59,8 @@ --pf-t--global--breakpoint--500: 75rem; --pf-t--global--breakpoint--550: 80rem; --pf-t--global--breakpoint--600: 90.625rem; + --pf-t--global--color--nonstatus--green--400: #3d7019; + --pf-t--global--color--status--success--150: #3d7019; --pf-t--global--delay--100: 0ms; --pf-t--global--delay--200: 50ms; --pf-t--global--delay--300: 100ms; @@ -62,6 +72,10 @@ --pf-t--global--duration--50: 50ms; --pf-t--global--duration--500: 500ms; --pf-t--global--duration--600: 600ms; + --pf-t--global--focus-ring--position--inset: -4; + --pf-t--global--focus-ring--position--offset: 2; + --pf-t--global--focus-ring--width--inset: 3; + --pf-t--global--focus-ring--width--offset: 2; --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace; @@ -120,6 +134,7 @@ --pf-t--global--border--color--100: var(--pf-t--color--gray--30); --pf-t--global--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--border--color--300: var(--pf-t--color--gray--50); + --pf-t--global--border--color--400: var(--pf-t--color--gray--60); --pf-t--global--border--color--50: var(--pf-t--color--gray--20); --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); @@ -142,6 +157,7 @@ --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300); + --pf-t--global--border--width--page--default: var(--pf-t--global--border--width--400); --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200); --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400); @@ -203,56 +219,91 @@ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40); --pf-t--global--color--brand--200: var(--pf-t--color--blue--50); --pf-t--global--color--brand--300: var(--pf-t--color--blue--60); + --pf-t--global--color--brand--400: var(--pf-t--color--blue--70); + --pf-t--global--color--brand--500: var(--pf-t--color--blue--80); --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30); --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40); --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60); --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40); + --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70); + --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80); --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20); --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30); --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40); + --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60); + --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70); --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20); --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30); --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40); + --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60); + --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10); + --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70); --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20); --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30); --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40); + --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70); --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20); --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30); --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40); + --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60); + --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70); --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20); --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30); --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40); + --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60); + --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70); --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20); --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30); --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40); + --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50); + --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60); --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20); --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30); --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40); + --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60); + --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70); --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20); --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30); --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40); + --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70); + --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80); --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20); --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30); --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40); + --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70); + --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80); --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50); + --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60); --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50); + --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80); --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40); + --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70); --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40); + --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60); --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30); + --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60); --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60); --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70); + --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80); --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70); - --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70); + --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80); --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50); --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60); + --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70); --pf-t--global--color--status--success--100: var(--pf-t--color--green--60); --pf-t--global--color--status--success--200: var(--pf-t--color--green--70); + --pf-t--global--color--status--success--300: var(--pf-t--color--green--80); --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40); --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50); + --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60); + --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70); + --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80); + --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50); + --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60); --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300); @@ -271,6 +322,7 @@ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400); --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300); --pf-t--global--icon--color--100: var(--pf-t--color--gray--90); + --pf-t--global--icon--color--150: var(--pf-t--color--gray--60); --pf-t--global--icon--color--200: var(--pf-t--color--gray--50); --pf-t--global--icon--color--300: var(--pf-t--color--white); --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400); @@ -303,11 +355,15 @@ --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); --pf-t--global--text--color--100: var(--pf-t--color--gray--95); --pf-t--global--text--color--200: var(--pf-t--color--gray--60); + --pf-t--global--text--color--250: var(--pf-t--color--gray--70); --pf-t--global--text--color--300: var(--pf-t--color--white); --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40); + --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70); --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); + --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70); --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50); + --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60); --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200); --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200); @@ -428,6 +484,7 @@ --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200); --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100); --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200); + --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--100); --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md); --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs); @@ -517,6 +574,7 @@ --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--border--color--page--default: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); diff --git a/src/patternfly/base/tokens/tokens-highcontrast-dark.scss b/src/patternfly/base/tokens/tokens-highcontrast-dark.scss new file mode 100644 index 0000000000..5912c4edf0 --- /dev/null +++ b/src/patternfly/base/tokens/tokens-highcontrast-dark.scss @@ -0,0 +1,396 @@ + +// Do not edit directly +// Generated on Mon, 25 Aug 2025 19:17:30 GMT + +@mixin pf-v6-tokens { + --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); + --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000); + --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500); + --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000); + --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000); + --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600); + --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600); + --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500); + --pf-t--global--background--color--primary--default: var(--pf-t--color--black); + --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600); + --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200); + --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200); + --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100); + --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200); + --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); + --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); + --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70); + --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10); + --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20); + --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20); + --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30); + --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50); + --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); + --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30); + --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60); + --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30); + --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20); + --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10); + --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40); + --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50); + --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70); + --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90); + --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30); + --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20); + --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30); + --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20); + --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10); + --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60); + --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50); + --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40); + --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70); + --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30); + --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20); + --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10); + --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30); + --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20); + --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10); + --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30); + --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20); + --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10); + --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30); + --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20); + --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10); + --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30); + --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20); + --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10); + --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30); + --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20); + --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10); + --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30); + --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20); + --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10); + --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50); + --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40); + --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40); + --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30); + --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30); + --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30); + --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40); + --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40); + --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30); + --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20); + --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50); + --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40); + --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30); + --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20); + --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30); + --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20); + --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10); + --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40); + --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30); + --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20); + --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30); + --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20); + --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30); + --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10); + --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40); + --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90); + --pf-t--global--dark--text--color--100: var(--pf-t--color--white); + --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30); + --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90); + --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30); + --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); + --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); + --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30); + --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20); + --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default); + --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default); + --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--100); + --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300); + --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--200); + --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300); + --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300); + --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200); + --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100); + --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450); + --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400); + --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450); + --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100); + --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200); + --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200); + --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50); + --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--300); + --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--100); + --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100); + --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); + --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300); + --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200); + --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300); + --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); + --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); + --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); + --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); + --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); + --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); + --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); + --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--300); + --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200); + --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100); + --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200); + --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200); + --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100); + --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200); + --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100); + --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--100); + --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--50); + --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--100); + --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100); + --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100); + --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100); + --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100); + --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100); + --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100); + --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100); + --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200); + --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--300); + --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--200); + --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--300); + --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--250); + --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--200); + --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--250); + --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200); + --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100); + --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200); + --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--300); + --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--200); + --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--300); + --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200); + --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100); + --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200); + --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100); + --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); + --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200); + --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300); + --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200); + --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300); + --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300); + --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100); + --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--200); + --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100); + --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100); + --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100); + --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100); + --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100); + --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200); + --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300); + --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200); + --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300); + --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200); + --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300); + --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100); + --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200); + --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--400); + --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--400); + --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300); + --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100); + --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400); + --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300); + --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--300); + --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300); + --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200); + --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); + --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default); + --pf-t--global--border--color--page--default: var(--pf-t--global--border--color--default); + --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); + --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default); + --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); + --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); + --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); + --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); + --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); + --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); + --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); + --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); + --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default); + --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); + --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); + --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); + --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); + --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); + --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); + --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default); + --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); +} diff --git a/src/patternfly/base/tokens/tokens-highcontrast.scss b/src/patternfly/base/tokens/tokens-highcontrast.scss new file mode 100644 index 0000000000..117fd9415b --- /dev/null +++ b/src/patternfly/base/tokens/tokens-highcontrast.scss @@ -0,0 +1,703 @@ + +// Do not edit directly +// Generated on Mon, 25 Aug 2025 19:17:30 GMT + +@mixin pf-v6-tokens { + --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); + --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); + --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); + --pf-t--global--border--radius--0: 0px; + --pf-t--global--border--radius--100: 4px; + --pf-t--global--border--radius--200: 6px; + --pf-t--global--border--radius--300: 16px; + --pf-t--global--border--radius--400: 24px; + --pf-t--global--border--radius--500: 999px; + --pf-t--global--border--width--100: 1px; + --pf-t--global--border--width--200: 2px; + --pf-t--global--border--width--300: 3px; + --pf-t--global--border--width--400: 4px; + --pf-t--global--border--width--action--plain--default: 0px; + --pf-t--global--box-shadow--X--100: -10px; + --pf-t--global--box-shadow--X--200: -4px; + --pf-t--global--box-shadow--X--300: -1px; + --pf-t--global--box-shadow--X--400: 0px; + --pf-t--global--box-shadow--X--50: -20px; + --pf-t--global--box-shadow--X--500: 1px; + --pf-t--global--box-shadow--X--600: 4px; + --pf-t--global--box-shadow--X--700: 10px; + --pf-t--global--box-shadow--X--800: 20px; + --pf-t--global--box-shadow--Y--100: -10px; + --pf-t--global--box-shadow--Y--200: -4px; + --pf-t--global--box-shadow--Y--300: -1px; + --pf-t--global--box-shadow--Y--400: 0px; + --pf-t--global--box-shadow--Y--50: -20px; + --pf-t--global--box-shadow--Y--500: 1px; + --pf-t--global--box-shadow--Y--600: 4px; + --pf-t--global--box-shadow--Y--700: 10px; + --pf-t--global--box-shadow--Y--800: 20px; + --pf-t--global--box-shadow--blur--100: 4px; + --pf-t--global--box-shadow--blur--200: 9px; + --pf-t--global--box-shadow--blur--300: 20px; + --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500); + --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000); + --pf-t--global--box-shadow--spread--100: 0px; + --pf-t--global--box-shadow--spread--200: -4px; + --pf-t--global--box-shadow--spread--300: -8px; + --pf-t--global--box-shadow--spread--400: -20px; + --pf-t--global--breakpoint--100: 0rem; + --pf-t--global--breakpoint--200: 36rem; + --pf-t--global--breakpoint--250: 40rem; + --pf-t--global--breakpoint--300: 48rem; + --pf-t--global--breakpoint--350: 60rem; + --pf-t--global--breakpoint--400: 62rem; + --pf-t--global--breakpoint--500: 75rem; + --pf-t--global--breakpoint--550: 80rem; + --pf-t--global--breakpoint--600: 90.625rem; + --pf-t--global--color--nonstatus--green--400: #3d7019; + --pf-t--global--color--status--success--150: #3d7019; + --pf-t--global--focus-ring--position--inset: -4; + --pf-t--global--focus-ring--position--offset: 2; + --pf-t--global--focus-ring--width--inset: 3; + --pf-t--global--focus-ring--width--offset: 2; + --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; + --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; + --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace; + --pf-t--global--font--line-height--100: 1.3; + --pf-t--global--font--line-height--200: 1.5; + --pf-t--global--font--size--100: 0.75rem; + --pf-t--global--font--size--200: 0.875rem; + --pf-t--global--font--size--300: 1rem; + --pf-t--global--font--size--400: 1.125rem; + --pf-t--global--font--size--500: 1.25rem; + --pf-t--global--font--size--600: 1.5rem; + --pf-t--global--font--size--700: 1.75rem; + --pf-t--global--font--size--800: 2.25rem; + --pf-t--global--font--weight--100: 400; + --pf-t--global--font--weight--200: 500; + --pf-t--global--font--weight--300: 500; + --pf-t--global--font--weight--400: 700; + --pf-t--global--icon--size--100: 0.75rem; + --pf-t--global--icon--size--200: 0.875rem; + --pf-t--global--icon--size--250: 1rem; + --pf-t--global--icon--size--300: 1.5rem; + --pf-t--global--icon--size--400: 3.5rem; + --pf-t--global--icon--size--500: 6rem; + --pf-t--global--spacer--100: 0.25rem; + --pf-t--global--spacer--200: 0.5rem; + --pf-t--global--spacer--300: 1rem; + --pf-t--global--spacer--400: 1.5rem; + --pf-t--global--spacer--500: 2rem; + --pf-t--global--spacer--600: 3rem; + --pf-t--global--spacer--700: 4rem; + --pf-t--global--spacer--800: 5rem; + --pf-t--global--text-decoration--line--100: none; + --pf-t--global--text-decoration--line--200: underline; + --pf-t--global--text-decoration--style--100: solid; + --pf-t--global--text-decoration--style--200: dashed; + --pf-t--global--z-index--100: 100; + --pf-t--global--z-index--200: 200; + --pf-t--global--z-index--300: 300; + --pf-t--global--z-index--400: 400; + --pf-t--global--z-index--500: 500; + --pf-t--global--z-index--600: 600; + --pf-t--global--background--color--100: var(--pf-t--color--white); + --pf-t--global--background--color--200: var(--pf-t--color--gray--10); + --pf-t--global--background--color--300: var(--pf-t--color--gray--20); + --pf-t--global--background--color--400: var(--pf-t--color--gray--80); + --pf-t--global--background--color--450: var(--pf-t--color--gray--70); + --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600); + --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600); + --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500); + --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30); + --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40); + --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600); + --pf-t--global--border--color--100: var(--pf-t--color--gray--30); + --pf-t--global--border--color--200: var(--pf-t--color--gray--40); + --pf-t--global--border--color--300: var(--pf-t--color--gray--50); + --pf-t--global--border--color--400: var(--pf-t--color--gray--60); + --pf-t--global--border--color--50: var(--pf-t--color--gray--20); + --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400); + --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150); + --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); + --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); + --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); + --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0); + --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200); + --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100); + --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--action--plain--clicked: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--action--plain--hover: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--300); + --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300); + --pf-t--global--border--width--page--default: var(--pf-t--global--border--width--200); + --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); + --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200); + --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50); + --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800); + --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100); + --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700); + --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200); + --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600); + --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400); + --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800); + --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700); + --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50); + --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700); + --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600); + --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100); + --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600); + --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500); + --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400); + --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200); + --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300); + --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200); + --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100); + --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100); + --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200); + --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100); + --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100); + --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100); + --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200); + --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400); + --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300); + --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100); + --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200); + --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600); + --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550); + --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300); + --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250); + --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100); + --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350); + --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400); + --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300); + --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200); + --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500); + --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100); + --pf-t--global--color--brand--100: var(--pf-t--color--blue--40); + --pf-t--global--color--brand--200: var(--pf-t--color--blue--50); + --pf-t--global--color--brand--300: var(--pf-t--color--blue--60); + --pf-t--global--color--brand--400: var(--pf-t--color--blue--70); + --pf-t--global--color--brand--500: var(--pf-t--color--blue--80); + --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30); + --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40); + --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60); + --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30); + --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40); + --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70); + --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80); + --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20); + --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30); + --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40); + --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60); + --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70); + --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20); + --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30); + --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40); + --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60); + --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10); + --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70); + --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20); + --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30); + --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40); + --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70); + --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20); + --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30); + --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40); + --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60); + --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70); + --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20); + --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30); + --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40); + --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60); + --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70); + --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20); + --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30); + --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40); + --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50); + --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60); + --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20); + --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30); + --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40); + --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60); + --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70); + --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20); + --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30); + --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40); + --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70); + --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80); + --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20); + --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30); + --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40); + --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70); + --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80); + --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60); + --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50); + --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60); + --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50); + --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80); + --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40); + --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70); + --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40); + --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60); + --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30); + --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60); + --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60); + --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70); + --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80); + --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); + --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70); + --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80); + --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50); + --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60); + --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70); + --pf-t--global--color--status--success--100: var(--pf-t--color--green--60); + --pf-t--global--color--status--success--200: var(--pf-t--color--green--70); + --pf-t--global--color--status--success--300: var(--pf-t--color--green--80); + --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30); + --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40); + --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50); + --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60); + --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70); + --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80); + --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50); + --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60); + --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); + --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); + --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300); + --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200); + --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100); + --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600); + --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700); + --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800); + --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400); + --pf-t--global--font--size--md: var(--pf-t--global--font--size--300); + --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200); + --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500); + --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100); + --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200); + --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100); + --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400); + --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300); + --pf-t--global--icon--color--100: var(--pf-t--color--gray--90); + --pf-t--global--icon--color--150: var(--pf-t--color--gray--60); + --pf-t--global--icon--color--200: var(--pf-t--color--gray--50); + --pf-t--global--icon--color--300: var(--pf-t--color--white); + --pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70); + --pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60); + --pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70); + --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150); + --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400); + --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500); + --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250); + --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200); + --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100); + --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300); + --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600); + --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700); + --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800); + --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400); + --pf-t--global--spacer--md: var(--pf-t--global--spacer--300); + --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200); + --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500); + --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); + --pf-t--global--text--color--100: var(--pf-t--color--gray--95); + --pf-t--global--text--color--200: var(--pf-t--color--gray--60); + --pf-t--global--text--color--250: var(--pf-t--color--gray--70); + --pf-t--global--text--color--300: var(--pf-t--color--white); + --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40); + --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70); + --pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80); + --pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70); + --pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80); + --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50); + --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60); + --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70); + --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50); + --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60); + --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200); + --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200); + --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100); + --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100); + --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600); + --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400); + --pf-t--global--z-index--md: var(--pf-t--global--z-index--300); + --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200); + --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500); + --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100); + --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100); + --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200); + --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100); + --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450); + --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400); + --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450); + --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100); + --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300); + --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200); + --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300); + --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400); + --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50); + --pf-t--global--border--color--default: var(--pf-t--global--border--color--400); + --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200); + --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300); + --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500); + --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400); + --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500); + --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500); + --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400); + --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500); + --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500); + --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500); + --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500); + --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400); + --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500); + --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500); + --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400); + --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500); + --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500); + --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400); + --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500); + --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500); + --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400); + --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500); + --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500); + --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400); + --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500); + --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500); + --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400); + --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500); + --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--400); + --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200); + --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200); + --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); + --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500); + --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); + --pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong); + --pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular); + --pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong); + --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400); + --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300); + --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400); + --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400); + --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300); + --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400); + --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100); + --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200); + --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100); + --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50); + --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100); + --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100); + --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200); + --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100); + --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200); + --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100); + --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200); + --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100); + --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200); + --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100); + --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200); + --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100); + --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200); + --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200); + --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100); + --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200); + --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300); + --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200); + --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300); + --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300); + --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200); + --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300); + --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300); + --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200); + --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300); + --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300); + --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200); + --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300); + --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); + --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500); + --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); + --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--200); + --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); + --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md); + --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs); + --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl); + --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl); + --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg); + --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md); + --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md); + --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md); + --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200); + --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300); + --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300); + --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100); + --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100); + --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200); + --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200); + --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200); + --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200); + --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200); + --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200); + --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100); + --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); + --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200); + --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200); + --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); + --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500); + --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); + --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150); + --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl); + --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl); + --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl); + --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg); + --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md); + --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm); + --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl); + --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs); + --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg); + --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl); + --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg); + --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl); + --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg); + --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs); + --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm); + --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md); + --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg); + --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200); + --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300); + --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200); + --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250); + --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350); + --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300); + --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100); + --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); + --pf-t--global--text--color--required: var(--pf-t--global--text--color--500); + --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200); + --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200); + --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200); + --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600); + --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500); + --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600); + --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250); + --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs); + --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular); + --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default); + --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default); + --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); + --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); + --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default); + --pf-t--global--border--color--page--default: var(--pf-t--global--border--color--default); + --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); + --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); + --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); + --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); + --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); + --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); + --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); + --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular); + --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); + --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default); + --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg); + --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm); + --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1); + --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2); + --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3); + --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4); + --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5); + --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6); + --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular); + --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); + --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); + --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); + --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); + --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); + --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default); + --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); + --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); + --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); + --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); + --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); + --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); + --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); + --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); +} diff --git a/src/patternfly/base/tokens/tokens-local.scss b/src/patternfly/base/tokens/tokens-local.scss index 5a7d1a577e..bf442e6828 100644 --- a/src/patternfly/base/tokens/tokens-local.scss +++ b/src/patternfly/base/tokens/tokens-local.scss @@ -123,4 +123,43 @@ // stylelint-disable custom-property-pattern --pf-t--temp--dev--tbd: #BC11E0; + + // High contrast custom tokens - placeholders until they're in figma + --pf-t--global--high-contrast--border--width--action--clicked: 0; + --pf-t--global--high-contrast--border--width--action--default: 0; + --pf-t--global--high-contrast--border--width--action--hover: 0; + --pf-t--global--high-contrast--border--width--box--clicked: 0; + --pf-t--global--high-contrast--border--width--box--default: 0; + --pf-t--global--high-contrast--border--width--box--hover: 0; + --pf-t--global--high-contrast--border--width--box--status--default: 0; + --pf-t--global--high-contrast--border--width--box--status--read: 0; + --pf-t--global--high-contrast--border--width--control--clicked: 0; + --pf-t--global--high-contrast--border--width--control--default: 0; + --pf-t--global--high-contrast--border--width--control--hover: 0; + --pf-t--global--high-contrast--border--width--divider--clicked: 0; + --pf-t--global--high-contrast--border--width--divider--default: 0; + --pf-t--global--high-contrast--border--width--divider--hover: 0; + --pf-t--global--high-contrast--border--width--extra-strong: 0; + --pf-t--global--high-contrast--border--width--regular: 0; + --pf-t--global--high-contrast--border--width--strong: 0; + + @media (prefers-contrast: more) { + --pf-t--global--high-contrast--border--width--action--clicked: var(--pf-t--global--border--width--action--clicked); + --pf-t--global--high-contrast--border--width--action--default: var(--pf-t--global--border--width--action--default); + --pf-t--global--high-contrast--border--width--action--hover: var(--pf-t--global--border--width--action--hover); + --pf-t--global--high-contrast--border--width--box--clicked: var(--pf-t--global--border--width--box--clicked); + --pf-t--global--high-contrast--border--width--box--default: var(--pf-t--global--border--width--box--default); + --pf-t--global--high-contrast--border--width--box--hover: var(--pf-t--global--border--width--box--hover); + --pf-t--global--high-contrast--border--width--box--status--default: var(--pf-t--global--border--width--box--status--default); + --pf-t--global--high-contrast--border--width--box--status--read: var(--pf-t--global--border--width--box--status--read); + --pf-t--global--high-contrast--border--width--control--clicked: var(--pf-t--global--border--width--control--clicked); + --pf-t--global--high-contrast--border--width--control--default: var(--pf-t--global--border--width--control--default); + --pf-t--global--high-contrast--border--width--control--hover: var(--pf-t--global--border--width--control--hover); + --pf-t--global--high-contrast--border--width--divider--clicked: var(--pf-t--global--border--width--divider--clicked); + --pf-t--global--high-contrast--border--width--divider--default: var(--pf-t--global--border--width--divider--default); + --pf-t--global--high-contrast--border--width--divider--hover: var(--pf-t--global--border--width--divider--hover); + --pf-t--global--high-contrast--border--width--extra-strong: var(--pf-t--global--border--width--extra-strong); + --pf-t--global--high-contrast--border--width--regular: var(--pf-t--global--border--width--regular); + --pf-t--global--high-contrast--border--width--strong: var(--pf-t--global--border--width--strong); + } } diff --git a/src/patternfly/base/tokens/tokens-palette.scss b/src/patternfly/base/tokens/tokens-palette.scss index 3a3a519b8a..76bdae9488 100644 --- a/src/patternfly/base/tokens/tokens-palette.scss +++ b/src/patternfly/base/tokens/tokens-palette.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Mon, 23 Sep 2024 22:48:17 GMT +// Generated on Mon, 25 Aug 2025 19:17:30 GMT @mixin pf-v6-tokens { --pf-t--color--black: #000000; @@ -11,6 +11,7 @@ --pf-t--color--blue--50: #0066cc; --pf-t--color--blue--60: #004d99; --pf-t--color--blue--70: #003366; + --pf-t--color--blue--80: #032142; --pf-t--color--gray--10: #f2f2f2; --pf-t--color--gray--20: #e0e0e0; --pf-t--color--gray--30: #c7c7c7; @@ -28,6 +29,7 @@ --pf-t--color--green--50: #63993d; --pf-t--color--green--60: #3d7317; --pf-t--color--green--70: #204d00; + --pf-t--color--green--80: #183301; --pf-t--color--orange--10: #ffe8cc; --pf-t--color--orange--20: #fccb8f; --pf-t--color--orange--30: #f8ae54; @@ -35,6 +37,7 @@ --pf-t--color--orange--50: #ca6c0f; --pf-t--color--orange--60: #9e4a06; --pf-t--color--orange--70: #732e00; + --pf-t--color--orange--80: #4d1f00; --pf-t--color--purple--10: #ece6ff; --pf-t--color--purple--20: #d0c5f4; --pf-t--color--purple--30: #b6a6e9; @@ -42,6 +45,7 @@ --pf-t--color--purple--50: #5e40be; --pf-t--color--purple--60: #3d2785; --pf-t--color--purple--70: #21134d; + --pf-t--color--purple--80: #1b0d33; --pf-t--color--red--10: #fce3e3; --pf-t--color--red--20: #fbc5c5; --pf-t--color--red--30: #f9a8a8; @@ -49,6 +53,7 @@ --pf-t--color--red--50: #ee0000; --pf-t--color--red--60: #a60000; --pf-t--color--red--70: #5f0000; + --pf-t--color--red--80: #3f0000; --pf-t--color--red-orange--10: #ffe3d9; --pf-t--color--red-orange--20: #fbbea8; --pf-t--color--red-orange--30: #f89b78; @@ -56,6 +61,7 @@ --pf-t--color--red-orange--50: #f0561d; --pf-t--color--red-orange--60: #b1380b; --pf-t--color--red-orange--70: #731f00; + --pf-t--color--red-orange--80: #4c1405; --pf-t--color--teal--10: #daf2f2; --pf-t--color--teal--20: #b9e5e5; --pf-t--color--teal--30: #9ad8d8; @@ -63,6 +69,7 @@ --pf-t--color--teal--50: #37a3a3; --pf-t--color--teal--60: #147878; --pf-t--color--teal--70: #004d4d; + --pf-t--color--teal--80: #003333; --pf-t--color--white: #ffffff; --pf-t--color--yellow--10: #fff4cc; --pf-t--color--yellow--20: #ffe072; @@ -71,4 +78,5 @@ --pf-t--color--yellow--50: #b98412; --pf-t--color--yellow--60: #96640f; --pf-t--color--yellow--70: #73480b; + --pf-t--color--yellow--80: #54330b; } diff --git a/src/patternfly/components/Accordion/accordion.scss b/src/patternfly/components/Accordion/accordion.scss index 6f100722db..8385655e75 100644 --- a/src/patternfly/components/Accordion/accordion.scss +++ b/src/patternfly/components/Accordion/accordion.scss @@ -20,6 +20,9 @@ --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small); --#{$accordion}__toggle--ZIndex: var(--pf-t--global--z-index--xs); + --#{$accordion}__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$accordion}__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$accordion}__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); // Accordion toggle toggle-start modifier // This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token @@ -99,6 +102,15 @@ --#{$accordion}--m-bordered--RowGap: 0; --#{$accordion}__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); --#{$accordion}__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default); + + // accordion item border for high contrast + --#{$accordion}__item--BorderWidth: 0; + --#{$accordion}__item--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$accordion}__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular); + + // expandable content border for high contrast + --#{$accordion}__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular); + --#{$accordion}__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast); } .#{$accordion} { @@ -129,7 +141,8 @@ --#{$accordion}--RowGap: var(--#{$accordion}--m-bordered--RowGap); --#{$accordion}__item--BorderRadius: 0; --#{$accordion}__toggle--BorderRadius: 0; - + --#{$accordion}__item--BorderWidth: 0; + .#{$accordion}__item { border-block-end: var(--#{$accordion}__item--m-bordered--BorderBlockEndWidth) solid var(--#{$accordion}__item--m-bordered--BorderBlockEndColor); } @@ -145,6 +158,7 @@ pointer-events: none; content: ""; background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor); + border: var(--#{$accordion}__item--BorderWidth) solid var(--#{$accordion}__item--BorderColor); border-radius: var(--#{$accordion}__item--BorderRadius); opacity: var(--#{$accordion}__item--before--Opacity); transition-timing-function: var(--#{$accordion}__item--before--TransitionTimingFunction); @@ -159,6 +173,7 @@ --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade); --#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity); --#{$accordion}__item--before--TranslateY: var(--#{$accordion}__item--m-expanded--before--TranslateY); + --#{$accordion}__item--BorderWidth: var(--#{$accordion}__item--m-expanded--BorderWidth); --#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--expand--slide); --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade); --#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity); @@ -188,8 +203,18 @@ border: 0; border-radius: var(--#{$accordion}__toggle--BorderRadius); + &::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--#{$accordion}__toggle--BorderWidth) solid var(--#{$accordion}__toggle--BorderColor); + border-radius: inherit; + } + &:is(:hover, :focus) { --#{$accordion}__toggle--BackgroundColor: var(--#{$accordion}__toggle--hover--BackgroundColor); + --#{$accordion}__toggle--BorderWidth: var(--#{$accordion}__toggle--hover--BorderWidth); } } @@ -235,6 +260,7 @@ max-height: 99999px; margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd); visibility: revert; + border: var(--#{$accordion}__expandable-content--BorderWidth) solid var(--#{$accordion}__expandable-content--BorderColor); transition-delay: 0s; &.pf-m-fixed { diff --git a/src/patternfly/components/Alert/alert-group.scss b/src/patternfly/components/Alert/alert-group.scss index 1a63060e3b..6e67d7df72 100644 --- a/src/patternfly/components/Alert/alert-group.scss +++ b/src/patternfly/components/Alert/alert-group.scss @@ -90,7 +90,8 @@ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: initial; // Overflow button - --#{$alert-group}__overflow-button--BorderWidth: 0; + --#{$alert-group}__overflow-button--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$alert-group}__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium); --#{$alert-group}__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md); --#{$alert-group}__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md); @@ -99,6 +100,7 @@ --#{$alert-group}__overflow-button--Color: var(--pf-t--global--text--color--link--default); --#{$alert-group}__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg); --#{$alert-group}__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default); + --#{$alert-group}__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --#{$alert-group}__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover); --#{$alert-group}__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover); --#{$alert-group}__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom); @@ -134,9 +136,23 @@ padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingInlineEnd); color: var(--#{$alert-group}__overflow-button--Color); background-color: var(--#{$alert-group}__overflow-button--BackgroundColor); - border-width: var(--#{$alert-group}__overflow-button--BorderWidth); + border: 0; border-radius: var(--#{$alert-group}__overflow-button--BorderRadius); box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow); + + &::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--#{$alert-group}__overflow-button--BorderWidth) solid var(--#{$alert-group}__overflow-button--BorderColor); + border-radius: inherit; + } + + &:hover, + &:focus { + --#{$alert-group}__overflow-button--BorderWidth: var(--#{$alert-group}__overflow-button--hover--BorderWidth); + } } .#{$alert-group}__item { diff --git a/src/patternfly/components/Badge/badge.scss b/src/patternfly/components/Badge/badge.scss index f11db21789..7abac32bde 100644 --- a/src/patternfly/components/Badge/badge.scss +++ b/src/patternfly/components/Badge/badge.scss @@ -19,6 +19,7 @@ // Modifiers --#{$badge}--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); --#{$badge}--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); + --#{$badge}--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$badge}--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); --#{$badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default); --#{$badge}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default); @@ -52,6 +53,7 @@ } &.pf-m-read { + --#{$badge}--BorderColor: var(--#{$badge}--m-read--BorderColor); --#{$badge}--Color: var(--#{$badge}--m-read--Color); --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor); --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-read__toggle-icon--Color); diff --git a/src/patternfly/components/Banner/banner.scss b/src/patternfly/components/Banner/banner.scss index 687f57e976..1194d7d221 100644 --- a/src/patternfly/components/Banner/banner.scss +++ b/src/patternfly/components/Banner/banner.scss @@ -10,6 +10,8 @@ --#{$banner}--FontSize: var(--pf-t--global--font--size--body--default); --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default); --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); + --#{$banner}--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$banner}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular); @media (min-width: $pf-v6-global--breakpoint--md) { --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd); @@ -67,6 +69,8 @@ color: var(--#{$banner}--Color); white-space: nowrap; background-color: var(--#{$banner}--BackgroundColor); + border-block-start: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor); + border-block-end: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor); &.pf-m-danger { --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor); diff --git a/src/patternfly/components/Button/button.scss b/src/patternfly/components/Button/button.scss index c7648a8063..77d6cbe010 100644 --- a/src/patternfly/components/Button/button.scss +++ b/src/patternfly/components/Button/button.scss @@ -27,6 +27,7 @@ --#{$button}--TransitionProperty: color, background, border-width, border-color; --#{$button}--ScaleX: 1; --#{$button}--ScaleY: 1; + --#{$button}--border--offset: 0; // Hover --#{$button}--hover--BackgroundColor: transparent; @@ -102,6 +103,12 @@ --#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked); --#{$button}--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --#{$button}--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); + --#{$button}--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$button}--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); + --#{$button}--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$button}--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$button}--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$button}--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); // Link danger --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default); @@ -158,6 +165,12 @@ --#{$button}--m-plain--disabled--BackgroundColor: transparent; --#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact); --#{$button}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact); + --#{$button}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$button}--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); + --#{$button}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$button}--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$button}--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$button}--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); // Plain no padding --#{$button}--m-plain--m-no-padding--MinWidth: auto; @@ -172,7 +185,7 @@ --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular); --#{$button}--m-plain--m-no-padding--hover--BackgroundColor: transparent; --#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent; - --#{$button}__progress--Color: var(--#{$button}__icon--Color); + --#{$button}--m-plain--m-no-padding--border--offset: calc(#{pf-size-prem(2px)} * -1); // Control --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small); @@ -337,7 +350,7 @@ --#{$button}--m-settings--hover__icon--Rotate: 60deg; // Count - --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default); + --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt); // Block --#{$button}--m-block--Display: flex; @@ -399,7 +412,7 @@ &::after { position: absolute; - inset: 0; + inset: var(--#{$button}--border--offset); pointer-events: none; content: ""; border: var(--#{$button}--BorderWidth) solid; @@ -473,6 +486,12 @@ --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--PaddingInlineEnd); --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--PaddingInlineStart); --#{$button}--Color: var(--#{$button}--m-link--Color); + --#{$button}--BorderWidth: var(--#{$button}--m-link--BorderWidth); + --#{$button}--hover--BorderColor: var(--#{$button}--m-link--hover--BorderColor); + --#{$button}--hover--BorderWidth: var(--#{$button}--m-link--hover--BorderWidth); + --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-link--m-clicked--BorderColor); + --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-link--m-clicked--BorderWidth); + --#{$button}--BorderColor: var(--#{$button}--m-link--BorderColor); --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius); --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor); --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color); @@ -484,7 +503,7 @@ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color); --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-link--m-small--PaddingInlineEnd); --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-link--m-small--PaddingInlineStart); - + &.pf-m-inline { @at-root span#{&} { --#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display); @@ -518,6 +537,9 @@ --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor); --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color); --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color); + --#{$button}--BorderWidth: 0; + --#{$button}--hover--BorderWidth: 0; + --#{$button}--m-clicked--BorderWidth: 0; text-align: start; white-space: normal; @@ -639,6 +661,12 @@ // Icon buttons &.pf-m-plain { + --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth); + --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor); + --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth); + --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor); + --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth); + --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor); --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius); --#{$button}--Color: var(--#{$button}--m-plain--Color); --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color); @@ -667,7 +695,8 @@ --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart); --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd); --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart); - + --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset); + min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth); background: var(--#{$button}--BackgroundColor); // override the ripple background } @@ -765,6 +794,7 @@ text-decoration-line: var(--#{$button}--hover--TextDecorationLine); text-decoration-style: var(--#{$button}--hover--TextDecorationStyle); text-decoration-color: var(--#{$button}--hover--TextDecorationColor); + outline-offset: var(--pf-t--global--focus-ring--position--offset); } &:active, diff --git a/src/patternfly/components/Card/card.scss b/src/patternfly/components/Card/card.scss index 89632839b0..6a3387ebae 100644 --- a/src/patternfly/components/Card/card.scss +++ b/src/patternfly/components/Card/card.scss @@ -51,6 +51,7 @@ // Hover on selectable card --#{$card}--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover); + --#{$card}--m-selectable--hover--BorderWidth: var(--pf-t--global--border--width--box--hover); // Focus on selectable card (label) --#{$card}--m-selectable--focus--BorderColor: var(--pf-t--global--border--color--hover); @@ -96,7 +97,7 @@ // Secondary --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default); - --#{$card}--m-secondary--BorderColor: transparent; + --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast); // Full height --#{$card}--m-full-height--Height: 100%; @@ -312,7 +313,6 @@ } .#{$card}__title-text { - overflow: auto; font-family: var(--#{$card}__title-text--FontFamily); font-size: var(--#{$card}__title-text--FontSize); font-weight: var(--#{$card}__title-text--FontWeight); @@ -357,12 +357,13 @@ z-index: -1; content: ''; background-color: var(--#{$card}--BackgroundColor, transparent); - border: var(--#{$card}--m-selectable--BorderWidth) solid var(--#{$card}--BorderColor, transparent); + border: var(--#{$card}--BorderWidth) solid var(--#{$card}--BorderColor, transparent); border-radius: var(--#{$card}--BorderRadius); } &:hover { --#{$card}--BorderColor: var(--#{$card}--m-selectable--hover--BorderColor); + --#{$card}--BorderWidth: var(--#{$card}--m-selectable--hover--BorderWidth); } } @@ -370,7 +371,7 @@ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$radio}__label, .#{$check}__label), .#{$card}.pf-m-selected { --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--BorderColor); - --#{$card}--m-selectable--BorderWidth: var(--#{$card}--m-selectable--m-selected--BorderWidth); // this line used to be just BorderWidth, not m-selectable + --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-selected--BorderWidth); } // Focus on the card (focus on label but not checked) diff --git a/src/patternfly/components/CodeBlock/code-block.scss b/src/patternfly/components/CodeBlock/code-block.scss index 381bd3f1d9..404d24c082 100644 --- a/src/patternfly/components/CodeBlock/code-block.scss +++ b/src/patternfly/components/CodeBlock/code-block.scss @@ -1,6 +1,8 @@ @use '../../sass-utilities' as *; @include pf-root($code-block) { + --#{$code-block}--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$code-block}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular); --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium); --#{$code-block}__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default); @@ -19,6 +21,7 @@ .#{$code-block} { background-color: var(--#{$code-block}--BackgroundColor); + border: var(--#{$code-block}--BorderWidth) solid var(--#{$code-block}--BorderColor); border-radius: var(--#{$code-block}--BorderRadius); } diff --git a/src/patternfly/components/CodeBlock/examples/CodeBlock.md b/src/patternfly/components/CodeBlock/examples/CodeBlock.md index b44c58996e..e803fbc867 100644 --- a/src/patternfly/components/CodeBlock/examples/CodeBlock.md +++ b/src/patternfly/components/CodeBlock/examples/CodeBlock.md @@ -11,10 +11,10 @@ cssPrefix: pf-v6-c-code-block {{#> code-block-header}} {{#> code-block-actions}} {{#> code-block-actions-item}} - {{> button button--IsPlain=true button--attribute='aria-label="Copy to clipboard"' button--IsIcon=true button--icon="copy"}} + {{> button button--IsPlain=true button--attribute='aria-label="Copy to clipboard basic example code content"' button--IsIcon=true button--icon="copy"}} {{/code-block-actions-item}} {{#> code-block-actions-item}} - {{> button button--IsPlain=true button--attribute='aria-label="Run in Web Terminal"' button--IsIcon=true button--icon="play"}} + {{> button button--IsPlain=true button--attribute='aria-label="Run basic example code in Web Terminal"' button--IsIcon=true button--icon="play"}} {{/code-block-actions-item}} {{/code-block-actions}} {{/code-block-header}} @@ -36,10 +36,10 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs{{~/ {{#> code-block-header}} {{#> code-block-actions}} {{#> code-block-actions-item}} - {{> button button--IsPlain=true button--attribute='aria-label="Copy to clipboard"' button--IsIcon=true button--icon="copy"}} + {{> button button--IsPlain=true button--attribute='aria-label="Copy to clipboard expandable example code content"' button--IsIcon=true button--icon="copy"}} {{/code-block-actions-item}} {{#> code-block-actions-item}} - {{> button button--IsPlain=true button--attribute='aria-label="Run in Web Terminal"' button--IsIcon=true button--icon="play"}} + {{> button button--IsPlain=true button--attribute='aria-label="Run expandable example code in Web Terminal"' button--IsIcon=true button--icon="play"}} {{/code-block-actions-item}} {{/code-block-actions}} {{/code-block-header}} @@ -77,10 +77,10 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs {{#> code-block-header}} {{#> code-block-actions}} {{#> code-block-actions-item}} - {{> button button--IsPlain=true button--attribute='aria-label="Copy to clipboard"' button--IsIcon=true button--icon="copy"}} + {{> button button--IsPlain=true button--attribute='aria-label="Copy to clipboard expandable expanded example code content"' button--IsIcon=true button--icon="copy"}} {{/code-block-actions-item}} {{#> code-block-actions-item}} - {{> button button--IsPlain=true button--attribute='aria-label="Run in Web Terminal"' button--IsIcon=true button--icon="play"}} + {{> button button--IsPlain=true button--attribute='aria-label="Run expandable expanded example code in Web Terminal"' button--IsIcon=true button--icon="play"}} {{/code-block-actions-item}} {{/code-block-actions}} {{/code-block-header}} diff --git a/src/patternfly/components/CodeEditor/code-editor-template-no-actions.hbs b/src/patternfly/components/CodeEditor/code-editor-template-no-actions.hbs index e5d6b7b3f1..dacd00fe09 100644 --- a/src/patternfly/components/CodeEditor/code-editor-template-no-actions.hbs +++ b/src/patternfly/components/CodeEditor/code-editor-template-no-actions.hbs @@ -16,7 +16,7 @@ {{#> empty-state-header}} {{> empty-state-icon empty-state-icon--type="code"}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} Start editing {{/empty-state-title-text}} {{/empty-state-title}} diff --git a/src/patternfly/components/CodeEditor/code-editor.scss b/src/patternfly/components/CodeEditor/code-editor.scss index 33b33e9e78..40419e0ff3 100644 --- a/src/patternfly/components/CodeEditor/code-editor.scss +++ b/src/patternfly/components/CodeEditor/code-editor.scss @@ -6,8 +6,12 @@ --#{$code-editor}__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain); // header - --#{$code-editor}__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default); - --#{$code-editor}__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default); + --#{$code-editor}__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default); // TODO - remove in breaking change + --#{$code-editor}__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default); // TODO - remove in breaking change + --#{$code-editor}__header--BorderWidth: var(--pf-t--global--border--width--box--default); + --#{$code-editor}__header--BorderColor: var(--pf-t--global--border--color--default); + --#{$code-editor}__header--BorderStartStartRadius: var(--pf-t--global--border--radius--medium); + --#{$code-editor}__header--BorderStartEndRadius: var(--pf-t--global--border--radius--medium); // header content --#{$code-editor}__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default); @@ -95,12 +99,13 @@ &::before { position: absolute; - inset-block-end: 0; - inset-inline-start: 0; - inset-inline-end: 0; + inset: 0; pointer-events: none; content: ""; - border-block-end: var(--#{$code-editor}__header--before--BorderBlockEndWidth) solid var(--#{$code-editor}__header--before--BorderBlockEndColor); + border: var(--#{$code-editor}__header--BorderWidth) solid var(--#{$code-editor}__header--BorderColor); + border-block-end: var(--#{$code-editor}__header--before--BorderBlockEndWidth) solid var(--#{$code-editor}__header--before--BorderBlockEndColor); // TODO - remove in breaking change + border-start-start-radius: var(--#{$code-editor}__header--BorderStartStartRadius); + border-start-end-radius: var(--#{$code-editor}__header--BorderStartEndRadius); } &.pf-m-plain { diff --git a/src/patternfly/components/CodeEditor/examples/CodeEditor.md b/src/patternfly/components/CodeEditor/examples/CodeEditor.md index 862c0bd556..38f5a510ac 100644 --- a/src/patternfly/components/CodeEditor/examples/CodeEditor.md +++ b/src/patternfly/components/CodeEditor/examples/CodeEditor.md @@ -143,7 +143,7 @@ This is an extra container used in React to prevent event propagation if upload {{#> empty-state-header}} {{> empty-state-icon empty-state-icon--type="code"}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} Start editing {{/empty-state-title-text}} {{/empty-state-title}} diff --git a/src/patternfly/components/DescriptionList/description-list.hbs b/src/patternfly/components/DescriptionList/description-list.hbs index 7a5ae3e2be..c02e5ab1fb 100644 --- a/src/patternfly/components/DescriptionList/description-list.hbs +++ b/src/patternfly/components/DescriptionList/description-list.hbs @@ -1,4 +1,7 @@