logs: Update page to PF6

Author: Venefilyn

pkg/lib/journal.css

@@ -61,7 +61,7 @@
   --log-service-min: 0;
   --log-service: minmax(var(--log-service-min), max-content);
   background-color: var(--ct-color-list-bg);
-  font-size: var(--font-small);
+  font-size: var(--pf-t--global--font--size--sm);
   padding-block: 0.5rem;
   padding-inline: 1rem;
   display: grid;

pkg/lib/page.scss

@@ -121,14 +121,13 @@ a.disabled:hover {
   --ct-global--palette--black-250: #e6e6e6;
 
   /* Semantic colors */
-  --ct-color-fg: var(--pf-v6-global--color--100);
-  --ct-color-bg: var(--pf-v6-global--BackgroundColor--100);
+  --ct-color-bg: var(--pf-t--global--background--color--primary--default);
   --ct-color-text: var(--ct-color-fg);
 
-  --ct-color-link: var(--pf-v6-global--active-color--100);
-  --ct-color-link-visited: var(--pf-v6-global--active-color--100);
+  --ct-color-link: var(--pf-t--global--text--color--link--default);
+  --ct-color-link-visited: var(--pf-t--global--text--color--link--visited);
 
-  --ct-color-subtle-copy: var(--pf-v6-global--disabled-color--100);
+  --ct-color-subtle-copy: var(--pf-t--global--text--color--subtle);
 
   // General border color (semantic shortcut, instead of specifying the color directly)
   --ct-color-border: var(--pf-v6-global--BorderColor--100);
@@ -143,7 +142,7 @@ a.disabled:hover {
   --ct-color-list-bg: var(--ct-color-bg);
   --ct-color-list-border: var(--ct-color-border);
   --ct-color-list-hover-text: var(--ct-color-link);
-  --ct-color-list-hover-bg: var(--pf-v6-global--BackgroundColor--150);
+  --ct-color-list-hover-bg: var(--pf-t--global--background--color--primary--hover);
   --ct-color-list-hover-border: var(--pf-v6-global--BackgroundColor--150);
   --ct-color-list-hover-icon: var(--pf-v6-global--palette--light-blue-400);
   --ct-color-list-selected-text: var(--ct-color-link);

pkg/systemd/logs.jsx

@@ -181,8 +181,8 @@ export const LogsPage = () => {
     };
 
     return (
-        <Page>
-            <PageSection hasBodyWrapper={false} id="journal" className="journal-filters" padding={{ default: 'noPadding' }}>
+        <Page className='no-masthead-sidebar'>
+            <PageSection hasBodyWrapper={false} id="journal" className="journal-filters">
                 <Toolbar>
                     <ToolbarContent>
                         <ToolbarToggleGroup className="pf-v6-u-flex-wrap pf-v6-u-flex-grow-1 pf-v6-u-align-items-flex-start" toggleIcon={<><span className="pf-v6-c-button__icon pf-m-start"><FilterIcon /></span>{_("Toggle filters")}</>} breakpoint="lg">
@@ -259,7 +259,7 @@ export const LogsPage = () => {
 
             </PageSection>
             <PageSection hasBodyWrapper={false}
-                         padding={{ default: 'noPadding' }}
+
                          id="journal-box"
                          className="journal-filters-box">
                 <JournalBox dataFollowing={dataFollowing}

pkg/systemd/logs.scss

@@ -39,11 +39,11 @@
 
 .log-details {
   .pf-v6-l-gallery {
-    --pf-v5-l-gallery--GridTemplateColumns: 1fr;
+    --pf-v6-l-gallery--GridTemplateColumns: 1fr;
   }
 
   .pf-v6-c-page__main-breadcrumb {
-    padding: var(--pf-v5-global--gutter);
+    padding: var(--pf-t--global--spacer--md);
   }
 
   .pf-v6-c-card__title,
@@ -92,14 +92,14 @@
   .panel-heading {
     position: sticky;
     inset-block-start: 0;
-    color: var(--pf-v5-global--Color--300);
-    background-color: var(--pf-v5-global--BackgroundColor--100);
+    color: var(--pf-t--global--text--color--regular);
+    background-color: var(--pf-t--global--background--color--primary--default);
     border: none;
-    font-size: var(--pf-v5-global--FontSize--md);
-    font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
-    font-weight: var(--pf-v5-global--FontWeight--bold);
-    padding-block: var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--sm);
-    padding-inline: var(--pf-v5-global--spacer--lg);
+    font-size: var(--pf-t--global--font--size--md);
+    font-family: var(--pf-t--global--font--family--heading);
+    font-weight: var(--pf-t--global--font--weight--heading--default);
+    padding-block: var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--sm);
+    padding-inline: var(--pf-t--global--spacer--lg);
   }
 }