Add colors to storybook

web/.storybook/preview.js

@@ -1,3 +1,4 @@
+import '../styles/variables.scss';
 import '../styles/global.less';
 
 export const parameters = {

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 (
+    <figure style={containerStyle}>
+      <div style={colorBlockStyle} />
+      <figcaption style={colorDescriptionStyle}>{color}</figcaption>
+    </figure>
+  );
+}
+
+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 (
+    <div style={rowStyle}>
+      {colors.map(color => (
+        <Color key={color} color={color} />
+      ))}
+    </div>
+  );
+}
+
+ColorRow.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+};

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';
 
 <Meta title="owncast/Colors" />
 
 <style>{`
-  
-
+ 
   
 `}</style>
 
 # Colors
 
-Put color pallete here.
+## Gray
+<ColorRow colors={['gray-100', 'gray-300', 'gray-500', 'gray-700', 'gray-900']} />
+
+## Owncast Purple
+<ColorRow colors={['purple-100', 'purple-300', 'purple-500', 'purple-700', 'purple-900']} />
+
+## Green (success)
+<ColorRow colors={['green-100', 'green-300', 'green-500', 'green-700', 'green-900']} />
+
+## Orange (warning)
+<ColorRow colors={['orange-100', 'orange-300', 'orange-500', 'orange-700', 'orange-900']} />

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
 
+
+

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

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);