habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: toggle dark/light theme manually (#4876)

Browse Source
This commit is contained in:
Jens L
2023-03-09 23:17:53 +01:00
committed by GitHub
parent e28f897cb1
commit b6b820f6f1
119 changed files with 658 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/elements/Alert.ts
View File

@ -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 {

146
web/src/elements/Base.ts
View File

@ -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<string[]> | undefined;
function fetchCustomCSS(): Promise<string[]> {
if (!css) {
@ -22,28 +36,115 @@ function fetchCustomCSS(): Promise<string[]> {
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<void> {
// 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<void> {
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<void> {
const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
this._applyTheme(root, bootstrapTheme);
uiConfig().then((config) => {
if (config.theme.base) {
this._applyTheme(root, config.theme.base);
}
});
}
}

25
web/src/elements/CodeMirror.ts
View File

@ -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<T> extends AKElement {
@property({ type: Boolean })
@ -126,18 +128,17 @@ export class CodeMirrorTextarea<T> 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<UiThemeEnum>) => {
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<T> 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<T> extends AKElement {
doc: this._value,
});
this.shadowRoot?.appendChild(this.editor.dom);
matcher.addEventListener("change", handler);
handler();
}
}

40
web/src/elements/Diagram.ts
View File

@ -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<UiThemeEnum>) => {
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();
}

2
web/src/elements/Divider.ts
View File

@ -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;

3
web/src/elements/EmptyState.ts
View File

@ -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 {

3
web/src/elements/Expand.ts
View File

@ -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 {

3
web/src/elements/Label.ts
View File

@ -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 {

2
web/src/elements/Markdown.ts
View File

@ -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;

2
web/src/elements/PageHeader.ts
View File

@ -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;

2
web/src/elements/Tabs.ts
View File

@ -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;

2
web/src/elements/Tooltip.ts
View File

@ -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;

3
web/src/elements/TreeView.ts
View File

@ -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 })

2
web/src/elements/buttons/ModalButton.ts
View File

@ -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 {

2
web/src/elements/buttons/SpinnerButton.ts
View File

@ -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 */

3
web/src/elements/cards/AggregateCard.ts
View File

@ -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%;

23
web/src/elements/charts/Chart.ts
View File

@ -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<T> 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<UiThemeEnum>) => {
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 {

3
web/src/elements/chips/Chip.ts
View File

@ -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 {

2
web/src/elements/chips/ChipGroup.ts
View File

@ -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;

2
web/src/elements/forms/Form.ts
View File

@ -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<T> extends AKElement {
PFInputGroup,
PFFormControl,
PFSwitch,
AKGlobal,
css`
select[multiple] {
height: 15em;

2
web/src/elements/forms/FormGroup.ts
View File

@ -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;

2
web/src/elements/forms/HorizontalFormElement.ts
View File

@ -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;

2
web/src/elements/forms/Radio.ts
View File

@ -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<T> extends AKElement {
PFBase,
PFRadio,
PFForm,
AKGlobal,
css`
.pf-c-form__group-control {
padding-top: calc(

3
web/src/elements/forms/SearchSelect.ts
View File

@ -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<T> 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 })

2
web/src/elements/notifications/APIDrawer.ts
View File

@ -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;

3
web/src/elements/notifications/NotificationDrawer.ts
View File

@ -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%;

3
web/src/elements/router/RouterOutlet.ts
View File

@ -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;

2
web/src/elements/sidebar/Sidebar.ts
View File

@ -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;

5
web/src/elements/sidebar/SidebarBrand.ts
View File

@ -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;

2
web/src/elements/sidebar/SidebarItem.ts
View File

@ -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;

2
web/src/elements/table/Table.ts
View File

@ -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<T> extends AKElement {
PFToolbar,
PFDropdown,
PFPagination,
AKGlobal,
css`
.pf-c-table thead .pf-c-table__check {
min-width: 3rem;

2
web/src/elements/table/TableModal.ts
View File

@ -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<T> extends Table<T> {
PFBackdrop,
PFPage,
PFStack,
AKGlobal,
MODAL_BUTTON_STYLES,
);
}

16
web/src/elements/table/TablePagination.ts
View File

@ -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);
}
`,
];

2
web/src/elements/table/TableSearch.ts
View File

@ -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;

3
web/src/elements/utils/TimeDeltaHelp.ts
View File

@ -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 {

3
web/src/elements/wizard/ActionWizardPage.ts
View File

@ -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 })

3
web/src/elements/wizard/WizardFormPage.ts
View File

@ -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<KeyUnknown> {
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 {

3
web/src/elements/wizard/WizardPage.ts
View File

@ -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()