Add variants

src/branding/bazzite.scss

@@ -0,0 +1,38 @@
+@use "standard.scss" as *;
+
+:root {
+  /*
+  Brand colors
+  */
+  --brand-primary: rgb(138, 42, 226);
+  --brand-secondary: rgb(0, 71, 171);
+  --brand-text: white;
+
+  /*
+  Space between the logo and text; default is 0.5em, which is half a character wide
+  --logo-gap: 0.5em;
+  */
+
+  /*
+  Size of the logo
+  */
+  --logo-height: 3rem;
+  --logo-width: 3rem;
+
+  /*
+  In case the logo needs a dropshadow or something similar, you can add
+  a filter here; 'none' also works as an option
+  */
+  --logo-filter: drop-shadow(0 0 6px rgba(0 0 0 / 0.5));
+
+  /*
+  The actual logo SVG.
+
+  First, optimize the SVG with SVGO; there's a web-based version
+  called SVGOMG at https://jakearchibald.github.io/svgomg/
+
+  Then, encode using URI encoding (not base64) and use as a
+  background. There's a useful tool at https://svgencode.com/
+  */
+  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 500 500'%3E%3Cpath fill='url(%23a)' d='M0 100C0 45 45 0 100 0h150a250 250 0 0 1 0 500A250 250 0 0 1 0 250Z'/%3E%3Cpath fill='%23fff' fill-opacity='.5' fill-rule='evenodd' d='M128 0h64v128h134c56 0 102 46 102 102 0 109-89 198-198 198-56 0-102-46-102-102V192H0v-64h128zm64 192v134c0 21 17 38 38 38 74 0 134-60 134-134 0-21-17-38-38-38Z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-opacity='.7' d='M192 60c0-17-13-30-30-30h-4c-17 0-30 13-30 30v68H60c-17 0-30 13-30 30v4c0 17 13 30 30 30h68v68c0 17 13 30 30 30h4c17 0 30-13 30-30v-68h68c17 0 30-13 30-30v-4c0-17-13-30-30-30h-68z'/%3E%3Cpath fill='%23fff' d='M263 156c3 2 3 6 0 8l-21 12c-4 2-8 0-8-4v-24c0-4 4-6 8-4zm-99 107c-2 3-6 3-8 0l-12-21c-2-4 0-8 4-8h24c4 0 6 4 4 8zm-8-205c2-4 6-4 8 0l12 21c2 3 0 7-4 7h-24c-4 0-6-4-4-7zM58 164c-4-2-4-6 0-8l21-12c3-2 7 0 7 4v24c0 4-4 6-7 4z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='50' x2='550' y1='50' y2='550' gradientTransform='translate(-50 -50)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%230047AB'/%3E%3Cstop offset='.7' stop-color='%238A2BE2'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+}

src/branding/centos.scss

@@ -0,0 +1,40 @@
+@use "standard.scss" as *;
+
+:root {
+  /* Defaults to a "Fedora remix"; if not a remix, set "none" */
+  --remix: none;
+
+  /*
+  Brand colors
+  */
+  --brand-primary: black;
+  --brand-text: white;
+
+  /*
+  Space between the logo and text; default is 0.5em, which is half a character wide
+  --logo-gap: 0.5em;
+  */
+
+  /*
+  Size of the logo
+  */
+  --logo-height: 3rem;
+  --logo-width: 3rem;
+
+  /*
+  In case the logo needs a dropshadow or something similar, you can add
+  a filter here; 'none' also works as an option
+  */
+  --logo-filter: drop-shadow(0 0 6px rgba(0 0 0 / 0.5));
+
+  /*
+  The actual logo SVG.
+
+  First, optimize the SVG with SVGO; there's a web-based version
+  called SVGOMG at https://jakearchibald.github.io/svgomg/
+
+  Then, encode using URI encoding (not base64) and use as a
+  background. There's a useful tool at https://svgencode.com/
+  */
+  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg stroke-width='.3' paint-order='fill markers stroke' transform='matrix(3.1840795,0,0,3.1840795,-1171.916,804.24614)'%3E%3Ccircle cx='435.1' cy='-124.1' r='20.1' fill='%23a14f8c' transform='rotate(-15)'/%3E%3Cpath fill='%23fff' d='m388-248-4 5h-7v6l-4 4 4 5v6h7l4 5 5-5h6v-6l4-5-4-4-6-6zm1 5v5l-1 1-1-1v-5zm-8 2 4 3v2h-2l-3-3zm-4 7h5l2 1-2 2h-5zm17 0h5v3h-5l-1-2zm-11 5h2v2l-3 3-2-2zm8 0h2l4 3-2 2-4-3zm-3 1 1 1v5h-2v-5z'/%3E%3Cpath fill='%23efa724' d='m389-236-1 2-1-2v2h-2l1 1-1 2h2v2l1-2 1 2v-2h2l-1-2 1-1h-2zm4-7 2 2-4 3v2h2l4-3 2 2v-6z'/%3E%3C/g%3E%3C/svg%3E");
+}

src/branding/standard.scss

@@ -0,0 +1,119 @@
+/***
+Standard base theme for customizing the heading
+***/
+
+/* Override the top header */
+.pf-v5-c-page__main-group > .pf-v5-c-page__main-section:first-child {
+  /* If there's no primary, default to black */
+  --_primary: var(--brand-primary, white);
+  /* If there's no secondary, default to a second instance of primary */
+  --_secondary: var(--brand-secondary, var(--_primary));
+  /* If there's no text color, default to white */
+  --_text: var(--brand-text, black);
+  /* Gradient angle is horizontal by default */
+  --_gradient-angle: var(--gradient-angle, 90deg);
+  /* Where the gradient starts fading; can be in px, %, rem, or other units */
+  --_gradient-start: var(--gradient-start, 0%);
+  /* Where the gradient stops fading; can be in px, %, rem, or other units */
+  --_gradient-stop: var(--gradient-stop, 100%);
+
+  /* If there's a background-custom variable use it, otherwise gradient */
+	background: var(--background-custom, linear-gradient(var(--_gradient-angle), var(--_primary) var(--_gradient-start), var(--_secondary) var(--_gradient-stop)));
+
+  .pf-v5-c-content {
+    --pf-v5-c-content--Color: var(--_text);
+  }
+
+  /* Hide the included logo section; this will be handled by a ::before */
+  .logo {
+    display: none;
+  }
+
+  h1 {
+    display: flex;
+    align-items: center;
+    gap: var(--logo-gap, 0.5em);
+
+    &::before {
+      /*
+      First, optimize the SVG with SVGO; there's a web-based version
+      called SVGOMG at https://jakearchibald.github.io/svgomg/
+
+      Then, encode using URI encoding (not base64) and use as a
+      background. There's a useful tool at https://svgencode.com/ for
+      this; choose the "background" method.
+
+      Use the value you get to set --logo in your disto customization
+      file, as a CSS variable. The CSS here will do the rest.
+      */
+      background: var(--logo) center no-repeat;
+
+      /*
+      Make the logo visible and have it fill the space vertically,
+      preserving apsect ratio
+      */
+      content: '';
+      display: inline-block;
+      height: var(--logo-height);
+      width: var(--logo-width);
+      min-width: var(--logo-width);
+      filter: var(--logo-filter, none);
+    }
+  }
+
+  #toggle-kebab {
+    /* Use a local text color, assigned to brand text color */
+    --_kebab-color: var(--_text);
+
+    /* Same, but slightly transparent */
+    --_kebab-color-hover: color-mix(var(--_text) 80%, transparent);
+
+    path {
+      fill: var(--_kebab-color);
+    }
+
+    /* Redefine the text color when hovering */
+    &:hover {
+      --_kebab-color: var(var(--_kebab-color-hover));
+    }
+  }
+}
+
+/*
+Fedora Remix badge
+*/
+
+:where(:root) {
+  --remix-height: 32px;
+  --remix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 211.7 106.7'%3E%3Cpath fill='%2351a2da' d='M20.6 65.6H191a20.5 20.5 0 1 1 0 41H20.6a20.5 20.5 0 1 1 0-41z'/%3E%3Cpath fill='%2351a2da' d='M1119.7 46.3v38.4c0 4.8 7.2 4.8 7.2 0V59.1h7.4c1.7 0 3.2-1.2 3.2-3.2s-1.6-3.3-3.2-3.3h-7.4v-5.9c0-3.8 3-6.9 8.9-6.8 2 0 2.8.5 3.6 1 4 2.7 8-3.6 3.7-6a14.5 14.5 0 0 0-8-2.3c-9.4 0-15.3 7.1-15.4 13.7zm94.1-13c-2.3-.1-4 2.1-3.6 4.2V54c-7-6-18.6-5.6-25.2 1a19 19 0 0 0-3 24c3.5 5.6 10 9.6 16.6 9.3a19 19 0 0 0 11.6-4.5c-.3 2 1.3 4.3 3.6 4.2 2.2 0 4-2.1 3.6-4.2V36.5a3.6 3.6 0 0 0-3.6-3.2zm-15.6 23.5c6.4-.1 12.2 5.6 12 12a12 12 0 0 1-24 1 12 12 0 0 1 12-13zm107.5-7.3c-5 0-8.5 1.5-11 3.3-4 2.8.3 8.6 4.2 5.9 1.7-1.3 3-2 6.8-2 4.6 0 8.3 1.8 8.3 5.3-2.5 1.5-13.2 2.8-19 6.1-5.8 3.3-5.5 7.5-5.5 10.2 0 5.9 6.2 9.8 11.6 9.8 5.4 0 7.7-1 13-4.7v1c-.2 5 7.3 5 7.2 0V63.2c0-8.8-6.3-13.6-15.6-13.7zm8.5 19.6v5.3c0 2.8-1.8 4-3.6 5.2-1.8 1-5.6 2-7.7 2-2.5.2-5.9-.4-6-3.4 0-1.8.8-2.9 2.3-4.1 3.3-2.5 7.9-3.4 15-5zM1270 49.6c-3.1 0-3.6 2.6-3.6 3.6v31.3a3.7 3.7 0 1 0 7.4 0V65.4c0-7.5 6-9 8-9 1.6 0 2.9.8 4.1.8 1.9-.1 3.4-1.3 3.4-3.5 0-3.5-4.4-4-7.5-4-3.2.1-5.9 1.1-8.2 2.5 0 0-.5-2.6-3.6-2.6zm-28.4-.3a19.6 19.5 0 0 0-19.6 19.5 19.6 19.5 0 0 0 19.6 19.5 19.6 19.5 0 0 0 19.7-19.5 19.6 19.5 0 0 0-19.7-19.5zm0 7.3a12.3 12.2 0 0 1 12.3 12.2 12.3 12.2 0 0 1-12.3 12.2 12.3 12.2 0 0 1-12.2-12.2 12.3 12.2 0 0 1 12.2-12.2zm-90-5.6c-7 2.7-11.7 9.4-11.7 17.6 0 8.6 6 19.8 18.5 19.8a20 20 0 0 0 15-5.2 3.6 3.6 0 1 0-5-5.2c-1.7 1.6-4.2 4-11.3 3.2-3-.3-6.3-2.8-7.4-4.7l23.2-9.9a3.6 3.6 0 0 0 1.9-4.6c-4.2-8.2-11.5-15.5-23.1-11zm14.7 10.7-19.4 8.3c-1.4-5.2 4.3-11.2 7.4-12.4a10 10 0 0 1 12 4.1z' font-family='Comfortaa' font-weight='700' letter-spacing='0' style='line-height:25px;-inkscape-font-specification:Comfortaa' transform='translate(-1115.3 -32.6)' word-spacing='0'/%3E%3Cpath fill='%23fff' d='M1143.5 108c-1.7 0-2 1.5-2 2.1v17.7c0 1 .9 2 2 2a2 2 0 0 0 2.1-2V117c0-4.2 3.4-5.1 4.6-5.1.9 0 1.6.5 2.3.5a2 2 0 0 0 1.9-2c0-2-2.5-2.2-4.2-2.2-1.8 0-3.3.6-4.6 1.4 0 0-.3-1.5-2-1.5zm34 .9c-4 1.5-6.6 5.2-6.6 9.8 0 4.9 3.4 11 10.4 11.1 4.7 0 7-1.7 8.3-3a2 2 0 1 0-2.8-2.8c-.9.9-2.3 2.2-6.3 1.8a6.3 6.3 0 0 1-4-2.7l12.9-5.5a2 2 0 0 0 1-2.6c-2.3-4.5-6.4-8.6-12.9-6.1zm8.1 6-10.8 4.6c-.7-2.9 2.4-6.3 4.2-6.9 2.5-1 5.4.1 6.6 2.3zm77.6-6.8q2 .5 2 2v17.8q0 1.6-2 2h-.1q-1.7 0-2-2v-17.5q.2-2.3 2-2.3zm-51.9.5q1.5 0 2 1.3 1.5-1.3 4.6-1.3 4 0 6.6 3 .8-1.6 4.8-2.7l1.7-.3q5 0 7.8 4.7 1 2 1 3.8v11q0 1.4-2 1.8h-.1q-2-.4-2-2v-10.6q0-3.2-3.3-4.4l-1-.2h-.6q-2.7 0-4 3.2-.3.6-.3 1v11q-.3 2-2 2-2-.4-2-2v-9q0-3.4-.9-4.2-1.4-2-3.6-2h-.3q-3 0-4.3 3.3-.2.8-.2 2.2v9.8q0 1.5-2 1.9-1.6 0-2-2v-17q.2-2.3 2.1-2.3zm81.6 7.5 5.6-7q.4-.3 1.4-.5 2 .5 2 1.8v.5q0 .7-2.8 3.9l-3.6 4.5q6.4 7.6 6.4 8.2v.5q0 1.5-2 1.9-1.3 0-2.5-2l-4.5-5.4q-5.4 6.8-5.8 7-.5.4-1 .4h-.1q-1.7 0-2-2.1 0-.9 3-4.2l3.3-4.4-6.1-7.7-.2-.8q.4-2 2-2 1.3 0 2.8 2.3l4.1 5z' color='%23000' font-family='sans-serif' font-weight='400' overflow='visible' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:%23000;solid-opacity:1' transform='translate(-1115.3 -32.6)'/%3E%3C/svg%3E");
+}
+
+.pf-v5-c-wizard__footer {
+  &::after {
+    /*
+    First, optimize the SVG with SVGO; there's a web-based version
+    called SVGOMG at https://jakearchibald.github.io/svgomg/
+
+    Then, encode using URI encoding (not base64) and use as a
+    background. There's a useful tool at https://svgencode.com/ for
+    this; choose the "background" method.
+
+    Use the value you get to set --logo in your disto customization
+    file, as a CSS variable. The CSS here will do the rest.
+    */
+    background: var(--remix) center right no-repeat;
+
+    /*
+    Make the logo visible and have it fill the space vertically,
+    preserving apsect ratio
+    */
+    content: '';
+    display: block;
+    height: var(--remix-height);
+    /* Difference between PF button height (36px) and the graphic */
+    margin-block-start: calc((36px - var(--remix-height)) / 2);
+    pointer-events: none;
+    filter: grayscale(1) brightness(1.33);
+    flex: auto;
+  }
+}

src/components/app.scss

@@ -1,7 +1,9 @@
 @import "global-variables";
 
 // FIXME: Make this automatically distro-specific
-@import "../branding/fedora";
+/* @import "../branding/fedora"; */
+/* @import "../branding/centos"; */
+@import "../branding/bazzite";
 
 // Copied from cockpit/pkg/lib/page.scss instead of including it in its entirety:
 // Let PF4 handle the scrolling through page component otherwise we might get double scrollbar