From e49948a2155673304b8e77d0c6eaf4c4d562715d Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Mon, 18 Apr 2022 15:32:19 -0700 Subject: [PATCH] Add colors to storybook --- web/.storybook/preview.js | 1 + web/stories/Color.tsx | 64 ++++++++++++++++++++++++++++++++++ web/stories/Colors.stories.mdx | 24 +++++++------ web/styles/global.less | 2 ++ web/styles/theme.less | 53 ++++++++++++++-------------- web/styles/variables.scss | 41 ++++++++++++++++++---- 6 files changed, 140 insertions(+), 45 deletions(-) create mode 100644 web/stories/Color.tsx 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);