From db184c74dd670ff10a10ae90d6a30cbae08fdd13 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Thu, 26 May 2022 22:23:43 -0700 Subject: [PATCH] Comment out the old ant overrides and try to make colors match design --- web/components/ui/Content/Content.tsx | 8 ++++++-- .../ui/OfflineBanner/OfflineBanner.tsx | 2 +- .../ui/Statusbar/Statusbar.module.scss | 2 +- web/pages/_app.tsx | 7 +++++-- .../tokens/color/antd-overrides.yaml | 4 +++- .../tokens/color/default-theme.yaml | 2 +- .../tokens/color/owncast-colors.yaml | 4 ++-- web/styles/theme.less | 17 +++++++++-------- web/styles/variables.css | 17 +++++++++-------- 9 files changed, 37 insertions(+), 26 deletions(-) diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 058ca4e34..34d4e1f9c 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -88,13 +88,17 @@ export default function ContentComponent() {
{externalActionButtons} - + {}} notificationClosed={() => {}} > - + diff --git a/web/components/ui/OfflineBanner/OfflineBanner.tsx b/web/components/ui/OfflineBanner/OfflineBanner.tsx index 10e95c546..fcf6ad97c 100644 --- a/web/components/ui/OfflineBanner/OfflineBanner.tsx +++ b/web/components/ui/OfflineBanner/OfflineBanner.tsx @@ -21,7 +21,7 @@ export default function OfflineBanner({ name, text }: Props) {
{text}
- diff --git a/web/components/ui/Statusbar/Statusbar.module.scss b/web/components/ui/Statusbar/Statusbar.module.scss index 42b2c1f28..0fb8e70a6 100644 --- a/web/components/ui/Statusbar/Statusbar.module.scss +++ b/web/components/ui/Statusbar/Statusbar.module.scss @@ -6,5 +6,5 @@ justify-content: space-between; height: 30px; width: 100%; - background-color: black; + background-color: var(--theme-background-secondary); } diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 85a341e3c..e58f292a4 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -1,9 +1,12 @@ +// All these imports are almost exclusively for the Admin. +// We should not be loading them for the main frontend UI. + // order matters! import '../styles/variables.css'; import '../styles/global.less'; import '../styles/globals.scss'; -import '../styles/ant-overrides.scss'; -import '../styles/markdown-editor.scss'; +// import '../styles/ant-overrides.scss'; +// import '../styles/markdown-editor.scss'; import '../styles/main-layout.scss'; diff --git a/web/style-definitions/tokens/color/antd-overrides.yaml b/web/style-definitions/tokens/color/antd-overrides.yaml index e053c01b2..790f99c8d 100644 --- a/web/style-definitions/tokens/color/antd-overrides.yaml +++ b/web/style-definitions/tokens/color/antd-overrides.yaml @@ -12,10 +12,12 @@ popover-background: value: '{color.owncast.purple.700.value}' background-color-light: value: 'var(--theme-background-secondary)' +layout-body-background: + value: 'var(--theme-background)' # These values require explicit colors and cannot take css variables. primary-color: - value: '{color.owncast.purple.500.value}' + value: '{color.owncast.purple.700.value}' info-color: value: '{color.owncast.gray.500.value}' success-color: diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml index 8e4b0b555..d1b86f166 100644 --- a/web/style-definitions/tokens/color/default-theme.yaml +++ b/web/style-definitions/tokens/color/default-theme.yaml @@ -5,7 +5,7 @@ theme: primary-color: - value: '{color.owncast.purple.500.value}' + value: '{color.owncast.purple.700.value}' comment: 'The primary color of the application used for rendering controls.' text-color: value: '{color.owncast.gray.300.value}' diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml index 27511cf35..8e6eeeca1 100644 --- a/web/style-definitions/tokens/color/owncast-colors.yaml +++ b/web/style-definitions/tokens/color/owncast-colors.yaml @@ -71,9 +71,9 @@ color: value: 'rgba(32, 134, 225, 1)' background: - value: 'rgba(27, 26, 38, 1)' + value: 'rgba(32, 34, 50, 1.0)' background-secondary: - value: 'rgba(22, 21, 31, 1)' + value: '#282A30' font: owncast: diff --git a/web/styles/theme.less b/web/styles/theme.less index b24c4204a..8cb085eee 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -1,13 +1,14 @@ // Do not edit directly -// Generated on Wed, 18 May 2022 00:35:52 GMT +// Generated on Fri, 27 May 2022 05:16:28 GMT @text-color: var(--theme-text-color); @text-color-secondary: var(--theme-text-color-secondary); @link-color: var(--theme-link-color); @popover-background: #6941c6; @background-color-light: var(--theme-background-secondary); -@primary-color: #9e77ed; +@layout-body-background: var(--theme-background); +@primary-color: #6941c6; @info-color: #667085; @success-color: #12b76a; @warning-color: #f79009; @@ -16,13 +17,13 @@ @green-base: #12b76a; @red-base: #f04438; @orange-base: #f79009; -@theme-primary-color: #9e77ed; // The primary color of the application used for rendering controls. +@theme-primary-color: #6941c6; // The primary color of the application used for rendering controls. @theme-text-color: #d0d5dd; // The color of the text in the application. @theme-text-color-secondary: #667085; @theme-link-color: #9e77ed; @theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -@theme-background: #1b1a26; // The main background color of the page. -@theme-background-secondary: #16151f; // A secondary background color used in sections and controls. +@theme-background: #202232; // The main background color of the page. +@theme-background-secondary: #282a30; // A secondary background color used in sections and controls. @theme-rounded-corners: 5px; // The radius of rounded corners used in places. @theme-success-color: #12b76a; @theme-info-color: #d6bbfb; @@ -56,8 +57,8 @@ @color-owncast-logo-purple: #7871ff; @color-owncast-logo-pink: #c98bfe; @color-owncast-logo-blue: #2086e1; -@color-owncast-background: #1b1a26; -@color-owncast-background-secondary: #16151f; +@color-owncast-background: #202232; +@color-owncast-background-secondary: #282a30; @font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @owncast-purple: #7871ff; @owncast-purple-25: rgba(120, 113, 255, 0.25); @@ -70,5 +71,5 @@ @white-88: #667085; @purple-dark: #42307d; @default-link-color: #6941c6; -@default-bg-color: #1b1a26; +@default-bg-color: #202232; @default-text-color: #f2f4f7; \ No newline at end of file diff --git a/web/styles/variables.css b/web/styles/variables.css index afb7a650f..f4bb8cb29 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 18 May 2022 00:35:52 GMT + * Generated on Fri, 27 May 2022 05:16:28 GMT */ :root { @@ -9,7 +9,8 @@ --link-color: var(--theme-link-color); --popover-background: #6941c6; --background-color-light: var(--theme-background-secondary); - --primary-color: #9e77ed; + --layout-body-background: var(--theme-background); + --primary-color: #6941c6; --info-color: #667085; --success-color: #12b76a; --warning-color: #f79009; @@ -18,15 +19,15 @@ --green-base: #12b76a; --red-base: #f04438; --orange-base: #f79009; - --theme-primary-color: #9e77ed; /* The primary color of the application used for rendering controls. */ + --theme-primary-color: #6941c6; /* The primary color of the application used for rendering controls. */ --theme-text-color: #d0d5dd; /* The color of the text in the application. */ --theme-text-color-secondary: #667085; --theme-link-color: #9e77ed; --theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --theme-background: #1b1a26; /* The main background color of the page. */ - --theme-background-secondary: #16151f; /* A secondary background color used in sections and controls. */ + --theme-background: #202232; /* The main background color of the page. */ + --theme-background-secondary: #282a30; /* A secondary background color used in sections and controls. */ --theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */ --theme-success-color: #12b76a; --theme-info-color: #d6bbfb; @@ -60,8 +61,8 @@ --color-owncast-logo-purple: #7871ff; --color-owncast-logo-pink: #c98bfe; --color-owncast-logo-blue: #2086e1; - --color-owncast-background: #1b1a26; - --color-owncast-background-secondary: #16151f; + --color-owncast-background: #202232; + --color-owncast-background-secondary: #282a30; --font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -76,6 +77,6 @@ --white-88: #667085; --purple-dark: #42307d; --default-link-color: #6941c6; - --default-bg-color: #1b1a26; + --default-bg-color: #202232; --default-text-color: #f2f4f7; }