web/style/flow: flow css barrel file

authentik/flows/templates/if/flow.html

@@ -27,8 +27,10 @@
         "layout": "{{ flow.layout }}",
     };
 </script>
+{% endblock %}
 
-<link rel="stylesheet" type="text/css" href="{% versioned_script 'dist/styles/static-%v.css' %}" />
+{% block interface_stylesheet %}
+<link rel="stylesheet" type="text/css" href="{% versioned_script 'dist/styles/flow-%v.css' %}" />
 {% endblock %}
 
 {% block head %}

web/paths/node.js

@@ -90,6 +90,10 @@ export const EntryPoint = /** @type {const} */ ({
         in: resolve(PackageRoot, "src", "styles", "authentik", "static.global.css"),
         out: resolve(DistDirectory, "styles", "static"),
     },
+    FlowsStyles: {
+        in: resolve(PackageRoot, "src", "styles", "authentik", "flows.global.css"),
+        out: resolve(DistDirectory, "styles", "flow"),
+    },
 });
 
 //#endregion

web/scripts/build-web.mjs

@@ -243,7 +243,11 @@ async function doBuild() {
 }
 
 async function doProxy() {
-    const entryPoints = [EntryPoint.InterfaceStyles, EntryPoint.StaticStyles];
+    const entryPoints = [
+        EntryPoint.InterfaceStyles,
+        EntryPoint.StaticStyles,
+        EntryPoint.FlowsStyles,
+    ];
 
     const buildOptions = createESBuildOptions({
         entryPoints,

web/src/styles/authentik/flows.global.css

@@ -0,0 +1,237 @@
+@import "@patternfly/patternfly/base/patternfly-common.css";
+@import "@patternfly/patternfly/base/patternfly-globals.css";
+@import "@patternfly/patternfly/base/patternfly-themes.css";
+@import "@patternfly/patternfly/base/patternfly-fa-icons.css";
+@import "@patternfly/patternfly/base/patternfly-pf-icons.css";
+
+@import "@patternfly/patternfly/components/Spinner/spinner.css";
+
+@import "#fonts/RedHat/faces.css";
+
+@import "./base/fonts.css";
+@import "./base/variables.css";
+@import "./base/scrollbars.css";
+@import "./base/globals.css";
+@import "./base/common.css";
+@import "./base/placeholder.css";
+
+@import "#styles/locales/ja/globals.css";
+@import "#styles/locales/ko/globals.css";
+@import "#styles/locales/zh/globals.css";
+
+@import "@patternfly/patternfly/components/BackgroundImage/background-image.css";
+@import "@patternfly/patternfly/components/Button/button.css";
+@import "@patternfly/patternfly/components/Form/form.css";
+@import "@patternfly/patternfly/components/Drawer/drawer.css";
+@import "@patternfly/patternfly/components/List/list.css";
+@import "@patternfly/patternfly/components/Login/login.css";
+@import "@patternfly/patternfly/components/Title/title.css";
+@import "@patternfly/patternfly/components/Avatar/avatar.css";
+@import "@patternfly/patternfly/utilities/Text/text.css";
+@import "./components/Drawer/drawer.css";
+@import "./components/Form/form.css";
+@import "./components/Login/login.css";
+@import "./components/Icon/icon.css";
+@import "#elements/locale/ak-locale-select.css";
+@import "#elements/locale/ak-locale-select.css";
+@import "#flow/FlowExecutor.css";
+
+/**
+ * @file Static global styles for authentik.
+ *
+ * Similar the base/globals.css file, this file is only injected in server templates
+ * that may not have the full web component support.
+ * If you're deciding on where to put a style, prefer a more specific file
+ * to avoid unnecessarily increasing the global scope of the style.
+ */
+
+/* #region Custom login variables */
+
+:root {
+    --ak-c-login--PaddingMax: 8dvw;
+
+    --ak-c-login--spacer: clamp(
+        var(--pf-global--spacer--md),
+        var(--pf-global--spacer--2xl),
+        var(--ak-c-login--PaddingMax)
+    );
+
+    --ak-c-login--MaxWidth: 35rem;
+    --ak-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+    --ak-c-login__main--Color: var(--pf-global--Color--dark-100);
+
+    --ak-c-login__main--brand-PaddingMin: var(--pf-global--spacer--xs);
+    --ak-c-login__main--brand-PaddingIdeal: 5rem;
+    --ak-c-login__main--brand-PaddingMax: 15dvh;
+
+    --ak-c-login__main-ColumnWidth: minmax(
+        min(100%, var(--ak-c-login--MaxWidth)),
+        var(--ak-c-login--MaxWidth)
+    );
+
+    --ak-c-login__main-header-PaddingBlock: clamp(
+        var(--pf-global--spacer--xs),
+        6dvw,
+        var(--pf-global--spacer--lg)
+    );
+
+    --ak-c-login__main-header-PaddingInline: var(--ak-c-login--spacer);
+
+    --ak-c-login__main--footer-PaddingMin: var(--pf-global--spacer--xs);
+    --ak-c-login__main--footer-PaddingIdeal: 3rem;
+    --ak-c-login__main--footer-PaddingMax: 9dvh;
+    --ak-c-login__main--BoxShadow: var(--pf-global--BoxShadow--md);
+
+    --ak-c-login__footer--PaddingBlock: var(--pf-global--spacer--md);
+    --ak-c-login__footer--Color: var(--ak-global--BackgroundColorContrast--100);
+
+    --ak-c-login__footer--ColumnGap: min(var(--pf-global--spacer--2xl), 2dvw);
+    --ak-c-login__footer--RowGap: var(--pf-global--spacer--md);
+
+    --ak-c-login__footer--Display: grid;
+
+    --ak-c-login__footer--MaxWidth: var(--ak-c-login--MaxWidth);
+    /* Gracefully degrade to the login max width if CSS size functions are not supported. */
+    --ak-c-login__footer--MaxWidth: min(100dvw, var(--ak-c-login--MaxWidth));
+
+    --ak-c-login__footer--TrackMin: max-content;
+    --ak-c-login__footer--TrackWidth: minmax(
+        var(--ak-c-login__footer--TrackMin),
+        var(--ak-c-login__footer--TrackMax)
+    );
+
+    --ak-c-login__footer--ItemMaxWidth: calc(
+        var(--ak-c-login__footer--MaxWidth) - var(--ak-c-login__footer--ColumnGap)
+    );
+
+    --ak-c-login__footer--ColumnCount: 4;
+    --ak-c-login__footer--TrackMax: calc(
+        (var(--ak-c-login__footer--MaxWidth) / var(--ak-c-login__footer--ColumnCount)) -
+            var(--ak-c-login__footer--ColumnGap)
+    );
+
+    @media (width <= 35rem) {
+        --ak-c-login__footer--TrackWidth: 1fr;
+        --ak-c-login__footer__list-item--FlexBasis: 100%;
+    }
+}
+
+[data-theme="dark"] .pf-c-login {
+    --ak-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+}
+
+/* #endregion */
+
+/* #region PF4 Login */
+
+.pf-c-login {
+    --pf-c-login__main-header--PaddingTop: var(--ak-c-login__main-header-PaddingBlock);
+    --pf-c-login__main-header--PaddingBottom: var(--ak-c-login__main-header-PaddingBlock);
+    --pf-c-login__main-header--PaddingLeft: var(--ak-c-login__main-header-PaddingInline);
+    --pf-c-login__main-header--PaddingRight: var(--ak-c-login__main-header-PaddingInline);
+
+    --pf-c-login__main--BackgroundColor: var(--ak-c-login__main--BackgroundColor);
+
+    --pf-c-login__main-body--PaddingLeft: var(--ak-c-login--spacer);
+    --pf-c-login__main-body--PaddingRight: var(--ak-c-login--spacer);
+    --pf-c-login__main-body--PaddingBottom: 0;
+
+    --pf-c-login__main-footer--PaddingBottom: clamp(
+        var(--ak-c-login__main--footer-PaddingMin),
+        var(--ak-c-login__main--footer-PaddingIdeal),
+        var(--ak-c-login__main--footer-PaddingMax)
+    );
+    --pf-c-login__main-footer-band--BackgroundColor: transparent;
+
+    --pf-c-login__footer--c-list--xl--PaddingTop: 0;
+    --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--lg);
+    --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--lg);
+
+    --pf-c-login__container--PaddingLeft: 0 !important;
+    --pf-c-login__container--PaddingRight: 0 !important;
+}
+
+/* #endregion */
+
+/* #region Form */
+
+/* Fallback form controls with minimal runtime expectations. */
+.form-control-static {
+    margin-top: var(--pf-global--spacer--sm);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .avatar {
+        display: flex;
+        align-items: center;
+    }
+
+    img {
+        margin-right: var(--pf-global--spacer--xs);
+    }
+
+    a {
+        padding-top: var(--pf-global--spacer--xs);
+        padding-bottom: var(--pf-global--spacer--xs);
+        line-height: var(--pf-global--spacer--xl);
+    }
+}
+
+/* #endregion */
+
+/* #region Flow Links */
+
+[name="flow-links"] {
+    [part="list"],
+    &::part(list) {
+        --pf-c-list--m-inline--li--MarginRight: 0;
+
+        /* 3 entries is a unique scenario where 2 columns is visually balanced. */
+        &[data-count="3"] {
+            --ak-c-login__footer--ColumnCount: 2;
+        }
+
+        justify-content: center;
+        column-gap: var(--ak-c-login__footer--ColumnGap);
+        row-gap: var(--ak-c-login__footer--RowGap);
+
+        max-width: var(--ak-c-login__footer--MaxWidth);
+        place-items: center;
+        display: var(--ak-c-login__footer--Display);
+
+        grid-template-columns: repeat(
+            var(--ak-c-login__footer--ColumnCount),
+            var(--ak-c-login__footer--TrackWidth)
+        );
+
+        grid-template-rows:
+            [header] max-content
+            [main] max-content
+            [footer];
+    }
+
+    [part="list-item"],
+    &::part(list-item) {
+        /* CSS grid is preferred, but if the custom CSS overrides this, default to something reasonable. */
+        flex: 1 1 var(--ak-c-login__footer__list-item--FlexBasis, auto);
+        text-align: center;
+        max-width: var(--ak-c-login__footer--ItemMaxWidth);
+
+        &[data-kind="text"] {
+            &[data-track-name="start"] {
+                grid-column: 1 / -1;
+            }
+            &[data-track-name="end"] {
+                grid-column: 1 / -1;
+            }
+        }
+    }
+
+    [part="list-item-link"],
+    &::part(list-item-link) {
+        color: unset;
+    }
+}
+
+/* #endregion */