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 @@
diff --git a/src/patternfly/components/DescriptionList/examples/DescriptionList.md b/src/patternfly/components/DescriptionList/examples/DescriptionList.md index c5f1afc4ab..ccb3e44e36 100644 --- a/src/patternfly/components/DescriptionList/examples/DescriptionList.md +++ b/src/patternfly/components/DescriptionList/examples/DescriptionList.md @@ -8,52 +8,52 @@ cssPrefix: pf-v6-c-description-list ### Default ```hbs -{{> description-list__example description-list--title="Default DL"}} +{{> description-list__example description-list--aria-label="Default example"}} ``` ### Term help text ```hbs -{{> description-list__example description-list--title="Term help text" description-list-term--IsHelp="true"}} +{{> description-list__example description-list--aria-label="Term help text example" description-list-term--IsHelp="true"}} ``` ### Default, two column ```hbs -{{> description-list__example description-list--title="Default 2 column DL" description-list--modifier="pf-m-2-col" description-list--IsLongDescription="true"}} +{{> description-list__example description-list--aria-label="Default, two column example" description-list--modifier="pf-m-2-col" description-list--IsLongDescription="true"}} ``` ### Default, three column on lg breakpoint ```hbs -{{> description-list__example description-list--title="Default 3 column DL" description-list--modifier="pf-m-3-col-on-lg"}} +{{> description-list__example description-list--aria-label="Default, three column on lg breakpoint example" description-list--modifier="pf-m-3-col-on-lg"}} ``` ### Horizontal ```hbs -{{> description-list__example description-list--title="Horizontal DL" description-list--modifier="pf-m-horizontal"}} +{{> description-list__example description-list--aria-label="Horizontal example" description-list--modifier="pf-m-horizontal"}} ``` ### Horizontal, two column ```hbs -{{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-2-col"}} +{{> description-list__example description-list--aria-label="Horizontal, two column example" description-list--modifier="pf-m-horizontal pf-m-2-col"}} ``` ### Horizontal, three column on lg breakpoint ```hbs -{{> description-list__example description-list--title="Horizontal 3 column DL" description-list--modifier="pf-m-horizontal pf-m-3-col-on-lg"}} +{{> description-list__example description-list--aria-label="Horizontal, three column on lg breakpoint example" description-list--modifier="pf-m-horizontal pf-m-3-col-on-lg"}} ``` ### Compact ```hbs -{{> description-list__example description-list--title="Compact DL" description-list--modifier="pf-m-compact"}} +{{> description-list__example description-list--aria-label="Compact example" description-list--modifier="pf-m-compact"}} ``` ### Compact horizontal ```hbs -{{> description-list__example description-list--title="Compact DL" description-list--modifier="pf-m-compact pf-m-horizontal pf-m-2-col"}} +{{> description-list__example description-list--aria-label="Compact horizontal example" description-list--modifier="pf-m-compact pf-m-horizontal pf-m-2-col"}} ``` ### Fluid horizontal ```hbs -{{> description-list__example description-list--title="Fluid DL" description-list--modifier="pf-m-horizontal pf-m-fluid pf-m-2-col"}} +{{> description-list__example description-list--aria-label="Fluid horizontal example" description-list--modifier="pf-m-horizontal pf-m-fluid pf-m-2-col"}} ``` ### Column fill @@ -61,65 +61,65 @@ cssPrefix: pf-v6-c-description-list Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. **Note:** using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row. ```hbs -{{> description-list__example description-list--title="Column fill" description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg" description-list--IsLongDescription="true"}} +{{> description-list__example description-list--aria-label="Column fill example" description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg" description-list--IsLongDescription="true"}} ``` ## Auto fit ### Auto-fit basic ```hbs -{{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}} +{{> description-list__example description-list--aria-label="Auto-fit basic example" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}} ``` ### Auto-fit, min width modified, grid template columns ```hbs -{{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"'}} +{{> description-list__example description-list--aria-label="Auto-fit, min width modified, grid template columns example" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"' description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}} ``` ### Auto-fit, min width modified, responsive grid template columns ```hbs -{{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"'}} +{{> description-list__example description-list--aria-label="Auto-fit, min width modified, responsive grid template columns example" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"' description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}} ``` ## Responsive column definitions ### Default, responsive columns ```hbs -{{> description-list__example description-list--title="Default responsive DL" description-list--modifier="pf-m-2-col-on-lg pf-m-3-col-on-xl"}} +{{> description-list__example description-list--aria-label="Default, responsive columns example" description-list--modifier="pf-m-2-col-on-lg pf-m-3-col-on-xl"}} ``` ### Horizontal, responsive columns ```hbs -{{> description-list__example description-list--title="Horizontal responsive DL columns" description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"}} +{{> description-list__example description-list--aria-label="Horizontal, responsive columns example" description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"}} ``` ### Responsive, horizontal, vertical group layout ```hbs -{{> description-list__example description-list--title="Horizontal responsive DL groups" description-list--modifier="pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"}} +{{> description-list__example description-list--aria-label="Responsive, horizontal, vertical group layout example" description-list--modifier="pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"}} ``` ## Auto-column-width ### Default, auto columns width ```hbs -{{> description-list__example description-list--title="Auto column width DL" description-list--modifier="pf-m-auto-column-widths pf-m-3-col"}} +{{> description-list__example description-list--aria-label="Default, auto columns width example" description-list--modifier="pf-m-auto-column-widths pf-m-3-col"}} ``` ### Horizontal, auto column width ```hbs -{{> description-list__example description-list--title="Horizontal ato-fit DL" description-list--modifier="pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"}} +{{> description-list__example description-list--aria-label="Horizontal, auto column width example" description-list--modifier="pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"}} ``` ## Inline grid ### Default, inline grid ```hbs -{{> description-list__example description-list--title="Default inline grid" description-list--modifier="pf-m-3-col pf-m-inline-grid"}} +{{> description-list__example description-list--aria-label="Default, inline grid example" description-list--modifier="pf-m-3-col pf-m-inline-grid"}} ``` ### Display variant ```hbs -{{> description-list__example description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg" description-list--title="Card DL"}} +{{> description-list__example description-list--aria-label="Display variant example" description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg"}} ``` ## Card variants @@ -128,41 +128,42 @@ Cards can be used as description list group wrappers. Using cards in this way ap ### Description list group wrapper as card ```hbs -{{> description-list__example description-list--modifier="pf-m-2-col-on-lg" description-list-group--IsCard="true" description-list--title="Card DL"}} +{{> description-list__example description-list--aria-label="Description list group wrapper as card example" description-list--modifier="pf-m-2-col-on-lg" description-list-group--IsCard="true"}} ``` ### Display lg and card variant ```hbs -{{> description-list__example description-list-group--IsCard="true" description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg" description-list--title="Card DL"}} +{{> description-list__example description-list--aria-label="Display lg and card variant example" description-list-group--IsCard="true" description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg"}} ``` ### Display 2xl and card variant ```hbs -{{> description-list__example description-list-group--IsCard="true" description-list--modifier="pf-m-display-2xl pf-m-2-col-on-lg" description-list--title="Card DL"}} +{{> description-list__example description-list--aria-label="Display 2xl and card variant example" description-list-group--IsCard="true" description-list--modifier="pf-m-display-2xl pf-m-2-col-on-lg"}} ``` ### Display and card variant, three column on lg breakpoint ```hbs -{{> description-list__example description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-3-col-on-lg pf-m-display-lg" description-list--title="Card DL"}} +{{> description-list__example description-list--aria-label="Display and card variant, three column on lg breakpoint example" description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-3-col-on-lg pf-m-display-lg"}} ``` ### Display and card variant, horizontal, modified term width ```hbs -{{> description-list__example description-list--attribute='style="--pf-v6-c-description-list__term--width: 10ch;"' description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal" description-list--title="Card DL"}} +{{> description-list__example description-list--aria-label="Display and card variant, horizontal, modified term width example" description-list--attribute='style="--pf-v6-c-description-list__term--width: 10ch;"' description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"}} ``` ## With icons ### Icons on terms ```hbs -{{> description-list__example-with-icons description-list--title="With icon"}} +{{> description-list__example-with-icons description-list--aria-label="Icons on terms example"}} ``` ## Documentation @@ -171,7 +172,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap | Attribute | Applied to | Outcome | | -- | -- | -- | -| `title` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** | +| `aria-label` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** | | `tabindex="0"` | `.pf-v6-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v6-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** | ### Usage diff --git a/src/patternfly/components/Drawer/drawer.scss b/src/patternfly/components/Drawer/drawer.scss index c6e3fe6dc7..e61443c2ef 100644 --- a/src/patternfly/components/Drawer/drawer.scss +++ b/src/patternfly/components/Drawer/drawer.scss @@ -21,6 +21,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); --#{$drawer}__panel--MinWidth: 50%; // change to __panel--md--MinWidth at breaking change --#{$drawer}__panel--MaxHeight: auto; --#{$drawer}__panel--ZIndex: var(--pf-t--global--z-index--sm); + --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--after--BackgroundColor); // TODO use token directly in breaking change + --#{$drawer}__panel--BorderBlockStartWidth: 0; + --#{$drawer}__panel--BorderBlockEndWidth: 0; + --#{$drawer}__panel--BorderInlineStartWidth: var(--#{$drawer}__panel--after--Width); // default is left side + --#{$drawer}__panel--BorderInlineEndWidth: 0; --#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default); --#{$drawer}__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default); --#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default); @@ -161,14 +166,16 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); --#{$drawer}__panel--BoxShadow: none; --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top); - // Divider - --#{$drawer}__panel--after--Width: var(--pf-t--global--border--width--divider--default); - --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default); - --#{$drawer}__panel--after--BackgroundColor: transparent; + // Divider + // TODO remove these variables in a breaking change in favor of setting the border variables directly + --#{$drawer}__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default); + --#{$drawer}--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default); // TODO this turns on border always for inline + --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default); + --#{$drawer}__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast); --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default); - --#{$drawer}--m-inline__panel--PaddingInlineStart: var(--#{$drawer}__panel--after--Width); - --#{$drawer}--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--#{$drawer}__panel--after--Width); - --#{$drawer}--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--#{$drawer}__panel--after--Width); + --#{$drawer}--m-inline__panel--PaddingInlineStart: 0; // no padding needed now + --#{$drawer}--m-panel-left--m-inline__panel--PaddingInlineEnd: 0; + --#{$drawer}--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0; } .#{$drawer} { @@ -191,6 +198,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); &.pf-m-inline, &.pf-m-static { --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-inline--BackgroundColor); + --#{$drawer}__panel--BorderInlineStartWidth: var(--#{$drawer}--m-inline__panel--after--Width); + > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) { padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart); @@ -321,6 +330,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); overflow: auto; visibility: hidden; // hidden by default background-color: var(--#{$drawer}__panel--BackgroundColor); + border: solid var(--#{$drawer}__panel--BorderColor); + border-block-start-width: var(--#{$drawer}__panel--BorderBlockStartWidth); + border-block-end-width: var(--#{$drawer}__panel--BorderBlockEndWidth); + border-inline-start-width: var(--#{$drawer}__panel--BorderInlineStartWidth); + border-inline-end-width: var(--#{$drawer}__panel--BorderInlineEndWidth); box-shadow: var(--#{$drawer}__panel--BoxShadow); opacity: var(--#{$drawer}__panel--Opacity); transition-delay: var(--#{$drawer}__panel--TransitionDelay); @@ -329,16 +343,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); transition-property: var(--#{$drawer}__panel--TransitionProperty); -webkit-overflow-scrolling: touch; - &::after { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: var(--#{$drawer}__panel--after--Width); - height: 100%; - content: ""; - background-color: var(--#{$drawer}__panel--after--BackgroundColor); - } - &:not(.pf-m-resizable) { padding-block-start: var(--#{$drawer}__panel--PaddingBlockStart); padding-block-end: var(--#{$drawer}__panel--PaddingBlockEnd); @@ -521,15 +525,14 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable { --#{$drawer}__panel--md--FlexBasis--min: var(--#{$drawer}__panel--m-resizable--md--FlexBasis--min); + --#{$drawer}__panel--BorderBlockStartWidth: 0; + --#{$drawer}__panel--BorderBlockEndWidth: 0; + --#{$drawer}__panel--BorderInlineStartWidth: 0; + --#{$drawer}__panel--BorderInlineEndWidth: 0; flex-direction: var(--#{$drawer}__panel--m-resizable--FlexDirection); min-width: var(--#{$drawer}__panel--m-resizable--MinWidth); - &::after { - width: 0; - height: 0; - } - > .#{$drawer}__splitter { flex-shrink: 0; } @@ -543,12 +546,18 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); // Panel left .#{$drawer}.pf-m-panel-left { --#{$drawer}--m-expanded__panel--BoxShadow: var(--#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow); + --#{$drawer}__panel--BorderInlineEndWidth: var(--#{$drawer}__panel--after--Width); + --#{$drawer}__panel--BorderInlineStartWidth: 0; // turn off default left border &.pf-m-inline, &.pf-m-static { > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) { + --#{$drawer}__panel--BorderInlineEndWidth: var(--#{$drawer}--m-inline__panel--after--Width); + + // TODO remove in breaking change padding-inline-start: 0; padding-inline-end: var(--#{$drawer}--m-panel-left--m-inline__panel--PaddingInlineEnd); + } } @@ -556,11 +565,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); transform: translateX(0); } - > .#{$drawer}__main > .#{$drawer}__panel::after { - inset-inline-start: auto; - inset-inline-end: 0; - } - > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable { > .#{$drawer}__splitter { --#{$drawer}__splitter-handle--InsetInlineStart: var(--#{$drawer}--m-panel-left__splitter-handle--InsetInlineStart); @@ -574,6 +578,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); --#{$drawer}--m-expanded__panel--BoxShadow: var(--#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow); --#{$drawer}__panel--MaxHeight: 100%; --#{$drawer}__panel--FlexBasis--min: var(--#{$drawer}--m-panel-bottom__panel--FlexBasis--min); + --#{$drawer}__panel--BorderInlineStartWidth: 0; // turn off default left border + --#{$drawer}__panel--BorderBlockStartWidth: var(--#{$drawer}--m-panel-bottom__panel--after--Height); // set the border width based on the old height variable min-width: auto; min-height: var(--#{$drawer}--m-panel-bottom__panel--md--MinHeight); @@ -581,18 +587,14 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); &.pf-m-inline, &.pf-m-static { > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) { + --#{$drawer}__panel--BorderBlockStartWidth: var(--#{$drawer}--m-inline__panel--after--Width); + + // TODO remove in breaking change padding-block-start: var(--#{$drawer}--m-panel-bottom--m-inline__panel--PaddingBlockStart); padding-inline-start: 0; } } - > .#{$drawer}__main > .#{$drawer}__panel::after { - inset-block-start: 0; - inset-inline-start: auto; - width: 100%; - height: var(--#{$drawer}--m-panel-bottom__panel--after--Height); - } - > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable { --#{$drawer}__panel--md--FlexBasis--min: var(--#{$drawer}--m-panel-bottom__panel--m-resizable--md--FlexBasis--min); --#{$drawer}__panel--m-resizable--FlexDirection: var(--#{$drawer}--m-panel-bottom__panel--m-resizable--FlexDirection); @@ -637,6 +639,10 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); .#{$drawer} > .#{$drawer}__main > .#{$drawer}__panel.pf-m-no-border, .#{$drawer}.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel.pf-m-no-border { --#{$drawer}--m-expanded__panel--BoxShadow: none; + --#{$drawer}__panel--BorderBlockStartWidth: 0; + --#{$drawer}__panel--BorderBlockEndWidth: 0; + --#{$drawer}__panel--BorderInlineStartWidth: 0; + --#{$drawer}__panel--BorderInlineEndWidth: 0; } .#{$drawer}__splitter { @@ -680,8 +686,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100); > .#{$drawer}__main > .#{$drawer}__panel { --#{$drawer}--m-expanded__panel--BoxShadow: none; - &:not(.pf-m-no-border)::after { - background-color: var(--#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor); + &:not(.pf-m-no-border) { + --#{$drawer}__panel--BorderColor: var(--#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor); } } } diff --git a/src/patternfly/components/DualListSelector/dual-list-selector-item.hbs b/src/patternfly/components/DualListSelector/dual-list-selector-item.hbs index 7c5fece7a8..80de820056 100644 --- a/src/patternfly/components/DualListSelector/dual-list-selector-item.hbs +++ b/src/patternfly/components/DualListSelector/dual-list-selector-item.hbs @@ -21,12 +21,14 @@ {{/dual-list-selector-item--text}} {{/dual-list-selector-item-text}} {{/dual-list-selector-item-main}} - {{#> dual-list-selector-item--count}} - {{#> dual-list-selector-item-count}} - {{#> badge badge--modifier="pf-m-read"}} - {{dual-list-selector-item--count}} - {{/badge}} - {{/dual-list-selector-item-count}} - {{/dual-list-selector-item--count}} + {{#if dual-list-selector-item--count}} + {{#> dual-list-selector-item--count}} + {{#> dual-list-selector-item-count}} + {{#> badge badge--modifier="pf-m-read"}} + {{dual-list-selector-item--count}} + {{/badge}} + {{/dual-list-selector-item-count}} + {{/dual-list-selector-item--count}} + {{/if}} {{/dual-list-selector-list-item-row}} diff --git a/src/patternfly/components/DualListSelector/dual-list-selector.scss b/src/patternfly/components/DualListSelector/dual-list-selector.scss index ace506c7ae..4c623c6781 100644 --- a/src/patternfly/components/DualListSelector/dual-list-selector.scss +++ b/src/patternfly/components/DualListSelector/dual-list-selector.scss @@ -57,8 +57,12 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10; // List item --#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm); --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); + --#{$dual-list-selector}__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$dual-list-selector}__list-item-row--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); + --#{$dual-list-selector}__list-item-row--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); + --#{$dual-list-selector}__list-item-row--m-selected--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); --#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4; @@ -182,6 +186,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10; overflow: auto; border: var(--#{$dual-list-selector}__menu--BorderWidth) solid var(--#{$dual-list-selector}__menu--BorderColor); border-radius: var(--#{$dual-list-selector}__menu--BorderRadius); + outline-offset: 2px; // push the focus outline out so that it is not broken by the list item row background } .#{$dual-list-selector}__list { @@ -212,7 +217,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10; } .#{$dual-list-selector}__list-item { - &:focus { + &:focus-visible { --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor); } @@ -257,12 +262,23 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10; } .#{$dual-list-selector}__list-item-row { + position: relative; display: flex; font-size: var(--#{$dual-list-selector}__list-item-row--FontSize); background-color: var(--#{$dual-list-selector}__list-item-row--BackgroundColor); + &::before { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border-block-start: var(--#{$dual-list-selector}__list-item-row--BorderWidth) solid var(--#{$dual-list-selector}__list-item-row--BorderColor); + border-block-end: var(--#{$dual-list-selector}__list-item-row--BorderWidth) solid var(--#{$dual-list-selector}__list-item-row--BorderColor); + } + &.pf-m-selected { --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor); + --#{$dual-list-selector}__list-item-row--BorderWidth: var(--#{$dual-list-selector}__list-item-row--m-selected--BorderWidth); .#{$dual-list-selector}__item-text { --#{$dual-list-selector}__item-text--Color: var(--#{$dual-list-selector}__list-item-row--m-selected__text--Color); @@ -273,10 +289,13 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10; &:hover { --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor); + --#{$dual-list-selector}__list-item-row--BorderWidth: var(--#{$dual-list-selector}__list-item-row--hover--BorderWidth); } &.pf-m-check { --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: transparent; + --#{$dual-list-selector}__list-item-row--m-selected--BorderColor: transparent; + --#{$dual-list-selector}__list-item-row--BorderWidth: revert; } &.pf-m-ghost-row { diff --git a/src/patternfly/components/EmptyState/examples/EmptyState.md b/src/patternfly/components/EmptyState/examples/EmptyState.md index 5d07ff2eb1..6b1a968e05 100644 --- a/src/patternfly/components/EmptyState/examples/EmptyState.md +++ b/src/patternfly/components/EmptyState/examples/EmptyState.md @@ -12,7 +12,7 @@ cssPrefix: pf-v6-c-empty-state {{#> empty-state-header}} {{> empty-state-icon}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} Empty state {{/empty-state-title-text}} {{/empty-state-title}} @@ -58,7 +58,7 @@ cssPrefix: pf-v6-c-empty-state {{#> empty-state-header}} {{> empty-state-icon}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} Empty state {{/empty-state-title-text}} {{/empty-state-title}} @@ -99,7 +99,7 @@ cssPrefix: pf-v6-c-empty-state {{#> empty-state-header}} {{> empty-state-icon}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} Empty state {{/empty-state-title-text}} {{/empty-state-title}} @@ -146,7 +146,7 @@ cssPrefix: pf-v6-c-empty-state {{#> empty-state-header}} {{> empty-state-icon}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} Empty state {{/empty-state-title-text}} {{/empty-state-title}} @@ -192,7 +192,7 @@ cssPrefix: pf-v6-c-empty-state {{#> empty-state-header}} {{> empty-state-icon}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} Empty state {{/empty-state-title-text}} {{/empty-state-title}} @@ -237,7 +237,7 @@ cssPrefix: pf-v6-c-empty-state {{#> empty-state-header}} {{> empty-state-icon empty-state-icon--type="check-circle"}} {{#> empty-state-title}} - {{#> empty-state-title-text}} + {{#> empty-state-title-text empty-state-title-text--element="h4"}} You're all set {{/empty-state-title-text}} {{/empty-state-title}} diff --git a/src/patternfly/components/ExpandableSection/examples/ExpandableSection.md b/src/patternfly/components/ExpandableSection/examples/ExpandableSection.md index e6494a5026..0ff50eea27 100644 --- a/src/patternfly/components/ExpandableSection/examples/ExpandableSection.md +++ b/src/patternfly/components/ExpandableSection/examples/ExpandableSection.md @@ -8,7 +8,13 @@ cssPrefix: pf-v6-c-expandable-section ### Hidden ```hbs {{#> expandable-section}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less hidden example content + {{else}} + Show more hidden example content + {{/if}} + {{/expandable-section-toggle}} {{#> expandable-section-content}} This content is visible only when the component is expanded. {{/expandable-section-content}} @@ -18,7 +24,13 @@ cssPrefix: pf-v6-c-expandable-section ### Expanded ```hbs {{#> expandable-section expandable-section--IsExpanded=true}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less expanded example content + {{else}} + Show more expanded example content + {{/if}} + {{/expandable-section-toggle}} {{#> expandable-section-content}} This content is visible only when the component is expanded. {{/expandable-section-content}} @@ -28,7 +40,13 @@ cssPrefix: pf-v6-c-expandable-section ### Indented ```hbs {{#> expandable-section expandable-section--IsExpanded=true expandable-section--IsIndented=true}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less indented example content + {{else}} + Show more indented example content + {{/if}} + {{/expandable-section-toggle}} {{#> expandable-section-content}} This content is visible only when the component is expanded. {{/expandable-section-content}} @@ -39,7 +57,13 @@ cssPrefix: pf-v6-c-expandable-section ```hbs {{#> expandable-section expandable-section--IsDisplayLg=true}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less disclosure variation example content + {{else}} + Show more disclosure variation example content + {{/if}} + {{/expandable-section-toggle}} {{#> expandable-section-content}} This content is visible only when the component is expanded. {{/expandable-section-content}} @@ -50,7 +74,13 @@ cssPrefix: pf-v6-c-expandable-section ```hbs {{#> expandable-section expandable-section--IsDisplayLg=true expandable-section--IsExpanded=true}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less disclosure variation example content + {{else}} + Show more disclosure variation example content + {{/if}} + {{/expandable-section-toggle}} {{#> expandable-section-content}} This content is visible only when the component is expanded. {{/expandable-section-content}} @@ -61,7 +91,13 @@ cssPrefix: pf-v6-c-expandable-section ```hbs {{#> expandable-section expandable-section--IsDisplayLg=true expandable-section--IsExpanded=true expandable-section--IsIndented=true}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less disclosure variation indented example content + {{else}} + Show more disclosure variation indented example content + {{/if}} + {{/expandable-section-toggle}} {{#> expandable-section-content}} This content is visible only when the component is expanded. {{/expandable-section-content}} @@ -82,6 +118,11 @@ cssPrefix: pf-v6-c-expandable-section {{#> stack-item}} {{#> expandable-section expandable-section--IsDetached=true expandable-section--modifier="pf-m-expand-top"}} {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less detached example content + {{else}} + Show more detached example content + {{/if}} {{/expandable-section-toggle}} {{/expandable-section}} {{/stack-item}} @@ -94,7 +135,13 @@ cssPrefix: pf-v6-c-expandable-section {{#> expandable-section-content}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat. {{/expandable-section-content}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less truncated content + {{else}} + Show more truncated content + {{/if}} + {{/expandable-section-toggle}} {{/expandable-section}} ``` @@ -104,7 +151,13 @@ cssPrefix: pf-v6-c-expandable-section {{#> expandable-section-content}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus finibus, diam vitae eleifend consequat, metus sapien posuere quam, ut tincidunt nunc enim eget sapien. Mauris ac dui imperdiet dolor dignissim efficitur laoreet quis erat. Proin turpis leo, malesuada eget urna et, tristique mollis odio. Ut mattis nulla lorem, elementum hendrerit nunc molestie vitae. Proin massa sem, bibendum id urna in, viverra porta neque. Ut ut mi ac lacus rhoncus mollis id quis sem. Suspendisse non justo elementum, dictum eros nec, hendrerit sapien. Mauris aliquet, est sit amet tincidunt vehicula, purus est hendrerit arcu, vitae egestas odio lorem ut lacus. In et neque non metus viverra rhoncus quis non purus. Integer id venenatis tortor. Nulla sollicitudin convallis tellus, at porta eros volutpat in. Curabitur rhoncus rhoncus nisi, sit amet tincidunt dolor efficitur vitae. Integer purus neque, porta non odio lobortis, accumsan elementum risus. Pellentesque viverra id lacus a cursus. Etiam eu pulvinar risus. Etiam ultrices nec urna id consequat. {{/expandable-section-content}} - {{> expandable-section-toggle}} + {{#> expandable-section-toggle}} + {{#if expandable-section--IsExpanded}} + Show less truncated content + {{else}} + Show more truncated content + {{/if}} + {{/expandable-section-toggle}} {{/expandable-section}} ``` diff --git a/src/patternfly/components/Hint/examples/Hint.md b/src/patternfly/components/Hint/examples/Hint.md index c17d877353..c1dcdeae6f 100644 --- a/src/patternfly/components/Hint/examples/Hint.md +++ b/src/patternfly/components/Hint/examples/Hint.md @@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-hint menu-toggle--IsPlain=true menu-toggle--HasKebab=true menu-toggle--id=(dasherize hint--id 'hint') - menu-toggle--aria-label='Hint menu toggle' + menu-toggle--aria-label='Hint with title example actions' }} {{/hint-actions}} {{#> hint-title}} @@ -32,7 +32,7 @@ cssPrefix: pf-v6-c-hint menu-toggle--IsPlain=true menu-toggle--HasKebab=true menu-toggle--id=(dasherize hint--id 'hint') - menu-toggle--aria-label='Hint menu toggle' + menu-toggle--aria-label='Hint with title and footer example actions' }} {{/hint-actions}} {{#> hint-title}} @@ -65,7 +65,7 @@ cssPrefix: pf-v6-c-hint menu-toggle--IsPlain=true menu-toggle--HasKebab=true menu-toggle--id=(dasherize hint--id 'hint') - menu-toggle--aria-label='Hint menu toggle' + menu-toggle--aria-label='Hint without title example actions' }} {{/hint-actions}} {{#> hint-body}} diff --git a/src/patternfly/components/InlineEdit/examples/InlineEdit.md b/src/patternfly/components/InlineEdit/examples/InlineEdit.md index 2c8d75b083..647f233783 100644 --- a/src/patternfly/components/InlineEdit/examples/InlineEdit.md +++ b/src/patternfly/components/InlineEdit/examples/InlineEdit.md @@ -412,6 +412,3 @@ All accessibility requirements for inputs apply to elements within inline edit. | `.pf-m-bold` | `.pf-v6-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. | | `.pf-m-valid` | `.pf-v6-c-inline-edit__action` | Modifies the action button state. | | `.pf-m-enable-editable` | `.pf-v6-c-inline-edit__action` | Exposes an inline edit action by default. | - -``` ---> diff --git a/src/patternfly/components/Label/label-group-close.hbs b/src/patternfly/components/Label/label-group-close.hbs index 629e81d280..524098570b 100644 --- a/src/patternfly/components/Label/label-group-close.hbs +++ b/src/patternfly/components/Label/label-group-close.hbs @@ -2,5 +2,5 @@ {{#if label-group-close--attribute}} {{{label-group-close--attribute}}} {{/if}}> - {{> button button--IsPlain=true button--HasNoPadding=true button--IsIcon=true button--icon="times" button--attribute=(concat 'aria-labelledby="' label-group--id '-button ' label-group--id '-label" aria-label="Close label group" id="' label-group--id '-button"')}} + {{> button button--IsPlain=true button--IsSmall=true button--IsIcon=true button--icon="times" button--attribute=(concat 'aria-labelledby="' label-group--id '-button ' label-group--id '-label" aria-label="Close label group" id="' label-group--id '-button"')}} diff --git a/src/patternfly/components/Label/label.scss b/src/patternfly/components/Label/label.scss index b1bbdbd2c7..4823b567c0 100644 --- a/src/patternfly/components/Label/label.scss +++ b/src/patternfly/components/Label/label.scss @@ -7,10 +7,11 @@ --#{$label}--PaddingInlineStart: var(--pf-t--global--spacer--sm); --#{$label}--MaxWidth: 100%; --#{$label}--MinWidth: calc((var(--#{$label}--FontSize) * var(--pf-t--global--font--line-height--body) + var(--#{$label}--PaddingBlockStart) + var(--#{$label}--PaddingBlockEnd))); - --#{$label}--BorderWidth: 0; - --#{$label}--BorderColor: transparent; + --#{$label}--BorderWidth: var(--pf-t--global--border--width--regular); + --#{$label}--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill); --#{$label}--FontSize: var(--pf-t--global--font--size--body--sm); + --#{$label}--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact); // Gray (default) --#{$label}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); @@ -163,8 +164,8 @@ --#{$label}--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover); // Clickable - --#{$label}--m-clickable--hover--BorderWidth: 0; - --#{$label}--m-clickable--hover--BorderColor: transparent; + --#{$label}--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); + --#{$label}--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$label}--m-clickable__content--Cursor: pointer; // Filled @@ -183,8 +184,10 @@ // Overflow --#{$label}--m-overflow--Color: var(--pf-t--global--text--color--brand--default); --#{$label}--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); + --#{$label}--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default); --#{$label}--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover); --#{$label}--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); + --#{$label}--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover); // Add --#{$label}--m-add--Color: var(--pf-t--global--text--color--brand--default); @@ -217,17 +220,17 @@ --#{$label}__text--MaxWidth: 100%; // Actions - --#{$label}__actions--MarginInlineEnd: calc(var(--#{$label}__actions--c-button--PaddingInlineEnd) * -1); + --#{$label}__actions--MarginInlineEnd: 0; // TODO - remove in breaking change // Actions button (close) --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm); --#{$label}__actions--c-button--OutlineOffset: #{pf-size-prem(-3px)}; - --#{$label}__actions--c-button--MarginBlockStart: calc(var(--#{$label}__actions--c-button--PaddingBlockStart) * -1); - --#{$label}__actions--c-button--MarginBlockEnd: calc(var(--#{$label}__actions--c-button--PaddingBlockEnd) * -1); - --#{$label}__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs); - --#{$label}__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs); - --#{$label}__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs); - --#{$label}__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs); + --#{$label}__actions--c-button--MarginBlockStart: 0; // TODO - remove in breaking change + --#{$label}__actions--c-button--MarginBlockEnd: 0; // TODO - remove in breaking change + --#{$label}__actions--c-button--PaddingBlockStart: 0; // TODO - remove in breaking change + --#{$label}__actions--c-button--PaddingInlineEnd: 0; // TODO - remove in breaking change + --#{$label}__actions--c-button--PaddingBlockEnd: 0; // TODO - remove in breaking change + --#{$label}__actions--c-button--PaddingInlineStart: 0; // TODO - remove in breaking change // Editable --#{$label}--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default); @@ -253,6 +256,7 @@ .#{$label} { position: relative; + gap: var(--#{$label}--Gap); min-width: var(--#{$label}--MinWidth); max-width: var(--#{$label}--MaxWidth); padding-block-start: var(--#{$label}--PaddingBlockStart); @@ -474,10 +478,12 @@ &.pf-m-overflow { --#{$label}--Color: var(--#{$label}--m-overflow--Color); --#{$label}--BackgroundColor: var(--#{$label}--m-overflow--BackgroundColor); + --#{$label}--BorderWidth: var(--#{$label}--m-overflow--BorderWidth); &:is(:hover, :focus) { --#{$label}--m-overflow--Color: var(--#{$label}--m-overflow--hover--Color); --#{$label}--m-overflow--BackgroundColor: var(--#{$label}--m-overflow--hover--BackgroundColor); + --#{$label}--m-overflow--BorderWidth: var(--#{$label}--m-overflow--hover--BorderWidth); } } @@ -582,6 +588,10 @@ margin-inline-end: var(--#{$label}__actions--MarginInlineEnd); .#{$button} { + @at-root .#{$label}.pf-m-compact & { + --#{$button}--m-plain--m-no-padding--after--Inset: 0 calc(#{pf-size-prem(2px) * -1}); + } + --#{$button}--FontSize: var(--#{$label}__actions--c-button--FontSize); --#{$button}--m-plain--m-no-padding--PaddingBlockStart: var(--#{$label}__actions--c-button--PaddingBlockStart); --#{$button}--m-plain--m-no-padding--PaddingInlineEnd: var(--#{$label}__actions--c-button--PaddingInlineEnd); diff --git a/src/patternfly/components/Login/login.scss b/src/patternfly/components/Login/login.scss index 8a921e8522..515ec60b8b 100644 --- a/src/patternfly/components/Login/login.scss +++ b/src/patternfly/components/Login/login.scss @@ -40,6 +40,8 @@ --#{$login}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default); --#{$login}__main--MarginBlockEnd: var(--pf-t--global--spacer--lg); --#{$login}__main--BorderRadius: var(--pf-t--global--border--radius--large); + --#{$login}__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default); + --#{$login}__main--BorderColor: var(--pf-t--global--border--color--high-contrast); @media (min-width: $pf-v6-global--breakpoint--xl) { --#{$login}__main--MarginBlockEnd: 0; @@ -163,6 +165,7 @@ align-self: start; margin-block-end: var(--#{$login}__main--MarginBlockEnd); background-color: var(--#{$login}__main--BackgroundColor); + border: var(--#{$login}__main--BorderWidth) solid var(--#{$login}__main--BorderColor); border-radius: var(--#{$login}__main--BorderRadius); // If the first child isn't a header, then we need to put the header's top padding there diff --git a/src/patternfly/components/Menu/menu.scss b/src/patternfly/components/Menu/menu.scss index bef4ae79a6..de5d2405d3 100644 --- a/src/patternfly/components/Menu/menu.scss +++ b/src/patternfly/components/Menu/menu.scss @@ -10,6 +10,8 @@ --#{$menu}--BackgroundColor: var(--pf-t--global--background--color--floating--default); --#{$menu}--BoxShadow: var(--pf-t--global--box-shadow--md); --#{$menu}--Color: var(--pf-t--global--text--color--regular); + --#{$menu}--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default); + --#{$menu}--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$menu}--BorderRadius: var(--pf-t--global--border--radius--small); --#{$menu}--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3); --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm); @@ -44,6 +46,9 @@ // * Menu list item --#{$menu}__list-item--Color: var(--pf-t--global--text--color--regular); --#{$menu}__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); + --#{$menu}__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$menu}__list-item--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$menu}__list-item--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$menu}__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); --#{$menu}__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --#{$menu}__list-item--TransitionProperty: background-color; @@ -195,6 +200,7 @@ --#{$menu}__item-description--Color: var(--#{$menu}--icon--disabled--Color); --#{$menu}__list-item--BackgroundColor: transparent; --#{$menu}__list-item--hover--BackgroundColor: transparent; + --#{$menu}__list-item--hover--BorderColor: transparent; } &:is(.pf-m-disabled, :disabled) { @@ -228,13 +234,14 @@ overflow: hidden; color: var(--#{$menu}--Color); background-color: var(--#{$menu}--BackgroundColor); + border: var(--#{$menu}--BorderWidth) solid var(--#{$menu}--BorderColor); border-radius: var(--#{$menu}--BorderRadius); box-shadow: var(--#{$menu}--BoxShadow); // stylelint-disable declaration-no-important transition-timing-function: var(--#{$menu}--TransitionTimingFunction) !important; // Note that this timing function is overriding the default that Popper is using transition-duration: var(--#{$menu}--TransitionDuration) !important; // Note that this duration is overriding whatever value is supplied as a prop to Popper // stylelint-enable declaration-no-important - + .#{$menu} { min-width: 100%; } @@ -291,6 +298,7 @@ :where(.#{$menu}) { padding: 0; + border: 0; } &.pf-m-drilled-in { @@ -482,6 +490,8 @@ inset: 0; content: ""; background-color: var(--#{$menu}__list-item--BackgroundColor); + border-block-start: var(--#{$menu}__list-item--BorderWidth) solid var(--#{$menu}__list-item--BorderColor); + border-block-end: var(--#{$menu}__list-item--BorderWidth) solid var(--#{$menu}__list-item--BorderColor); transition: inherit; } @@ -518,6 +528,7 @@ &:focus-within, &:has(> :hover) { --#{$menu}__list-item--BackgroundColor: var(--#{$menu}__list-item--hover--BackgroundColor); + --#{$menu}__list-item--BorderWidth: var(--#{$menu}__list-item--hover--BorderWidth); .#{$menu}__item-select-icon, .#{$menu}__item-external-icon { diff --git a/src/patternfly/components/MenuToggle/menu-toggle.scss b/src/patternfly/components/MenuToggle/menu-toggle.scss index d584c2c934..c40f422d65 100644 --- a/src/patternfly/components/MenuToggle/menu-toggle.scss +++ b/src/patternfly/components/MenuToggle/menu-toggle.scss @@ -13,7 +13,7 @@ --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default); --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small); --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default); - --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--action--default); + --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--control--default); --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--z-index--xs); // add z-index for toggle border to render above other borders --#{$menu-toggle}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --#{$menu-toggle}--TransitionDuration: var(--pf-t--global--motion--duration--fade--short); @@ -22,14 +22,14 @@ // * Menu toggle hover --#{$menu-toggle}--hover--Color: var(--pf-t--global--text--color--regular); --#{$menu-toggle}--hover--BackgroundColor: var(--pf-t--global--background--color--control--default); - --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--action--default); + --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--control--hover); --#{$menu-toggle}--hover--BorderColor: var(--pf-t--global--border--color--hover); --#{$menu-toggle}--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular); // * Menu toggle expanded --#{$menu-toggle}--expanded--Color: var(--pf-t--global--text--color--regular); --#{$menu-toggle}--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default); - --#{$menu-toggle}--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked); + --#{$menu-toggle}--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked); --#{$menu-toggle}--expanded--BorderColor: var(--pf-t--global--border--color--clicked); --#{$menu-toggle}--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular); @@ -138,7 +138,10 @@ --#{$menu-toggle}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default); --#{$menu-toggle}--m-plain--Color: var(--pf-t--global--icon--color--regular); --#{$menu-toggle}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); - --#{$menu-toggle}--m-plain--BorderColor: transparent; + --#{$menu-toggle}--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$menu-toggle}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$menu-toggle}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$menu-toggle}--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small); --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked); @@ -292,6 +295,7 @@ --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-plain--Color); --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-plain--BackgroundColor); --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-plain--BorderColor); + --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--m-plain--BorderWidth); --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-plain--BorderRadius); --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-plain--BackgroundColor); --#{$menu-toggle}--hover--BackgroundColor: var(--#{$menu-toggle}--m-plain--hover--BackgroundColor); @@ -304,7 +308,8 @@ --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd); &::before { - border: none; + --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--m-plain--BorderWidth); + --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-plain--BorderColor); } } @@ -312,6 +317,7 @@ --#{$menu-toggle}--Color: var(--#{$menu-toggle}--hover--Color); --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--hover--BackgroundColor); --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--hover--BorderWidth); + --#{$menu-toggle}--m-plain--BorderWidth: var(--#{$menu-toggle}--m-plain--hover--BorderWidth); --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--hover--BorderColor); --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--hover__toggle-icon--Color); --#{$menu-toggle}__icon--TransitionDelay: var(--#{$menu-toggle}--hover__icon--TransitionDelay); @@ -324,6 +330,7 @@ --#{$menu-toggle}--Color: var(--#{$menu-toggle}--expanded--Color); --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--expanded--BackgroundColor); --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--expanded--BorderWidth); + --#{$menu-toggle}--m-plain--BorderWidth: var(--#{$menu-toggle}--m-plain--expanded--BorderWidth); --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--expanded--BorderColor); --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--expanded__toggle-icon--Color); } diff --git a/src/patternfly/components/ModalBox/modal-box.scss b/src/patternfly/components/ModalBox/modal-box.scss index deffd060f4..df61710d34 100644 --- a/src/patternfly/components/ModalBox/modal-box.scss +++ b/src/patternfly/components/ModalBox/modal-box.scss @@ -2,6 +2,8 @@ @include pf-root($modal-box) { --#{$modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default); + --#{$modal-box}--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$modal-box}--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default); --#{$modal-box}--BorderRadius: var(--pf-t--global--border--radius--large); --#{$modal-box}--BoxShadow: var(--pf-t--global--box-shadow--lg); --#{$modal-box}--ZIndex: var(--pf-t--global--z-index--xl); // TODO use a z-index token @@ -87,6 +89,7 @@ max-height: var(--#{$modal-box}--MaxHeight); overflow: auto; background-color: var(--#{$modal-box}--BackgroundColor); + border: var(--#{$modal-box}--BorderWidth) solid var(--#{$modal-box}--BorderColor); border-radius: var(--#{$modal-box}--BorderRadius); box-shadow: var(--#{$modal-box}--BoxShadow); diff --git a/src/patternfly/components/Nav/nav.scss b/src/patternfly/components/Nav/nav.scss index 7583f7de7a..d9fb6bc516 100644 --- a/src/patternfly/components/Nav/nav.scss +++ b/src/patternfly/components/Nav/nav.scss @@ -57,6 +57,10 @@ --#{$nav}__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover); --#{$nav}__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked); --#{$nav}__link--m-current--Color: var(--pf-t--global--text--color--regular); + --#{$nav}__link--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$nav}__link--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$nav}__link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$nav}__link--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); // background color transition on hover --#{$nav}__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default); @@ -113,6 +117,8 @@ // * Nav horizontal subnav --#{$nav}--m-horizontal--m-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --#{$nav}--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--pill); + --#{$nav}--m-horizontal--m-subnav--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); + --#{$nav}--m-horizontal--m-subnav--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$nav}--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--xs); --#{$nav}--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--xs); --#{$nav}--m-horizontal--m-subnav__list--PaddingInlineStart: var(--pf-t--global--spacer--md); @@ -290,10 +296,22 @@ transition-duration: var(--#{$nav}__link--TransitionDuration--background-color), var(--#{$nav}__link--m-current--TransitionDuration--color); transition-property: background-color, color; + &::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--#{$nav}__link--BorderWidth) solid var(--#{$nav}__link--BorderColor); + border-radius: inherit; + } + + // explicitly set background-color prop to avoid affecting child elements settings &:hover, &.pf-m-hover, &:focus { + --#{$nav}__link--BorderWidth: var(--#{$nav}__link--hover--BorderWidth); + color: var(--#{$nav}__link--hover--Color); background-color: var(--#{$nav}__link--hover--BackgroundColor); } @@ -301,6 +319,7 @@ &.pf-m-current, &.pf-m-current:hover { --#{$nav}__link-icon--Color: var(--#{$nav}__link--m-current__link-icon--Color); + --#{$nav}__link--BorderWidth: var(--#{$nav}__link--m-current--BorderWidth); color: var(--#{$nav}__link--m-current--Color); background-color: var(--#{$nav}__link--m-current--BackgroundColor); @@ -428,6 +447,7 @@ --#{$nav}__link--PaddingBlockStart: var(--#{$nav}--m-horizontal--m-subnav__link--PaddingBlockStart); --#{$nav}__link--PaddingBlockEnd: var(--#{$nav}--m-horizontal--m-subnav__link--PaddingBlockEnd); + border: var(--#{$nav}--m-horizontal--m-subnav--BorderWidth) solid var(--#{$nav}--m-horizontal--m-subnav--BorderColor); border-radius: var(--#{$nav}--m-horizontal--m-subnav--BorderRadius); } diff --git a/src/patternfly/components/Page/page.scss b/src/patternfly/components/Page/page.scss index cc2e38d79d..296818de0c 100644 --- a/src/patternfly/components/Page/page.scss +++ b/src/patternfly/components/Page/page.scss @@ -76,8 +76,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset); --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset); --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--medium); - --#{$page}__main-container--BorderWidth: #{pf-size-prem(4px)}; // TODO Change to be a page outline token - --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token + --#{$page}__main-container--BorderWidth: var(--pf-t--global--border--width--page--default); + --#{$page}__main-container--BorderColor: var(--pf-t--global--border--color--page--default); --#{$page}__main-container--xs--AlignSelf: stretch; --#{$page}__main-container--xs--BorderRadius: 0; --#{$page}__main-container--xs--MarginInlineStart: 0; diff --git a/src/patternfly/components/Panel/panel.scss b/src/patternfly/components/Panel/panel.scss index 06f3e8f277..716153ac24 100644 --- a/src/patternfly/components/Panel/panel.scss +++ b/src/patternfly/components/Panel/panel.scss @@ -10,17 +10,20 @@ // border --#{$panel}--before--BorderWidth: 0; - --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--default); + --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--high-contrast); // secondary modifier --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default); + --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--box--default); // bordered --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default); + --#{$panel}--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default); // raised --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md); --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default); + --#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--box--default); // header --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md); @@ -73,15 +76,18 @@ &.pf-m-bordered { --#{$panel}--before--BorderWidth: var(--#{$panel}--m-bordered--before--BorderWidth); + --#{$panel}--before--BorderColor: var(--#{$panel}--m-bordered--before--BorderColor); } &.pf-m-secondary { --#{$panel}--BackgroundColor: var(--#{$panel}--m-secondary--BackgroundColor); + --#{$panel}--before--BorderWidth: var(--#{$panel}--m-secondary--before--BorderWidth); } &.pf-m-raised { --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor); --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow); + --#{$panel}--before--BorderWidth: var(--#{$panel}--m-raised--before--BorderWidth); } &.pf-m-scrollable { diff --git a/src/patternfly/components/Popover/examples/Popover.md b/src/patternfly/components/Popover/examples/Popover.md index 5dbc60a786..a9a26650aa 100644 --- a/src/patternfly/components/Popover/examples/Popover.md +++ b/src/patternfly/components/Popover/examples/Popover.md @@ -7,7 +7,6 @@ cssPrefix: pf-v6-c-popover import './Popover.css' ## Examples - {{> popover-close}} ### Top ```hbs isFullscreen {{#> popover popover--modifier="pf-m-top" popover--attribute='aria-labelledby="popover-top-header" aria-describedby="popover-top-body"'}} diff --git a/src/patternfly/components/Popover/popover.scss b/src/patternfly/components/Popover/popover.scss index c5c4072e8a..15289d8b20 100644 --- a/src/patternfly/components/Popover/popover.scss +++ b/src/patternfly/components/Popover/popover.scss @@ -6,6 +6,8 @@ --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)}); --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)}); --#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md); + --#{$popover}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular); + --#{$popover}--BorderColor: var(--pf-t--global--border--color--high-contrast); --#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium); @@ -73,6 +75,7 @@ min-width: var(--#{$popover}--MinWidth); max-width: var(--#{$popover}--MaxWidth); font-size: var(--#{$popover}--FontSize); + border: var(--#{$popover}--BorderWidth) solid var(--#{$popover}--BorderColor); border-radius: var(--#{$popover}--BorderRadius); box-shadow: var(--#{$popover}--BoxShadow); @@ -226,6 +229,7 @@ height: var(--#{$popover}__arrow--Height); pointer-events: none; background-color: var(--#{$popover}__arrow--BackgroundColor); + border: var(--#{$popover}--BorderWidth) solid var(--#{$popover}--BorderColor); box-shadow: var(--#{$popover}__arrow--BoxShadow); transform: translateX(var(--#{$popover}__arrow--TranslateX, 0)) translateY(var(--#{$popover}__arrow--TranslateY, 0)) rotate(var(--#{$popover}__arrow--Rotate, 0)); } diff --git a/src/patternfly/components/Progress/progress.scss b/src/patternfly/components/Progress/progress.scss index 95143510b3..830ecf528f 100644 --- a/src/patternfly/components/Progress/progress.scss +++ b/src/patternfly/components/Progress/progress.scss @@ -8,6 +8,8 @@ --#{$progress}__bar--Height: var(--pf-t--global--spacer--md); --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--medium); + --#{$progress}__bar--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--regular); --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0 --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm); --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular); @@ -201,6 +203,15 @@ overflow: hidden; background-color: var(--#{$progress}__bar--BackgroundColor); border-radius: var(--#{$progress}__bar--BorderRadius); + + &::before { + position: absolute; + inset: 0; + pointer-events: none; + content: ''; + border: var(--#{$progress}__bar--BorderWidth) solid var(--#{$progress}__bar--BorderColor); + border-radius: inherit; + } } // the progress__indicator is the part that advances (widens) as progress is made diff --git a/src/patternfly/components/SimpleList/simple-list.scss b/src/patternfly/components/SimpleList/simple-list.scss index baadef04e9..ff50ab31a6 100644 --- a/src/patternfly/components/SimpleList/simple-list.scss +++ b/src/patternfly/components/SimpleList/simple-list.scss @@ -14,7 +14,11 @@ --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle); --#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); --#{$simple-list}__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny); - + --#{$simple-list}__item-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$simple-list}__item-link--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$simple-list}__item-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$simple-list}__item-link--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); + // Simple list item link --#{$simple-list}__item-link--m-link--Color: var(--pf-t--global--text--color--link--default); --#{$simple-list}__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover); @@ -34,6 +38,7 @@ } .#{$simple-list}__item-link { + position: relative; display: block; width: 100%; padding-block-start: var(--#{$simple-list}__item-link--PaddingBlockStart); @@ -48,6 +53,15 @@ border: none; border-radius: var(--#{$simple-list}__item-link--BorderRadius); + &::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--#{$simple-list}__item-link--BorderWidth) solid var(--#{$simple-list}__item-link--BorderColor); + border-radius: inherit; + } + &.pf-m-link { --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color); --#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color); @@ -57,6 +71,7 @@ &:is(:hover, :focus) { --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor); --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color); + --#{$simple-list}__item-link--BorderWidth: var(--#{$simple-list}__item-link--hover--BorderWidth); text-decoration-line: none; } @@ -64,6 +79,7 @@ &.pf-m-current { --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--m-current--BackgroundColor); --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-current--Color); + --#{$simple-list}__item-link--BorderWidth: var(--#{$simple-list}__item-link--m-current--BorderWidth); } } diff --git a/src/patternfly/components/Skeleton/examples/Skeleton.md b/src/patternfly/components/Skeleton/examples/Skeleton.md index 9872935ad8..c2f3b22e07 100644 --- a/src/patternfly/components/Skeleton/examples/Skeleton.md +++ b/src/patternfly/components/Skeleton/examples/Skeleton.md @@ -11,12 +11,14 @@ import './Skeleton.css' ### Default ```hbs {{#> skeleton}} + {{#> screen-reader}}Loading default content{{/screen-reader}} {{/skeleton}} ``` ### Percentage width modifiers ```hbs {{#> skeleton skeleton--modifier="pf-m-width-25"}} + {{#> screen-reader}}Loading percentage with modifiers content{{/screen-reader}} {{/skeleton}}
{{#> skeleton skeleton--modifier="pf-m-width-33"}} @@ -38,6 +40,7 @@ import './Skeleton.css' ### Percentage height modifiers ```hbs {{#> skeleton skeleton--modifier="pf-m-height-25"}} + {{#> screen-reader}}Loading percentage height modifiers content{{/screen-reader}} {{/skeleton}} {{#> skeleton skeleton--modifier="pf-m-height-33"}} {{/skeleton}} @@ -55,6 +58,7 @@ import './Skeleton.css' ```hbs --pf-v6-global--FontSize--4xl {{#> skeleton skeleton--modifier="pf-m-text-4xl"}} + {{#> screen-reader}}Loading text modifiers content{{/screen-reader}} {{/skeleton}}
--pf-v6-global--FontSize--3xl @@ -86,6 +90,7 @@ import './Skeleton.css' ```hbs Small circle {{#> skeleton skeleton--modifier="pf-m-circle pf-m-width-sm"}} + {{#> screen-reader}}Loading circle content{{/screen-reader}} {{/skeleton}}
Medium circle @@ -98,6 +103,7 @@ Large circle
Small square {{#> skeleton skeleton--modifier="pf-m-square pf-m-width-sm"}} + {{#> screen-reader}}Loading square content{{/screen-reader}} {{/skeleton}}
Medium square @@ -110,6 +116,7 @@ Large square
Small rectangle {{#> skeleton skeleton--modifier="pf-m-height-sm pf-m-width-md"}} + {{#> screen-reader}}Loading rectangle content{{/screen-reader}} {{/skeleton}}
Medium rectangle diff --git a/src/patternfly/components/Table/examples/Table.md b/src/patternfly/components/Table/examples/Table.md index 5e0d2014ee..4bd2e80926 100644 --- a/src/patternfly/components/Table/examples/Table.md +++ b/src/patternfly/components/Table/examples/Table.md @@ -1405,6 +1405,185 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{/table-tr}} {{/table-thead}} + {{#> table-tbody table-tbody--modifier="pf-m-expanded"}} + {{#> table-tr table-tr--IsControlRow="true" table-tr--IsExpanded=true}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-1"')}} +  10 + {{/table-td}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--modifier="pf-m-expanded" table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-2"')}} +   + 234 + {{/table-td}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-3"')}} +   + 4 + {{/table-td}} + {{#> table-th table-th--data-label="Workspaces"}} + siemur/test-space + {{/table-th}} + {{#> table-td table-td--data-label="Last commit"}} + 20 minutes + {{/table-td}} + {{#> table-td table-td--data-label="Action"}} + Open in Github + {{/table-td}} + {{> table-cell-action}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} + {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} + {{> table-nested table--id=(concat table--id '-nested-table-2')}} + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true table-tr--IsExpanded=true}} + {{#> table-td table-td--attribute='colspan="7"'}} + {{#> table-expandable-row-content}} + 234 pull requests currently under review. + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} + {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} + {{> table-nested table--id=(concat table--id '-nested-table-3')}} + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + {{/table-tbody}} + + {{#> table-tbody}} + {{#> table-tr table-tr--IsControlRow="true"}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-4"')}} +   + 2 + {{/table-td}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-5"')}} +   + 82 + {{/table-td}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-6"')}} +   + 1 + {{/table-td}} + {{#> table-th table-th--data-label="Workspaces"}} + siemur/test-space + {{/table-th}} + {{#> table-td table-td--data-label="Last commit"}} + 1 day ago + {{/table-td}} + {{#> table-td table-td--data-label="Action"}} + Open in Github + {{/table-td}} + {{> table-cell-action}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} + {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} + {{> table-nested table--id=(concat table--id '-nested-table-4')}} + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"'}} + {{#> table-expandable-row-content}} + 82 pull requests currently under review. + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} + {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} + {{> table-nested table--id=(concat table--id '-nested-table-6')}} + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + {{/table-tbody}} + + {{#> table-tbody}} + {{#> table-tr table-tr--IsControlRow="true"}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-7"')}} +   + 4 + {{/table-td}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Branches" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-8"')}} +   + 4 + {{/table-td}} + {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--data-label="Pull requests" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-9"')}} +   + 1 + {{/table-td}} + {{#> table-th table-th--data-label="Workspaces"}} + siemur/test-space + {{/table-th}} + {{#> table-td table-td--data-label="Last commit"}} + 2 days ago + {{/table-td}} + {{#> table-td table-td--data-label="Action"}} + Open in Github + {{/table-td}} + {{> table-cell-action}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} + {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} + {{> table-nested table--id=(concat table--id '-nested-table-7')}} + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} + {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} + 4 pull requests currently under review. + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + + {{#> table-tr table-tr--IsExpandable=true}} + {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} + {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} + {{> table-nested table--id=(concat table--id '-nested-table-9')}} + {{/table-expandable-row-content}} + {{/table-td}} + {{/table-tr}} + {{/table-tbody}} +{{/table}} +``` + +### Compound expansion example with nested table +```hbs +{{#> table table--id="table-compound-expansion-nested-table" table--IsGrid=true table--modifier="pf-m-grid-md" table--IsExpandable=true table--attribute='aria-label="Compound expandable with nested table example"'}} + {{#> table-thead}} + {{#> table-tr}} + {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true table-th--IsSelected="true" table-th--IsAsc="true"}} + Repositories + {{/table-th}} + {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true}} + Branches + {{/table-th}} + {{#> table-th table-th--attribute='scope="col"' table-th--IsSortable=true}} + Pull requests + {{/table-th}} + {{#> table-th table-th--attribute='scope="col"'}} + Workspaces + {{/table-th}} + {{#> table-th table-th--attribute='scope="col"'}} + Last commit + {{/table-th}} + {{> table-cell-empty table-cell--text='Links'}} + {{> table-cell-empty}} + {{/table-tr}} + {{/table-thead}} + {{#> table-tbody table-tbody--modifier="pf-m-expanded"}} {{#> table-tr table-tr--IsControlRow="true" table-tr--IsExpanded=true}} {{#> table-td table-td--IsCompoundExpansionToggle=true table-td--modifier="pf-m-expanded" table-td--data-label="Repositories" table-td--button--attribute=(concat 'aria-expanded="true" aria-controls="' table--id '-nested-table-1"')}} @@ -1439,9 +1618,9 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{/table-tr}} {{#> table-tr table-tr--IsExpandable=true}} - {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} - {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-2')}} + {{#> table-td table-td--attribute='colspan="7"'}} + {{#> table-expandable-row-content}} + 234 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -1492,7 +1671,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-5')}} + 82 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -1543,7 +1722,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-8')}} + 4 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -1617,7 +1796,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-2')}} + 234 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -1664,7 +1843,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-5')}} + 82 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -1711,7 +1890,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-8')}} + 4 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -2737,7 +2916,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-2')}} + 234 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -2785,7 +2964,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-5')}} + 234 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -2836,7 +3015,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-8')}} + 82 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} @@ -2887,7 +3066,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in {{#> table-tr table-tr--IsExpandable=true}} {{#> table-td table-td--attribute='colspan="7"' table-td--modifier="pf-m-no-padding"}} {{#> table-expandable-row-content table-expandable-row-content--HasNoBackground=true}} - {{> table-nested table--id=(concat table--id '-nested-table-11')}} + 4 pull requests currently under review. {{/table-expandable-row-content}} {{/table-td}} {{/table-tr}} diff --git a/src/patternfly/components/Table/table.scss b/src/patternfly/components/Table/table.scss index 921d7593cb..2776a9608a 100644 --- a/src/patternfly/components/Table/table.scss +++ b/src/patternfly/components/Table/table.scss @@ -21,7 +21,8 @@ --#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold); // * Table thead toggle - --#{$table}__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs); + --#{$table}__thead__toggle--PaddingBlockStart: var(--#{$table}--cell--Padding--base); // TODO - remove thead toggle custom padding in breaking change + --#{$table}__thead__toggle--PaddingBlockEnd: var(--#{$table}--cell--Padding--base); // TODO - remove thead toggle custom padding in breaking change // * Table body cell --#{$table}__tbody--cell--PaddingBlockStart: var(--#{$table}--cell--Padding--base); @@ -95,6 +96,9 @@ --#{$table}__button--Color: var(--pf-t--global--text--color--regular); --#{$table}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --#{$table}__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1); + --#{$table}__button--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$table}__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$table}__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); --#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--small); --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular); --#{$table}__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover); @@ -142,6 +146,8 @@ --#{$table}__expandable-row-content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --#{$table}__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small); --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default); + --#{$table}__expandable-row-content--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$table}__expandable-row-content--BorderWidth: 0; // * Table control row --#{$table}__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default); @@ -181,12 +187,14 @@ // * Table compound expansion toggle button after --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked); + --#{$table}__compound-expansion-toggle__button--after--BorderRadius: inherit; --#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0; --#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong); --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong); // * Compound expandable --#{$table}--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); + --#{$table}--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular); // * Table compact th --#{$table}--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs)); @@ -733,6 +741,7 @@ // - Table button .#{$table}__button { + position: relative; width: auto; padding-block-start: var(--#{$table}__button--PaddingBlockStart); padding-block-end: var(--#{$table}__button--PaddingBlockEnd); @@ -751,6 +760,15 @@ border-radius: var(--#{$table}__button--BorderRadius); outline-offset: var(--#{$table}__button--OutlineOffset); + &::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ''; + border: var(--#{$table}__button--BorderWidth) solid var(--#{$table}__button--BorderColor); + border-radius: inherit; + } + // Table table table button .#{$table} .#{$table} & { margin-block-end: 0; // remove offset in nested tables @@ -835,13 +853,20 @@ --#{$table}--cell--PaddingInlineStart: var(--#{$table}__toggle--PaddingInlineStart); --#{$table}--cell--PaddingInlineEnd: var(--#{$table}__toggle--PaddingInlineEnd); + @at-root .#{$table}__thead & { + .#{$button} { + margin-block-start: calc(var(--#{$button}--PaddingBlockStart) * -1); + margin-block-end: calc(var(--#{$button}--PaddingBlockEnd) * -1); + line-height: 1lh; // set line-height instead of --LineHeight to avoid breaking the min-width calc for plain buttons + } + } + .#{$button} { &.pf-m-expanded .#{$table}__toggle-icon { transform: rotate(var(--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate)); } } - .#{$table}__toggle-icon { @include pf-v6-mirror-inline-on-rtl; @@ -968,6 +993,7 @@ content: ''; border: 0; border-block-start: var(--#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth) solid var(--#{$table}__compound-expansion-toggle__button--after--BorderColor); + border-radius: var(--#{$table}__compound-expansion-toggle__button--after--BorderRadius); } &:hover, @@ -997,6 +1023,10 @@ .#{$table}__column-help-action { align-self: last baseline; margin-inline-start: var(--#{$table}__column-help--MarginInlineStart); + + .#{$button} { + line-height: 1lh; // set line-height instead of --LineHeight to avoid breaking the min-width calc for plain buttons + } } // - Table sort @@ -1009,6 +1039,7 @@ --#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--hover__sort-indicator--Color); --#{$table}__sort__button__text--Color: var(--#{$table}__sort__button--hover__text--Color); --#{$table}__button--BackgroundColor: var(--#{$table}__button--hover--BackgroundColor); + --#{$table}__button--BorderWidth: var(--#{$table}__button--hover--BorderWidth); } // - Table text @@ -1084,11 +1115,13 @@ // - Table expandable row content .#{$table}__expandable-row-content { + position: relative; padding-block-start: var(--#{$table}__expandable-row-content--PaddingBlockStart); padding-block-end: var(--#{$table}__expandable-row-content--PaddingBlockEnd); padding-inline-start: var(--#{$table}__expandable-row-content--PaddingInlineStart); padding-inline-end: var(--#{$table}__expandable-row-content--PaddingInlineEnd); background-color: var(--#{$table}__expandable-row-content--BackgroundColor); + border: 0; border-radius: var(--#{$table}__expandable-row-content--BorderRadius); &.pf-m-no-background { @@ -1096,6 +1129,16 @@ } } + .#{$table}__td:not(.pf-m-no-padding) > .#{$table}__expandable-row-content::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--#{$table}__expandable-row-content--BorderWidth) solid var(--#{$table}__expandable-row-content--BorderColor); + border-radius: inherit; + } + + // - Table expandable row content expanded &.pf-m-expanded { border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor); @@ -1157,6 +1200,7 @@ // - Table thead .#{$table}__thead { --#{$table}__tr--BorderBlockEndWidth: 0; + --#{$table}__toggle--PaddingBlockStart: var(--#{$table}__thead__toggle--PaddingBlockStart); --#{$table}__toggle--PaddingBlockEnd: var(--#{$table}__thead__toggle--PaddingBlockEnd); vertical-align: bottom; @@ -1179,6 +1223,8 @@ // TODO: make this a class `compound expansion content` .#{$table}__control-row ~ .#{$table}__expandable-row.pf-m-expanded { + --#{$table}__expandable-row-content--BorderWidth: var(--#{$table}--compound-expansion--m-expanded--BorderWidth); + background-color: var(--#{$table}--compound-expansion--m-expanded--BackgroundColor); } } diff --git a/src/patternfly/components/Tabs/tabs.scss b/src/patternfly/components/Tabs/tabs.scss index 3ab1338022..b3f37d762d 100644 --- a/src/patternfly/components/Tabs/tabs.scss +++ b/src/patternfly/components/Tabs/tabs.scss @@ -66,6 +66,10 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl --#{$tabs}__link--FontSize: var(--pf-t--global--font--size--sm); --#{$tabs}__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --#{$tabs}__link--BorderRadius: var(--pf-t--global--border--radius--small); + --#{$tabs}__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$tabs}__link--BorderColor: transparent; + --#{$tabs}__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$tabs}__link--disabled--BorderColor: transparent; --#{$tabs}__link--PaddingBlockStart: var(--pf-t--global--spacer--xs); --#{$tabs}__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --#{$tabs}__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs); @@ -630,6 +634,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl color: var(--#{$tabs}__link--Color); text-decoration-line: none; background-color: var(--#{$tabs}__link--BackgroundColor); + border: var(--#{$tabs}__link--BorderWidth) solid var(--#{$tabs}__link--BorderColor); border-radius: var(--#{$tabs}__link--BorderRadius); transition: background-color var(--#{$tabs}__link--TransitionDuration--background-color) var(--#{$tabs}__link--TransitionTimingFunction--background-color); @@ -665,7 +670,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl &:where(:hover, :focus) { --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--hover--BackgroundColor); - } + --#{$tabs}__link--BorderColor: var(--#{$tabs}__link--hover--BorderColor); + } &:disabled, &.pf-m-disabled { @@ -685,6 +691,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl &:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) { --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__link--disabled--BackgroundColor); + --#{$tabs}__link--BorderColor: var(--#{$tabs}__link--disabled--BorderColor); } @at-root .#{$tabs}__item.pf-m-action.pf-m-disabled { diff --git a/src/patternfly/components/TextInputGroup/examples/TextInputGroup.md b/src/patternfly/components/TextInputGroup/examples/TextInputGroup.md index d54d023e57..53a606f722 100644 --- a/src/patternfly/components/TextInputGroup/examples/TextInputGroup.md +++ b/src/patternfly/components/TextInputGroup/examples/TextInputGroup.md @@ -12,7 +12,7 @@ import './TextInputGroup.css' {{#> text-input-group text-input-group--id="text-input-group-basic"}} {{#> text-input-group-main}} {{#> text-input-group-text}} - {{> text-input-group-text-input}} + {{> text-input-group-text-input text-input-group-text-input--aria-label="Basic"}} {{/text-input-group-text}} {{/text-input-group-main}} {{/text-input-group}} @@ -23,7 +23,7 @@ import './TextInputGroup.css' {{#> text-input-group text-input-group--id="text-input-group-disabled" text-input-group--IsDisabled="true"}} {{#> text-input-group-main}} {{#> text-input-group-text}} - {{> text-input-group-text-input}} + {{> text-input-group-text-input text-input-group-text-input--aria-label="Disabled"}} {{/text-input-group-text}} {{/text-input-group-main}} {{/text-input-group}} @@ -40,7 +40,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group text-input-group--id="text-input-group-plain" text-input-group--modifier="pf-m-plain" text-input-group--value="Text input group with plain styling"}} {{#> text-input-group-main}} {{#> text-input-group-text}} - {{> text-input-group-text-input}} + {{> text-input-group-text-input text-input-group-text-input--aria-label="Plain"}} {{/text-input-group-text}} {{/text-input-group-main}} {{/text-input-group}} @@ -52,11 +52,11 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group-main text-input-group-main--modifier="pf-m-icon"}} {{#> text-input-group-text}} {{> text-input-group-icon}} - {{> text-input-group-text-input text-input-group-text-input--placeholder='placeholder'}} + {{> text-input-group-text-input text-input-group-text-input--placeholder='placeholder' text-input-group-text-input--aria-label="Utilities and icon with placeholder"}} {{/text-input-group-text}} {{/text-input-group-main}} {{#> text-input-group-utilities}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Clear input"'}} + {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Clear utilities and icon with placeholder example"'}} {{/text-input-group-utilities}} {{/text-input-group}} ``` @@ -67,7 +67,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group text-input-group--IsSuccess=true text-input-group--id="text-input-group-validation-success"}} {{#> text-input-group-main}} {{#> text-input-group-text}} - {{> text-input-group-text-input text-input-group--value="Success validation"}} + {{> text-input-group-text-input text-input-group--value="Success validation" text-input-group-text-input--aria-label="Success validation"}} {{> text-input-group-icon text-input-group-icon--IsStatus=true}} {{/text-input-group-text}} {{/text-input-group-main}} @@ -77,7 +77,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group-main text-input-group-main--modifier="pf-m-icon"}} {{#> text-input-group-text}} {{> text-input-group-icon}} - {{> text-input-group-text-input text-input-group--value="Warning validation with icon at start"}} + {{> text-input-group-text-input text-input-group--value="Warning validation with icon at start" text-input-group-text-input--aria-label="Warning validation"}} {{> text-input-group-icon text-input-group-icon--IsStatus=true}} {{/text-input-group-text}} {{/text-input-group-main}} @@ -87,7 +87,22 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group-main text-input-group-main--modifier="pf-m-icon"}} {{#> text-input-group-text}} {{> text-input-group-icon}} - {{> text-input-group-text-input text-input-group--value="Error validation with icon at start and utilities"}} + {{> text-input-group-text-input text-input-group--value="Error validation with icon at start and utilities" text-input-group-text-input--aria-label="Error validation"}} + {{> text-input-group-icon text-input-group-icon--IsStatus=true}} + {{/text-input-group-text}} + {{/text-input-group-main}} + {{#> text-input-group-utilities}} + {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Clear error validation example"'}} + + {{/button}} + {{/text-input-group-utilities}} +{{/text-input-group}} + +
+{{#> text-input-group text-input-group--IsError=true text-input-group--id="text-input-group-validation-error"}} + {{#> text-input-group-main }} + {{#> text-input-group-text}} + {{> text-input-group-text-input text-input-group--value="Error validation with no icon but with utilities"}} {{> text-input-group-icon text-input-group-icon--IsStatus=true}} {{/text-input-group-text}} {{/text-input-group-main}} @@ -105,11 +120,11 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group-main}} {{> text-input-group--label-group}} {{#> text-input-group-text}} - {{> text-input-group-text-input}} + {{> text-input-group-text-input text-input-group-text-input--aria-label="Filters"}} {{/text-input-group-text}} {{/text-input-group-main}} {{#> text-input-group-utilities}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Clear input"'}} + {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Clear filter example"'}} {{/text-input-group-utilities}} {{/text-input-group}} ``` @@ -120,11 +135,11 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group-main}} {{> text-input-group--label-group}} {{#> text-input-group-text}} - {{> text-input-group-text-input}} + {{> text-input-group-text-input text-input-group-text-input--aria-label="Filters expanded"}} {{/text-input-group-text}} {{/text-input-group-main}} {{#> text-input-group-utilities}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Clear input"'}} + {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Clear filters expanded example"'}} {{/text-input-group-utilities}} {{/text-input-group}} ``` @@ -134,7 +149,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper {{#> text-input-group text-input-group--id="text-input-group-autocomplete-last-option-hint" text-input-group--value="apples"}} {{#> text-input-group-main}} {{#> text-input-group-text}} - {{> text-input-group-text-input text-input-group-text-input--hint-text="appleseed" }} + {{> text-input-group-text-input text-input-group-text-input--hint-text="appleseed" text-input-group-text-input--aria-label="Autocomplete with last option hint"}} {{> text-input-group-text-input}} {{/text-input-group-text}} {{/text-input-group-main}} @@ -146,22 +161,22 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper The React implementation can be found in the [search input](/components/search-input) component. ```hbs -{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group" text-input-group-text-input--placeholder="Find by name"}} +{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group" text-input-group-text-input--placeholder="Find by name" text-input-group--search-input--aria-label="Search input group"}} ``` ### Search input group, no match ```hbs -{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-no-match" text-input-group-text-input--placeholder="Find by name" text-input-group--value="Joh"}} +{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-no-match" text-input-group-text-input--placeholder="Find by name" text-input-group--value="Joh" text-input-group--search-input--aria-label="Search input group no match" text-input-group--search-input--clear-button-aria-label="Clear search input group no match"}} ``` ### Search input group, match with result count ```hbs -{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-result-count" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="3"}} +{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-result-count" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="3" text-input-group--search-input--aria-label="Search input group match with result count" text-input-group--search-input--clear-button-aria-label="Clear search input group match with result count"}} ``` ### Search input group, match with navigable options ```hbs -{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-navigable-options" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="1 / 3" text-input-group--search-input--IsFirstMatch="true"}} +{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-match-with-navigable-options" text-input-group-text-input--placeholder="Find by name" text-input-group--value="John Doe" text-input-group--search-input--count="1 / 3" text-input-group--search-input--IsFirstMatch=true text-input-group--search-input--IsNavigable=true text-input-group--search-input--aria-label="Search input group match with navigable options" text-input-group--search-input--clear-button-aria-label="Clear search input group match with navigable options"}} ``` ### Search input group, expandable @@ -170,13 +185,13 @@ The React implementation can be found in the [search input](/components/search-i
{{#> input-group input-group--IsPlain=true input-group--IsSearchExpandable=true}} {{#> input-group-item input-group-item--IsSearchInput=true}} - {{> text-input-group--search-input text-input-group-text-input--placeholder="Search"}} + {{> text-input-group--search-input text-input-group-text-input--placeholder="Search" text-input-group--search-input--aria-label="Search input group collapsed"}} {{/input-group-item}} {{#> input-group-item input-group-item--IsPlain=true input-group-item--IsSearchExpand=true}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="search fa-fw" button--attribute='aria-label="Open search"'}} + {{> button button--IsPlain=true button--IsIcon=true button--icon="search fa-fw" button--attribute='aria-label="Open search input group collapsed"'}} {{/input-group-item}} {{#> input-group-item input-group-item--IsPlain=true input-group-item--IsSearchAction=true}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Close"'}} + {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Close search input group expandable"'}} {{/input-group-item}} {{/input-group}}
@@ -185,13 +200,13 @@ The React implementation can be found in the [search input](/components/search-i
{{#> input-group input-group--IsPlain=true input-group--IsSearchExpandable=true input-group--IsExpanded=true}} {{#> input-group-item input-group-item--IsSearchInput=true}} - {{> text-input-group--search-input text-input-group-text-input--placeholder="Search"}} + {{> text-input-group--search-input text-input-group-text-input--placeholder="Search" text-input-group--search-input--aria-label="Search input group expanded" text-input-group--search-input--clear-button-aria-label="Clear search input group expandable"}} {{/input-group-item}} {{#> input-group-item input-group-item--IsPlain=true input-group-item--IsSearchExpand=true}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="search fa-fw" button--attribute='aria-label="Open search"'}} + {{> button button--IsPlain=true button--IsIcon=true button--icon="search fa-fw" button--attribute='aria-label="Open search input group collapsed"'}} {{/input-group-item}} {{#> input-group-item input-group-item--IsPlain=true input-group-item--IsSearchAction=true}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Close"'}} + {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Close search input group expandable"'}} {{/input-group-item}} {{/input-group}} ``` @@ -200,10 +215,10 @@ The React implementation can be found in the [search input](/components/search-i ```hbs {{#> input-group}} {{#> input-group-item input-group-item--IsFill=true}} - {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-with-submit-button" text-input-group-text-input--placeholder="Find by name"}} + {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-with-submit-button" text-input-group-text-input--placeholder="Find by name" text-input-group--search-input--aria-label="Search input group with submit button"}} {{/input-group-item}} {{#> input-group-item}} - {{> button button--IsControl=true button--IsIcon=true button--icon="arrow-right" button--attribute='aria-label="Search"' button--IsSubmit="true"}} + {{> button button--IsControl=true button--IsIcon=true button--icon="arrow-right" button--attribute='aria-label="Submit search input group"' button--IsSubmit="true"}} {{/input-group-item}} {{/input-group}} ``` @@ -212,13 +227,13 @@ The React implementation can be found in the [search input](/components/search-i ```hbs {{#> input-group}} {{#> input-group-item input-group-item--IsFill=true}} - {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-advanced-search" text-input-group--value="username:root firstname:ned"}} + {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-advanced-search" text-input-group--value="username:root firstname:ned" text-input-group--search-input--aria-label="Search input group advanced search" text-input-group--search-input--clear-button-aria-label="Clear advance search input group collapsed"}} {{/input-group-item}} {{#> input-group-item}} - {{> button button--IsControl=true button--IsIcon=true button--icon="caret-down" button--attribute='aria-expanded="false" aria-label="Advanced search"'}} + {{> button button--IsControl=true button--IsIcon=true button--icon="caret-down" button--attribute='aria-expanded="false" aria-label="Advanced search collapsed"'}} {{/input-group-item}} {{#> input-group-item}} - {{> button button--IsControl=true button--IsIcon=true button--icon="arrow-right" button--attribute='aria-label="Search"' button--IsSubmit="true"}} + {{> button button--IsControl=true button--IsIcon=true button--icon="arrow-right" button--attribute='aria-label="Search advance search input group collapsed"' button--IsSubmit="true"}} {{/input-group-item}} {{/input-group}} ``` @@ -227,7 +242,7 @@ The React implementation can be found in the [search input](/components/search-i ```hbs {{#> input-group}} {{#> input-group-item input-group-item--IsFill=true}} - {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-advanced-search-expanded" text-input-group--value="username:root firstname:ned"}} + {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-advanced-search-expanded" text-input-group--value="username:root firstname:ned" text-input-group--search-input--aria-label="Search input group advanced search expanded" text-input-group--search-input--clear-button-aria-label="Clear advance search input group expanded"}} {{/input-group-item}} {{#> input-group-item}} {{> button @@ -235,14 +250,14 @@ The React implementation can be found in the [search input](/components/search-i button--IsIcon=true button--icon="caret-down" button--IsExpanded=true - button--aria-label="Advanced search"}} + button--aria-label="Advanced search expanded"}} {{/input-group-item}} {{#> input-group-item}} {{> button button--IsControl=true button--IsIcon=true button--icon="arrow-right" - button--aria-label="Search" + button--aria-label="Search advance search input group expanded" button--IsSubmit="true"}} {{/input-group-item}} {{/input-group}} @@ -293,10 +308,10 @@ The React implementation can be found in the [search input](/components/search-i {{/form-group}} {{#> form-group form-group--modifier="pf-m-action"}} {{#> form-actions}} - {{#> button button--IsPrimary=true button--IsSubmit=true}} + {{#> button button--id="submit-advanced-search-expanded" button--IsPrimary=true button--IsSubmit=true button--aria-labelledby="submit-advanced-search-expanded search-input-group-advanced-search-expanded"}} Submit {{/button}} - {{#> button button--IsLink=true button--IsReset=true}} + {{#> button button--id="reset-advanced-search-expanded" button--IsLink=true button--IsReset=true button--aria-labelledby="reset-advanced-search-expanded search-input-group-advanced-search-expanded"}} Reset {{/button}} {{/form-actions}} @@ -309,7 +324,7 @@ The React implementation can be found in the [search input](/components/search-i ### Search input group, autocomplete ```hbs -{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-autocomplete" text-input-group--value="app"}} +{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-autocomplete" text-input-group--value="app" text-input-group--search-input--aria-label="Search input group autocomplete" text-input-group--search-input--clear-button-aria-label="Clear autocomplete search input group"}} {{#> menu}} {{#> menu-content}} @@ -357,7 +372,7 @@ The React implementation can be found in the [search input](/components/search-i ### Search input group, autocomplete last option hint ```hbs -{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-autocomplete-last-option-hint" text-input-group--value="app" text-input-group-text-input--hint-text="appleseed"}} +{{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-autocomplete-last-option-hint" text-input-group--value="app" text-input-group-text-input--hint-text="appleseed" text-input-group--search-input--aria-label="Search input group autocomplete last option hint" text-input-group--search-input--clear-button-aria-label="Clear autocomple search input group last option hint"}} {{#> menu}} {{#> menu-content}} @@ -381,7 +396,7 @@ The React implementation can be found in the [search input](/components/search-i
{{#> input-group}} {{#> input-group-item input-group-item--IsFill=true}} - {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-advanced-search-expanded-autocomplete" text-input-group--value="username:root firstname:n"}} + {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group-advanced-search-expanded-autocomplete" text-input-group--value="username:root firstname:n" text-input-group--search-input--aria-label="Search input group advanced search expanded with autocomplete" text-input-group--search-input--clear-button-aria-label="Clear advance search input group expanded with autocomplete"}} {{/input-group-item}} {{#> input-group-item}} {{> button @@ -389,14 +404,14 @@ The React implementation can be found in the [search input](/components/search-i button--IsIcon=true button--icon="caret-down" button--IsExpanded=true - button--aria-label="Advanced search"}} + button--aria-label="Advanced search expanded with autocomplete"}} {{/input-group-item}} {{#> input-group-item}} {{> button button--IsControl=true button--IsIcon=true button--icon="arrow-right" - button--aria-label="Search" + button--aria-label="Search advanced search input group expanded with autocomplete" button--IsSubmit="true"}} {{/input-group-item}} {{/input-group}} @@ -447,10 +462,10 @@ The React implementation can be found in the [search input](/components/search-i {{/form-group}} {{#> form-group form-group--modifier="pf-m-action"}} {{#> form-actions}} - {{#> button button--IsPrimary=true button--IsSubmit=true}} + {{#> button button--id="submit-advanced-search-expanded-with-autocomplete" button--IsPrimary=true button--IsSubmit=true button--aria-labelledby="submit-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"}} Submit {{/button}} - {{#> button button--IsLink=true button--IsReset=true}} + {{#> button button--id="reset-advanced-search-expanded-with-autocomplete" button--IsLink=true button--IsReset=true button--IsSubmit=true button--aria-labelledby="reset-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"}} Reset {{/button}} {{/form-actions}} diff --git a/src/patternfly/components/TextInputGroup/text-input-group--search-input.hbs b/src/patternfly/components/TextInputGroup/text-input-group--search-input.hbs index 6bd24b7206..d54bc6bae1 100644 --- a/src/patternfly/components/TextInputGroup/text-input-group--search-input.hbs +++ b/src/patternfly/components/TextInputGroup/text-input-group--search-input.hbs @@ -2,13 +2,22 @@ {{#> text-input-group-main text-input-group-main--modifier="pf-m-icon"}} {{#> text-input-group-text}} {{> text-input-group-icon}} - {{> text-input-group-text-input text-input-group-text-input--aria-label="Search input"}} + {{> text-input-group-text-input text-input-group-text-input--aria-label=(ternary text-input-group--search-input--aria-label text-input-group--search-input--aria-label 'Search input') }} {{/text-input-group-text}} {{/text-input-group-main}} {{#if text-input-group--value}} {{#> text-input-group-utilities}} {{#if text-input-group--search-input--count}} - {{> badge badge--modifier="pf-m-read" badge--text=text-input-group--search-input--count}} + {{#> badge badge--modifier="pf-m-read"}} + + {{#> screen-reader}} + {{#if text-input-group--search-input--IsNavigable}} + Showing result {{text-input-group--search-input--count}} + {{else}} + {{text-input-group--search-input--count}} matching results + {{/if}} + {{/screen-reader}} + {{/badge}} {{#if text-input-group--search-input--IsNavigable}} {{#> text-input-group-group}} {{> button @@ -26,7 +35,12 @@ {{/text-input-group-group}} {{/if}} {{/if}} - {{> button button--IsPlain=true button--IsIcon=true button--icon="times fa-fw" button--attribute='aria-label="Clear input"'}} + {{> button + button--IsPlain=true + button--IsIcon=true + button--icon="times fa-fw" + button--aria-label=(ternary text-input-group--search-input--clear-button-aria-label text-input-group--search-input--clear-button-aria-label "Clear input") + }} {{/text-input-group-utilities}} {{/if}} {{/text-input-group}} diff --git a/src/patternfly/components/TextInputGroup/text-input-group.scss b/src/patternfly/components/TextInputGroup/text-input-group.scss index 3f5c171ae7..91ab046766 100644 --- a/src/patternfly/components/TextInputGroup/text-input-group.scss +++ b/src/patternfly/components/TextInputGroup/text-input-group.scss @@ -44,6 +44,7 @@ --#{$text-input-group}__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default); --#{$text-input-group}__text-input--MinWidth: 12ch; --#{$text-input-group}__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder); + --#{$text-input-group}__text-input--Color: var(--pf-t--global--text--color--regular); --#{$text-input-group}__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder); --#{$text-input-group}__text-input--BackgroundColor: transparent; --#{$text-input-group}__text-input--OutlineOffset: -6px; @@ -97,6 +98,8 @@ &.pf-m-disabled { --#{$text-input-group}--Color: var(--#{$text-input-group}--m-disabled--Color); + --#{$text-input-group}__text-input--Color: var(--#{$text-input-group}--m-disabled--Color); + --#{$text-input-group}__text-input--placeholder--Color: var(--#{$text-input-group}--m-disabled--Color); --#{$text-input-group}__icon--Color: var(--#{$text-input-group}--m-disabled__icon--Color); --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}--m-disabled__icon--m-status--Color); --#{$text-input-group}--BackgroundColor: var(--#{$text-input-group}--m-disabled--BackgroundColor); @@ -144,6 +147,10 @@ &:where(.pf-m-success, .pf-m-warning, .pf-m-error) { --#{$text-input-group}__text-input--PaddingInlineEnd: var(--#{$text-input-group}--status__text-input--PaddingInlineEnd); + + & .pf-v6-c-text-input-group__text { + --#{$text-input-group}__text--Position: relative; + } } &:has(> .#{$text-input-group}__utilities) { @@ -213,6 +220,7 @@ padding-block-end: var(--#{$text-input-group}__text-input--PaddingBlockEnd); padding-inline-start: var(--#{$text-input-group}__text-input--PaddingInlineStart); padding-inline-end: var(--#{$text-input-group}__text-input--PaddingInlineEnd); + color: var(--#{$text-input-group}__text-input--Color); background-color: var(--#{$text-input-group}__text-input--BackgroundColor); border: 0; outline-offset: var(--#{$text-input-group}__text-input--OutlineOffset); @@ -246,4 +254,3 @@ .#{$text-input-group}__group { display: flex; } - diff --git a/src/patternfly/components/Title/examples/Title.md b/src/patternfly/components/Title/examples/Title.md index c3f0874c32..f3db9ee390 100644 --- a/src/patternfly/components/Title/examples/Title.md +++ b/src/patternfly/components/Title/examples/Title.md @@ -29,22 +29,22 @@ cssPrefix: pf-v6-c-title ### Heading level modifiers ```hbs -{{#> title titleType="div" title--modifier="pf-m-h1"}} +{{#> title titleType="h1" title--modifier="pf-m-h1"}} H1-styled title {{/title}} -{{#> title titleType="div" title--modifier="pf-m-h2"}} +{{#> title titleType="h2" title--modifier="pf-m-h2"}} H2-styled title {{/title}} -{{#> title titleType="div" title--modifier="pf-m-h3"}} +{{#> title titleType="h3" title--modifier="pf-m-h3"}} H3-styled title {{/title}} -{{#> title titleType="div" title--modifier="pf-m-h4"}} +{{#> title titleType="h4" title--modifier="pf-m-h4"}} H4-styled title {{/title}} -{{#> title titleType="div" title--modifier="pf-m-h5"}} +{{#> title titleType="h5" title--modifier="pf-m-h5"}} H5-styled title {{/title}} -{{#> title titleType="div" title--modifier="pf-m-h6"}} +{{#> title titleType="h6" title--modifier="pf-m-h6"}} H6-styled title {{/title}} ``` @@ -55,7 +55,7 @@ cssPrefix: pf-v6-c-title 2xl page title {{/title}} -{{#> title titleType="div" title--modifier="pf-m-h1" title--IsPageTitle=true}} +{{#> title titleType="h1" title--modifier="pf-m-h1" title--IsPageTitle=true}} H1 page title {{/title}} ``` @@ -78,7 +78,7 @@ The content component defines margin on headers. To regain the same spacing use, ### Usage | Class | Applied | Outcome | | -- | -- | -- | -| `.pf-v6-c-title` | `*` | Initiates a title. Always use it with a modifier class. | +| `.pf-v6-c-title` | `h1-h6` | Initiates a title. Always use it with a modifier class. | | `.pf-m-4xl` | `.pf-v6-c-title` | Modifies for 4xl size | | `.pf-m-3xl` | `.pf-v6-c-title` | Modifies for 3xl size | | `.pf-m-2xl` | `.pf-v6-c-title` | Modifies for 2xl size | diff --git a/src/patternfly/components/TreeView/tree-view.scss b/src/patternfly/components/TreeView/tree-view.scss index 91cc9d0e09..e75826e3d0 100644 --- a/src/patternfly/components/TreeView/tree-view.scss +++ b/src/patternfly/components/TreeView/tree-view.scss @@ -17,6 +17,11 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default; --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}__node--indent--base); --#{$tree-view}__node--Color: var(--pf-t--global--text--color--subtle); --#{$tree-view}__node--BackgroundColor: transparent; + --#{$tree-view}__node--BorderRadius: var(--#{$tree-view}__content--BorderRadius); + --#{$tree-view}__node--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$tree-view}__node--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$tree-view}__node--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$tree-view}__node--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); --#{$tree-view}__node--m-current--Color: var(--pf-t--global--text--color--regular); --#{$tree-view}__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked); --#{$tree-view}__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); @@ -407,8 +412,18 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default; color: var(--#{$tree-view}__node--Color); background-color: var(--#{$tree-view}__node--BackgroundColor); + &::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--#{$tree-view}__node--BorderWidth) solid var(--#{$tree-view}__node--BorderColor); + border-radius: var(--#{$tree-view}__node--BorderRadius); + } + &.pf-m-current { --#{$tree-view}__node--Color: var(--#{$tree-view}__node--m-current--Color); + --#{$tree-view}__node--BorderWidth: var(--#{$tree-view}__node--m-current--BorderWidth); } .#{$tree-view}__node-count { @@ -514,6 +529,8 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default; .#{$tree-view}__content:hover, .#{$tree-view}__content:focus-within { + --#{$tree-view}__node--BorderWidth: var(--#{$tree-view}__node--hover--BorderWidth); + background-color: var(--#{$tree-view}__node--hover--BackgroundColor); } diff --git a/src/patternfly/components/Wizard/examples/Wizard.md b/src/patternfly/components/Wizard/examples/Wizard.md index d6db2d621d..8299ea423e 100644 --- a/src/patternfly/components/Wizard/examples/Wizard.md +++ b/src/patternfly/components/Wizard/examples/Wizard.md @@ -479,6 +479,15 @@ import './Wizard.css' {{> wizard--status wizard--status--IsExpanded=true wizard--status--id="success-on-step-nav-expanded" wizard--status--IsSuccess=true}} ``` +### Warning on step +```hbs isFullscreen +{{> wizard--status wizard--status--id="warning-on-step" wizard--status--IsWarning=true}} +``` + +### Nav expanded with warning (mobile) +```hbs isFullscreen +{{> wizard--status wizard--status--IsExpanded=true wizard--status--id="warning-on-step-nav-expanded" wizard--status--IsWarning=true}} +``` ## Documentation ### Accessibility @@ -534,5 +543,6 @@ import './Wizard.css' | `.pf-m-current` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the current state. **Required** | | `.pf-m-disabled` | `.pf-v6-c-wizard__nav-link` | Modifies a step link for the disabled state. | | `.pf-m-success` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate success status. | +| `.pf-m-warning` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate warning status. | | `.pf-m-danger` | `.pf-v6-c-wizard__nav-link`, `.pf-v6-c-wizard__toggle-list-item` | Modifies a step link to indicate danger status. | | `.pf-m-no-padding` | `.pf-v6-c-wizard__main-body` | Modifies the main container body to remove the padding. | diff --git a/src/patternfly/components/Wizard/wizard--status.hbs b/src/patternfly/components/Wizard/wizard--status.hbs index 6d3942b35c..a10731fd78 100644 --- a/src/patternfly/components/Wizard/wizard--status.hbs +++ b/src/patternfly/components/Wizard/wizard--status.hbs @@ -8,7 +8,7 @@ {{/wizard-header}} {{#> wizard-toggle}} {{#> wizard-toggle-list}} - {{#> wizard-toggle-list-item wizard-toggle-list-item--IsSuccess=wizard--status--IsSuccess wizard-toggle-list-item--IsDanger=wizard--status--IsDanger}} + {{#> wizard-toggle-list-item wizard-toggle-list-item--IsSuccess=wizard--status--IsSuccess wizard-toggle-list-item--IsDanger=wizard--status--IsDanger wizard-toggle-list-item--IsWarning=wizard--status--IsWarning}} Configuration {{> wizard-toggle-separator}} {{/wizard-toggle-list-item}} @@ -27,7 +27,7 @@ Information {{/wizard-nav-link}} {{/wizard-nav-item}} - {{#> wizard-nav-item wizard-nav-item--IsExpandable="true" wizard-nav-item--IsExpanded="true" wizard-nav-item--IsSuccess=wizard--status--IsSuccess wizard-nav-item--IsDanger=wizard--status--IsDanger}} + {{#> wizard-nav-item wizard-nav-item--IsExpandable="true" wizard-nav-item--IsExpanded="true" wizard-nav-item--IsSuccess=wizard--status--IsSuccess wizard-nav-item--IsDanger=wizard--status--IsDanger wizard-nav-item--IsWarning=wizard--status--IsWarning}} {{#> wizard-nav-link wizard-nav-link--modifier="pf-m-current"}} Configuration {{/wizard-nav-link}} diff --git a/src/patternfly/components/Wizard/wizard-nav-link-status-icon.hbs b/src/patternfly/components/Wizard/wizard-nav-link-status-icon.hbs index 4c3597d4f4..efa970c826 100644 --- a/src/patternfly/components/Wizard/wizard-nav-link-status-icon.hbs +++ b/src/patternfly/components/Wizard/wizard-nav-link-status-icon.hbs @@ -2,5 +2,5 @@ {{#if wizard-nav-link-status-icon--attribute}} {{{wizard-nav-link-status-icon--attribute}}} {{/if}}> - + diff --git a/src/patternfly/components/Wizard/wizard-nav-link.hbs b/src/patternfly/components/Wizard/wizard-nav-link.hbs index e8c9f2155a..e1547b9bf0 100644 --- a/src/patternfly/components/Wizard/wizard-nav-link.hbs +++ b/src/patternfly/components/Wizard/wizard-nav-link.hbs @@ -5,6 +5,9 @@ {{~#if wizard-nav-item--IsSuccess}} pf-m-success {{/if}} + {{~#if wizard-nav-item--IsWarning}} + pf-m-warning + {{/if}} {{~#if wizard-nav-item--IsDanger}} pf-m-danger {{/if}} @@ -40,7 +43,7 @@ {{#if wizard-nav-link--attribute}} {{{wizard-nav-link--attribute}}} {{/if}}> - {{#ifAny wizard-nav-item--IsSuccess wizard-nav-item--IsDanger}} + {{#ifAny wizard-nav-item--IsSuccess wizard-nav-item--IsDanger wizard-nav-item--IsWarning}} {{> wizard-nav-link-status-icon}} {{/ifAny}} {{#> wizard-nav-link-main}} diff --git a/src/patternfly/components/Wizard/wizard-toggle-list-item.hbs b/src/patternfly/components/Wizard/wizard-toggle-list-item.hbs index 53363dc4e0..c25da0c5b1 100644 --- a/src/patternfly/components/Wizard/wizard-toggle-list-item.hbs +++ b/src/patternfly/components/Wizard/wizard-toggle-list-item.hbs @@ -1,11 +1,12 @@ - {{#ifAny wizard-toggle-list-item--IsSuccess wizard-toggle-list-item--IsDanger}} + {{#ifAny wizard-toggle-list-item--IsSuccess wizard-toggle-list-item--IsDanger wizard-toggle-list-item--IsWarning}} {{> wizard-toggle-status-icon}} {{/ifAny}} {{> @partial-block}} diff --git a/src/patternfly/components/Wizard/wizard-toggle-status-icon.hbs b/src/patternfly/components/Wizard/wizard-toggle-status-icon.hbs index 7b6471b804..c13350c61e 100644 --- a/src/patternfly/components/Wizard/wizard-toggle-status-icon.hbs +++ b/src/patternfly/components/Wizard/wizard-toggle-status-icon.hbs @@ -2,5 +2,5 @@ {{#if wizard-toggle-status-icon--attribute}} {{{wizard-toggle-status-icon--attribute}}} {{/if}}> - + diff --git a/src/patternfly/components/Wizard/wizard.scss b/src/patternfly/components/Wizard/wizard.scss index c41f18b788..31e52b69cd 100644 --- a/src/patternfly/components/Wizard/wizard.scss +++ b/src/patternfly/components/Wizard/wizard.scss @@ -58,6 +58,10 @@ --#{$wizard}__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --#{$wizard}__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --#{$wizard}__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small); + --#{$wizard}__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$wizard}__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default); + --#{$wizard}__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover); + --#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked); // Nav link toggle icon --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm); @@ -73,17 +77,22 @@ --#{$wizard}__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl); --#{$wizard}__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm); --#{$wizard}__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default); + --#{$wizard}__nav-link--before--BorderColor: var(--pf-t--global--border--color--high-contrast); + --#{$wizard}__nav-link--before--BorderWidth: var(--pf-t--global--border--width--regular); --#{$wizard}__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large); --#{$wizard}__nav-link--before--Color: var(--pf-t--global--text--color--regular); --#{$wizard}__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default); --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default); --#{$wizard}__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default); + --#{$wizard}__nav-link--m-current--before--BorderColor: transparent; --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent; --#{$wizard}__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled); + --#{$wizard}__nav-link--m-disabled--before--BorderColor: transparent; // Nav link status icon --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular); --#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default); + --#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default); --#{$wizard}__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default); --#{$wizard}__nav-link-status-icon--InsetBlockStart: 4px; // not spacer-based but needed to align --#{$wizard}__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl); @@ -110,6 +119,7 @@ --#{$wizard}__nav-link-status-icon--LineHeight: 1; --#{$wizard}__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular); --#{$wizard}__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default); + --#{$wizard}__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default); --#{$wizard}__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default); --#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align --#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl); @@ -302,6 +312,10 @@ --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-danger__status-icon--Color); } + &.pf-m-warning { + --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-warning__status-icon--Color); + } + &.pf-m-success { --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-success__status-icon--Color); } @@ -452,6 +466,7 @@ &::before { position: relative; display: inline-flex; + flex-shrink: 0; align-items: center; justify-content: center; width: var(--#{$wizard}__nav-link--before--Width); @@ -465,22 +480,25 @@ // Nav step number &::before { - inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable + inset-block-start: var(--#{$wizard}__nav-link--before--InsetBlockStart); // 8px; // TODO variable content: counter(wizard-nav-count); -} + border: var(--#{$wizard}__nav-link--before--BorderWidth) solid var(--#{$wizard}__nav-link--before--BorderColor); + } &.pf-m-current { --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--m-current--Color); --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--m-current--BackgroundColor); + --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--m-current__nav-link-main--BorderWidth); @at-root .#{$wizard}__toggle-num, &::before { --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-current--before--BackgroundColor); --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-current--before--Color); + --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-current--before--BorderColor); } } - &:is(.pf-m-success, .pf-m-danger) { + &:is(.pf-m-success, .pf-m-warning, .pf-m-danger) { &::before { display: none; } @@ -490,6 +508,10 @@ --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-success__nav-link-status-icon--Color); } + &.pf-m-warning { + --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color); + } + &.pf-m-danger { --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color); } @@ -497,6 +519,7 @@ &:where(:hover, :focus) { --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color); --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor); + --#{$wizard}__nav-link-main--BorderWidth: var(--#{$wizard}__nav-link--hover__nav-link-main--BorderWidth); } // override the button background/color for disabled nav links @@ -510,24 +533,31 @@ &::before { --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$wizard}__nav-link--m-disabled--before--BackgroundColor); --#{$wizard}__nav-link--before--Color: var(--#{$wizard}__nav-link--m-disabled--before--Color); + --#{$wizard}__nav-link--before--BorderColor: var(--#{$wizard}__nav-link--m-disabled--before--BorderColor); } } } -.#{$wizard}__nav-link-text { - flex-grow: 1; -} - .#{$wizard}__nav-link-main { + position: relative; display: flex; + flex-grow: 1; justify-content: space-between; padding-block-start: var(--#{$wizard}__nav-link-main--PaddingBlockStart); padding-block-end: var(--#{$wizard}__nav-link-main--PaddingBlockEnd); padding-inline-start: var(--#{$wizard}__nav-link-main--PaddingInlineStart); padding-inline-end: var(--#{$wizard}__nav-link-main--PaddingInlineEnd); background-color: var(--#{$wizard}__nav-link-main--BackgroundColor); - border: none; border-radius: var(--#{$wizard}__nav-link-main--BorderRadius); + + &::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border: var(--#{$wizard}__nav-link-main--BorderWidth) solid var(--#{$wizard}__nav-link-main--BorderColor); + border-radius: inherit; + } } .#{$wizard}__nav-link-status-icon { diff --git a/src/patternfly/demos/Card/examples/Card.md b/src/patternfly/demos/Card/examples/Card.md index c6fefb074f..1a26d5b8db 100644 --- a/src/patternfly/demos/Card/examples/Card.md +++ b/src/patternfly/demos/Card/examples/Card.md @@ -177,7 +177,7 @@ import './Card.css' {{/title}} {{/card-title}} {{#> card-body}} - {{#> description-list}} + {{#> description-list description-list--aria-label="API 1"}} {{#> description-list-group}} {{#> description-list-term}} Cluster API Address @@ -232,7 +232,7 @@ import './Card.css' {{/title}} {{/card-title}} {{#> card-body}} - {{#> description-list}} + {{#> description-list description-list--aria-label="API 2" }} {{#> description-list-group}} {{#> description-list-term}} Cluster API Address @@ -547,7 +547,8 @@ import './Card.css' {{/card-body}} {{#> card-body}} {{#> tab-content tab-content--IsActive="true" tab-content--attribute=(concat 'id="' primary-detail-template--id '-tab1-panel"')}} - {{#> description-list description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg"}} + {{#> description-list + description-list--aria-label="Status" description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg"}} {{#> description-list-group}} {{#> description-list-term}} {{#> description-list-text}} @@ -1029,7 +1030,7 @@ import './Card.css' {{/card-header-main}} {{/card-header}} {{#> card-body}} - {{#> description-list}} + {{#> description-list description-list--aria-label="Activity" }} {{#> description-list-group}} {{#> description-list-term}} Readiness probe failed @@ -1119,7 +1120,7 @@ import './Card.css' {{/card-header-main}} {{/card-header}} {{#> card-body}} - {{#> description-list}} + {{#> description-list description-list--aria-label="Events" }} {{#> description-list-group}} {{#> description-list-term}} {{#> l-flex l-flex--modifier="pf-m-nowrap pf-m-space-items-sm"}} diff --git a/src/patternfly/demos/Card/templates/card-template-details.hbs b/src/patternfly/demos/Card/templates/card-template-details.hbs index c8071748b8..6368998a4b 100644 --- a/src/patternfly/demos/Card/templates/card-template-details.hbs +++ b/src/patternfly/demos/Card/templates/card-template-details.hbs @@ -6,7 +6,7 @@ {{/title}} {{/card-title}} {{#> card-body}} - {{#> description-list}} + {{#> description-list description-list--aria-label="Details"}} {{#> description-list-group}} {{#> description-list-term}} Cluster API Address diff --git a/src/patternfly/demos/Card/templates/card-template-events.hbs b/src/patternfly/demos/Card/templates/card-template-events.hbs index 21cb1150b8..d6e61f83d0 100644 --- a/src/patternfly/demos/Card/templates/card-template-events.hbs +++ b/src/patternfly/demos/Card/templates/card-template-events.hbs @@ -11,7 +11,7 @@ {{/card-title}} {{/card-header}} {{#> card-body}} - {{#> description-list description-list--modifier="pf-m-compact"}} + {{#> description-list description-list--aria-label="Events" description-list--modifier="pf-m-compact"}} {{#> description-list-group}} {{#> description-list-term}} {{#> l-flex l-flex--modifier="pf-m-nowrap"}} diff --git a/src/patternfly/demos/DescriptionList/examples/DescriptionList.md b/src/patternfly/demos/DescriptionList/examples/DescriptionList.md index df5833bc3b..ec656fe066 100644 --- a/src/patternfly/demos/DescriptionList/examples/DescriptionList.md +++ b/src/patternfly/demos/DescriptionList/examples/DescriptionList.md @@ -21,7 +21,8 @@ cssPrefix: pf-d-description-list {{/card-header}} {{> divider}} {{#> card-body}} - {{> description-list-template description-list--modifier="pf-m-auto-fit"}} + {{> description-list-template description-list--modifier="pf-m-auto-fit" + description-list--aria-label="Details"}} {{/card-body}} {{/card}} {{/page-main-section}} @@ -34,7 +35,7 @@ cssPrefix: pf-d-description-list {{> page-template page-template--id="description-list-in-drawer-example" page-template--IsDrawer="true" page-template--drawer-panel--IsOpen="true"}} {{#*inline "page-template-drawer-panel-tab-content"}} - {{#> description-list description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-compact"}} + {{#> description-list description-list--aria-label="Overview" description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-compact"}} {{#> description-list-group}} {{#> description-list-term}} {{#> description-list-text}} @@ -283,7 +284,7 @@ cssPrefix: pf-d-description-list {{/title}} {{/grid-item}} {{#> grid-item}} - {{#> description-list description-list--modifier="pf-m-2-col-on-xl"}} + {{#> description-list description-list--aria-label="Service overview" description-list--modifier="pf-m-2-col-on-xl"}} {{#> description-list-group}} {{#> description-list-term}} {{#> description-list-text}} @@ -386,7 +387,7 @@ cssPrefix: pf-d-description-list {{/title}} {{/grid-item}} {{#> grid-item}} - {{#> description-list}} + {{#> description-list description-list--aria-label="Service routing"}} {{#> description-list-group}} {{#> description-list-term}} {{#> description-list-text}} diff --git a/src/patternfly/demos/Skeleton/card-skeleton.hbs b/src/patternfly/demos/Skeleton/card-skeleton.hbs index c960f2ada7..4269b158ad 100644 --- a/src/patternfly/demos/Skeleton/card-skeleton.hbs +++ b/src/patternfly/demos/Skeleton/card-skeleton.hbs @@ -2,6 +2,9 @@ {{#> card-body}} {{#> l-flex l-flex--modifier="pf-m-column pf-m-spacer-md"}} {{#> skeleton}} + {{#if card-skeleton--IsFirstCard}} + {{#> screen-reader}}Loading card content{{/screen-reader}} + {{/if}} {{/skeleton}} {{#> skeleton skeleton--modifier="pf-m-width-66"}} {{/skeleton}} diff --git a/src/patternfly/demos/Skeleton/examples/Skeleton.md b/src/patternfly/demos/Skeleton/examples/Skeleton.md index 9407247b1a..8892e6ace5 100644 --- a/src/patternfly/demos/Skeleton/examples/Skeleton.md +++ b/src/patternfly/demos/Skeleton/examples/Skeleton.md @@ -12,7 +12,7 @@ section: components {{#* inline "page-template-section"}} {{#> page-main-section}} {{#> gallery gallery--modifier="pf-m-gutter"}} - {{> card-skeleton}} + {{> card-skeleton card-skeleton--IsFirstCard=true}} {{> card-skeleton}} {{> card-skeleton}} {{> card-skeleton}} diff --git a/src/patternfly/demos/Skeleton/table-skeleton.hbs b/src/patternfly/demos/Skeleton/table-skeleton.hbs deleted file mode 100644 index ac0b6a0195..0000000000 --- a/src/patternfly/demos/Skeleton/table-skeleton.hbs +++ /dev/null @@ -1,46 +0,0 @@ -{{#> table table--id=(concat page--id '-table') table--IsGrid=true table--modifier=(concat 'pf-m-grid-md ' table-simple-table--modifier) table--attribute='aria-label="This is a table with checkboxes"'}} - {{#> table-thead}} - {{#> table-tr}} - {{#> table-td table-td--IsCheckbox=true}} - {{#> check check--modifier="pf-m-standalone"}} - {{#> check-input check-input--attribute='name="check-all" aria-label="Select all rows"'}}{{/check-input}} - {{/check}} - {{/table-td}} - {{#> table-th table-th--attribute='scope="col"'}} - Repositories - {{/table-th}} - {{#> table-th table-th--attribute='scope="col"'}} - Branches - {{/table-th}} - {{#> table-th table-th--attribute='scope="col"'}} - Pull requests - {{/table-th}} - {{#> table-th table-th--attribute='scope="col"'}} - Workspaces - {{/table-th}} - {{#> table-th table-th--attribute='scope="col"'}} - Last commit - {{/table-th}} - {{> table-cell-empty}} - {{> table-cell-empty}} - {{/table-tr}} - {{/table-thead}} - {{#> table-tbody}} - {{#> skeleton}} - {{#> l-flex l-flex--modifier="pf-m-column pf-m-spacer-lg"}} - {{#> skeleton-element skeleton-element--modifier="pf-m-text-md"}} - {{/skeleton-element}} - {{#> skeleton-element skeleton-element--modifier="pf-m-text-md"}} - {{/skeleton-element}} - {{#> skeleton-element skeleton-element--modifier="pf-m-text-md"}} - {{/skeleton-element}} - {{#> skeleton-element skeleton-element--modifier="pf-m-text-md"}} - {{/skeleton-element}} - {{#> skeleton-element skeleton-element--modifier="pf-m-text-md"}} - {{/skeleton-element}} - {{#> skeleton-element skeleton-element--modifier="pf-m-text-md"}} - {{/skeleton-element}} - {{/l-flex}} - {{/skeleton}} - {{/table-tbody}} -{{/table}} diff --git a/src/patternfly/demos/Tabs/examples/Tabs.md b/src/patternfly/demos/Tabs/examples/Tabs.md index 153f1f7915..92b83bb280 100644 --- a/src/patternfly/demos/Tabs/examples/Tabs.md +++ b/src/patternfly/demos/Tabs/examples/Tabs.md @@ -24,7 +24,8 @@ section: components {{> title titleType="h2" title--modifier="pf-m-lg pf-v6-u-mt-sm" title--text="Pod details" title--attribute=(concat 'id="' tabs-template-pod-tab-content--id '-details-title"')}} {{/l-flex-item}} {{#> l-flex-item}} - {{#> description-list description-list--modifier="pf-m-2-col-on-lg" description-list--attribute=(concat 'aria-labelledby="' tabs-template-pod-tab-content--id '-details-title"')}} + {{#> description-list + description-list--aria-label="API 1" description-list--modifier="pf-m-2-col-on-lg" description-list--attribute=(concat 'aria-labelledby="' tabs-template-pod-tab-content--id '-details-title"')}} {{#> description-list-group}} {{#> description-list-term}} Name @@ -169,7 +170,9 @@ section: components {{#> tabs-template-pod-tab-content tab-content-body--modifier=reset tabs--id=(concat tabs-template--id '-secondary') tabs-template-pod-tab-content--IsSecondary="true"}} {{#> l-flex l-flex--modifier="pf-m-column"}} {{#> l-flex-item}} - {{#> description-list description-list--modifier="pf-m-2-col-on-lg" description-list--attribute='aria-label="Pod information list"'}} + {{#> description-list + description-list--aria-label="API 2" description-list--modifier="pf-m-2-col-on-lg" + description-list--aria-label="Pod information list" }} {{#> description-list-group}} {{#> description-list-term}} Name diff --git a/yarn.lock b/yarn.lock index c30cdeb281..2aca539094 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2866,10 +2866,10 @@ dependencies: "@octokit/openapi-types" "^23.0.1" -"@patternfly/ast-helpers@^1.4.0-alpha.222": - version "1.4.0-alpha.222" - resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.222.tgz#ac278584a0452d87b165daf2c683430c2e339a69" - integrity sha512-UC7ajo1O4p4OgHv4VgCPR7Js7RSr9Imzm4/QorTpy4yrkQT2aLQl0QqzOvhfAkg9VWV3YptjVufY71Ig0lhnjg== +"@patternfly/ast-helpers@^1.4.0-alpha.260": + version "1.4.0-alpha.260" + resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.260.tgz#5ab44d15c497c77489c2149f63c6f4e08ae15476" + integrity sha512-7flLy95d5N3n5bqP8Ub7UiXp0sgcsAItiwoPJsLa7kH017g7vlC4S/l8Vh1nbNzk4HJzc/yyuJvF4/dS8LlsKA== dependencies: acorn "^8.4.1" acorn-class-fields "^1.0.0" @@ -2877,16 +2877,16 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@6.11.2": - version "6.11.2" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.11.2.tgz#07fdfe6e78337eff08635dc5659001a44bf3e27a" - integrity sha512-gChMoTaCDy5doY9COA8sqttVZmyU1Ipoh0rI7xwmNM2kTgBmekA4VyYip82yuQSpcy+BqOg/nN29RsVRCzzLrw== +"@patternfly/documentation-framework@6.18.2": + version "6.18.2" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.18.2.tgz#5425bffc5b900f188a8934bff6094ba489a762e9" + integrity sha512-MD076xnVCDrwbVEmtnoZOQ9/JXA3mpbIKuEtpaRsufIQ+dJzPhwfdTYUvS84CxgSPDyarvOhYkjgtHeS2nxyAA== dependencies: "@babel/core" "^7.24.3" "@babel/preset-env" "^7.24.3" "@babel/preset-react" "^7.24.1" "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^1.4.0-alpha.222" + "@patternfly/ast-helpers" "^1.4.0-alpha.260" "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" autoprefixer "9.8.6" babel-loader "^9.1.3" @@ -2918,7 +2918,7 @@ postcss "8.4.32" postcss-loader "7.1.0" process "^0.11.10" - puppeteer "^23.6.1" + puppeteer "^23.10.0" puppeteer-cluster "^0.24.0" react-docgen "5.3.1" react-ssr-prepass "1.5.0" @@ -2939,10 +2939,10 @@ unist-util-visit "2.0.3" url-loader "4.1.0" vfile-reporter "6.0.1" - webpack "5.76.3" + webpack "5.94.0" webpack-bundle-analyzer "4.8.0" webpack-cli "5.0.1" - webpack-dev-server "5.2.0" + webpack-dev-server "5.2.1" webpack-merge "5.8.0" "@patternfly/patternfly-a11y@5.1.0": @@ -2959,56 +2959,56 @@ puppeteer-cluster "^0.24.0" xmldoc "^1.3.0" -"@patternfly/react-code-editor@6.2.2": - version "6.2.2" - resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.2.2.tgz#a2b76931fcb06e748d0ed70fa870c854538ed82d" - integrity sha512-KPnkNP769afD2rvoNQtgCx+SYscamM5QSRmw2FJ9QPHVMksarwTsMvrdMxvu+n6Dhs/T40vQLU5UR7X2yPrURg== +"@patternfly/react-code-editor@6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.3.1.tgz#c45824026bb67673251b469e1bd51c3c0f2b8866" + integrity sha512-lzrION96CR2G3ASjE++dX/dExH08HVcCLXbHdmiiTL4eHfbqXt4edDc+UX619XrbaccJBE+BxNNGKyO8bgpKRg== dependencies: "@monaco-editor/react" "^4.6.0" - "@patternfly/react-core" "^6.2.2" - "@patternfly/react-icons" "^6.2.2" - "@patternfly/react-styles" "^6.2.2" + "@patternfly/react-core" "^6.3.1" + "@patternfly/react-icons" "^6.3.1" + "@patternfly/react-styles" "^6.3.1" react-dropzone "14.3.5" tslib "^2.8.1" -"@patternfly/react-core@6.2.2", "@patternfly/react-core@^6.2.2": - version "6.2.2" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.2.2.tgz#8965a727b64506366bdf4682bf86b9c2c7fc0fb3" - integrity sha512-JUrZ57JQ4bkmed1kxaciXb0ZpIVYyCHc2HjtzoKQ5UNRlx204zR2isATSHjdw2GFcWvwpkC5/fU2BR+oT3opbg== +"@patternfly/react-core@6.3.1", "@patternfly/react-core@^6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.3.1.tgz#d73bae71edf2ef705bd52be48e6c8a83b4b5de84" + integrity sha512-1qV20nU4M6PA28qnikH9fPLQlkteaZZToFlATjBNBw7aUI6zIvj7U0akkHz8raWcfHAI+tAzGV7dfKjiv035/g== dependencies: - "@patternfly/react-icons" "^6.2.2" - "@patternfly/react-styles" "^6.2.2" - "@patternfly/react-tokens" "^6.2.2" + "@patternfly/react-icons" "^6.3.1" + "@patternfly/react-styles" "^6.3.1" + "@patternfly/react-tokens" "^6.3.1" focus-trap "7.6.4" react-dropzone "^14.3.5" tslib "^2.8.1" -"@patternfly/react-icons@^6.2.2": - version "6.2.2" - resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.2.2.tgz#6b19359df7618ea4ec6aa6da3af2a9a287666f23" - integrity sha512-XkBwzuV/uiolX+T6QgB3RIqphM1m+vAZjAe3McYtyY22j1rsOdlWDE4RtRrJ1q7EoIZwyZHj0h8T9vMfUsLn4Q== - -"@patternfly/react-styles@^6.2.2": - version "6.2.2" - resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.2.2.tgz#ff6d31266ba03df9be8095f189d1399a8cc3b66d" - integrity sha512-rncRDq66H8VnLyb9DrHHlZtPddlpNL9+W0XuQC0L7F6p78hOwSZmoGTW2Vq8/wJplDj8h/61qRpfRF9VEYPW0g== - -"@patternfly/react-table@6.2.2": - version "6.2.2" - resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.2.2.tgz#9ca4f1b4e5558cafd712c66a599b097a475acb30" - integrity sha512-7CxVKhnpA+f8dLJ0hVvzZOe4Djx/nE+w70ipeAHf4Yi5JwfDWmbK97YvjYPfamp/bsXTLtPcK2n4AoY5DQX6Pg== - dependencies: - "@patternfly/react-core" "^6.2.2" - "@patternfly/react-icons" "^6.2.2" - "@patternfly/react-styles" "^6.2.2" - "@patternfly/react-tokens" "^6.2.2" +"@patternfly/react-icons@^6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.3.1.tgz#e28ee532a94746d588e38d1133e2705935a1844c" + integrity sha512-uiMounSIww1iZLM4pq+X8c3upzwl9iowXRPjR5CA8entb70lwgAXg3PqvypnuTAcilTq1Y3k5sFTqkhz7rgKcQ== + +"@patternfly/react-styles@^6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.3.1.tgz#a6f0bea672d537df5debdc7e7ade341a044dd8f9" + integrity sha512-hyb+PlO8YITjKh2wBvjdeZhX6FyB3hlf4r6yG4rPOHk4SgneXHjNSdGwQ3szAxgGqtbENCYtOqwD/8ai72GrxQ== + +"@patternfly/react-table@6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.3.1.tgz#1912606b3ddb69b7de6bde01f0015d601d50c006" + integrity sha512-ZndBbPcMr/vInP5eELRe9m7MWzRoejRAhWx+25xOdjVAd31/CmMK1nBgZk4QAXaWjH1P+uZaZYsTgr/FMTte2g== + dependencies: + "@patternfly/react-core" "^6.3.1" + "@patternfly/react-icons" "^6.3.1" + "@patternfly/react-styles" "^6.3.1" + "@patternfly/react-tokens" "^6.3.1" lodash "^4.17.21" tslib "^2.8.1" -"@patternfly/react-tokens@^6.2.2": - version "6.2.2" - resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.2.2.tgz#4ab12cf77fab60a730f52aed2433dbf892d47509" - integrity sha512-2GRWDPBTrcTlGNFc5NPJjrjEVU90RpgcGX/CIe2MplLgM32tpVIkeUtqIoJPLRk5GrbhyFuHJYRU+O93gU4o3Q== +"@patternfly/react-tokens@^6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.3.1.tgz#a54f0b668f8f75a7daaf89c7a1a55fcd78870296" + integrity sha512-wt/xKU1tGCDXUueFb+8/Cwxlm4vUD/Xl26O8MxbSLm6NZAHOUPwytJ7gugloGSPvc/zcsXxEgKANL8UZNO6DTw== "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -3048,6 +3048,20 @@ unbzip2-stream "^1.4.3" yargs "^17.7.2" +"@puppeteer/browsers@2.6.1": + version "2.6.1" + resolved "https://registry.yarnpkg.com/@puppeteer/browsers/-/browsers-2.6.1.tgz#d75aec5010cae377c5e4742bf5e4f62a79c21315" + integrity sha512-aBSREisdsGH890S2rQqK82qmQYU3uFpSH8wcZWHgHzl3LfzsxAKbLNiAG9mO8v1Y0UICBeClICxPJvyr0rcuxg== + dependencies: + debug "^4.4.0" + extract-zip "^2.0.1" + progress "^2.0.3" + proxy-agent "^6.5.0" + semver "^7.6.3" + tar-fs "^3.0.6" + unbzip2-stream "^1.4.3" + yargs "^17.7.2" + "@reach/router@npm:@gatsbyjs/reach-router@1.3.9": version "1.3.9" resolved "https://registry.npmjs.org/@gatsbyjs/reach-router/-/reach-router-1.3.9.tgz" @@ -3252,32 +3266,11 @@ dependencies: "@types/ms" "*" -"@types/eslint-scope@^3.7.3": - version "3.7.4" - resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz" - integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA== - dependencies: - "@types/eslint" "*" - "@types/estree" "*" - -"@types/eslint@*": - version "8.21.0" - resolved "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.0.tgz" - integrity sha512-35EhHNOXgxnUgh4XCJsGhE7zdlDhYDN/aMG6UbkByCFFNgQ7b3U+uVoqBpicFydR8JEfgdjCF7SJ7MiJfzuiTA== - dependencies: - "@types/estree" "*" - "@types/json-schema" "*" - -"@types/estree@*", "@types/estree@^1.0.5": +"@types/estree@^1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4" integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== -"@types/estree@^0.0.51": - version "0.0.51" - resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz" - integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ== - "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.33": version "4.17.33" resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz" @@ -3287,6 +3280,16 @@ "@types/qs" "*" "@types/range-parser" "*" +"@types/express-serve-static-core@^4.17.21": + version "4.19.6" + resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz#e01324c2a024ff367d92c66f48553ced0ab50267" + integrity sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A== + dependencies: + "@types/node" "*" + "@types/qs" "*" + "@types/range-parser" "*" + "@types/send" "*" + "@types/express@*": version "4.17.17" resolved "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz" @@ -3340,7 +3343,7 @@ "@types/through" "*" rxjs "^7.2.0" -"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": +"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== @@ -3502,14 +3505,6 @@ resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406" integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ== -"@webassemblyjs/ast@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz" - integrity sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw== - dependencies: - "@webassemblyjs/helper-numbers" "1.11.1" - "@webassemblyjs/helper-wasm-bytecode" "1.11.1" - "@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb" @@ -3518,45 +3513,21 @@ "@webassemblyjs/helper-numbers" "1.11.6" "@webassemblyjs/helper-wasm-bytecode" "1.11.6" -"@webassemblyjs/floating-point-hex-parser@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz" - integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ== - "@webassemblyjs/floating-point-hex-parser@1.11.6": version "1.11.6" resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz" integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw== -"@webassemblyjs/helper-api-error@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz" - integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg== - "@webassemblyjs/helper-api-error@1.11.6": version "1.11.6" resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz" integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q== -"@webassemblyjs/helper-buffer@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz" - integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA== - "@webassemblyjs/helper-buffer@1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz#6df20d272ea5439bf20ab3492b7fb70e9bfcb3f6" integrity sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw== -"@webassemblyjs/helper-numbers@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz" - integrity sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ== - dependencies: - "@webassemblyjs/floating-point-hex-parser" "1.11.1" - "@webassemblyjs/helper-api-error" "1.11.1" - "@xtuc/long" "4.2.2" - "@webassemblyjs/helper-numbers@1.11.6": version "1.11.6" resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz" @@ -3566,26 +3537,11 @@ "@webassemblyjs/helper-api-error" "1.11.6" "@xtuc/long" "4.2.2" -"@webassemblyjs/helper-wasm-bytecode@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz" - integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q== - "@webassemblyjs/helper-wasm-bytecode@1.11.6": version "1.11.6" resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz" integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA== -"@webassemblyjs/helper-wasm-section@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz" - integrity sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg== - dependencies: - "@webassemblyjs/ast" "1.11.1" - "@webassemblyjs/helper-buffer" "1.11.1" - "@webassemblyjs/helper-wasm-bytecode" "1.11.1" - "@webassemblyjs/wasm-gen" "1.11.1" - "@webassemblyjs/helper-wasm-section@1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz#3da623233ae1a60409b509a52ade9bc22a37f7bf" @@ -3596,13 +3552,6 @@ "@webassemblyjs/helper-wasm-bytecode" "1.11.6" "@webassemblyjs/wasm-gen" "1.12.1" -"@webassemblyjs/ieee754@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz" - integrity sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ== - dependencies: - "@xtuc/ieee754" "^1.2.0" - "@webassemblyjs/ieee754@1.11.6": version "1.11.6" resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz" @@ -3610,13 +3559,6 @@ dependencies: "@xtuc/ieee754" "^1.2.0" -"@webassemblyjs/leb128@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz" - integrity sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw== - dependencies: - "@xtuc/long" "4.2.2" - "@webassemblyjs/leb128@1.11.6": version "1.11.6" resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz" @@ -3624,30 +3566,11 @@ dependencies: "@xtuc/long" "4.2.2" -"@webassemblyjs/utf8@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz" - integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ== - "@webassemblyjs/utf8@1.11.6": version "1.11.6" resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz" integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA== -"@webassemblyjs/wasm-edit@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz" - integrity sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA== - dependencies: - "@webassemblyjs/ast" "1.11.1" - "@webassemblyjs/helper-buffer" "1.11.1" - "@webassemblyjs/helper-wasm-bytecode" "1.11.1" - "@webassemblyjs/helper-wasm-section" "1.11.1" - "@webassemblyjs/wasm-gen" "1.11.1" - "@webassemblyjs/wasm-opt" "1.11.1" - "@webassemblyjs/wasm-parser" "1.11.1" - "@webassemblyjs/wast-printer" "1.11.1" - "@webassemblyjs/wasm-edit@^1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz#9f9f3ff52a14c980939be0ef9d5df9ebc678ae3b" @@ -3662,17 +3585,6 @@ "@webassemblyjs/wasm-parser" "1.12.1" "@webassemblyjs/wast-printer" "1.12.1" -"@webassemblyjs/wasm-gen@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz" - integrity sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA== - dependencies: - "@webassemblyjs/ast" "1.11.1" - "@webassemblyjs/helper-wasm-bytecode" "1.11.1" - "@webassemblyjs/ieee754" "1.11.1" - "@webassemblyjs/leb128" "1.11.1" - "@webassemblyjs/utf8" "1.11.1" - "@webassemblyjs/wasm-gen@1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz#a6520601da1b5700448273666a71ad0a45d78547" @@ -3684,16 +3596,6 @@ "@webassemblyjs/leb128" "1.11.6" "@webassemblyjs/utf8" "1.11.6" -"@webassemblyjs/wasm-opt@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz" - integrity sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw== - dependencies: - "@webassemblyjs/ast" "1.11.1" - "@webassemblyjs/helper-buffer" "1.11.1" - "@webassemblyjs/wasm-gen" "1.11.1" - "@webassemblyjs/wasm-parser" "1.11.1" - "@webassemblyjs/wasm-opt@1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz#9e6e81475dfcfb62dab574ac2dda38226c232bc5" @@ -3704,18 +3606,6 @@ "@webassemblyjs/wasm-gen" "1.12.1" "@webassemblyjs/wasm-parser" "1.12.1" -"@webassemblyjs/wasm-parser@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz" - integrity sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA== - dependencies: - "@webassemblyjs/ast" "1.11.1" - "@webassemblyjs/helper-api-error" "1.11.1" - "@webassemblyjs/helper-wasm-bytecode" "1.11.1" - "@webassemblyjs/ieee754" "1.11.1" - "@webassemblyjs/leb128" "1.11.1" - "@webassemblyjs/utf8" "1.11.1" - "@webassemblyjs/wasm-parser@1.12.1", "@webassemblyjs/wasm-parser@^1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz#c47acb90e6f083391e3fa61d113650eea1e95937" @@ -3728,14 +3618,6 @@ "@webassemblyjs/leb128" "1.11.6" "@webassemblyjs/utf8" "1.11.6" -"@webassemblyjs/wast-printer@1.11.1": - version "1.11.1" - resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz" - integrity sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg== - dependencies: - "@webassemblyjs/ast" "1.11.1" - "@xtuc/long" "4.2.2" - "@webassemblyjs/wast-printer@1.12.1": version "1.12.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz#bcecf661d7d1abdaf989d8341a4833e33e2b31ac" @@ -3797,11 +3679,6 @@ acorn-class-fields@^1.0.0: dependencies: acorn-private-class-elements "^1.0.0" -acorn-import-assertions@^1.7.6: - version "1.9.0" - resolved "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz" - integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA== - acorn-import-attributes@^1.9.5: version "1.9.5" resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef" @@ -3860,6 +3737,11 @@ agent-base@^7.0.2, agent-base@^7.1.0, agent-base@^7.1.1: dependencies: debug "^4.3.4" +agent-base@^7.1.2: + version "7.1.4" + resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.4.tgz#e3cd76d4c548ee895d3c3fd8dc1f6c5b9032e7a8" + integrity sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ== + agentkeepalive@^3.3.0: version "3.5.2" resolved "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz" @@ -4884,7 +4766,7 @@ braces@^3.0.2, braces@~3.0.2: dependencies: fill-range "^7.0.1" -browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.21.9, browserslist@^4.22.2, browserslist@^4.22.3, browserslist@^4.23.0: +browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.21.10, browserslist@^4.21.9, browserslist@^4.22.2, browserslist@^4.22.3, browserslist@^4.23.0: version "4.23.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab" integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ== @@ -5377,6 +5259,14 @@ chromedriver@^130.0.1: proxy-from-env "^1.1.0" tcp-port-used "^1.0.2" +chromium-bidi@0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/chromium-bidi/-/chromium-bidi-0.11.0.tgz#9c3c42ee7b42d8448e9fce8d649dc8bfbcc31153" + integrity sha512-6CJWHkNRoyZyjV9Rwv2lYONZf1Xm0IuDyNq97nwSsxxP3wf5Bwy15K5rOvVKMtJ127jJBmxFUanSAOjgFRxgrA== + dependencies: + mitt "3.0.1" + zod "3.23.8" + chromium-bidi@0.5.16: version "0.5.16" resolved "https://registry.yarnpkg.com/chromium-bidi/-/chromium-bidi-0.5.16.tgz#345d04fee80d24729486f87d0f4c1c32f317a59d" @@ -6381,6 +6271,13 @@ debug@^4.3.7: dependencies: ms "^2.1.3" +debug@^4.4.0: + version "4.4.1" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.1.tgz#e5a8bc6cbc4c6cd3e64308b0693a3d4fa550189b" + integrity sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ== + dependencies: + ms "^2.1.3" + decamelize-keys@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz" @@ -6649,6 +6546,11 @@ devtools-protocol@0.0.1354347: resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1354347.tgz#5cb509610b8f61fc69a31e5c810d5bed002d85ea" integrity sha512-BlmkSqV0V84E2WnEnoPnwyix57rQxAM5SKJjf4TbYOCGLAWtz8CDH8RIaGOjPgPCXo2Mce3kxSY497OySidY3Q== +devtools-protocol@0.0.1367902: + version "0.0.1367902" + resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1367902.tgz#7333bfc4466c5a54a4c6de48a9dfbcb4b811660c" + integrity sha512-XxtPuC3PGakY6PD7dG66/o8KwJ/LkH2/EKe19Dcw58w53dv4/vSQEkn/SzuyhHE2q4zPgCkxQBxus3VV4ql+Pg== + diff@^3.5.0: version "3.5.0" resolved "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz" @@ -6898,7 +6800,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1: dependencies: once "^1.4.0" -enhanced-resolve@^5.10.0, enhanced-resolve@^5.17.1: +enhanced-resolve@^5.17.1: version "5.17.1" resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15" integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg== @@ -7122,11 +7024,6 @@ es-iterator-helpers@^1.0.17: iterator.prototype "^1.1.2" safe-array-concat "^1.1.2" -es-module-lexer@^0.9.0: - version "0.9.3" - resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz" - integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ== - es-module-lexer@^1.2.1: version "1.3.0" resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz" @@ -8844,7 +8741,7 @@ got@^9.6.0: to-readable-stream "^1.0.0" url-parse-lax "^3.0.0" -graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9: +graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.6: version "4.2.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3" integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ== @@ -9505,6 +9402,14 @@ https-proxy-agent@^7.0.2, https-proxy-agent@^7.0.3: agent-base "^7.0.2" debug "4" +https-proxy-agent@^7.0.6: + version "7.0.6" + resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz#da8dfeac7da130b05c2ba4b59c9b6cd66611a6b9" + integrity sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw== + dependencies: + agent-base "^7.1.2" + debug "4" + human-signals@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28" @@ -12822,7 +12727,21 @@ pac-proxy-agent@^7.0.1: pac-resolver "^7.0.0" socks-proxy-agent "^8.0.2" -pac-resolver@^7.0.0: +pac-proxy-agent@^7.1.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz#9cfaf33ff25da36f6147a20844230ec92c06e5df" + integrity sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA== + dependencies: + "@tootallnate/quickjs-emscripten" "^0.23.0" + agent-base "^7.1.2" + debug "^4.3.4" + get-uri "^6.0.1" + http-proxy-agent "^7.0.0" + https-proxy-agent "^7.0.6" + pac-resolver "^7.0.1" + socks-proxy-agent "^8.0.5" + +pac-resolver@^7.0.0, pac-resolver@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/pac-resolver/-/pac-resolver-7.0.1.tgz#54675558ea368b64d210fd9c92a640b5f3b8abb6" integrity sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg== @@ -14024,6 +13943,20 @@ proxy-agent@6.4.0, proxy-agent@^6.4.0: proxy-from-env "^1.1.0" socks-proxy-agent "^8.0.2" +proxy-agent@^6.5.0: + version "6.5.0" + resolved "https://registry.yarnpkg.com/proxy-agent/-/proxy-agent-6.5.0.tgz#9e49acba8e4ee234aacb539f89ed9c23d02f232d" + integrity sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A== + dependencies: + agent-base "^7.1.2" + debug "^4.3.4" + http-proxy-agent "^7.0.1" + https-proxy-agent "^7.0.6" + lru-cache "^7.14.1" + pac-proxy-agent "^7.1.0" + proxy-from-env "^1.1.0" + socks-proxy-agent "^8.0.5" + proxy-from-env@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz" @@ -14095,6 +14028,18 @@ puppeteer-core@22.6.3: devtools-protocol "0.0.1262051" ws "8.16.0" +puppeteer-core@23.11.1: + version "23.11.1" + resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-23.11.1.tgz#3e064de11b3cb3a2df1a8060ff2d05b41be583db" + integrity sha512-3HZ2/7hdDKZvZQ7dhhITOUg4/wOrDRjyK2ZBllRB0ZCOi9u0cwq1ACHDjBB+nX+7+kltHjQvBRdeY7+W0T+7Gg== + dependencies: + "@puppeteer/browsers" "2.6.1" + chromium-bidi "0.11.0" + debug "^4.4.0" + devtools-protocol "0.0.1367902" + typed-query-selector "^2.12.0" + ws "^8.18.0" + puppeteer-core@23.7.0: version "23.7.0" resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-23.7.0.tgz#b737476f8f5e2a36a6683d91595eaa5c0e231a37" @@ -14117,6 +14062,18 @@ puppeteer@^22.1.0: devtools-protocol "0.0.1262051" puppeteer-core "22.6.3" +puppeteer@^23.10.0: + version "23.11.1" + resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-23.11.1.tgz#98fd9040786b1219b1a4f639c270377586e8899c" + integrity sha512-53uIX3KR5en8l7Vd8n5DUv90Ae9QDQsyIthaUFVzwV6yU750RjqRznEtNMBT20VthqAdemnJN+hxVdmMHKt7Zw== + dependencies: + "@puppeteer/browsers" "2.6.1" + chromium-bidi "0.11.0" + cosmiconfig "^9.0.0" + devtools-protocol "0.0.1367902" + puppeteer-core "23.11.1" + typed-query-selector "^2.12.0" + puppeteer@^23.6.1: version "23.7.0" resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-23.7.0.tgz#193dcc78bdcc5d3023cc172e9231771c350484bd" @@ -15081,7 +15038,7 @@ schema-utils@^2.6.5: ajv "^6.12.4" ajv-keywords "^3.5.2" -schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1, schema-utils@^3.2.0: +schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0: version "3.3.0" resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz" integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg== @@ -15567,6 +15524,15 @@ socks-proxy-agent@^8.0.2: debug "^4.3.4" socks "^2.7.1" +socks-proxy-agent@^8.0.5: + version "8.0.5" + resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz#b9cdb4e7e998509d7659d689ce7697ac21645bee" + integrity sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw== + dependencies: + agent-base "^7.1.2" + debug "^4.3.4" + socks "^2.8.3" + socks@^1.1.10: version "1.1.10" resolved "https://registry.npmjs.org/socks/-/socks-1.1.10.tgz" @@ -15591,6 +15557,14 @@ socks@^2.7.1: ip-address "^9.0.5" smart-buffer "^4.2.0" +socks@^2.8.3: + version "2.8.6" + resolved "https://registry.yarnpkg.com/socks/-/socks-2.8.6.tgz#e335486a2552f34f932f0c27d8dbb93f2be867aa" + integrity sha512-pe4Y2yzru68lXCb38aAqRf5gvN8YdjP1lok5o0J7BOHljkyCGKVz7H3vpVIXKD27rj2giOJ7DwVyk/GWrPHDWA== + dependencies: + ip-address "^9.0.5" + smart-buffer "^4.2.0" + "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz" @@ -16569,7 +16543,7 @@ term-size@^1.2.0: dependencies: execa "^0.7.0" -terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.3.10: +terser-webpack-plugin@^5.3.10: version "5.3.10" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199" integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w== @@ -17779,7 +17753,7 @@ vscode-textmate@5.2.0: resolved "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-5.2.0.tgz" integrity sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ== -watchpack@^2.4.0, watchpack@^2.4.1: +watchpack@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.1.tgz#29308f2cac150fa8e4c92f90e0ec954a9fed7fff" integrity sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg== @@ -17853,14 +17827,15 @@ webpack-dev-middleware@^7.4.2: range-parser "^1.2.1" schema-utils "^4.0.0" -webpack-dev-server@5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-5.2.0.tgz#68043886edaa3fd875ad20e01589990a79612f9c" - integrity sha512-90SqqYXA2SK36KcT6o1bvwvZfJFcmoamqeJY7+boioffX9g9C0wjjJRGUrQIuh43pb0ttX7+ssavmj/WN2RHtA== +webpack-dev-server@5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-5.2.1.tgz#049072d6e19cbda8cf600b9e364e6662d61218ba" + integrity sha512-ml/0HIj9NLpVKOMq+SuBPLHcmbG+TGIjXRHsYfZwocUBIqEvws8NnS/V9AFQ5FKP+tgn5adwVwRrTEpGL33QFQ== dependencies: "@types/bonjour" "^3.5.13" "@types/connect-history-api-fallback" "^1.5.4" "@types/express" "^4.17.21" + "@types/express-serve-static-core" "^4.17.21" "@types/serve-index" "^1.9.4" "@types/serve-static" "^1.15.5" "@types/sockjs" "^0.3.36" @@ -17899,37 +17874,7 @@ webpack-sources@^3.2.3: resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz" integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== -webpack@5.76.3: - version "5.76.3" - resolved "https://registry.npmjs.org/webpack/-/webpack-5.76.3.tgz" - integrity sha512-18Qv7uGPU8b2vqGeEEObnfICyw2g39CHlDEK4I7NK13LOur1d0HGmGNKGT58Eluwddpn3oEejwvBPoP4M7/KSA== - dependencies: - "@types/eslint-scope" "^3.7.3" - "@types/estree" "^0.0.51" - "@webassemblyjs/ast" "1.11.1" - "@webassemblyjs/wasm-edit" "1.11.1" - "@webassemblyjs/wasm-parser" "1.11.1" - acorn "^8.7.1" - acorn-import-assertions "^1.7.6" - browserslist "^4.14.5" - chrome-trace-event "^1.0.2" - enhanced-resolve "^5.10.0" - es-module-lexer "^0.9.0" - eslint-scope "5.1.1" - events "^3.2.0" - glob-to-regexp "^0.4.1" - graceful-fs "^4.2.9" - json-parse-even-better-errors "^2.3.1" - loader-runner "^4.2.0" - mime-types "^2.1.27" - neo-async "^2.6.2" - schema-utils "^3.1.0" - tapable "^2.1.1" - terser-webpack-plugin "^5.1.3" - watchpack "^2.4.0" - webpack-sources "^3.2.3" - -webpack@^5.91.0: +webpack@5.94.0, webpack@^5.91.0: version "5.94.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.94.0.tgz#77a6089c716e7ab90c1c67574a28da518a20970f" integrity sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==