web: move colour styles to css file

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/authentik.css

@@ -42,6 +42,28 @@ ak-message {
     display: block;
 }
 
+.pf-m-success {
+    color: var(--pf-global--success-color--100);
+}
+.pf-c-button.pf-m-success {
+    color: var(--pf-c-button--m-primary--Color);
+    background-color: var(--pf-global--success-color--100);
+}
+.pf-m-warning {
+    color: var(--pf-global--warning-color--100);
+}
+.pf-c-button.pf-m-warning {
+    color: var(--pf-c-button--m-primary--Color);
+    background-color: var(--pf-global--warning-color--100);
+}
+.pf-m-danger {
+    color: var(--pf-global--danger-color--100);
+}
+.pf-c-button.pf-m-danger {
+    color: var(--pf-c-button--m-primary--Color);
+    background-color: var(--pf-global--danger-color--100);
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --ak-dark-foreground: #fafafa;

web/src/common/styles.ts

@@ -1,25 +0,0 @@
-import { css } from "lit-element";
-
-export const ColorStyles = css`
-    .pf-m-success {
-        color: var(--pf-global--success-color--100);
-    }
-    .pf-c-button.pf-m-success {
-        color: var(--pf-c-button--m-primary--Color);
-        background-color: var(--pf-global--success-color--100);
-    }
-    .pf-m-warning {
-        color: var(--pf-global--warning-color--100);
-    }
-    .pf-c-button.pf-m-warning {
-        color: var(--pf-c-button--m-primary--Color);
-        background-color: var(--pf-global--warning-color--100);
-    }
-    .pf-m-danger {
-        color: var(--pf-global--danger-color--100);
-    }
-    .pf-c-button.pf-m-danger {
-        color: var(--pf-c-button--m-primary--Color);
-        background-color: var(--pf-global--danger-color--100);
-    }
-`;

web/src/elements/Spinner.ts

@@ -1,7 +1,6 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
+import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
-import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
 
 export enum SpinnerSize {
     Small = "pf-m-sm",
@@ -16,7 +15,7 @@ export class Spinner extends LitElement {
     size: SpinnerSize = SpinnerSize.Medium;
 
     static get styles(): CSSResult[] {
-        return [SpinnerStyle];
+        return [PFSpinner];
     }
 
     render(): TemplateResult {

web/src/elements/buttons/SpinnerButton.ts

@@ -1,13 +1,9 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
-// @ts-ignore
+import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
-import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
-// @ts-ignore
-import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
 import { SpinnerSize } from "../Spinner";
 import { PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
-import { ColorStyles } from "../../common/styles";
 
 @customElement("ak-spinner-button")
 export class SpinnerButton extends LitElement {
@@ -19,10 +15,9 @@ export class SpinnerButton extends LitElement {
 
     static get styles(): CSSResult[] {
         return [
-            GlobalsStyle,
+            PFBase,
-            ButtonStyle,
+            PFButton,
-            SpinnerStyle,
+            PFSpinner,
-            ColorStyles,
             css`
                 button {
                     /* Have to use !important here, as buttons with pf-m-progress have transition already */

web/src/elements/buttons/TokenCopyButton.ts

@@ -1,12 +1,10 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-// @ts-ignore
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
-// @ts-ignore
-import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
 import { CoreApi } from "authentik-api";
 import { ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
-import { ColorStyles } from "../../common/styles";
 import { DEFAULT_CONFIG } from "../../api/Config";
+import AKGlobal from "../../authentik.css";
 
 @customElement("ak-token-copy-button")
 export class TokenCopyButton extends LitElement {
@@ -18,9 +16,9 @@ export class TokenCopyButton extends LitElement {
 
     static get styles(): CSSResult[] {
         return [
-            GlobalsStyle,
+            PFBase,
-            ButtonStyle,
+            PFButton,
-            ColorStyles,
+            AKGlobal,
             css`
                 button {
                     transition: background-color 0.3s ease 0s;

web/src/elements/table/TablePagination.ts

@@ -4,7 +4,7 @@ import { gettext } from "django";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
-
+import AKGlobal from "../../authentik.css";
 
 @customElement("ak-table-pagination")
 export class TablePagination extends LitElement {
@@ -16,7 +16,7 @@ export class TablePagination extends LitElement {
     pageChangeHandler: (page: number) => void = (page: number) => {}
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFButton, PFPagination];
+        return [PFBase, PFButton, PFPagination, AKGlobal];
     }
 
     render(): TemplateResult {

web/src/pages/outposts/OutpostHealth.ts

@@ -5,7 +5,7 @@ import { OutpostsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import "../../elements/Spinner";
-import { ColorStyles } from "../../common/styles";
+import AKGlobal from "../../authentik.css";
 
 @customElement("ak-outpost-health")
 export class OutpostHealth extends LitElement {
@@ -14,7 +14,7 @@ export class OutpostHealth extends LitElement {
     outpostId?: string;
 
     static get styles(): CSSResult[] {
-        return [PFBase, ColorStyles];
+        return [PFBase, AKGlobal];
     }
 
     render(): TemplateResult {