From f7a03705a81c987e4ab28761d7bac65bc13a9dc5 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Fri, 6 May 2022 23:32:33 -0700 Subject: [PATCH] Use the generated style variables --- web/pages/_app.tsx | 2 +- web/styles/global.less | 7 +-- web/styles/globals.scss | 10 +++- web/styles/theme.less | 108 ++++++++++++++++++++++++-------------- web/styles/variables.css | 79 ++++++++++++++++++++++++++++ web/styles/variables.scss | 6 +-- 6 files changed, 161 insertions(+), 51 deletions(-) create mode 100644 web/styles/variables.css diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index 147e97b5e..ec3e27a15 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -1,5 +1,5 @@ // order matters! -import '../styles/variables.scss'; +import '../styles/variables.css'; import '../styles/global.less'; import '../styles/globals.scss'; // import '../styles/ant-overrides.scss'; diff --git a/web/styles/global.less b/web/styles/global.less index 50370b927..7282e591c 100644 --- a/web/styles/global.less +++ b/web/styles/global.less @@ -1,7 +1,2 @@ -// @import '~antd/dist/antd.less'; // Import Ant Design styles by less entry -// @import '~antd/dist/antd.less'; @import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file -@import './theme.less'; // Import owncast theme styles - - - +@import './theme.less'; // Import ant design theme definition diff --git a/web/styles/globals.scss b/web/styles/globals.scss index 72f10f8fb..b979a68c7 100644 --- a/web/styles/globals.scss +++ b/web/styles/globals.scss @@ -1,10 +1,18 @@ // @import "~antd/dist/antd.dark"; +:root { + // chat variables + --header-h: 64px; + --chat-w: 300px; + --chat-input-h: 40.5px; + } + + html, body { padding: 0; margin: 0; - font-family: var(--font-family); + font-family: var(--theme-font-family); font-size: 16px; background-color: var(--default-bg-color); diff --git a/web/styles/theme.less b/web/styles/theme.less index 7be06d259..838838e51 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -1,40 +1,72 @@ -@theme: owncast; -// These overrides are only used for customizing the style of Ant Design -// components and do not impact any custom components. Therefore CSS variables -// should be set in a centralized place and used here so changes only need -// to be made once. See variables.scss. - -// Variable names can be found in -// https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less - -// From color palette in variables.scss. -@green-1: --var(green-100); -@green-2: --var(green-300); -@green-3: --var(green-500); -@green-4: --var(green-700); -@green-5: --var(green-900); - -@purple-1: --var(purple-100); -@purple-2: --var(purple-300); -@purple-3: --var(purple-500); -@purple-4: --var(purple-700); -@purple-5: --var(purple-900); - -// Random colors for testing -@primary-color: #d62222; -@text-color: green; -@text-color-secondary: orange; -@link-color: #1890ff; // link color -@success-color: #52c41a; // success state color -@warning-color: #faad14; // warning state color -@error-color: #f5222d; // error state color -@font-size-base: 14px; // major text font size -@heading-color: rgba(177, 168, 44, 0.85); // heading text color -@text-color-secondary: rgba(224, 8, 231, 0.45); // secondary text color -@disabled-color: rgba(134, 123, 123, 0.25); // disable state color -@border-radius-base: 2px; // major border radius -@border-color-base: #d9d9d9; // major border color -@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), - 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers +// Do not edit directly +// Generated on Sat, 07 May 2022 06:21:28 GMT +@text-color: var(--theme-text-color); +@text-color-secondry: var(--theme-text-color-secondary); +@link-color: var(--theme-link-color); +@popover-background: var(--theme-background); +@background-color-light: #f4ebff; +@primary-color: #9e77ed; +@info-color: #667085; +@success-color: #12b76a; +@warning-color: #f79009; +@error-color: #f04438; +@purple-base: #9e77ed; +@green-base: #12b76a; +@red-base: #f04438; +@orange-base: #f79009; +@theme-primary-color: #9e77ed; +@theme-text-color: #d0d5dd; +@theme-text-color-secondary: #667085; +@theme-link-color: #9e77ed; +@theme-success-color: #12b76a; +@theme-info-color: #d6bbfb; +@theme-warning-color: #f79009; +@theme-error-color: #f04438; +@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: #171523; +@color-owncast-purple-100: #f4ebff; +@color-owncast-purple-300: #d6bbfb; +@color-owncast-purple-500: #9e77ed; +@color-owncast-purple-700: #6941c6; +@color-owncast-purple-900: #42307d; +@color-owncast-green-100: #d15ad5; +@color-owncast-green-300: #6ce9a6; +@color-owncast-green-500: #12b76a; +@color-owncast-green-700: #027a48; +@color-owncast-green-900: #054f31; +@color-owncast-red-100: #fee4e2; +@color-owncast-red-300: #fda29b; +@color-owncast-red-500: #f04438; +@color-owncast-red-700: #b42318; +@color-owncast-red-900: #7a271a; +@color-owncast-orange-100: #fef0c7; +@color-owncast-orange-300: #fec84b; +@color-owncast-orange-500: #f79009; +@color-owncast-orange-700: #b54708; +@color-owncast-orange-900: #93370d; +@color-owncast-gray-100: #f2f4f7; +@color-owncast-gray-300: #d0d5dd; +@color-owncast-gray-500: #667085; +@color-owncast-gray-700: #344054; +@color-owncast-gray-900: #101828; +@color-owncast-logo-purple: #7871ff; +@color-owncast-logo-pink: #c98bfe; +@color-owncast-logo-blue: #2086e1; +@color-owncast-background-light: #1b1a26; +@color-owncast-background: #171523; +@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); +@owncast-purple-50: rgba(120, 113, 255, 0.5); +@online-color: #73dd3f; +@offline-color: #999; +@pink: #c98bfe; +@purple: #7871ff; +@blue: #2086e1; +@white-88: #667085; +@purple-dark: rgba(28, 26, 59, 1); +@default-link-color: #c98bfe; +@default-bg-color: black; +@default-text-color: rgba(255, 255, 255, 0.88); \ No newline at end of file diff --git a/web/styles/variables.css b/web/styles/variables.css new file mode 100644 index 000000000..c62259774 --- /dev/null +++ b/web/styles/variables.css @@ -0,0 +1,79 @@ +/** + * Do not edit directly + * Generated on Sat, 07 May 2022 06:21:28 GMT + */ + +:root { + --text-color: var(--theme-text-color); + --text-color-secondry: var(--theme-text-color-secondary); + --link-color: var(--theme-link-color); + --popover-background: var(--theme-background); + --background-color-light: #f4ebff; + --primary-color: #9e77ed; + --info-color: #667085; + --success-color: #12b76a; + --warning-color: #f79009; + --error-color: #f04438; + --purple-base: #9e77ed; + --green-base: #12b76a; + --red-base: #f04438; + --orange-base: #f79009; + --theme-primary-color: #9e77ed; + --theme-text-color: #d0d5dd; + --theme-text-color-secondary: #667085; + --theme-link-color: #9e77ed; + --theme-success-color: #12b76a; + --theme-info-color: #d6bbfb; + --theme-warning-color: #f79009; + --theme-error-color: #f04438; + --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: #171523; + --color-owncast-purple-100: #f4ebff; + --color-owncast-purple-300: #d6bbfb; + --color-owncast-purple-500: #9e77ed; + --color-owncast-purple-700: #6941c6; + --color-owncast-purple-900: #42307d; + --color-owncast-green-100: #d15ad5; + --color-owncast-green-300: #6ce9a6; + --color-owncast-green-500: #12b76a; + --color-owncast-green-700: #027a48; + --color-owncast-green-900: #054f31; + --color-owncast-red-100: #fee4e2; + --color-owncast-red-300: #fda29b; + --color-owncast-red-500: #f04438; + --color-owncast-red-700: #b42318; + --color-owncast-red-900: #7a271a; + --color-owncast-orange-100: #fef0c7; + --color-owncast-orange-300: #fec84b; + --color-owncast-orange-500: #f79009; + --color-owncast-orange-700: #b54708; + --color-owncast-orange-900: #93370d; + --color-owncast-gray-100: #f2f4f7; + --color-owncast-gray-300: #d0d5dd; + --color-owncast-gray-500: #667085; + --color-owncast-gray-700: #344054; + --color-owncast-gray-900: #101828; + --color-owncast-logo-purple: #7871ff; + --color-owncast-logo-pink: #c98bfe; + --color-owncast-logo-blue: #2086e1; + --color-owncast-background-light: #1b1a26; + --color-owncast-background: #171523; + --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); + --owncast-purple-50: rgba(120, 113, 255, 0.5); + --online-color: #73dd3f; + --offline-color: #999; + --pink: #c98bfe; + --purple: #7871ff; + --blue: #2086e1; + --white-88: #667085; + --purple-dark: rgba(28, 26, 59, 1); + --default-link-color: #c98bfe; + --default-bg-color: black; + --default-text-color: rgba(255, 255, 255, 0.88); +} diff --git a/web/styles/variables.scss b/web/styles/variables.scss index 31d7da1f3..d4b2d5c27 100644 --- a/web/styles/variables.scss +++ b/web/styles/variables.scss @@ -94,8 +94,4 @@ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - // chat variables - --header-h: 64px; - --chat-w: 300px; - --chat-input-h: 40.5px; -} +