From b6b820f6f1a976278f4d0711e556de095408e383 Mon Sep 17 00:00:00 2001 From: Jens L Date: Thu, 9 Mar 2023 23:17:53 +0100 Subject: [PATCH] web: toggle dark/light theme manually (#4876) --- authentik/core/templates/base/skeleton.html | 1 + authentik/tenants/api.py | 17 +- authentik/tenants/tests.py | 4 + schema.yml | 16 + web/rollup.config.js | 2 +- web/src/admin/AdminInterface.ts | 14 +- web/src/admin/DebugPage.ts | 3 +- .../admin/admin-overview/AdminOverviewPage.ts | 2 - .../admin/admin-overview/DashboardUserPage.ts | 2 - .../admin-overview/TopApplicationsTable.ts | 3 +- .../admin/applications/ApplicationListPage.ts | 2 - .../admin/applications/ApplicationViewPage.ts | 13 +- .../applications/wizard/ApplicationWizard.ts | 3 +- .../wizard/TypeApplicationWizardPage.ts | 3 +- .../TypeOAuthAPIApplicationWizardPage.ts | 3 +- .../oauth/TypeOAuthApplicationWizardPage.ts | 3 +- .../saml/TypeSAMLApplicationWizardPage.ts | 3 +- web/src/admin/events/EventViewPage.ts | 3 +- web/src/admin/flows/FlowViewPage.ts | 12 +- web/src/admin/groups/GroupViewPage.ts | 2 - web/src/admin/outposts/OutpostHealth.ts | 2 - web/src/admin/outposts/OutpostHealthSimple.ts | 3 +- .../admin/outposts/ServiceConnectionWizard.ts | 5 +- web/src/admin/policies/PolicyWizard.ts | 5 +- .../PropertyMappingWizard.ts | 5 +- web/src/admin/providers/ProviderViewPage.ts | 3 +- web/src/admin/providers/ProviderWizard.ts | 5 +- .../providers/ldap/LDAPProviderViewPage.ts | 2 - .../oauth2/OAuth2ProviderViewPage.ts | 2 - .../providers/proxy/ProxyProviderViewPage.ts | 2 - .../providers/saml/SAMLProviderViewPage.ts | 2 - .../providers/scim/SCIMProviderViewPage.ts | 2 - web/src/admin/sources/SourceWizard.ts | 5 +- .../admin/sources/ldap/LDAPSourceViewPage.ts | 13 +- .../sources/oauth/OAuthSourceViewPage.ts | 3 +- .../admin/sources/plex/PlexSourceViewPage.ts | 3 +- .../admin/sources/saml/SAMLSourceViewPage.ts | 3 +- web/src/admin/stages/StageWizard.ts | 5 +- .../stages/invitation/InvitationListLink.ts | 3 +- web/src/admin/users/UserListPage.ts | 3 +- web/src/admin/users/UserViewPage.ts | 2 - web/src/common/styles/authentik.css | 327 ------------------ web/src/common/styles/theme-dark.css | 321 +++++++++++++++++ web/src/common/ui/config.ts | 4 +- web/src/elements/Alert.ts | 3 +- web/src/elements/Base.ts | 146 +++++++- web/src/elements/CodeMirror.ts | 25 +- web/src/elements/Diagram.ts | 40 ++- web/src/elements/Divider.ts | 2 - web/src/elements/EmptyState.ts | 3 +- web/src/elements/Expand.ts | 3 +- web/src/elements/Label.ts | 3 +- web/src/elements/Markdown.ts | 2 - web/src/elements/PageHeader.ts | 2 - web/src/elements/Tabs.ts | 2 - web/src/elements/Tooltip.ts | 2 - web/src/elements/TreeView.ts | 3 +- web/src/elements/buttons/ModalButton.ts | 2 - web/src/elements/buttons/SpinnerButton.ts | 2 - web/src/elements/cards/AggregateCard.ts | 3 +- web/src/elements/charts/Chart.ts | 23 +- web/src/elements/chips/Chip.ts | 3 +- web/src/elements/chips/ChipGroup.ts | 2 - web/src/elements/forms/Form.ts | 2 - web/src/elements/forms/FormGroup.ts | 2 - .../elements/forms/HorizontalFormElement.ts | 2 - web/src/elements/forms/Radio.ts | 2 - web/src/elements/forms/SearchSelect.ts | 3 +- web/src/elements/notifications/APIDrawer.ts | 2 - .../notifications/NotificationDrawer.ts | 3 +- web/src/elements/router/RouterOutlet.ts | 3 - web/src/elements/sidebar/Sidebar.ts | 2 - web/src/elements/sidebar/SidebarBrand.ts | 5 +- web/src/elements/sidebar/SidebarItem.ts | 2 - web/src/elements/table/Table.ts | 2 - web/src/elements/table/TableModal.ts | 2 - web/src/elements/table/TablePagination.ts | 16 +- web/src/elements/table/TableSearch.ts | 2 - web/src/elements/utils/TimeDeltaHelp.ts | 3 +- web/src/elements/wizard/ActionWizardPage.ts | 3 +- web/src/elements/wizard/WizardFormPage.ts | 3 +- web/src/elements/wizard/WizardPage.ts | 3 +- web/src/flow/FlowExecutor.ts | 32 +- web/src/flow/FlowInspector.ts | 2 - web/src/flow/providers/oauth2/DeviceCode.ts | 3 +- web/src/flow/sources/apple/AppleLoginInit.ts | 3 +- web/src/flow/sources/plex/PlexLoginInit.ts | 3 +- web/src/flow/stages/FlowErrorStage.ts | 2 - web/src/flow/stages/RedirectStage.ts | 2 - .../stages/access_denied/AccessDeniedStage.ts | 4 +- .../AuthenticatorDuoStage.ts | 3 +- .../AuthenticatorSMSStage.ts | 3 +- .../AuthenticatorStaticStage.ts | 2 - .../AuthenticatorTOTPStage.ts | 2 - .../AuthenticatorValidateStage.ts | 3 +- .../AuthenticatorValidateStageCode.ts | 3 +- .../AuthenticatorValidateStageDuo.ts | 3 +- .../AuthenticatorValidateStageWebAuthn.ts | 2 - .../WebAuthnAuthenticatorRegisterStage.ts | 3 +- .../flow/stages/autosubmit/AutosubmitStage.ts | 3 +- web/src/flow/stages/captcha/CaptchaStage.ts | 3 +- web/src/flow/stages/consent/ConsentStage.ts | 13 +- web/src/flow/stages/dummy/DummyStage.ts | 3 +- web/src/flow/stages/email/EmailStage.ts | 3 +- .../identification/IdentificationStage.ts | 12 +- web/src/flow/stages/password/PasswordStage.ts | 3 +- web/src/flow/stages/prompt/PromptStage.ts | 3 +- web/src/user/LibraryApplication.ts | 2 - web/src/user/LibraryPage.ts | 4 +- web/src/user/UserInterface.ts | 9 +- .../user/user-settings/BaseUserSettings.ts | 3 +- .../user/user-settings/UserSettingsPage.ts | 2 - .../user-settings/details/UserPassword.ts | 3 +- .../details/UserSettingsFlowExecutor.ts | 3 +- .../user-settings/sources/SourceSettings.ts | 8 +- .../docs/interfaces/admin/customization.md | 4 + website/docs/interfaces/flow/customization.md | 7 + website/docs/interfaces/user/customization.md | 4 + website/sidebars.js | 5 + 119 files changed, 658 insertions(+), 688 deletions(-) create mode 100644 web/src/common/styles/theme-dark.css create mode 100644 website/docs/interfaces/flow/customization.md diff --git a/authentik/core/templates/base/skeleton.html b/authentik/core/templates/base/skeleton.html index f02746ab2..fb2b1195c 100644 --- a/authentik/core/templates/base/skeleton.html +++ b/authentik/core/templates/base/skeleton.html @@ -16,6 +16,7 @@ {% block head_before %} {% endblock %} + {% block head %} diff --git a/authentik/tenants/api.py b/authentik/tenants/api.py index d7a281371..42b2985c0 100644 --- a/authentik/tenants/api.py +++ b/authentik/tenants/api.py @@ -1,10 +1,11 @@ """Serializer for tenant models""" from typing import Any +from django.db import models from drf_spectacular.utils import extend_schema from rest_framework.decorators import action from rest_framework.exceptions import ValidationError -from rest_framework.fields import CharField, ListField +from rest_framework.fields import CharField, ChoiceField, ListField from rest_framework.filters import OrderingFilter, SearchFilter from rest_framework.permissions import AllowAny from rest_framework.request import Request @@ -59,6 +60,14 @@ class TenantSerializer(ModelSerializer): ] +class Themes(models.TextChoices): + """Themes""" + + AUTOMATIC = "automatic" + LIGHT = "light" + DARK = "dark" + + class CurrentTenantSerializer(PassiveSerializer): """Partial tenant information for styling""" @@ -71,6 +80,12 @@ class CurrentTenantSerializer(PassiveSerializer): read_only=True, default=CONFIG.y("footer_links", []), ) + ui_theme = ChoiceField( + choices=Themes.choices, + source="attributes.settings.theme.base", + default=Themes.AUTOMATIC, + read_only=True, + ) flow_authentication = CharField(source="flow_authentication.slug", required=False) flow_invalidation = CharField(source="flow_invalidation.slug", required=False) diff --git a/authentik/tenants/tests.py b/authentik/tenants/tests.py index 95e43e8d6..73bd8f7d3 100644 --- a/authentik/tenants/tests.py +++ b/authentik/tenants/tests.py @@ -7,6 +7,7 @@ from authentik.core.tests.utils import create_test_admin_user, create_test_tenan from authentik.events.models import Event, EventAction from authentik.lib.config import CONFIG from authentik.lib.utils.time import timedelta_from_string +from authentik.tenants.api import Themes from authentik.tenants.models import Tenant @@ -24,6 +25,7 @@ class TestTenants(APITestCase): "branding_title": "authentik", "matched_domain": tenant.domain, "ui_footer_links": CONFIG.y("footer_links"), + "ui_theme": Themes.AUTOMATIC, "default_locale": "", }, ) @@ -42,6 +44,7 @@ class TestTenants(APITestCase): "branding_title": "custom", "matched_domain": "bar.baz", "ui_footer_links": CONFIG.y("footer_links"), + "ui_theme": Themes.AUTOMATIC, "default_locale": "", }, ) @@ -57,6 +60,7 @@ class TestTenants(APITestCase): "branding_title": "authentik", "matched_domain": "fallback", "ui_footer_links": CONFIG.y("footer_links"), + "ui_theme": Themes.AUTOMATIC, "default_locale": "", }, ) diff --git a/schema.yml b/schema.yml index b2ae7439e..f1848e670 100644 --- a/schema.yml +++ b/schema.yml @@ -27746,6 +27746,11 @@ components: $ref: '#/components/schemas/FooterLink' readOnly: true default: [] + ui_theme: + allOf: + - $ref: '#/components/schemas/UiThemeEnum' + readOnly: true + default: automatic flow_authentication: type: string flow_invalidation: @@ -27768,6 +27773,7 @@ components: - default_locale - matched_domain - ui_footer_links + - ui_theme DeniedActionEnum: enum: - message_continue @@ -39910,6 +39916,16 @@ components: - description - model_name - name + UiThemeEnum: + enum: + - automatic + - light + - dark + type: string + description: |- + * `automatic` - Automatic + * `light` - Light + * `dark` - Dark UsedBy: type: object description: A list of all objects referencing the queried object diff --git a/web/rollup.config.js b/web/rollup.config.js index 18ae58cb0..67c3ff104 100644 --- a/web/rollup.config.js +++ b/web/rollup.config.js @@ -36,7 +36,7 @@ export const resources = [ src: "node_modules/@patternfly/patternfly/components/Spinner/spinner.css", dest: "dist/", }, - { src: "src/common/styles/authentik.css", dest: "dist/" }, + { src: "src/common/styles/*", dest: "dist/" }, { src: "src/custom.css", dest: "dist/" }, { diff --git a/web/src/admin/AdminInterface.ts b/web/src/admin/AdminInterface.ts index 28502a9b6..3c167a04c 100644 --- a/web/src/admin/AdminInterface.ts +++ b/web/src/admin/AdminInterface.ts @@ -9,7 +9,7 @@ import { import { autoDetectLanguage } from "@goauthentik/common/ui/locale"; import { me } from "@goauthentik/common/users"; import { WebsocketClient } from "@goauthentik/common/ws"; -import { AKElement } from "@goauthentik/elements/Base"; +import { Interface } from "@goauthentik/elements/Base"; import "@goauthentik/elements/messages/MessageContainer"; import "@goauthentik/elements/messages/MessageContainer"; import "@goauthentik/elements/notifications/APIDrawer"; @@ -25,7 +25,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -36,7 +35,7 @@ import { AdminApi, SessionUser, Version } from "@goauthentik/api"; autoDetectLanguage(); @customElement("ak-interface-admin") -export class AdminInterface extends AKElement { +export class AdminInterface extends Interface { @property({ type: Boolean }) sidebarOpen = true; @@ -60,7 +59,6 @@ export class AdminInterface extends AKElement { PFPage, PFButton, PFDrawer, - AKGlobal, css` .pf-c-page__main, .pf-c-drawer__content, @@ -72,13 +70,7 @@ export class AdminInterface extends AKElement { display: none; } .pf-c-page { - background-color: var(--pf-c-page--BackgroundColor) !important; - } - @media (prefers-color-scheme: dark) { - /* Global page background colour */ - .pf-c-page { - --pf-c-page--BackgroundColor: var(--ak-dark-background); - } + background-color: transparent !important; } `, ]; diff --git a/web/src/admin/DebugPage.ts b/web/src/admin/DebugPage.ts index 76a28112a..68db6ae27 100644 --- a/web/src/admin/DebugPage.ts +++ b/web/src/admin/DebugPage.ts @@ -8,7 +8,6 @@ import * as Sentry from "@sentry/browser"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -20,7 +19,7 @@ import { AdminApi } from "@goauthentik/api"; @customElement("ak-admin-debug-page") export class DebugPage extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFCard, PFPage, PFGrid, PFButton, AKGlobal]; + return [PFBase, PFCard, PFPage, PFGrid, PFButton]; } render(): TemplateResult { diff --git a/web/src/admin/admin-overview/AdminOverviewPage.ts b/web/src/admin/admin-overview/AdminOverviewPage.ts index f6267897c..41b19a4e1 100644 --- a/web/src/admin/admin-overview/AdminOverviewPage.ts +++ b/web/src/admin/admin-overview/AdminOverviewPage.ts @@ -19,7 +19,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, state } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFList from "@patternfly/patternfly/components/List/list.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -41,7 +40,6 @@ export class AdminOverviewPage extends AKElement { PFPage, PFContent, PFList, - AKGlobal, css` .row-divider { margin-top: -4px; diff --git a/web/src/admin/admin-overview/DashboardUserPage.ts b/web/src/admin/admin-overview/DashboardUserPage.ts index c189c42c9..1ca918d0b 100644 --- a/web/src/admin/admin-overview/DashboardUserPage.ts +++ b/web/src/admin/admin-overview/DashboardUserPage.ts @@ -8,7 +8,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFList from "@patternfly/patternfly/components/List/list.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -24,7 +23,6 @@ export class DashboardUserPage extends AKElement { PFPage, PFContent, PFList, - AKGlobal, css` .row-divider { margin-top: -4px; diff --git a/web/src/admin/admin-overview/TopApplicationsTable.ts b/web/src/admin/admin-overview/TopApplicationsTable.ts index dcd56e606..1638cc1d3 100644 --- a/web/src/admin/admin-overview/TopApplicationsTable.ts +++ b/web/src/admin/admin-overview/TopApplicationsTable.ts @@ -7,7 +7,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFTable from "@patternfly/patternfly/components/Table/table.css"; import { EventTopPerUser, EventsApi } from "@goauthentik/api"; @@ -18,7 +17,7 @@ export class TopApplicationsTable extends AKElement { topN?: EventTopPerUser[]; static get styles(): CSSResult[] { - return [PFTable, AKGlobal]; + return [PFTable]; } firstUpdated(): void { diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts index add0fb340..8f61692bd 100644 --- a/web/src/admin/applications/ApplicationListPage.ts +++ b/web/src/admin/applications/ApplicationListPage.ts @@ -18,7 +18,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -58,7 +57,6 @@ export class ApplicationListPage extends TablePage { return super.styles.concat( PFAvatar, PFCard, - AKGlobal, css` /* Fix alignment issues with images in tables */ .pf-c-table tbody > tr > * { diff --git a/web/src/admin/applications/ApplicationViewPage.ts b/web/src/admin/applications/ApplicationViewPage.ts index a6bad43ed..723c19d8b 100644 --- a/web/src/admin/applications/ApplicationViewPage.ts +++ b/web/src/admin/applications/ApplicationViewPage.ts @@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -66,17 +65,7 @@ export class ApplicationViewPage extends AKElement { missingOutpost = false; static get styles(): CSSResult[] { - return [ - PFBase, - PFBanner, - PFPage, - PFContent, - PFButton, - PFDescriptionList, - PFGrid, - PFCard, - AKGlobal, - ]; + return [PFBase, PFBanner, PFPage, PFContent, PFButton, PFDescriptionList, PFGrid, PFCard]; } render(): TemplateResult { diff --git a/web/src/admin/applications/wizard/ApplicationWizard.ts b/web/src/admin/applications/wizard/ApplicationWizard.ts index 04a3fc078..6bff94ff0 100644 --- a/web/src/admin/applications/wizard/ApplicationWizard.ts +++ b/web/src/admin/applications/wizard/ApplicationWizard.ts @@ -19,7 +19,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { CSSResult, TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -27,7 +26,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css"; @customElement("ak-application-wizard") export class ApplicationWizard extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFButton, PFRadio]; } @property({ type: Boolean }) diff --git a/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts b/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts index 2f0c05188..0771d9ac5 100644 --- a/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts +++ b/web/src/admin/applications/wizard/TypeApplicationWizardPage.ts @@ -5,7 +5,6 @@ import { t } from "@lingui/macro"; import { customElement } from "@lit/reactive-element/decorators/custom-element.js"; import { CSSResult, TemplateResult, html } from "lit"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -51,7 +50,7 @@ export class TypeApplicationWizardPage extends WizardPage { sidebarLabel = () => t`Authentication method`; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFForm, PFRadio, AKGlobal]; + return [PFBase, PFButton, PFForm, PFRadio]; } render(): TemplateResult { diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts index 3c618e038..89af99fd1 100644 --- a/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts +++ b/web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts @@ -6,7 +6,6 @@ import { t } from "@lingui/macro"; import { customElement } from "@lit/reactive-element/decorators/custom-element.js"; import { CSSResult, TemplateResult, html } from "lit"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -15,7 +14,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css"; @customElement("ak-application-wizard-type-oauth-api") export class TypeOAuthAPIApplicationWizardPage extends WizardPage { static get styles(): CSSResult[] { - return [PFBase, PFButton, PFForm, PFRadio, AKGlobal]; + return [PFBase, PFButton, PFForm, PFRadio]; } sidebarLabel = () => t`Method details`; diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts index 331d23781..005843c6d 100644 --- a/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts +++ b/web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts @@ -6,7 +6,6 @@ import { t } from "@lingui/macro"; import { customElement } from "@lit/reactive-element/decorators/custom-element.js"; import { CSSResult, TemplateResult, html } from "lit"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -44,7 +43,7 @@ export class TypeOAuthApplicationWizardPage extends WizardPage { ]; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFForm, PFRadio, AKGlobal]; + return [PFBase, PFButton, PFForm, PFRadio]; } sidebarLabel = () => t`Application type`; diff --git a/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts b/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts index 2b9a9ba75..17e5f9f2c 100644 --- a/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts +++ b/web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts @@ -6,7 +6,6 @@ import { t } from "@lingui/macro"; import { customElement } from "@lit/reactive-element/decorators/custom-element.js"; import { CSSResult, TemplateResult, html } from "lit"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -32,7 +31,7 @@ export class TypeOAuthApplicationWizardPage extends WizardPage { ]; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFForm, PFRadio, AKGlobal]; + return [PFBase, PFButton, PFForm, PFRadio]; } sidebarLabel = () => t`Application type`; diff --git a/web/src/admin/events/EventViewPage.ts b/web/src/admin/events/EventViewPage.ts index 117ae2273..f21e61c7a 100644 --- a/web/src/admin/events/EventViewPage.ts +++ b/web/src/admin/events/EventViewPage.ts @@ -10,7 +10,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; @@ -37,7 +36,7 @@ export class EventViewPage extends AKElement { event!: EventWithContext; static get styles(): CSSResult[] { - return [PFBase, PFGrid, PFDescriptionList, PFPage, PFContent, PFCard, AKGlobal]; + return [PFBase, PFGrid, PFDescriptionList, PFPage, PFContent, PFCard]; } render(): TemplateResult { diff --git a/web/src/admin/flows/FlowViewPage.ts b/web/src/admin/flows/FlowViewPage.ts index 78c60a7df..ca90898c0 100644 --- a/web/src/admin/flows/FlowViewPage.ts +++ b/web/src/admin/flows/FlowViewPage.ts @@ -14,7 +14,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -42,16 +41,7 @@ export class FlowViewPage extends AKElement { flow!: Flow; static get styles(): CSSResult[] { - return [ - PFBase, - PFPage, - PFDescriptionList, - PFButton, - PFCard, - PFContent, - PFGrid, - AKGlobal, - ].concat( + return [PFBase, PFPage, PFDescriptionList, PFButton, PFCard, PFContent, PFGrid].concat( css` img.pf-icon { max-height: 24px; diff --git a/web/src/admin/groups/GroupViewPage.ts b/web/src/admin/groups/GroupViewPage.ts index ae9142985..5c6e6b896 100644 --- a/web/src/admin/groups/GroupViewPage.ts +++ b/web/src/admin/groups/GroupViewPage.ts @@ -17,7 +17,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -59,7 +58,6 @@ export class GroupViewPage extends AKElement { PFCard, PFDescriptionList, PFSizing, - AKGlobal, ]; } diff --git a/web/src/admin/outposts/OutpostHealth.ts b/web/src/admin/outposts/OutpostHealth.ts index f78c4813f..eb83613ce 100644 --- a/web/src/admin/outposts/OutpostHealth.ts +++ b/web/src/admin/outposts/OutpostHealth.ts @@ -7,7 +7,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -22,7 +21,6 @@ export class OutpostHealthElement extends AKElement { return [ PFBase, PFDescriptionList, - AKGlobal, css` li { margin: 5px 0; diff --git a/web/src/admin/outposts/OutpostHealthSimple.ts b/web/src/admin/outposts/OutpostHealthSimple.ts index 96a101b3b..9b82f0d90 100644 --- a/web/src/admin/outposts/OutpostHealthSimple.ts +++ b/web/src/admin/outposts/OutpostHealthSimple.ts @@ -9,7 +9,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; import { OutpostHealth, OutpostsApi } from "@goauthentik/api"; @@ -29,7 +28,7 @@ export class OutpostHealthSimpleElement extends AKElement { showVersion = true; static get styles(): CSSResult[] { - return [PFBase, AKGlobal]; + return [PFBase]; } constructor() { diff --git a/web/src/admin/outposts/ServiceConnectionWizard.ts b/web/src/admin/outposts/ServiceConnectionWizard.ts index 84ee1e5c3..2e1067ff0 100644 --- a/web/src/admin/outposts/ServiceConnectionWizard.ts +++ b/web/src/admin/outposts/ServiceConnectionWizard.ts @@ -13,7 +13,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { CSSResult, TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -27,7 +26,7 @@ export class InitialServiceConnectionWizardPage extends WizardPage { connectionTypes: TypeCreate[] = []; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFForm, PFButton, PFRadio]; } sidebarLabel = () => t`Select type`; @@ -72,7 +71,7 @@ export class InitialServiceConnectionWizardPage extends WizardPage { @customElement("ak-service-connection-wizard") export class ServiceConnectionWizard extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFButton, PFRadio]; } @property() diff --git a/web/src/admin/policies/PolicyWizard.ts b/web/src/admin/policies/PolicyWizard.ts index e79fe8fb3..274d5a7d4 100644 --- a/web/src/admin/policies/PolicyWizard.ts +++ b/web/src/admin/policies/PolicyWizard.ts @@ -19,7 +19,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { CSSResult, TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -33,7 +32,7 @@ export class InitialPolicyWizardPage extends WizardPage { policyTypes: TypeCreate[] = []; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFForm, PFButton, PFRadio]; } sidebarLabel = () => t`Select type`; @@ -85,7 +84,7 @@ export class InitialPolicyWizardPage extends WizardPage { @customElement("ak-policy-wizard") export class PolicyWizard extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFButton, PFRadio]; } @property() diff --git a/web/src/admin/property-mappings/PropertyMappingWizard.ts b/web/src/admin/property-mappings/PropertyMappingWizard.ts index 32c75be51..7b6d0c579 100644 --- a/web/src/admin/property-mappings/PropertyMappingWizard.ts +++ b/web/src/admin/property-mappings/PropertyMappingWizard.ts @@ -16,7 +16,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { CSSResult, TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -30,7 +29,7 @@ export class InitialPropertyMappingWizardPage extends WizardPage { mappingTypes: TypeCreate[] = []; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFForm, PFButton, PFRadio]; } sidebarLabel = () => t`Select type`; @@ -75,7 +74,7 @@ export class InitialPropertyMappingWizardPage extends WizardPage { @customElement("ak-property-mapping-wizard") export class PropertyMappingWizard extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFButton, PFRadio]; } @property({ attribute: false }) diff --git a/web/src/admin/providers/ProviderViewPage.ts b/web/src/admin/providers/ProviderViewPage.ts index 14e4690b1..b8dcb7da1 100644 --- a/web/src/admin/providers/ProviderViewPage.ts +++ b/web/src/admin/providers/ProviderViewPage.ts @@ -13,7 +13,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; import { Provider, ProvidersApi } from "@goauthentik/api"; @@ -33,7 +32,7 @@ export class ProviderViewPage extends AKElement { provider?: Provider; static get styles(): CSSResult[] { - return [PFPage, AKGlobal]; + return [PFPage]; } renderProvider(): TemplateResult { diff --git a/web/src/admin/providers/ProviderWizard.ts b/web/src/admin/providers/ProviderWizard.ts index 82a7f7836..16c70266d 100644 --- a/web/src/admin/providers/ProviderWizard.ts +++ b/web/src/admin/providers/ProviderWizard.ts @@ -17,7 +17,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { CSSResult, TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFHint from "@patternfly/patternfly/components/Hint/hint.css"; @@ -32,7 +31,7 @@ export class InitialProviderWizardPage extends WizardPage { providerTypes: TypeCreate[] = []; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFHint, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFForm, PFHint, PFButton, PFRadio]; } sidebarLabel = () => t`Select type`; @@ -91,7 +90,7 @@ export class InitialProviderWizardPage extends WizardPage { @customElement("ak-provider-wizard") export class ProviderWizard extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFButton, PFRadio]; } @property() diff --git a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts b/web/src/admin/providers/ldap/LDAPProviderViewPage.ts index 61447f184..354554a7d 100644 --- a/web/src/admin/providers/ldap/LDAPProviderViewPage.ts +++ b/web/src/admin/providers/ldap/LDAPProviderViewPage.ts @@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -66,7 +65,6 @@ export class LDAPProviderViewPage extends AKElement { PFContent, PFCard, PFDescriptionList, - AKGlobal, ]; } diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts index 009efcd19..19a92a3b3 100644 --- a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts +++ b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts @@ -18,7 +18,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -67,7 +66,6 @@ export class OAuth2ProviderViewPage extends AKElement { PFForm, PFFormControl, PFBanner, - AKGlobal, ]; } diff --git a/web/src/admin/providers/proxy/ProxyProviderViewPage.ts b/web/src/admin/providers/proxy/ProxyProviderViewPage.ts index eed6cfc3c..76ef79026 100644 --- a/web/src/admin/providers/proxy/ProxyProviderViewPage.ts +++ b/web/src/admin/providers/proxy/ProxyProviderViewPage.ts @@ -26,7 +26,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -99,7 +98,6 @@ export class ProxyProviderViewPage extends AKElement { PFCard, PFDescriptionList, PFBanner, - AKGlobal, ]; } diff --git a/web/src/admin/providers/saml/SAMLProviderViewPage.ts b/web/src/admin/providers/saml/SAMLProviderViewPage.ts index 88a98fa21..62a77f7ac 100644 --- a/web/src/admin/providers/saml/SAMLProviderViewPage.ts +++ b/web/src/admin/providers/saml/SAMLProviderViewPage.ts @@ -17,7 +17,6 @@ import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -72,7 +71,6 @@ export class SAMLProviderViewPage extends AKElement { PFForm, PFFormControl, PFBanner, - AKGlobal, ]; } diff --git a/web/src/admin/providers/scim/SCIMProviderViewPage.ts b/web/src/admin/providers/scim/SCIMProviderViewPage.ts index e97e231d5..047b04a9b 100644 --- a/web/src/admin/providers/scim/SCIMProviderViewPage.ts +++ b/web/src/admin/providers/scim/SCIMProviderViewPage.ts @@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -66,7 +65,6 @@ export class SCIMProviderViewPage extends AKElement { PFContent, PFCard, PFDescriptionList, - AKGlobal, ]; } diff --git a/web/src/admin/sources/SourceWizard.ts b/web/src/admin/sources/SourceWizard.ts index ef4bef89a..a60f205db 100644 --- a/web/src/admin/sources/SourceWizard.ts +++ b/web/src/admin/sources/SourceWizard.ts @@ -15,7 +15,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { CSSResult, TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -29,7 +28,7 @@ export class InitialSourceWizardPage extends WizardPage { sourceTypes: TypeCreate[] = []; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFForm, PFButton, PFRadio]; } sidebarLabel = () => t`Select type`; @@ -74,7 +73,7 @@ export class InitialSourceWizardPage extends WizardPage { @customElement("ak-source-wizard") export class SourceWizard extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFButton, PFRadio]; } @property({ attribute: false }) diff --git a/web/src/admin/sources/ldap/LDAPSourceViewPage.ts b/web/src/admin/sources/ldap/LDAPSourceViewPage.ts index 84f67cab6..2f42fc2f2 100644 --- a/web/src/admin/sources/ldap/LDAPSourceViewPage.ts +++ b/web/src/admin/sources/ldap/LDAPSourceViewPage.ts @@ -15,7 +15,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -44,17 +43,7 @@ export class LDAPSourceViewPage extends AKElement { source!: LDAPSource; static get styles(): CSSResult[] { - return [ - PFBase, - PFPage, - PFButton, - PFGrid, - PFContent, - PFCard, - PFDescriptionList, - PFList, - AKGlobal, - ]; + return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, PFList]; } constructor() { diff --git a/web/src/admin/sources/oauth/OAuthSourceViewPage.ts b/web/src/admin/sources/oauth/OAuthSourceViewPage.ts index 6f1993284..abf6224fe 100644 --- a/web/src/admin/sources/oauth/OAuthSourceViewPage.ts +++ b/web/src/admin/sources/oauth/OAuthSourceViewPage.ts @@ -15,7 +15,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -76,7 +75,7 @@ export class OAuthSourceViewPage extends AKElement { source?: OAuthSource; static get styles(): CSSResult[] { - return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal]; + return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList]; } constructor() { diff --git a/web/src/admin/sources/plex/PlexSourceViewPage.ts b/web/src/admin/sources/plex/PlexSourceViewPage.ts index b95cf0222..404237647 100644 --- a/web/src/admin/sources/plex/PlexSourceViewPage.ts +++ b/web/src/admin/sources/plex/PlexSourceViewPage.ts @@ -14,7 +14,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -42,7 +41,7 @@ export class PlexSourceViewPage extends AKElement { source?: PlexSource; static get styles(): CSSResult[] { - return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList, AKGlobal]; + return [PFBase, PFPage, PFButton, PFGrid, PFContent, PFCard, PFDescriptionList]; } constructor() { diff --git a/web/src/admin/sources/saml/SAMLSourceViewPage.ts b/web/src/admin/sources/saml/SAMLSourceViewPage.ts index c3a651f0a..cd0efd15c 100644 --- a/web/src/admin/sources/saml/SAMLSourceViewPage.ts +++ b/web/src/admin/sources/saml/SAMLSourceViewPage.ts @@ -16,7 +16,6 @@ import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -44,7 +43,7 @@ export class SAMLSourceViewPage extends AKElement { source?: SAMLSource; static get styles(): CSSResult[] { - return [PFBase, PFPage, PFGrid, PFButton, PFContent, PFCard, PFDescriptionList, AKGlobal]; + return [PFBase, PFPage, PFGrid, PFButton, PFContent, PFCard, PFDescriptionList]; } constructor() { diff --git a/web/src/admin/stages/StageWizard.ts b/web/src/admin/stages/StageWizard.ts index 2ab588aa3..728411150 100644 --- a/web/src/admin/stages/StageWizard.ts +++ b/web/src/admin/stages/StageWizard.ts @@ -32,7 +32,6 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { CSSResult, TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; @@ -47,7 +46,7 @@ export class InitialStageWizardPage extends WizardPage { sidebarLabel = () => t`Select type`; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFForm, PFButton, PFRadio]; } activeCallback: () => Promise = async () => { @@ -98,7 +97,7 @@ export class InitialStageWizardPage extends WizardPage { @customElement("ak-stage-wizard") export class StageWizard extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFButton, AKGlobal, PFRadio]; + return [PFBase, PFButton, PFRadio]; } @property() diff --git a/web/src/admin/stages/invitation/InvitationListLink.ts b/web/src/admin/stages/invitation/InvitationListLink.ts index b38d6adc6..c8c0e6f28 100644 --- a/web/src/admin/stages/invitation/InvitationListLink.ts +++ b/web/src/admin/stages/invitation/InvitationListLink.ts @@ -7,7 +7,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -25,7 +24,7 @@ export class InvitationListLink extends AKElement { selectedFlow?: string; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFFormControl, PFFlex, PFDescriptionList, AKGlobal]; + return [PFBase, PFForm, PFFormControl, PFFlex, PFDescriptionList]; } renderLink(): string { diff --git a/web/src/admin/users/UserListPage.ts b/web/src/admin/users/UserListPage.ts index 48af04ed4..4185291db 100644 --- a/web/src/admin/users/UserListPage.ts +++ b/web/src/admin/users/UserListPage.ts @@ -26,7 +26,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; @@ -58,7 +57,7 @@ export class UserListPage extends TablePage { activePath = getURLParam("path", "/"); static get styles(): CSSResult[] { - return super.styles.concat(PFDescriptionList, PFCard, PFAlert, AKGlobal); + return super.styles.concat(PFDescriptionList, PFCard, PFAlert); } async apiEndpoint(page: number): Promise> { diff --git a/web/src/admin/users/UserViewPage.ts b/web/src/admin/users/UserViewPage.ts index cfa535c22..c73dfb858 100644 --- a/web/src/admin/users/UserViewPage.ts +++ b/web/src/admin/users/UserViewPage.ts @@ -29,7 +29,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -71,7 +70,6 @@ export class UserViewPage extends AKElement { PFCard, PFDescriptionList, PFSizing, - AKGlobal, ]; } diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css index f455087f3..d2b7a073e 100644 --- a/web/src/common/styles/authentik.css +++ b/web/src/common/styles/authentik.css @@ -124,333 +124,6 @@ html > form > input { margin-bottom: 6px; } -@media (prefers-color-scheme: dark) { - .ak-static-page h1 { - color: var(--ak-dark-foreground); - } - body { - background-color: var(--ak-dark-background) !important; - } - :root { - --pf-global--Color--100: var(--ak-dark-foreground); - --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker); - --pf-global--link--Color: var(--ak-dark-foreground-link); - } - .pf-c-radio { - --pf-c-radio__label--Color: var(--ak-dark-foreground); - } - /* Global page background colour */ - .pf-c-page { - --pf-c-page--BackgroundColor: var(--ak-dark-background); - } - .pf-c-drawer__content { - --pf-c-drawer__content--BackgroundColor: var(--ak-dark-background); - } - .pf-c-title { - color: var(--ak-dark-foreground); - } - .pf-u-mb-xl { - color: var(--ak-dark-foreground); - } - /* Header sections */ - .pf-c-page__main-section { - --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background); - } - .sidebar-trigger, - .notification-trigger { - background-color: transparent !important; - } - .pf-c-page__main-section.pf-m-light { - background-color: transparent; - } - .pf-c-content { - color: var(--ak-dark-foreground); - } - /* Card */ - .pf-c-card { - --pf-c-card--BackgroundColor: var(--ak-dark-background-light); - color: var(--ak-dark-foreground); - } - .pf-c-card__title, - .pf-c-card__body { - color: var(--ak-dark-foreground); - } - .pf-c-toolbar { - --pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light); - } - .pf-c-pagination.pf-m-bottom { - background-color: var(--ak-dark-background-light); - } - /* table */ - .pf-c-table { - --pf-c-table--BackgroundColor: var(--ak-dark-background-light); - --pf-c-table--BorderColor: var(--ak-dark-background-lighter); - --pf-c-table--cell--Color: var(--ak-dark-foreground); - --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--ak-dark-background-light-ish); - --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--ak-dark-background-lighter); - } - .pf-c-table__text { - color: var(--ak-dark-foreground); - } - .pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text { - color: var(--ak-dark-foreground) !important; - } - .pf-c-table__sort-indicator i { - color: var(--ak-dark-foreground) !important; - } - .pf-c-table__expandable-row.pf-m-expanded { - --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var( - --ak-dark-background-lighter - ); - } - /* tabs */ - .pf-c-tabs { - background-color: transparent; - } - .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before { - border-color: transparent; - } - .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before { - border-color: transparent; - } - .pf-c-tabs__link::before { - border-color: transparent; - } - .pf-c-tabs__item.pf-m-current { - --pf-c-tabs__link--after--BorderColor: #fd4b2d; - } - .pf-c-tabs.pf-m-vertical .pf-c-tabs__link { - background-color: transparent; - } - /* table, on mobile */ - @media screen and (max-width: 1200px) { - .pf-m-grid-xl.pf-c-table tbody:first-of-type { - border-top-color: var(--ak-dark-background); - } - .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) { - border-bottom-color: var(--ak-dark-background); - } - } - /* class for pagination text */ - .pf-c-options-menu__toggle { - color: var(--ak-dark-foreground); - } - /* table icon used for expanding rows */ - .pf-c-table__toggle-icon { - color: var(--ak-dark-foreground); - } - /* expandable elements */ - .pf-c-expandable-section__toggle-text { - color: var(--ak-dark-foreground); - } - .pf-c-expandable-section__toggle-icon { - color: var(--ak-dark-foreground); - } - .pf-c-expandable-section.pf-m-display-lg { - background-color: var(--ak-dark-background-light-ish); - } - /* header for form group */ - .pf-c-form__field-group-header-title-text { - color: var(--ak-dark-foreground); - } - .pf-c-form__field-group { - border-bottom: 0; - } - /* inputs */ - optgroup, - option { - color: var(--ak-dark-foreground); - } - select[multiple] optgroup:checked, - select[multiple] option:checked { - color: var(--ak-dark-background); - } - .pf-c-input-group { - --pf-c-input-group--BackgroundColor: transparent; - } - .pf-c-form-control { - --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter); - --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter); - --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter); - --pf-global--BackgroundColor--100: transparent; - --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light); - color: var(--ak-dark-foreground); - } - .pf-c-form-control:disabled { - background-color: var(--ak-dark-background-light); - } - .pf-c-form-control[readonly] { - background-color: var(--ak-dark-background-light); - } - .pf-c-switch__input:checked ~ .pf-c-switch__label { - --pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground); - } - /* select toggle */ - .pf-c-select__toggle::before { - --pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter); - --pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter); - --pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter); - } - .pf-c-select__toggle.pf-m-typeahead { - --pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light); - } - .pf-c-select__menu { - --pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish); - color: var(--ak-dark-foreground); - } - .pf-c-select__menu-item { - color: var(--ak-dark-foreground); - } - .pf-c-select__menu-wrapper:hover, - .pf-c-select__menu-item:hover { - --pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter); - } - .pf-c-select__menu-wrapper:focus-within, - .pf-c-select__menu-wrapper.pf-m-focus, - .pf-c-select__menu-item:focus, - .pf-c-select__menu-item.pf-m-focus { - --pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish); - } - .pf-c-button.pf-m-plain:hover { - color: var(--ak-dark-foreground); - } - .pf-c-button.pf-m-control { - --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter) - var(--ak-dark-background-lighter) - var(--pf-c-button--m-control--after--BorderBottomColor) - var(--ak-dark-background-lighter); - background-color: var(--ak-dark-background-light); - color: var(--ak-dark-foreground); - } - .pf-m-tertiary, - .pf-c-button.pf-m-tertiary { - --pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker); - color: var(--ak-dark-foreground-darker); - } - .pf-m-tertiary:hover, - .pf-c-button.pf-m-tertiary:hover { - --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter); - } - .pf-c-form__label-text { - color: var(--ak-dark-foreground); - } - .pf-c-check__label { - color: var(--ak-dark-foreground); - } - .form-help-text { - color: var(--ak-dark-foreground); - } - .pf-c-dropdown__toggle::before { - border-color: transparent; - } - .pf-c-dropdown__menu { - --pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background); - } - .pf-c-dropdown__menu-item { - --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background); - --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground); - } - .pf-c-dropdown__menu-item:hover, - .pf-c-dropdown__menu-item:focus { - --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish); - --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground); - } - .pf-c-toggle-group__button { - color: var(--ak-dark-foreground) !important; - } - .pf-c-toggle-group__button:not(.pf-m-selected) { - background-color: var(--ak-dark-background-light) !important; - } - .pf-c-toggle-group__button.pf-m-selected { - color: var(--ak-dark-foreground) !important; - background-color: var(--pf-global--primary-color--100) !important; - } - /* inputs help text */ - .pf-c-form__helper-text:not(.pf-m-error) { - color: var(--ak-dark-foreground); - } - /* modal */ - .pf-c-modal-box, - .pf-c-modal-box__header, - .pf-c-modal-box__footer, - .pf-c-modal-box__body { - background-color: var(--ak-dark-background); - } - /* sidebar */ - .pf-c-nav { - background-color: var(--ak-dark-background-light); - } - /* flows */ - .pf-c-login__main { - background-color: var(--ak-dark-background); - } - .pf-c-login__main-body, - .pf-c-login__main-header, - .pf-c-login__main-header-desc { - color: var(--ak-dark-foreground); - } - .pf-c-login__main-footer-links-item img { - filter: invert(1); - } - .pf-c-login__main-footer-band { - background-color: var(--ak-dark-background-lighter); - color: var(--ak-dark-foreground); - } - .form-control-static { - color: var(--ak-dark-foreground); - } - /* notifications */ - .pf-c-drawer__panel { - background-color: var(--ak-dark-background); - } - .pf-c-notification-drawer { - --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background); - } - .pf-c-notification-drawer__header { - background-color: var(--ak-dark-background-lighter); - color: var(--ak-dark-foreground); - } - .pf-c-notification-drawer__list-item { - background-color: var(--ak-dark-background-light-ish); - color: var(--ak-dark-foreground); - --pf-c-notification-drawer__list-item--BorderBottomColor: var( - --ak-dark-background-lighter - ) !important; - } - /* data list */ - .pf-c-data-list { - border-top-color: var(--ak-dark-background-lighter); - } - .pf-c-data-list__item { - --pf-c-data-list__item--BackgroundColor: transparent; - --pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter); - color: var(--ak-dark-foreground); - } - /* wizards */ - .pf-c-wizard__nav { - --pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter); - --pf-c-wizard__nav--lg--BorderRightColor: transparent; - } - .pf-c-wizard__main { - background-color: var(--ak-dark-background-light-ish); - } - .pf-c-wizard__footer { - --pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish); - } - .pf-c-wizard__toggle-num, - .pf-c-wizard__nav-link::before { - --pf-c-wizard__nav-link--before--BackgroundColor: transparent; - } - /* tree view */ - .pf-c-tree-view__node:focus { - --pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish); - } - .pf-c-tree-view__content:hover, - .pf-c-tree-view__content:focus-within { - --pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish); - } -} - .pf-c-data-list__item { background-color: transparent; } diff --git a/web/src/common/styles/theme-dark.css b/web/src/common/styles/theme-dark.css new file mode 100644 index 000000000..b72931d2b --- /dev/null +++ b/web/src/common/styles/theme-dark.css @@ -0,0 +1,321 @@ +.ak-static-page h1 { + color: var(--ak-dark-foreground); +} +body { + background-color: var(--ak-dark-background) !important; +} +:root { + --pf-global--Color--100: var(--ak-dark-foreground); + --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker); + --pf-global--link--Color: var(--ak-dark-foreground-link); +} +.pf-c-radio { + --pf-c-radio__label--Color: var(--ak-dark-foreground); +} +/* Global page background colour */ +.pf-c-page { + --pf-c-page--BackgroundColor: var(--ak-dark-background); +} +.pf-c-drawer__content { + --pf-c-drawer__content--BackgroundColor: var(--ak-dark-background); +} +.pf-c-title { + color: var(--ak-dark-foreground); +} +.pf-u-mb-xl { + color: var(--ak-dark-foreground); +} +/* Header sections */ +.pf-c-page__main-section { + --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background); +} +.sidebar-trigger, +.notification-trigger { + background-color: transparent !important; +} +.pf-c-page__main-section.pf-m-light { + background-color: transparent; +} +.pf-c-content { + color: var(--ak-dark-foreground); +} +/* Card */ +.pf-c-card { + --pf-c-card--BackgroundColor: var(--ak-dark-background-light); + color: var(--ak-dark-foreground); +} +.pf-c-card__title, +.pf-c-card__body { + color: var(--ak-dark-foreground); +} +.pf-c-toolbar { + --pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light); +} +.pf-c-pagination.pf-m-bottom { + background-color: var(--ak-dark-background-light); +} +/* table */ +.pf-c-table { + --pf-c-table--BackgroundColor: var(--ak-dark-background-light); + --pf-c-table--BorderColor: var(--ak-dark-background-lighter); + --pf-c-table--cell--Color: var(--ak-dark-foreground); + --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--ak-dark-background-light-ish); + --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--ak-dark-background-lighter); +} +.pf-c-table__text { + color: var(--ak-dark-foreground); +} +.pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text { + color: var(--ak-dark-foreground) !important; +} +.pf-c-table__sort-indicator i { + color: var(--ak-dark-foreground) !important; +} +.pf-c-table__expandable-row.pf-m-expanded { + --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--ak-dark-background-lighter); +} +/* tabs */ +.pf-c-tabs { + background-color: transparent; +} +.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before { + border-color: transparent; +} +.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before { + border-color: transparent; +} +.pf-c-tabs__link::before { + border-color: transparent; +} +.pf-c-tabs__item.pf-m-current { + --pf-c-tabs__link--after--BorderColor: #fd4b2d; +} +.pf-c-tabs.pf-m-vertical .pf-c-tabs__link { + background-color: transparent; +} +/* table, on mobile */ +@media screen and (max-width: 1200px) { + .pf-m-grid-xl.pf-c-table tbody:first-of-type { + border-top-color: var(--ak-dark-background); + } + .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) { + border-bottom-color: var(--ak-dark-background); + } +} +/* class for pagination text */ +.pf-c-options-menu__toggle { + color: var(--ak-dark-foreground); +} +/* table icon used for expanding rows */ +.pf-c-table__toggle-icon { + color: var(--ak-dark-foreground); +} +/* expandable elements */ +.pf-c-expandable-section__toggle-text { + color: var(--ak-dark-foreground); +} +.pf-c-expandable-section__toggle-icon { + color: var(--ak-dark-foreground); +} +.pf-c-expandable-section.pf-m-display-lg { + background-color: var(--ak-dark-background-light-ish); +} +/* header for form group */ +.pf-c-form__field-group-header-title-text { + color: var(--ak-dark-foreground); +} +.pf-c-form__field-group { + border-bottom: 0; +} +/* inputs */ +optgroup, +option { + color: var(--ak-dark-foreground); +} +select[multiple] optgroup:checked, +select[multiple] option:checked { + color: var(--ak-dark-background); +} +.pf-c-input-group { + --pf-c-input-group--BackgroundColor: transparent; +} +.pf-c-form-control { + --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter); + --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter); + --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter); + --pf-global--BackgroundColor--100: transparent; + --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light); + color: var(--ak-dark-foreground); +} +.pf-c-form-control:disabled { + background-color: var(--ak-dark-background-light); +} +.pf-c-form-control[readonly] { + background-color: var(--ak-dark-background-light); +} +.pf-c-switch__input:checked ~ .pf-c-switch__label { + --pf-c-switch__input--checked__label--Color: var(--ak-dark-foreground); +} +/* select toggle */ +.pf-c-select__toggle::before { + --pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter); + --pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter); + --pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter); +} +.pf-c-select__toggle.pf-m-typeahead { + --pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light); +} +.pf-c-select__menu { + --pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish); + color: var(--ak-dark-foreground); +} +.pf-c-select__menu-item { + color: var(--ak-dark-foreground); +} +.pf-c-select__menu-wrapper:hover, +.pf-c-select__menu-item:hover { + --pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter); +} +.pf-c-select__menu-wrapper:focus-within, +.pf-c-select__menu-wrapper.pf-m-focus, +.pf-c-select__menu-item:focus, +.pf-c-select__menu-item.pf-m-focus { + --pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish); +} +.pf-c-button.pf-m-plain:hover { + color: var(--ak-dark-foreground); +} +.pf-c-button.pf-m-control { + --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter) + var(--ak-dark-background-lighter) var(--pf-c-button--m-control--after--BorderBottomColor) + var(--ak-dark-background-lighter); + background-color: var(--ak-dark-background-light); + color: var(--ak-dark-foreground); +} +.pf-m-tertiary, +.pf-c-button.pf-m-tertiary { + --pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker); + color: var(--ak-dark-foreground-darker); +} +.pf-m-tertiary:hover, +.pf-c-button.pf-m-tertiary:hover { + --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter); +} +.pf-c-form__label-text { + color: var(--ak-dark-foreground); +} +.pf-c-check__label { + color: var(--ak-dark-foreground); +} +.form-help-text { + color: var(--ak-dark-foreground); +} +.pf-c-dropdown__toggle::before { + border-color: transparent; +} +.pf-c-dropdown__menu { + --pf-c-dropdown__menu--BackgroundColor: var(--ak-dark-background); +} +.pf-c-dropdown__menu-item { + --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background); + --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground); +} +.pf-c-dropdown__menu-item:hover, +.pf-c-dropdown__menu-item:focus { + --pf-c-dropdown__menu-item--BackgroundColor: var(--ak-dark-background-light-ish); + --pf-c-dropdown__menu-item--Color: var(--ak-dark-foreground); +} +.pf-c-toggle-group__button { + color: var(--ak-dark-foreground) !important; +} +.pf-c-toggle-group__button:not(.pf-m-selected) { + background-color: var(--ak-dark-background-light) !important; +} +.pf-c-toggle-group__button.pf-m-selected { + color: var(--ak-dark-foreground) !important; + background-color: var(--pf-global--primary-color--100) !important; +} +/* inputs help text */ +.pf-c-form__helper-text:not(.pf-m-error) { + color: var(--ak-dark-foreground); +} +/* modal */ +.pf-c-modal-box, +.pf-c-modal-box__header, +.pf-c-modal-box__footer, +.pf-c-modal-box__body { + background-color: var(--ak-dark-background); +} +/* sidebar */ +.pf-c-nav { + background-color: var(--ak-dark-background-light); +} +/* flows */ +.pf-c-login__main { + background-color: var(--ak-dark-background); +} +.pf-c-login__main-body, +.pf-c-login__main-header, +.pf-c-login__main-header-desc { + color: var(--ak-dark-foreground); +} +.pf-c-login__main-footer-links-item img { + filter: invert(1); +} +.pf-c-login__main-footer-band { + background-color: var(--ak-dark-background-lighter); + color: var(--ak-dark-foreground); +} +.form-control-static { + color: var(--ak-dark-foreground); +} +/* notifications */ +.pf-c-drawer__panel { + background-color: var(--ak-dark-background); +} +.pf-c-notification-drawer { + --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background); +} +.pf-c-notification-drawer__header { + background-color: var(--ak-dark-background-lighter); + color: var(--ak-dark-foreground); +} +.pf-c-notification-drawer__list-item { + background-color: var(--ak-dark-background-light-ish); + color: var(--ak-dark-foreground); + --pf-c-notification-drawer__list-item--BorderBottomColor: var( + --ak-dark-background-lighter + ) !important; +} +/* data list */ +.pf-c-data-list { + border-top-color: var(--ak-dark-background-lighter); +} +.pf-c-data-list__item { + --pf-c-data-list__item--BackgroundColor: transparent; + --pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter); + color: var(--ak-dark-foreground); +} +/* wizards */ +.pf-c-wizard__nav { + --pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter); + --pf-c-wizard__nav--lg--BorderRightColor: transparent; +} +.pf-c-wizard__main { + background-color: var(--ak-dark-background-light-ish); +} +.pf-c-wizard__footer { + --pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish); +} +.pf-c-wizard__toggle-num, +.pf-c-wizard__nav-link::before { + --pf-c-wizard__nav-link--before--BackgroundColor: transparent; +} +/* tree view */ +.pf-c-tree-view__node:focus { + --pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish); +} +.pf-c-tree-view__content:hover, +.pf-c-tree-view__content:focus-within { + --pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish); +} diff --git a/web/src/common/ui/config.ts b/web/src/common/ui/config.ts index ae27d31eb..e1108f70f 100644 --- a/web/src/common/ui/config.ts +++ b/web/src/common/ui/config.ts @@ -1,7 +1,7 @@ import { currentInterface } from "@goauthentik/common/sentry"; import { me } from "@goauthentik/common/users"; -import { UserSelf } from "@goauthentik/api"; +import { UiThemeEnum, UserSelf } from "@goauthentik/api"; export enum UserDisplay { username = "username", @@ -32,6 +32,7 @@ export interface UIConfig { userDisplay: UserDisplay; }; theme: { + base: UiThemeEnum; background: string; cardBackground: string; }; @@ -59,6 +60,7 @@ export class DefaultUIConfig implements UIConfig { userDisplay: UserDisplay.username, }; theme = { + base: UiThemeEnum.Automatic, background: "", cardBackground: "", }; diff --git a/web/src/elements/Alert.ts b/web/src/elements/Alert.ts index d5c3dcfbe..e75d2c393 100644 --- a/web/src/elements/Alert.ts +++ b/web/src/elements/Alert.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -23,7 +22,7 @@ export class Alert extends AKElement { level: Level = Level.Warning; static get styles(): CSSResult[] { - return [PFBase, PFAlert, AKGlobal]; + return [PFBase, PFAlert]; } render(): TemplateResult { diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts index b0ef1483a..95c1cc4a4 100644 --- a/web/src/elements/Base.ts +++ b/web/src/elements/Base.ts @@ -1,7 +1,21 @@ import { EVENT_LOCALE_CHANGE } from "@goauthentik/common/constants"; +import { globalAK } from "@goauthentik/common/global"; +import { uiConfig } from "@goauthentik/common/ui/config"; import { LitElement } from "lit"; +import AKGlobal from "@goauthentik/common/styles/authentik.css"; +import ThemeDark from "@goauthentik/common/styles/theme-dark.css"; + +import { UiThemeEnum } from "@goauthentik/api"; + +export function rootInterface(): Interface | undefined { + const el = Array.from(document.body.querySelectorAll("*")).filter( + (el) => el instanceof Interface, + ); + return el[0] as Interface; +} + let css: Promise | undefined; function fetchCustomCSS(): Promise { if (!css) { @@ -22,28 +36,115 @@ function fetchCustomCSS(): Promise { return css; } +export interface AdoptedStyleSheetsElement { + adoptedStyleSheets: readonly CSSStyleSheet[]; +} + +const QUERY_MEDIA_COLOR_LIGHT = "(prefers-color-scheme: light)"; + export class AKElement extends LitElement { + _mediaMatcher?: MediaQueryList; + _mediaMatcherHandler?: (ev?: MediaQueryListEvent) => void; + _activeTheme?: UiThemeEnum; + + get activeTheme(): UiThemeEnum | undefined { + return this._activeTheme; + } + constructor() { super(); this.addEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange); - fetchCustomCSS().then((sheets) => { - sheets.map((css) => { - if (css === "") { - return; - } - new CSSStyleSheet().replace(css).then((sheet) => { - if (!this.shadowRoot) { - return; - } - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, - sheet, - ]; - }); + } + + protected createRenderRoot(): ShadowRoot | Element { + const root = super.createRenderRoot() as ShadowRoot; + root.adoptedStyleSheets = [...root.adoptedStyleSheets, AKGlobal]; + this._initTheme(root); + this._initCustomCSS(root); + return root; + } + + async _initTheme(root: AdoptedStyleSheetsElement): Promise { + // Early activate theme based on media query to prevent light flash + // when dark is preferred + this._activateTheme( + root, + window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches + ? UiThemeEnum.Light + : UiThemeEnum.Dark, + ); + rootInterface()?._initTheme(root); + } + + private async _initCustomCSS(root: ShadowRoot): Promise { + const sheets = await fetchCustomCSS(); + sheets.map((css) => { + if (css === "") { + return; + } + new CSSStyleSheet().replace(css).then((sheet) => { + root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet]; }); }); } + _applyTheme(root: AdoptedStyleSheetsElement, theme?: UiThemeEnum): void { + if (!theme) { + theme = UiThemeEnum.Automatic; + } + if (theme === UiThemeEnum.Automatic) { + // Create a media matcher to automatically switch the theme depending on + // prefers-color-scheme + if (!this._mediaMatcher) { + this._mediaMatcher = window.matchMedia(QUERY_MEDIA_COLOR_LIGHT); + this._mediaMatcherHandler = (ev?: MediaQueryListEvent) => { + const theme = + ev?.matches || this._mediaMatcher?.matches + ? UiThemeEnum.Light + : UiThemeEnum.Dark; + this._activateTheme(root, theme); + }; + this._mediaMatcher.addEventListener("change", this._mediaMatcherHandler); + } + return; + } else if (this._mediaMatcher && this._mediaMatcherHandler) { + // Theme isn't automatic and we have a matcher configured, remove the matcher + // to prevent changes + this._mediaMatcher.removeEventListener("change", this._mediaMatcherHandler); + this._mediaMatcher = undefined; + } + this._activateTheme(root, theme); + } + + _activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum) { + if (this._activeTheme === theme) { + return; + } + // Make sure we only get to this callback once we've picked a concise theme choice + this.dispatchEvent( + new CustomEvent("themeChange", { + bubbles: true, + composed: true, + detail: theme, + }), + ); + this._activeTheme = theme; + this.setAttribute("theme", theme); + let stylesheet: CSSStyleSheet | undefined; + if (theme === UiThemeEnum.Dark) { + stylesheet = ThemeDark; + } + if (!stylesheet) { + return; + } + if (root.adoptedStyleSheets.indexOf(stylesheet) === -1) { + root.adoptedStyleSheets = [...root.adoptedStyleSheets, stylesheet]; + } else { + root.adoptedStyleSheets = root.adoptedStyleSheets.filter((v) => v !== stylesheet); + } + this.requestUpdate(); + } + disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener(EVENT_LOCALE_CHANGE, this._handleLocaleChange); @@ -53,3 +154,20 @@ export class AKElement extends LitElement { this.requestUpdate(); } } + +export class Interface extends AKElement { + _activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum): void { + super._activateTheme(root, theme); + super._activateTheme(document, theme); + } + + async _initTheme(root: AdoptedStyleSheetsElement): Promise { + const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic; + this._applyTheme(root, bootstrapTheme); + uiConfig().then((config) => { + if (config.theme.base) { + this._applyTheme(root, config.theme.base); + } + }); + } +} diff --git a/web/src/elements/CodeMirror.ts b/web/src/elements/CodeMirror.ts index 3e9ab4cdc..5f0a6f2dd 100644 --- a/web/src/elements/CodeMirror.ts +++ b/web/src/elements/CodeMirror.ts @@ -18,6 +18,8 @@ import YAML from "yaml"; import { customElement, property } from "lit/decorators.js"; +import { UiThemeEnum } from "@goauthentik/api"; + @customElement("ak-codemirror") export class CodeMirrorTextarea extends AKElement { @property({ type: Boolean }) @@ -126,18 +128,17 @@ export class CodeMirrorTextarea extends AKElement { } firstUpdated(): void { - const matcher = window.matchMedia("(prefers-color-scheme: light)"); - const handler = (ev?: MediaQueryListEvent) => { - let theme; - if (ev?.matches || matcher.matches) { - theme = this.themeLight; + this.addEventListener("themeChange", ((ev: CustomEvent) => { + if (ev.detail === UiThemeEnum.Dark) { + this.editor?.dispatch({ + effects: this.theme.reconfigure(this.themeDark), + }); } else { - theme = this.themeDark; + this.editor?.dispatch({ + effects: this.theme.reconfigure(this.themeLight), + }); } - this.editor?.dispatch({ - effects: this.theme.reconfigure(theme), - }); - }; + }) as EventListener); const extensions = [ history(), keymap.of([...defaultKeymap, ...historyKeymap]), @@ -148,7 +149,7 @@ export class CodeMirrorTextarea extends AKElement { EditorView.lineWrapping, EditorState.readOnly.of(this.readOnly), EditorState.tabSize.of(2), - this.theme.of(this.themeLight), + this.theme.of(this.activeTheme === UiThemeEnum.Dark ? this.themeLight : this.themeDark), ]; this.editor = new EditorView({ extensions: extensions.filter((p) => p) as Extension[], @@ -156,7 +157,5 @@ export class CodeMirrorTextarea extends AKElement { doc: this._value, }); this.shadowRoot?.appendChild(this.editor.dom); - matcher.addEventListener("change", handler); - handler(); } } diff --git a/web/src/elements/Diagram.ts b/web/src/elements/Diagram.ts index 82818c5fe..5d8656daa 100644 --- a/web/src/elements/Diagram.ts +++ b/web/src/elements/Diagram.ts @@ -1,13 +1,15 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants"; import { AKElement } from "@goauthentik/elements/Base"; import "@goauthentik/elements/EmptyState"; -import mermaid from "mermaid"; +import mermaid, { MermaidConfig } from "mermaid"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { until } from "lit/directives/until.js"; +import { UiThemeEnum } from "@goauthentik/api"; + @customElement("ak-diagram") export class Diagram extends AKElement { @property({ attribute: false }) @@ -31,30 +33,34 @@ export class Diagram extends AKElement { ]; } + config: MermaidConfig; + constructor() { super(); - const matcher = window.matchMedia("(prefers-color-scheme: light)"); - const handler = (ev?: MediaQueryListEvent) => { - mermaid.initialize({ - // The type definition for this says number - // but the example use strings - // and numbers don't work - logLevel: "fatal" as unknown as number, - startOnLoad: false, - theme: ev?.matches || matcher.matches ? "default" : "dark", - flowchart: { - curve: "linear", - }, - }); - this.requestUpdate(); + this.config = { + // The type definition for this says number + // but the example use strings + // and numbers don't work + logLevel: "fatal" as unknown as number, + startOnLoad: false, + flowchart: { + curve: "linear", + }, }; - matcher.addEventListener("change", handler); - handler(); + mermaid.initialize(this.config); } firstUpdated(): void { if (this.handlerBound) return; window.addEventListener(EVENT_REFRESH, this.refreshHandler); + this.addEventListener("themeChange", ((ev: CustomEvent) => { + if (ev.detail === UiThemeEnum.Dark) { + this.config.theme = "dark"; + } else { + this.config.theme = "default"; + } + mermaid.initialize(this.config); + }) as EventListener); this.handlerBound = true; this.refreshHandler(); } diff --git a/web/src/elements/Divider.ts b/web/src/elements/Divider.ts index 7e184bf22..3f90bb1c7 100644 --- a/web/src/elements/Divider.ts +++ b/web/src/elements/Divider.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @customElement("ak-divider") @@ -11,7 +10,6 @@ export class Divider extends AKElement { static get styles(): CSSResult[] { return [ PFBase, - AKGlobal, css` .separator { display: flex; diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts index c6cf6efdc..f419d4e2f 100644 --- a/web/src/elements/EmptyState.ts +++ b/web/src/elements/EmptyState.ts @@ -4,7 +4,6 @@ import { PFSize } from "@goauthentik/elements/Spinner"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -24,7 +23,7 @@ export class EmptyState extends AKElement { header = ""; static get styles(): CSSResult[] { - return [PFBase, PFEmptyState, PFTitle, AKGlobal]; + return [PFBase, PFEmptyState, PFTitle]; } render(): TemplateResult { diff --git a/web/src/elements/Expand.ts b/web/src/elements/Expand.ts index 151e28699..cdf59f558 100644 --- a/web/src/elements/Expand.ts +++ b/web/src/elements/Expand.ts @@ -5,7 +5,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -21,7 +20,7 @@ export class Expand extends AKElement { textClosed = t`Show more`; static get styles(): CSSResult[] { - return [PFBase, PFExpandableSection, AKGlobal]; + return [PFBase, PFExpandableSection]; } render(): TemplateResult { diff --git a/web/src/elements/Label.ts b/web/src/elements/Label.ts index 62562647e..51438c740 100644 --- a/web/src/elements/Label.ts +++ b/web/src/elements/Label.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFLabel from "@patternfly/patternfly/components/Label/label.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -26,7 +25,7 @@ export class Label extends AKElement { compact = false; static get styles(): CSSResult[] { - return [PFBase, PFLabel, AKGlobal]; + return [PFBase, PFLabel]; } getDefaultIcon(): string { diff --git a/web/src/elements/Markdown.ts b/web/src/elements/Markdown.ts index d34831b6d..4ee60b9c4 100644 --- a/web/src/elements/Markdown.ts +++ b/web/src/elements/Markdown.ts @@ -7,7 +7,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFList from "@patternfly/patternfly/components/List/list.css"; @@ -38,7 +37,6 @@ export class Markdown extends AKElement { return [ PFList, PFContent, - AKGlobal, css` h2:first-of-type { margin-top: 0; diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts index 79f6fe418..073277021 100644 --- a/web/src/elements/PageHeader.ts +++ b/web/src/elements/PageHeader.ts @@ -15,7 +15,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -65,7 +64,6 @@ export class PageHeader extends AKElement { PFButton, PFPage, PFContent, - AKGlobal, css` :host { display: flex; diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts index bb035569a..e567b5281 100644 --- a/web/src/elements/Tabs.ts +++ b/web/src/elements/Tabs.ts @@ -8,7 +8,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css"; import PFGlobal from "@patternfly/patternfly/patternfly-base.css"; @@ -27,7 +26,6 @@ export class Tabs extends AKElement { return [ PFGlobal, PFTabs, - AKGlobal, css` ::slotted(*) { flex-grow: 2; diff --git a/web/src/elements/Tooltip.ts b/web/src/elements/Tooltip.ts index 6fa13137b..2f0d1fae5 100644 --- a/web/src/elements/Tooltip.ts +++ b/web/src/elements/Tooltip.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, state } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFTooltip from "@patternfly/patternfly/components/Tooltip/tooltip.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -16,7 +15,6 @@ export class Tooltip extends AKElement { return [ PFBase, PFTooltip, - AKGlobal, css` .pf-c-tooltip__content { text-align: inherit; diff --git a/web/src/elements/TreeView.ts b/web/src/elements/TreeView.ts index 29456d981..23530c07b 100644 --- a/web/src/elements/TreeView.ts +++ b/web/src/elements/TreeView.ts @@ -7,7 +7,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFTreeView from "@patternfly/patternfly/components/TreeView/tree-view.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -139,7 +138,7 @@ export class TreeViewNode extends AKElement { @customElement("ak-treeview") export class TreeView extends AKElement { static get styles(): CSSResult[] { - return [PFBase, PFTreeView, AKGlobal]; + return [PFBase, PFTreeView]; } @property({ type: Array }) diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts index 9dedc4263..9a2b4fd0d 100644 --- a/web/src/elements/buttons/ModalButton.ts +++ b/web/src/elements/buttons/ModalButton.ts @@ -4,7 +4,6 @@ import { PFSize } from "@goauthentik/elements/Spinner"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -57,7 +56,6 @@ export class ModalButton extends AKElement { PFPage, PFCard, PFContent, - AKGlobal, MODAL_BUTTON_STYLES, css` .locked { diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts index 556a6d516..e2f22f024 100644 --- a/web/src/elements/buttons/SpinnerButton.ts +++ b/web/src/elements/buttons/SpinnerButton.ts @@ -5,7 +5,6 @@ import { PFSize } from "@goauthentik/elements/Spinner"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -23,7 +22,6 @@ export class SpinnerButton extends AKElement { PFBase, PFButton, PFSpinner, - AKGlobal, css` button { /* Have to use !important here, as buttons with pf-m-progress have transition already */ diff --git a/web/src/elements/cards/AggregateCard.ts b/web/src/elements/cards/AggregateCard.ts index 4a9e81071..8eec5f0c4 100644 --- a/web/src/elements/cards/AggregateCard.ts +++ b/web/src/elements/cards/AggregateCard.ts @@ -4,7 +4,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -24,7 +23,7 @@ export class AggregateCard extends AKElement { isCenter = true; static get styles(): CSSResult[] { - return [PFBase, PFCard, PFFlex, AKGlobal].concat([ + return [PFBase, PFCard, PFFlex].concat([ css` .pf-c-card.pf-c-card-aggregate { height: 100%; diff --git a/web/src/elements/charts/Chart.ts b/web/src/elements/charts/Chart.ts index 6cfe2283f..208e7df28 100644 --- a/web/src/elements/charts/Chart.ts +++ b/web/src/elements/charts/Chart.ts @@ -23,6 +23,8 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { property, state } from "lit/decorators.js"; +import { UiThemeEnum } from "@goauthentik/api"; + Chart.register(Legend, Tooltip); Chart.register(LineController, BarController, DoughnutController); Chart.register(ArcElement, BarElement, PointElement, LineElement); @@ -87,25 +89,18 @@ export abstract class AKChart extends AKElement { ]; } - constructor() { - super(); - const matcher = window.matchMedia("(prefers-color-scheme: light)"); - const handler = (ev?: MediaQueryListEvent) => { - if (ev?.matches || matcher.matches) { + connectedCallback(): void { + super.connectedCallback(); + window.addEventListener("resize", this.resizeHandler); + this.addEventListener(EVENT_REFRESH, this.refreshHandler); + this.addEventListener("themeChange", ((ev: CustomEvent) => { + if (ev.detail === UiThemeEnum.Light) { this.fontColour = FONT_COLOUR_LIGHT_MODE; } else { this.fontColour = FONT_COLOUR_DARK_MODE; } this.chart?.update(); - }; - matcher.addEventListener("change", handler); - handler(); - } - - connectedCallback(): void { - super.connectedCallback(); - window.addEventListener("resize", this.resizeHandler); - this.addEventListener(EVENT_REFRESH, this.refreshHandler); + }) as EventListener); } disconnectedCallback(): void { diff --git a/web/src/elements/chips/Chip.ts b/web/src/elements/chips/Chip.ts index 4aa786f72..8ca77ba5a 100644 --- a/web/src/elements/chips/Chip.ts +++ b/web/src/elements/chips/Chip.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFChip from "@patternfly/patternfly/components/Chip/chip.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -17,7 +16,7 @@ export class Chip extends AKElement { removable = false; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFChip, AKGlobal]; + return [PFBase, PFButton, PFChip]; } render(): TemplateResult { diff --git a/web/src/elements/chips/ChipGroup.ts b/web/src/elements/chips/ChipGroup.ts index 4222d61d6..71ea481d4 100644 --- a/web/src/elements/chips/ChipGroup.ts +++ b/web/src/elements/chips/ChipGroup.ts @@ -4,7 +4,6 @@ import { Chip } from "@goauthentik/elements/chips/Chip"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFChip from "@patternfly/patternfly/components/Chip/chip.css"; import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css"; @@ -18,7 +17,6 @@ export class ChipGroup extends AKElement { PFChip, PFChipGroup, PFButton, - AKGlobal, css` ::slotted(*) { margin: 0 2px; diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index 8f2841563..85930009e 100644 --- a/web/src/elements/forms/Form.ts +++ b/web/src/elements/forms/Form.ts @@ -12,7 +12,6 @@ import "@polymer/paper-input/paper-input"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -62,7 +61,6 @@ export class Form extends AKElement { PFInputGroup, PFFormControl, PFSwitch, - AKGlobal, css` select[multiple] { height: 15em; diff --git a/web/src/elements/forms/FormGroup.ts b/web/src/elements/forms/FormGroup.ts index e08aaf6dc..347a06a40 100644 --- a/web/src/elements/forms/FormGroup.ts +++ b/web/src/elements/forms/FormGroup.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -20,7 +19,6 @@ export class FormGroup extends AKElement { PFForm, PFButton, PFFormControl, - AKGlobal, css` slot[name="body"][hidden] { display: none !important; diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts index ea12bf826..95b035630 100644 --- a/web/src/elements/forms/HorizontalFormElement.ts +++ b/web/src/elements/forms/HorizontalFormElement.ts @@ -8,7 +8,6 @@ import { CSSResult, css } from "lit"; import { TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -20,7 +19,6 @@ export class HorizontalFormElement extends AKElement { PFBase, PFForm, PFFormControl, - AKGlobal, css` .pf-c-form__group { display: grid; diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts index 0f028cf40..b25a3b256 100644 --- a/web/src/elements/forms/Radio.ts +++ b/web/src/elements/forms/Radio.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -36,7 +35,6 @@ export class Radio extends AKElement { PFBase, PFRadio, PFForm, - AKGlobal, css` .pf-c-form__group-control { padding-top: calc( diff --git a/web/src/elements/forms/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts index bd5f8d136..56cca716e 100644 --- a/web/src/elements/forms/SearchSelect.ts +++ b/web/src/elements/forms/SearchSelect.ts @@ -8,7 +8,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html, render } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -39,7 +38,7 @@ export class SearchSelect extends AKElement { placeholder: string = t`Select an object.`; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFFormControl, PFSelect, AKGlobal]; + return [PFBase, PFForm, PFFormControl, PFSelect]; } @property({ attribute: false }) diff --git a/web/src/elements/notifications/APIDrawer.ts b/web/src/elements/notifications/APIDrawer.ts index 884e63026..fca57669a 100644 --- a/web/src/elements/notifications/APIDrawer.ts +++ b/web/src/elements/notifications/APIDrawer.ts @@ -7,7 +7,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; @@ -26,7 +25,6 @@ export class APIDrawer extends AKElement { PFButton, PFContent, PFDropdown, - AKGlobal, css` .pf-c-notification-drawer__header { height: 114px; diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts index ac811769e..49e285a4f 100644 --- a/web/src/elements/notifications/NotificationDrawer.ts +++ b/web/src/elements/notifications/NotificationDrawer.ts @@ -12,7 +12,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; @@ -30,7 +29,7 @@ export class NotificationDrawer extends AKElement { unread = 0; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat( + return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown].concat( css` .pf-c-drawer__body { height: 100%; diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts index 3d738168f..8aa54e013 100644 --- a/web/src/elements/router/RouterOutlet.ts +++ b/web/src/elements/router/RouterOutlet.ts @@ -7,8 +7,6 @@ import "@goauthentik/elements/router/Router404"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; - // Poliyfill for hashchange.newURL, // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange window.addEventListener("load", () => { @@ -57,7 +55,6 @@ export class RouterOutlet extends AKElement { static get styles(): CSSResult[] { return [ - AKGlobal, css` :host { background-color: transparent !important; diff --git a/web/src/elements/sidebar/Sidebar.ts b/web/src/elements/sidebar/Sidebar.ts index ecc3e7351..4ffd84cf9 100644 --- a/web/src/elements/sidebar/Sidebar.ts +++ b/web/src/elements/sidebar/Sidebar.ts @@ -5,7 +5,6 @@ import "@goauthentik/elements/sidebar/SidebarUser"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFNav from "@patternfly/patternfly/components/Nav/nav.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -17,7 +16,6 @@ export class Sidebar extends AKElement { PFBase, PFPage, PFNav, - AKGlobal, css` :host { z-index: 100; diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts index 91fc6dff7..efa83cee2 100644 --- a/web/src/elements/sidebar/SidebarBrand.ts +++ b/web/src/elements/sidebar/SidebarBrand.ts @@ -7,13 +7,12 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFGlobal from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; -import { CurrentTenant } from "@goauthentik/api"; +import { CurrentTenant, UiThemeEnum } from "@goauthentik/api"; // If the viewport is wider than MIN_WIDTH, the sidebar // is shown besides the content, and not overlaid. @@ -24,6 +23,7 @@ export const DefaultTenant: CurrentTenant = { brandingFavicon: "/static/dist/assets/icons/icon.png", brandingTitle: "authentik", uiFooterLinks: [], + uiTheme: UiThemeEnum.Automatic, matchedDomain: "", defaultLocale: "", }; @@ -39,7 +39,6 @@ export class SidebarBrand extends AKElement { PFGlobal, PFPage, PFButton, - AKGlobal, css` :host { display: flex; diff --git a/web/src/elements/sidebar/SidebarItem.ts b/web/src/elements/sidebar/SidebarItem.ts index a8df29cef..d7e3346c8 100644 --- a/web/src/elements/sidebar/SidebarItem.ts +++ b/web/src/elements/sidebar/SidebarItem.ts @@ -6,7 +6,6 @@ import { TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFNav from "@patternfly/patternfly/components/Nav/nav.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -18,7 +17,6 @@ export class SidebarItem extends AKElement { PFBase, PFPage, PFNav, - AKGlobal, css` :host { z-index: 100; diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index 682329cba..24f54b748 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -16,7 +16,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { property, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css"; import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css"; @@ -161,7 +160,6 @@ export abstract class Table extends AKElement { PFToolbar, PFDropdown, PFPagination, - AKGlobal, css` .pf-c-table thead .pf-c-table__check { min-width: 3rem; diff --git a/web/src/elements/table/TableModal.ts b/web/src/elements/table/TableModal.ts index 7ea6ee9eb..328f5ffdf 100644 --- a/web/src/elements/table/TableModal.ts +++ b/web/src/elements/table/TableModal.ts @@ -7,7 +7,6 @@ import { CSSResult } from "lit"; import { TemplateResult, html } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css"; @@ -30,7 +29,6 @@ export abstract class TableModal extends Table { PFBackdrop, PFPage, PFStack, - AKGlobal, MODAL_BUTTON_STYLES, ); } diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts index ca8fc4b5d..169e2d510 100644 --- a/web/src/elements/table/TablePagination.ts +++ b/web/src/elements/table/TablePagination.ts @@ -5,7 +5,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -37,16 +36,13 @@ export class TablePagination extends AKElement { PFBase, PFButton, PFPagination, - AKGlobal, css` - @media (prefers-color-scheme: dark) { - .pf-c-pagination__nav-control .pf-c-button { - color: var(--pf-c-button--m-plain--disabled--Color); - --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--Color); - } - .pf-c-pagination__nav-control .pf-c-button:disabled { - color: var(--pf-c-button--disabled--Color); - } + :host([theme="dark"]) .pf-c-pagination__nav-control .pf-c-button { + color: var(--pf-c-button--m-plain--disabled--Color); + --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--Color); + } + :host([theme="dark"]) .pf-c-pagination__nav-control .pf-c-button:disabled { + color: var(--pf-c-button--disabled--Color); } `, ]; diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts index 56eba28f7..c7f68ec5e 100644 --- a/web/src/elements/table/TableSearch.ts +++ b/web/src/elements/table/TableSearch.ts @@ -6,7 +6,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css"; @@ -28,7 +27,6 @@ export class TableSearch extends AKElement { PFToolbar, PFInputGroup, PFFormControl, - AKGlobal, css` ::-webkit-search-cancel-button { display: none; diff --git a/web/src/elements/utils/TimeDeltaHelp.ts b/web/src/elements/utils/TimeDeltaHelp.ts index aa50d0c18..c92a37cd9 100644 --- a/web/src/elements/utils/TimeDeltaHelp.ts +++ b/web/src/elements/utils/TimeDeltaHelp.ts @@ -6,7 +6,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFList from "@patternfly/patternfly/components/List/list.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @@ -17,7 +16,7 @@ export class TimeDeltaHelp extends AKElement { negative = false; static get styles(): CSSResult[] { - return [PFBase, PFForm, PFList, AKGlobal]; + return [PFBase, PFForm, PFList]; } render(): TemplateResult { diff --git a/web/src/elements/wizard/ActionWizardPage.ts b/web/src/elements/wizard/ActionWizardPage.ts index b88f28328..a35445029 100644 --- a/web/src/elements/wizard/ActionWizardPage.ts +++ b/web/src/elements/wizard/ActionWizardPage.ts @@ -7,7 +7,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; @@ -32,7 +31,7 @@ export interface ActionStateBundle { @customElement("ak-wizard-page-action") export class ActionWizardPage extends WizardPage { static get styles(): CSSResult[] { - return [PFBase, PFBullseye, PFEmptyState, PFTitle, PFProgressStepper, AKGlobal]; + return [PFBase, PFBullseye, PFEmptyState, PFTitle, PFProgressStepper]; } @property({ attribute: false }) diff --git a/web/src/elements/wizard/WizardFormPage.ts b/web/src/elements/wizard/WizardFormPage.ts index 5c42349c1..08a815c71 100644 --- a/web/src/elements/wizard/WizardFormPage.ts +++ b/web/src/elements/wizard/WizardFormPage.ts @@ -4,7 +4,6 @@ import { WizardPage } from "@goauthentik/elements/wizard/WizardPage"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -33,7 +32,7 @@ export class WizardForm extends Form { export class WizardFormPage extends WizardPage { static get styles(): CSSResult[] { - return [PFBase, PFCard, PFButton, PFForm, PFAlert, PFInputGroup, PFFormControl, AKGlobal]; + return [PFBase, PFCard, PFButton, PFForm, PFAlert, PFInputGroup, PFFormControl]; } inputCallback(): void { diff --git a/web/src/elements/wizard/WizardPage.ts b/web/src/elements/wizard/WizardPage.ts index 7eefdb7bf..6fdee111f 100644 --- a/web/src/elements/wizard/WizardPage.ts +++ b/web/src/elements/wizard/WizardPage.ts @@ -4,13 +4,12 @@ import { Wizard } from "@goauthentik/elements/wizard/Wizard"; import { CSSResult, PropertyDeclaration, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; @customElement("ak-wizard-page") export class WizardPage extends AKElement { static get styles(): CSSResult[] { - return [PFBase, AKGlobal]; + return [PFBase]; } @property() diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts index ef5682240..5d493796f 100644 --- a/web/src/flow/FlowExecutor.ts +++ b/web/src/flow/FlowExecutor.ts @@ -8,7 +8,7 @@ import { globalAK } from "@goauthentik/common/global"; import { configureSentry } from "@goauthentik/common/sentry"; import { first } from "@goauthentik/common/utils"; import { WebsocketClient } from "@goauthentik/common/ws"; -import { AKElement } from "@goauthentik/elements/Base"; +import { AdoptedStyleSheetsElement, Interface } from "@goauthentik/elements/Base"; import "@goauthentik/elements/LoadingOverlay"; import "@goauthentik/flow/stages/FlowErrorStage"; import "@goauthentik/flow/stages/RedirectStage"; @@ -31,7 +31,6 @@ import { customElement, property, state } from "lit/decorators.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css"; @@ -52,10 +51,11 @@ import { RedirectChallenge, ResponseError, ShellChallenge, + UiThemeEnum, } from "@goauthentik/api"; @customElement("ak-flow-executor") -export class FlowExecutor extends AKElement implements StageHost { +export class FlowExecutor extends Interface implements StageHost { flowSlug?: string; private _challenge?: ChallengeTypes; @@ -120,8 +120,7 @@ export class FlowExecutor extends AKElement implements StageHost { ws: WebsocketClient; static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFDrawer, PFButton, PFTitle, PFList, PFBackgroundImage, AKGlobal] - .concat(css` + return [PFBase, PFLogin, PFDrawer, PFButton, PFTitle, PFList, PFBackgroundImage].concat(css` .ak-hidden { display: none; } @@ -154,21 +153,19 @@ export class FlowExecutor extends AKElement implements StageHost { .pf-c-login.sidebar_right .pf-c-list { color: #000; } - @media (prefers-color-scheme: dark) { - .pf-c-login.sidebar_left .ak-login-container, - .pf-c-login.sidebar_right .ak-login-container { - background-color: var(--ak-dark-background); - } - .pf-c-login.sidebar_left .pf-c-list, - .pf-c-login.sidebar_right .pf-c-list { - color: var(--ak-dark-foreground); - } - } .pf-c-login.sidebar_right { justify-content: flex-end; padding-top: 0; padding-bottom: 0; } + :host([theme="dark"]) .pf-c-login.sidebar_left .ak-login-container, + :host([theme="dark"]) .pf-c-login.sidebar_right .ak-login-container { + background-color: var(--ak-dark-background); + } + :host([theme="dark"]) .pf-c-login.sidebar_left .pf-c-list, + :host([theme="dark"]) .pf-c-login.sidebar_right .pf-c-list { + color: var(--ak-dark-foreground); + } `); } @@ -185,6 +182,11 @@ export class FlowExecutor extends AKElement implements StageHost { tenant().then((tenant) => (this.tenant = tenant)); } + async _initTheme(root: AdoptedStyleSheetsElement): Promise { + const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic; + this._applyTheme(root, bootstrapTheme); + } + submit(payload?: FlowChallengeResponseRequest): Promise { if (!payload) return Promise.reject(); if (!this.challenge) return Promise.reject(); diff --git a/web/src/flow/FlowInspector.ts b/web/src/flow/FlowInspector.ts index 2513c9b54..4c5d94ce5 100644 --- a/web/src/flow/FlowInspector.ts +++ b/web/src/flow/FlowInspector.ts @@ -8,7 +8,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; @@ -38,7 +37,6 @@ export class FlowInspector extends AKElement { PFNotificationDrawer, PFDescriptionList, PFProgressStepper, - AKGlobal, css` code.break { word-break: break-all; diff --git a/web/src/flow/providers/oauth2/DeviceCode.ts b/web/src/flow/providers/oauth2/DeviceCode.ts index 8eb976759..40ffee48f 100644 --- a/web/src/flow/providers/oauth2/DeviceCode.ts +++ b/web/src/flow/providers/oauth2/DeviceCode.ts @@ -8,7 +8,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -27,7 +26,7 @@ export class OAuth2DeviceCode extends BaseStage< OAuthDeviceCodeChallengeResponseRequest > { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; } render(): TemplateResult { diff --git a/web/src/flow/sources/apple/AppleLoginInit.ts b/web/src/flow/sources/apple/AppleLoginInit.ts index 1dd84cf2d..516565d29 100644 --- a/web/src/flow/sources/apple/AppleLoginInit.ts +++ b/web/src/flow/sources/apple/AppleLoginInit.ts @@ -6,7 +6,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -22,7 +21,7 @@ export class AppleLoginInit extends BaseStage { diff --git a/web/src/flow/stages/FlowErrorStage.ts b/web/src/flow/stages/FlowErrorStage.ts index 48a534667..9cce31ab8 100644 --- a/web/src/flow/stages/FlowErrorStage.ts +++ b/web/src/flow/stages/FlowErrorStage.ts @@ -7,7 +7,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; import PFLogin from "@patternfly/patternfly/components/Login/login.css"; @@ -25,7 +24,6 @@ export class FlowErrorStage extends BaseStage { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle]; } render(): TemplateResult { diff --git a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts b/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts index b07b010f7..1bd96d8ec 100644 --- a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts +++ b/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts @@ -10,7 +10,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -31,7 +30,7 @@ export class AuthenticatorDuoStage extends BaseStage< AuthenticatorDuoChallengeResponseRequest > { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; } firstUpdated(): void { diff --git a/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts b/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts index edcd0b7fe..0a75518fa 100644 --- a/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts +++ b/web/src/flow/stages/authenticator_sms/AuthenticatorSMSStage.ts @@ -9,7 +9,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; @@ -29,7 +28,7 @@ export class AuthenticatorSMSStage extends BaseStage< AuthenticatorSMSChallengeResponseRequest > { static get styles(): CSSResult[] { - return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; } renderPhoneNumber(): TemplateResult { diff --git a/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts b/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts index ff1c6cb0c..fe319f06b 100644 --- a/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts +++ b/web/src/flow/stages/authenticator_static/AuthenticatorStaticStage.ts @@ -9,7 +9,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -35,7 +34,6 @@ export class AuthenticatorStaticStage extends BaseStage< PFFormControl, PFTitle, PFButton, - AKGlobal, css` /* Static OTP Tokens */ ul { diff --git a/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts b/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts index 4a55e4d8a..11fe08ea3 100644 --- a/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts +++ b/web/src/flow/stages/authenticator_totp/AuthenticatorTOTPStage.ts @@ -12,7 +12,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -38,7 +37,6 @@ export class AuthenticatorTOTPStage extends BaseStage< PFFormControl, PFTitle, PFButton, - AKGlobal, css` .qr-container { display: flex; diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts index d78d77841..1525a063b 100644 --- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts +++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts @@ -11,7 +11,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -78,7 +77,7 @@ export class AuthenticatorValidateStage } static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal].concat(css` + return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat(css` ul { padding-top: 1rem; } diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts index 854fa4884..4a8e8d4db 100644 --- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts +++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageCode.ts @@ -11,7 +11,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -38,7 +37,7 @@ export class AuthenticatorValidateStageWebCode extends BaseStage< showBackButton = false; static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; } render(): TemplateResult { diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts index 4ee7e3b32..e093e95c5 100644 --- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts +++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts @@ -10,7 +10,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -36,7 +35,7 @@ export class AuthenticatorValidateStageWebDuo extends BaseStage< showBackButton = false; static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; } firstUpdated(): void { diff --git a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts index b395caf57..cb0ce5a21 100644 --- a/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts +++ b/web/src/flow/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts @@ -10,7 +10,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; @@ -52,7 +51,6 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage< PFFormControl, PFTitle, PFButton, - AKGlobal, ]; } diff --git a/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts b/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts index f7b22f029..59af79122 100644 --- a/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts +++ b/web/src/flow/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts @@ -11,7 +11,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -42,7 +41,7 @@ export class WebAuthnAuthenticatorRegisterStage extends BaseStage< publicKeyCredentialCreateOptions?: PublicKeyCredentialCreationOptions; static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFFormControl, PFForm, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFFormControl, PFForm, PFTitle, PFButton]; } async register(): Promise { diff --git a/web/src/flow/stages/autosubmit/AutosubmitStage.ts b/web/src/flow/stages/autosubmit/AutosubmitStage.ts index 9e9fb1929..a9053d861 100644 --- a/web/src/flow/stages/autosubmit/AutosubmitStage.ts +++ b/web/src/flow/stages/autosubmit/AutosubmitStage.ts @@ -6,7 +6,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -22,7 +21,7 @@ export class AutosubmitStage extends BaseStage< AutoSubmitChallengeResponseRequest > { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle]; } updated(): void { diff --git a/web/src/flow/stages/captcha/CaptchaStage.ts b/web/src/flow/stages/captcha/CaptchaStage.ts index 42ca38d94..1d2df1b79 100644 --- a/web/src/flow/stages/captcha/CaptchaStage.ts +++ b/web/src/flow/stages/captcha/CaptchaStage.ts @@ -13,7 +13,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -26,7 +25,7 @@ import { CaptchaChallenge, CaptchaChallengeResponseRequest } from "@goauthentik/ @customElement("ak-stage-captcha") export class CaptchaStage extends BaseStage { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; } handlers = [this.handleGReCaptcha, this.handleHCaptcha, this.handleTurnstile]; diff --git a/web/src/flow/stages/consent/ConsentStage.ts b/web/src/flow/stages/consent/ConsentStage.ts index 0e1a4c712..639a1062b 100644 --- a/web/src/flow/stages/consent/ConsentStage.ts +++ b/web/src/flow/stages/consent/ConsentStage.ts @@ -8,7 +8,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -23,17 +22,7 @@ import { ConsentChallenge, ConsentChallengeResponseRequest, Permission } from "@ @customElement("ak-stage-consent") export class ConsentStage extends BaseStage { static get styles(): CSSResult[] { - return [ - PFBase, - PFLogin, - PFList, - PFForm, - PFSpacing, - PFFormControl, - PFTitle, - PFButton, - AKGlobal, - ]; + return [PFBase, PFLogin, PFList, PFForm, PFSpacing, PFFormControl, PFTitle, PFButton]; } renderPermissions(perms: Permission[]): TemplateResult { diff --git a/web/src/flow/stages/dummy/DummyStage.ts b/web/src/flow/stages/dummy/DummyStage.ts index f460576cf..48fb71199 100644 --- a/web/src/flow/stages/dummy/DummyStage.ts +++ b/web/src/flow/stages/dummy/DummyStage.ts @@ -7,7 +7,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -20,7 +19,7 @@ import { DummyChallenge, DummyChallengeResponseRequest } from "@goauthentik/api" @customElement("ak-stage-dummy") export class DummyStage extends BaseStage { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton]; } render(): TemplateResult { diff --git a/web/src/flow/stages/email/EmailStage.ts b/web/src/flow/stages/email/EmailStage.ts index 7326ac016..ce7d0cf45 100644 --- a/web/src/flow/stages/email/EmailStage.ts +++ b/web/src/flow/stages/email/EmailStage.ts @@ -6,7 +6,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -19,7 +18,7 @@ import { EmailChallenge, EmailChallengeResponseRequest } from "@goauthentik/api" @customElement("ak-stage-email") export class EmailStage extends BaseStage { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle]; } render(): TemplateResult { diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts index a30b0c89f..1cb8de5c5 100644 --- a/web/src/flow/stages/identification/IdentificationStage.ts +++ b/web/src/flow/stages/identification/IdentificationStage.ts @@ -9,7 +9,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; @@ -46,16 +45,7 @@ export class IdentificationStage extends BaseStage< form?: HTMLFormElement; static get styles(): CSSResult[] { - return [ - PFBase, - PFAlert, - PFLogin, - PFForm, - PFFormControl, - PFTitle, - PFButton, - AKGlobal, - ].concat( + return [PFBase, PFAlert, PFLogin, PFForm, PFFormControl, PFTitle, PFButton].concat( css` /* login page's icons */ .pf-c-login__main-footer-links-item button { diff --git a/web/src/flow/stages/password/PasswordStage.ts b/web/src/flow/stages/password/PasswordStage.ts index e1c6855e8..6c3506db5 100644 --- a/web/src/flow/stages/password/PasswordStage.ts +++ b/web/src/flow/stages/password/PasswordStage.ts @@ -10,7 +10,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -23,7 +22,7 @@ import { PasswordChallenge, PasswordChallengeResponseRequest } from "@goauthenti @customElement("ak-stage-password") export class PasswordStage extends BaseStage { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle, AKGlobal]; + return [PFBase, PFLogin, PFForm, PFFormControl, PFButton, PFTitle]; } input?: HTMLInputElement; diff --git a/web/src/flow/stages/prompt/PromptStage.ts b/web/src/flow/stages/prompt/PromptStage.ts index dbfee6a51..cbdd897c7 100644 --- a/web/src/flow/stages/prompt/PromptStage.ts +++ b/web/src/flow/stages/prompt/PromptStage.ts @@ -10,7 +10,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAlert from "@patternfly/patternfly/components/Alert/alert.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; @@ -29,7 +28,7 @@ import { @customElement("ak-stage-prompt") export class PromptStage extends BaseStage { static get styles(): CSSResult[] { - return [PFBase, PFLogin, PFAlert, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal]; + return [PFBase, PFLogin, PFAlert, PFForm, PFFormControl, PFTitle, PFButton]; } renderPromptInner(prompt: StagePrompt, placeholderAsValue: boolean): string { diff --git a/web/src/user/LibraryApplication.ts b/web/src/user/LibraryApplication.ts index 6ad3e75ae..7a670ab71 100644 --- a/web/src/user/LibraryApplication.ts +++ b/web/src/user/LibraryApplication.ts @@ -10,7 +10,6 @@ import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; @@ -35,7 +34,6 @@ export class LibraryApplication extends AKElement { PFCard, PFButton, PFAvatar, - AKGlobal, css` .pf-c-card { height: 100%; diff --git a/web/src/user/LibraryPage.ts b/web/src/user/LibraryPage.ts index 05a56d054..350dff4bf 100644 --- a/web/src/user/LibraryPage.ts +++ b/web/src/user/LibraryPage.ts @@ -14,7 +14,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -64,8 +63,7 @@ export class LibraryPage extends AKElement { } static get styles(): CSSResult[] { - return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGrid, PFGallery, AKGlobal] - .concat(css` + return [PFBase, PFDisplay, PFEmptyState, PFPage, PFContent, PFGrid, PFGallery].concat(css` :host, main { padding: 3% 5%; diff --git a/web/src/user/UserInterface.ts b/web/src/user/UserInterface.ts index 986139a7f..a7d54acf5 100644 --- a/web/src/user/UserInterface.ts +++ b/web/src/user/UserInterface.ts @@ -10,7 +10,7 @@ import { autoDetectLanguage } from "@goauthentik/common/ui/locale"; import { me } from "@goauthentik/common/users"; import { first } from "@goauthentik/common/utils"; import { WebsocketClient } from "@goauthentik/common/ws"; -import { AKElement } from "@goauthentik/elements/Base"; +import { Interface } from "@goauthentik/elements/Base"; import "@goauthentik/elements/messages/MessageContainer"; import "@goauthentik/elements/notifications/APIDrawer"; import "@goauthentik/elements/notifications/NotificationDrawer"; @@ -26,7 +26,6 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css"; import PFBrand from "@patternfly/patternfly/components/Brand/brand.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; @@ -42,7 +41,7 @@ import { CurrentTenant, EventsApi, SessionUser } from "@goauthentik/api"; autoDetectLanguage(); @customElement("ak-interface-user") -export class UserInterface extends AKElement { +export class UserInterface extends Interface { @property({ type: Boolean }) notificationDrawerOpen = getURLParam("notificationDrawerOpen", false); @@ -74,7 +73,6 @@ export class UserInterface extends AKElement { PFDrawer, PFDropdown, PFNotificationBadge, - AKGlobal, css` .pf-c-page__main, .pf-c-drawer__content, @@ -85,6 +83,9 @@ export class UserInterface extends AKElement { .pf-c-page { background-color: transparent; } + :host([theme="dark"]) .pf-c-page { + background-color: var(--ak-dark-background); + } .background-wrapper { background-color: var(--pf-c-page--BackgroundColor) !important; } diff --git a/web/src/user/user-settings/BaseUserSettings.ts b/web/src/user/user-settings/BaseUserSettings.ts index 703871cc0..e0e4234f3 100644 --- a/web/src/user/user-settings/BaseUserSettings.ts +++ b/web/src/user/user-settings/BaseUserSettings.ts @@ -3,7 +3,6 @@ import { AKElement } from "@goauthentik/elements/Base"; import { CSSResult } from "lit"; import { property } from "lit/decorators.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; @@ -17,6 +16,6 @@ export abstract class BaseUserSettings extends AKElement { configureUrl?: string; static get styles(): CSSResult[] { - return [PFBase, PFButton, PFForm, PFFormControl, AKGlobal]; + return [PFBase, PFButton, PFForm, PFFormControl]; } } diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts index bc71cad75..7bb03c66b 100644 --- a/web/src/user/user-settings/UserSettingsPage.ts +++ b/web/src/user/user-settings/UserSettingsPage.ts @@ -18,7 +18,6 @@ import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; @@ -50,7 +49,6 @@ export class UserSettingsPage extends AKElement { PFForm, PFFormControl, PFStack, - AKGlobal, css` @media screen and (min-width: 1200px) { :host { diff --git a/web/src/user/user-settings/details/UserPassword.ts b/web/src/user/user-settings/details/UserPassword.ts index a64d9023f..fecd22ca2 100644 --- a/web/src/user/user-settings/details/UserPassword.ts +++ b/web/src/user/user-settings/details/UserPassword.ts @@ -9,7 +9,6 @@ import { customElement } from "lit/decorators.js"; import { property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFForm from "@patternfly/patternfly/components/Form/form.css"; @@ -22,7 +21,7 @@ export class UserSettingsPassword extends AKElement { configureUrl?: string; static get styles(): CSSResult[] { - return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal]; + return [PFBase, PFCard, PFButton, PFForm, PFFormControl]; } render(): TemplateResult { diff --git a/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts b/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts index 74d06693e..9acc50ae5 100644 --- a/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts +++ b/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts @@ -13,7 +13,6 @@ import { CSSResult, TemplateResult, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; @@ -56,7 +55,7 @@ export class UserSettingsFlowExecutor extends AKElement implements StageHost { tenant!: CurrentTenant; static get styles(): CSSResult[] { - return [PFBase, PFCard, PFPage, PFButton, PFContent, AKGlobal]; + return [PFBase, PFCard, PFPage, PFButton, PFContent]; } constructor() { diff --git a/web/src/user/user-settings/sources/SourceSettings.ts b/web/src/user/user-settings/sources/SourceSettings.ts index 3463b3b94..128f5887c 100644 --- a/web/src/user/user-settings/sources/SourceSettings.ts +++ b/web/src/user/user-settings/sources/SourceSettings.ts @@ -14,7 +14,6 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { until } from "lit/directives/until.js"; -import AKGlobal from "@goauthentik/common/styles/authentik.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css"; @@ -32,7 +31,6 @@ export class UserSourceSettingsPage extends AKElement { return [ PFDataList, PFContent, - AKGlobal, css` .pf-c-data-list__cell { display: flex; @@ -43,10 +41,8 @@ export class UserSourceSettingsPage extends AKElement { width: 48px; margin-right: 16px; } - @media (prefers-color-scheme: dark) { - .pf-c-data-list__cell img { - filter: invert(1); - } + :host([theme="dark"]) .pf-c-data-list__cell img { + filter: invert(1); } `, ]; diff --git a/website/docs/interfaces/admin/customization.md b/website/docs/interfaces/admin/customization.md index 239082269..d1532b9b1 100644 --- a/website/docs/interfaces/admin/customization.md +++ b/website/docs/interfaces/admin/customization.md @@ -3,3 +3,7 @@ ### `settings.pagination.perPage` How many items should be retrieved per page. Defaults to 20. + +### `settings.theme.base` + +Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`. diff --git a/website/docs/interfaces/flow/customization.md b/website/docs/interfaces/flow/customization.md new file mode 100644 index 000000000..ce684f299 --- /dev/null +++ b/website/docs/interfaces/flow/customization.md @@ -0,0 +1,7 @@ +# Customization + +Since flows can be executed authenticated or unauthenticated, the default settings can be set via tenants _attributes_. + +### `settings.theme.base` + +Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`. diff --git a/website/docs/interfaces/user/customization.md b/website/docs/interfaces/user/customization.md index 40480c545..a44dc38f2 100644 --- a/website/docs/interfaces/user/customization.md +++ b/website/docs/interfaces/user/customization.md @@ -32,6 +32,10 @@ The following features can be enabled/disabled. By default, all of them are enab Configure what is shown in the top right corner. Defaults to `username`. Choices: `username`, `name`, `email` +### `settings.theme.base` + +Configure the base color scheme. Defaults to `automatic`, which switches between dark and light mode based on the users' browsers' preference. Choices: `automatic`, `dark`, `light`. + ### `settings.theme.background` Optional CSS which is applied in the background of the background of the user interface; for example diff --git a/website/sidebars.js b/website/sidebars.js index abe458471..2b48cb0e1 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -194,6 +194,11 @@ module.exports = { type: "category", label: "Interfaces", items: [ + { + type: "category", + label: "Flow", + items: ["interfaces/flow/customization"], + }, { type: "category", label: "User",