From ce10a1367ab7ab1a8075fc65b0bb6d2e537a458a Mon Sep 17 00:00:00 2001 From: Garrett LeSage Date: Mon, 25 Nov 2024 16:58:18 +0100 Subject: [PATCH] Add variants --- src/branding/bazzite.scss | 38 ++++++++++++ src/branding/centos.scss | 40 +++++++++++++ src/branding/standard.scss | 119 +++++++++++++++++++++++++++++++++++++ src/components/app.scss | 4 +- test/reference | 2 +- 5 files changed, 201 insertions(+), 2 deletions(-) create mode 100644 src/branding/bazzite.scss create mode 100644 src/branding/centos.scss create mode 100644 src/branding/standard.scss diff --git a/src/branding/bazzite.scss b/src/branding/bazzite.scss new file mode 100644 index 000000000..3b689e519 --- /dev/null +++ b/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"); +} diff --git a/src/branding/centos.scss b/src/branding/centos.scss new file mode 100644 index 000000000..c36fe1b83 --- /dev/null +++ b/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"); +} diff --git a/src/branding/standard.scss b/src/branding/standard.scss new file mode 100644 index 000000000..ec1cb4a7d --- /dev/null +++ b/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; + } +} diff --git a/src/components/app.scss b/src/components/app.scss index 6875824dd..5cb39b72f 100644 --- a/src/components/app.scss +++ b/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 diff --git a/test/reference b/test/reference index 79c8ff6f9..958337a10 160000 --- a/test/reference +++ b/test/reference @@ -1 +1 @@ -Subproject commit 79c8ff6f98912269ddc461c5917849b6d3275c55 +Subproject commit 958337a1040c403b54d58c227486dafa4e0a24b4