diff --git a/web/.storybook/preview.js b/web/.storybook/preview.js
index 34fe7dfb6..1fadc6de2 100644
--- a/web/.storybook/preview.js
+++ b/web/.storybook/preview.js
@@ -1,3 +1,4 @@
+import '../styles/variables.scss';
import '../styles/global.less';
export const parameters = {
diff --git a/web/stories/Color.tsx b/web/stories/Color.tsx
new file mode 100644
index 000000000..6a04dba36
--- /dev/null
+++ b/web/stories/Color.tsx
@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+
+export function Color(props) {
+ const { color } = props;
+ const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(`--${color}`);
+
+ const containerStyle = {
+ borderRadius: '20px',
+ width: '12vw',
+ height: '12vw',
+ minWidth: '100px',
+ minHeight: '100px',
+ borderWidth: '1.5px',
+ borderStyle: 'solid',
+ borderColor: 'lightgray',
+ overflow: 'hidden',
+ };
+
+ const colorBlockStyle = {
+ height: '70%',
+ width: '100%',
+ backgroundColor: resolvedColor,
+ };
+
+ const colorDescriptionStyle = {
+ margin: '5px',
+ textAlign: 'center',
+ };
+
+ return (
+
+
+ {color}
+
+ );
+}
+
+Color.propTypes = {
+ color: PropTypes.string.isRequired,
+};
+
+const rowStyle = {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ // justifyContent: 'space-around',
+ alignItems: 'center',
+};
+
+export function ColorRow(props) {
+ const { colors } = props;
+
+ return (
+
+ {colors.map(color => (
+
+ ))}
+
+ );
+}
+
+ColorRow.propTypes = {
+ colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
diff --git a/web/stories/Colors.stories.mdx b/web/stories/Colors.stories.mdx
index bbcf83be4..e1990c929 100644
--- a/web/stories/Colors.stories.mdx
+++ b/web/stories/Colors.stories.mdx
@@ -1,21 +1,23 @@
import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import {Color, ColorRow} from './Color';
# Colors
-Put color pallete here.
\ No newline at end of file
+## Gray
+
+
+## Owncast Purple
+
+
+## Green (success)
+
+
+## Orange (warning)
+
\ No newline at end of file
diff --git a/web/styles/global.less b/web/styles/global.less
index b871f6ed3..50370b927 100644
--- a/web/styles/global.less
+++ b/web/styles/global.less
@@ -3,3 +3,5 @@
@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
@import './theme.less'; // Import owncast theme styles
+
+
diff --git a/web/styles/theme.less b/web/styles/theme.less
index 8327b821f..3490079ca 100644
--- a/web/styles/theme.less
+++ b/web/styles/theme.less
@@ -3,38 +3,37 @@
// 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.
+// 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
-@green-1: #D15AD5;
-@green-2: #6CE9A6;
-@green-3: #12B76A;
-@green-4: #027A48;
-@green-5: #054F31;
-// Defaults
-@green-6: mix(@green-base, @component-background, 85%);
-@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
-@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
-@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
-@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);
+// 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);
-// From color palette
-@purple-1: #F4EBFF;
-@purple-2: #D6BBFB;
-@purple-3: #9E77ED;
-@purple-4: #6941C6;
-@purple-5: #42307D;
-// Defaults
-@purple-6: mix(@purple-base, @component-background, 85%);
-@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
-@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
-@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
-@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);
+@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);
-
-@primary-color: #d62222; // split border inside a component
+// 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
\ No newline at end of file
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
index 037bef8c3..4e8e68c20 100644
--- a/web/styles/variables.scss
+++ b/web/styles/variables.scss
@@ -1,6 +1,6 @@
// See theme.less for specific Ant Design overrides.
:root {
- // colors
+ // old colors
--white: rgba(255, 255, 255, 1);
--white-15: rgba(255, 255, 255, 0.15);
--white-25: rgba(255, 255, 255, 0.25);
@@ -14,9 +14,40 @@
--black-50: rgba(0, 0, 0, 0.5);
--black-75: rgba(0, 0, 0, 0.75);
+ // New colors
+ --purple-100: #F4EBFF;
+ --purple-300: #D6BBFB;
+ --purple-500: #9E77ED;
+ --purple-700: #6941C6;
+ --purple-900: #42307D;
+
+ --green-100: #D15AD5;
+ --green-300: #6CE9A6;
+ --green-500: #12B76A;
+ --green-700: #027A48;
+ --green-900: #054F31;
+
+ --red-100: #FEE4E2;
+ --red-300: #FDA29B;
+ --red-500: #F04438;
+ --red-700: #B42318;
+ --red-900: #7A271A;
+
+ --orange-100: #FEF0C7;
+ --orange-300: #FEC84B;
+ --orange-500: #F79009;
+ --orange-700: #B54708;
+ --orange-900: #93370D;
+
+ --gray-100: #F2F4F7;
+ --gray-300: #D0D5DD;
+ --gray-500: #667085;
+ --gray-700: #344054;
+ --gray-900: #101828;
+
// owncast logo color family
- --owncast-purple: rgba(120, 113, 255, 1); // #7871FF;
- --purple-dark: rgba(28, 26, 59, 1); // #1c1a3b;//
+ --owncast-purple: rgba(120, 113, 255, 1);
+ --purple-dark: rgba(28, 26, 59, 1); // #1c1a3b;
--pink: rgba(201, 139, 254, 1); // #D18BFE;
--blue: rgba(32, 134, 225, 1); // #2086E1;
@@ -32,10 +63,6 @@
--online-color: #73dd3f;
--offline-color: #999;
- --ant-error: #ff4d4f;
- --ant-success: #52c41a;
- --ant-warning: #faad14;
- --ant-transition-duration: 0.15s;
// ////////////////////////////////
--default-text-color: var(--white-88);