From 88cf0b2cdc2697e64040618883944d828ba5abe3 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Wed, 17 Mar 2021 17:50:44 +0100 Subject: [PATCH] web: move colour styles to css file Signed-off-by: Jens Langhammer --- web/src/authentik.css | 22 ++++++++++++++++++ web/src/common/styles.ts | 25 --------------------- web/src/elements/Spinner.ts | 5 ++--- web/src/elements/buttons/SpinnerButton.ts | 17 +++++--------- web/src/elements/buttons/TokenCopyButton.ts | 14 +++++------- web/src/elements/table/TablePagination.ts | 4 ++-- web/src/pages/outposts/OutpostHealth.ts | 4 ++-- 7 files changed, 40 insertions(+), 51 deletions(-) delete mode 100644 web/src/common/styles.ts diff --git a/web/src/authentik.css b/web/src/authentik.css index b3392a3f6..a24ec1ba2 100644 --- a/web/src/authentik.css +++ b/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; diff --git a/web/src/common/styles.ts b/web/src/common/styles.ts deleted file mode 100644 index 2c07b0d78..000000000 --- a/web/src/common/styles.ts +++ /dev/null @@ -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); - } -`; diff --git a/web/src/elements/Spinner.ts b/web/src/elements/Spinner.ts index a9cbcd815..ee37091cc 100644 --- a/web/src/elements/Spinner.ts +++ b/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 SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css"; +import PFSpinner 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 { diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts index bf97c70dd..966324777 100644 --- a/web/src/elements/buttons/SpinnerButton.ts +++ b/web/src/elements/buttons/SpinnerButton.ts @@ -1,13 +1,9 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -// @ts-ignore -import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css"; -// @ts-ignore -import ButtonStyle from "@patternfly/patternfly/components/Button/button.css"; -// @ts-ignore -import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; +import PFSpinner 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, - ButtonStyle, - SpinnerStyle, - ColorStyles, + PFBase, + PFButton, + PFSpinner, css` button { /* Have to use !important here, as buttons with pf-m-progress have transition already */ diff --git a/web/src/elements/buttons/TokenCopyButton.ts b/web/src/elements/buttons/TokenCopyButton.ts index c1e732876..c7ae700aa 100644 --- a/web/src/elements/buttons/TokenCopyButton.ts +++ b/web/src/elements/buttons/TokenCopyButton.ts @@ -1,12 +1,10 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; -// @ts-ignore -import GlobalsStyle from "@patternfly/patternfly/patternfly-base.css"; -// @ts-ignore -import ButtonStyle from "@patternfly/patternfly/components/Button/button.css"; +import PFBase from "@patternfly/patternfly/patternfly-base.css"; +import PFButton 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, - ButtonStyle, - ColorStyles, + PFBase, + PFButton, + AKGlobal, css` button { transition: background-color 0.3s ease 0s; diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts index 9b267b7bb..7994f76fe 100644 --- a/web/src/elements/table/TablePagination.ts +++ b/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 { diff --git a/web/src/pages/outposts/OutpostHealth.ts b/web/src/pages/outposts/OutpostHealth.ts index 91fd5ccd5..bca22cd4c 100644 --- a/web/src/pages/outposts/OutpostHealth.ts +++ b/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 {