Use PatternFly variables for branding

Author: NessieCanCode

src/slurmcostmanager.css

@@ -1,11 +1,12 @@
 body {
-  font-family: sans-serif;
+  /* Use Cockpit/PatternFly's default font so the plugin matches the host UI */
+  font-family: var(--pf-global--FontFamily--sans-serif);
   margin: 0;
   padding: 0;
 }
 
 nav {
-  background: #333;
+  background: var(--pf-global--BackgroundColor--dark-200);
   padding: 0.5em;
   display: flex;
   flex-wrap: wrap;
@@ -14,15 +15,15 @@ nav {
 nav button {
   margin-right: 0.5em;
   padding: 0.5em 1em;
-  color: #fff;
-  background: #555;
+  color: var(--pf-global--palette--white);
+  background: var(--pf-global--palette--black-700);
   border: none;
-  border-radius: 3px;
+  border-radius: var(--pf-global--BorderRadius--sm);
   cursor: pointer;
 }
 
 nav button:hover {
-  background: #777;
+  background: var(--pf-global--palette--black-600);
 }
 
 .app {
@@ -50,7 +51,7 @@ nav button:hover {
 .details-table td,
 .summary-table th,
 .summary-table td {
-  border: 1px solid #ccc;
+  border: 1px solid var(--pf-global--BorderColor--100);
   padding: 0.25em 0.5em;
 }
 
@@ -62,7 +63,7 @@ nav button:hover {
 .link-btn {
   background: none;
   border: none;
-  color: #0066cc;
+  color: var(--pf-global--primary-color--100);
   cursor: pointer;
   text-decoration: underline;
   padding: 0;
@@ -71,17 +72,17 @@ nav button:hover {
 .invoice-frame {
   width: 100%;
   height: 60vh;
-  border: 1px solid #ccc;
+  border: 1px solid var(--pf-global--BorderColor--100);
   margin-top: 1em;
 }
 
 .error {
-  color: red;
+  color: var(--pf-global--danger-color--100);
 }
 
 .error-details {
-  border: 1px solid #ccc;
-  background: #fdd;
+  border: 1px solid var(--pf-global--BorderColor--100);
+  background: var(--pf-global--palette--red-50);
   padding: 0.5em;
   white-space: pre-wrap;
   margin-top: 0.5em;
@@ -99,7 +100,7 @@ nav button:hover {
 
 .users-table th,
 .users-table td {
-  border: 1px solid #ccc;
+  border: 1px solid var(--pf-global--BorderColor--100);
   padding: 0.25em 0.5em;
 }
 
@@ -111,7 +112,7 @@ nav button:hover {
 
 .jobs-table th,
 .jobs-table td {
-  border: 1px solid #ccc;
+  border: 1px solid var(--pf-global--BorderColor--100);
   padding: 0.25em 0.5em;
 }
 
@@ -127,7 +128,7 @@ nav button:hover {
 
 .rates-table th,
 .rates-table td {
-  border: 1px solid #ccc;
+  border: 1px solid var(--pf-global--BorderColor--100);
   padding: 0.25em 0.5em;
 }
 
@@ -153,12 +154,12 @@ nav button:hover {
 }
 
 .collapsible-panel {
-  border: 1px solid #ccc;
+  border: 1px solid var(--pf-global--BorderColor--100);
   margin-top: 1em;
 }
 
 .collapsible-header {
-  background: #f5f5f5;
+  background: var(--pf-global--BackgroundColor--light-200);
   padding: 0.5em;
   cursor: pointer;
   display: flex;
@@ -173,20 +174,20 @@ nav button:hover {
 .save-cancel-bar {
   position: sticky;
   bottom: 0;
-  background: #fff;
+  background: var(--pf-global--BackgroundColor--100);
   padding: 0.5em;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--pf-global--BorderColor--100);
   text-align: right;
 }
 
 .required {
-  color: red;
+  color: var(--pf-global--danger-color--100);
   margin-left: 0.25em;
 }
 
 .help-icon {
   cursor: help;
-  color: #555;
+  color: var(--pf-global--palette--black-600);
   margin-left: 0.25em;
 }
 
@@ -203,9 +204,9 @@ nav button:hover {
   margin-bottom: 1em;
 }
 .kpi-tile {
-  background: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  background: var(--pf-global--BackgroundColor--light-200);
+  border: 1px solid var(--pf-global--BorderColor--100);
+  border-radius: var(--pf-global--BorderRadius--sm);
   padding: 1em;
   flex: 0 0 200px;
   position: relative;
@@ -215,7 +216,7 @@ nav button:hover {
 }
 .kpi-label {
   font-size: 0.9em;
-  color: #555;
+  color: var(--pf-global--palette--black-600);
 }
 .kpi-value {
   font-size: 2em;

src/slurmcostmanager.html

@@ -4,6 +4,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>SlurmCostManager</title>
+  <!-- Load Cockpit and PatternFly styles so that the plugin inherits
+       the host branding and the standard PatternFly components. -->
+  <link rel="stylesheet" href="../base1/patternfly.css" />
+  <link rel="stylesheet" href="../base1/cockpit.css" />
   <link rel="stylesheet" href="slurmcostmanager.css" />
 </head>
 <body>