web: fix colourstyles not being included in common_styles

# Conflicts:
#	authentik/events/geo.py
#	web/src/elements/buttons/TokenCopyButton.ts

web/src/common/styles.ts

@@ -1,3 +1,4 @@
+import { css, CSSResult } from "lit-element";
 // @ts-ignore
 import PF from "@patternfly/patternfly/patternfly.css";
 // @ts-ignore
@@ -6,10 +7,31 @@ import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
 import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
 // @ts-ignore
 import AKGlobal from "../authentik.css";
-import { CSSResult } from "lit-element";
 // @ts-ignore
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 // @ts-ignore
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
-
+export const ColorStyles = css`
-export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal, CodeMirrorStyle, CodeMirrorTheme];
+    .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);
+    }
+`;
+export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal, CodeMirrorStyle, CodeMirrorTheme, ColorStyles];

web/src/constants.ts

@@ -5,27 +5,4 @@ export const SUCCESS_CLASS = "pf-m-success";
 export const ERROR_CLASS = "pf-m-danger";
 export const PROGRESS_CLASS = "pf-m-in-progress";
 export const CURRENT_CLASS = "pf-m-current";
-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);
-    }
-`;
 export const VERSION = "2021.2.5-stable";

web/src/elements/buttons/SpinnerButton.ts

@@ -5,7 +5,8 @@ import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
 import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
 // @ts-ignore
 import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
-import { ColorStyles, PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
+import { PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
+import { ColorStyles } from "../../common/styles";
 
 @customElement("ak-spinner-button")
 export class SpinnerButton extends LitElement {

web/src/elements/buttons/TokenCopyButton.ts

@@ -4,7 +4,8 @@ import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
 // @ts-ignore
 import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
 import { tokenByIdentifier } from "../../api/Tokens";
-import { ColorStyles, ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
+import { ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
+import { ColorStyles } from "../../common/styles";
 
 @customElement("ak-token-copy-button")
 export class TokenCopyButton extends LitElement {

web/src/elements/cards/AggregateCard.ts

@@ -2,7 +2,6 @@ import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { COMMON_STYLES } from "../../common/styles";
-import { ColorStyles } from "../../constants";
 
 @customElement("ak-aggregate-card")
 export class AggregateCard extends LitElement {
@@ -25,7 +24,7 @@ export class AggregateCard extends LitElement {
                 text-align: center;
                 color: var(--pf-global--Color--100);
             }
-        `, ColorStyles]);
+        `]);
     }
 
     renderInner(): TemplateResult {

web/src/elements/router/RouterOutlet.ts

@@ -3,7 +3,6 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import CodeMirrorStyle from "codemirror/lib/codemirror.css";
 // @ts-ignore
 import CodeMirrorTheme from "codemirror/theme/monokai.css";
-import { ColorStyles } from "../../constants";
 import { COMMON_STYLES } from "../../common/styles";
 import { Route } from "./Route";
 import { ROUTES } from "../../routes";
@@ -23,7 +22,6 @@ export class RouterOutlet extends LitElement {
         return [
             CodeMirrorStyle,
             CodeMirrorTheme,
-            ColorStyles,
             css`
                 :host {
                     height: 100vh;