mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 12:18:02 +03:00
Add support for less variables and using a custom theme
This commit is contained in:
Gabe Kangas
parent
1c77219a75
commit
3ce6fd4cb3
13 changed files with 135 additions and 135 deletions
|
|
@ -19,6 +19,7 @@ module.exports = {
|
||||||
sourceType: 'module',
|
sourceType: 'module',
|
||||||
},
|
},
|
||||||
plugins: ['react', 'prettier', '@typescript-eslint'],
|
plugins: ['react', 'prettier', '@typescript-eslint'],
|
||||||
|
ignorePatterns: ['!./storybook/**'],
|
||||||
rules: {
|
rules: {
|
||||||
'prettier/prettier': 'error',
|
'prettier/prettier': 'error',
|
||||||
'react/react-in-jsx-scope': 'off',
|
'react/react-in-jsx-scope': 'off',
|
||||||
|
|
|
||||||
1
web/.gitignore
vendored
1
web/.gitignore
vendored
|
|
@ -5,3 +5,4 @@ node_modules
|
||||||
out
|
out
|
||||||
|
|
||||||
lefthook.yml
|
lefthook.yml
|
||||||
|
storybook-static
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
core: {
|
||||||
|
builder: 'webpack5',
|
||||||
|
},
|
||||||
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
|
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||||
addons: [
|
addons: [
|
||||||
'@storybook/addon-links',
|
'@storybook/addon-links',
|
||||||
|
|
@ -7,5 +10,21 @@ module.exports = {
|
||||||
'@storybook/preset-scss',
|
'@storybook/preset-scss',
|
||||||
'@storybook/addon-postcss',
|
'@storybook/addon-postcss',
|
||||||
],
|
],
|
||||||
|
webpackFinal: async (config, { configType }) => {
|
||||||
|
config.module.rules.push({
|
||||||
|
test: /\.less$/,
|
||||||
|
use: [
|
||||||
|
require.resolve('style-loader'),
|
||||||
|
require.resolve('css-loader'),
|
||||||
|
{
|
||||||
|
loader: require.resolve('less-loader'),
|
||||||
|
options: {
|
||||||
|
lessOptions: { javascriptEnabled: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
return config;
|
||||||
|
},
|
||||||
framework: '@storybook/react',
|
framework: '@storybook/react',
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import 'antd/dist/antd.css';
|
import '../styles/global.less';
|
||||||
import '../styles/globals.scss';
|
|
||||||
|
|
||||||
export const parameters = {
|
export const parameters = {
|
||||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
module.exports = {
|
const withLess = require('next-with-less');
|
||||||
basePath: "/admin",
|
|
||||||
|
module.exports = withLess({
|
||||||
|
basePath: '/admin',
|
||||||
trailingSlash: true,
|
trailingSlash: true,
|
||||||
};
|
});
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"markdown-it": "12.3.2",
|
"markdown-it": "12.3.2",
|
||||||
"next": "^12.1.5",
|
"next": "^12.1.5",
|
||||||
|
"next-with-less": "^2.0.5",
|
||||||
"postcss-flexbugs-fixes": "^5.0.2",
|
"postcss-flexbugs-fixes": "^5.0.2",
|
||||||
"prop-types": "15.8.1",
|
"prop-types": "15.8.1",
|
||||||
"rc-overflow": "1.2.4",
|
"rc-overflow": "1.2.4",
|
||||||
|
|
@ -41,6 +42,8 @@
|
||||||
"@storybook/addon-interactions": "^6.4.22",
|
"@storybook/addon-interactions": "^6.4.22",
|
||||||
"@storybook/addon-links": "^6.4.22",
|
"@storybook/addon-links": "^6.4.22",
|
||||||
"@storybook/addon-postcss": "^2.0.0",
|
"@storybook/addon-postcss": "^2.0.0",
|
||||||
|
"@storybook/builder-webpack5": "^6.4.22",
|
||||||
|
"@storybook/manager-webpack5": "^6.4.22",
|
||||||
"@storybook/preset-scss": "^1.0.3",
|
"@storybook/preset-scss": "^1.0.3",
|
||||||
"@storybook/testing-library": "^0.0.9",
|
"@storybook/testing-library": "^0.0.9",
|
||||||
"@types/chart.js": "2.9.35",
|
"@types/chart.js": "2.9.35",
|
||||||
|
|
@ -54,7 +57,7 @@
|
||||||
"@typescript-eslint/eslint-plugin": "5.10.2",
|
"@typescript-eslint/eslint-plugin": "5.10.2",
|
||||||
"@typescript-eslint/parser": "5.10.2",
|
"@typescript-eslint/parser": "5.10.2",
|
||||||
"babel-loader": "^8.2.4",
|
"babel-loader": "^8.2.4",
|
||||||
"css-loader": "^5.2.6",
|
"css-loader": "^5.2.7",
|
||||||
"eslint": "8.8.0",
|
"eslint": "8.8.0",
|
||||||
"eslint-config-airbnb": "19.0.4",
|
"eslint-config-airbnb": "19.0.4",
|
||||||
"eslint-config-next": "12.0.10",
|
"eslint-config-next": "12.0.10",
|
||||||
|
|
@ -66,11 +69,14 @@
|
||||||
"eslint-plugin-react-hooks": "4.3.0",
|
"eslint-plugin-react-hooks": "4.3.0",
|
||||||
"eslint-plugin-storybook": "^0.5.10",
|
"eslint-plugin-storybook": "^0.5.10",
|
||||||
"html-webpack-plugin": "^5.5.0",
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"less": "^4.1.2",
|
||||||
|
"less-loader": "^10.2.0",
|
||||||
"prettier": "2.5.1",
|
"prettier": "2.5.1",
|
||||||
"sass": "^1.50.0",
|
"sass": "^1.50.0",
|
||||||
"sass-loader": "^10.1.1",
|
"sass-loader": "^10.1.1",
|
||||||
"sb": "^6.4.22",
|
"sb": "^6.4.22",
|
||||||
|
"storybook-preset-less": "^1.1.2",
|
||||||
"style-loader": "^2.0.0",
|
"style-loader": "^2.0.0",
|
||||||
"typescript": "4.5.5"
|
"typescript": "4.5.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
// order matters!
|
// order matters!
|
||||||
import 'antd/dist/antd.css';
|
import '../styles/global.less';
|
||||||
|
// import '../styles/globals.scss';
|
||||||
import '../styles/variables.scss';
|
import '../styles/variables.scss';
|
||||||
import '../styles/ant-overrides.scss';
|
// import '../styles/ant-overrides.scss';
|
||||||
import '../styles/markdown-editor.scss';
|
import '../styles/markdown-editor.scss';
|
||||||
import '../styles/globals.scss';
|
|
||||||
|
|
||||||
import '../styles/main-layout.scss';
|
import '../styles/main-layout.scss';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -114,74 +114,19 @@ import StackAlt from './assets/stackalt.svg';
|
||||||
|
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
||||||
# Welcome to Storybook
|
# Owncast Component Library
|
||||||
|
|
||||||
Storybook helps you build UI components in isolation from your app's business logic, data, and context.
|
This is a place to build and experiment with styling individual components.
|
||||||
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
|
|
||||||
|
|
||||||
Browse example stories now by navigating to them in the sidebar.
|
This approach helps build UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
|
||||||
View their code in the `src/stories` directory to learn how they work.
|
|
||||||
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
|
|
||||||
|
|
||||||
<div className="subheading">Configure</div>
|
## How to Edit
|
||||||
|
|
||||||
<div className="link-list">
|
In the web project edit the `styles/theme.less` file to change or add variables used in the components. When customizing Ant Design components refer to the list of variables at https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less that you can override.
|
||||||
<a
|
|
||||||
className="link-item"
|
|
||||||
href="https://storybook.js.org/docs/react/addons/addon-types"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<img src={Plugin} alt="plugin" />
|
|
||||||
<span>
|
|
||||||
<strong>Presets for popular tools</strong>
|
|
||||||
Easy setup for TypeScript, SCSS and more.
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="link-item"
|
|
||||||
href="https://storybook.js.org/docs/react/configure/webpack"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<img src={StackAlt} alt="Build" />
|
|
||||||
<span>
|
|
||||||
<strong>Build configuration</strong>
|
|
||||||
How to customize webpack and Babel
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="link-item"
|
|
||||||
href="https://storybook.js.org/docs/react/configure/styling-and-css"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<img src={Colors} alt="colors" />
|
|
||||||
<span>
|
|
||||||
<strong>Styling</strong>
|
|
||||||
How to load and configure CSS libraries
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="link-item"
|
|
||||||
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<img src={Flow} alt="flow" />
|
|
||||||
<span>
|
|
||||||
<strong>Data</strong>
|
|
||||||
Providers and mocking for data libraries
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="subheading">Learn</div>
|
<div className="subheading">Learn</div>
|
||||||
|
|
||||||
<div className="link-list">
|
<div className="link-list">
|
||||||
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
|
|
||||||
<img src={Repo} alt="repo" />
|
|
||||||
<span>
|
|
||||||
<strong>Storybook documentation</strong>
|
|
||||||
Configure, customize, and extend
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
|
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
|
||||||
<img src={Direction} alt="direction" />
|
<img src={Direction} alt="direction" />
|
||||||
<span>
|
<span>
|
||||||
|
|
@ -189,23 +134,4 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
|
||||||
Best practices from leading teams
|
Best practices from leading teams
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
|
|
||||||
<img src={Code} alt="code" />
|
|
||||||
<span>
|
|
||||||
<strong>GitHub project</strong>
|
|
||||||
View the source and add issues
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
|
|
||||||
<img src={Comments} alt="comments" />
|
|
||||||
<span>
|
|
||||||
<strong>Discord chat</strong>
|
|
||||||
Chat with maintainers and the community
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="tip-wrapper">
|
|
||||||
<span className="tip">Tip</span>Edit the Markdown in{' '}
|
|
||||||
<code>src/stories/Introduction.stories.mdx</code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
5
web/styles/global.less
Normal file
5
web/styles/global.less
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
// @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
|
||||||
|
|
||||||
|
|
@ -4,17 +4,17 @@
|
||||||
.online-details-card {
|
.online-details-card {
|
||||||
border-color: var(--online-color);
|
border-color: var(--online-color);
|
||||||
}
|
}
|
||||||
.ant-statistic {
|
// .ant-statistic {
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
}
|
// }
|
||||||
.ant-statistic-title {
|
// .ant-statistic-title {
|
||||||
color: var(--white-50);
|
// color: var(--white-50);
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-card-head {
|
// .ant-card-head {
|
||||||
color: var(--online-color);
|
// color: var(--online-color);
|
||||||
}
|
// }
|
||||||
|
|
||||||
.stream-details-item-container {
|
.stream-details-item-container {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
|
|
@ -22,17 +22,17 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ant-statistic.stream-details-item {
|
// .ant-statistic.stream-details-item {
|
||||||
background-color: var(--black-50);
|
// background-color: var(--black-50);
|
||||||
padding: 1em;
|
// padding: 1em;
|
||||||
.ant-statistic-title {
|
// .ant-statistic-title {
|
||||||
color: var(--blue);
|
// color: var(--blue);
|
||||||
}
|
// }
|
||||||
.ant-statistic-content {
|
// .ant-statistic-content {
|
||||||
font-size: 1.25em;
|
// font-size: 1.25em;
|
||||||
white-space: nowrap;
|
// white-space: nowrap;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.stream-details {
|
.stream-details {
|
||||||
> .ant-card-bordered {
|
> .ant-card-bordered {
|
||||||
|
|
@ -46,16 +46,16 @@
|
||||||
|
|
||||||
.offline-content {
|
.offline-content {
|
||||||
.logo-section {
|
.logo-section {
|
||||||
.ant-result-title {
|
// .ant-result-title {
|
||||||
font-size: 2rem;
|
// font-size: 2rem;
|
||||||
}
|
// }
|
||||||
.ant-result-subtitle {
|
// .ant-result-subtitle {
|
||||||
font-size: 1rem;
|
// font-size: 1rem;
|
||||||
}
|
// }
|
||||||
.ant-result-icon svg {
|
// .ant-result-icon svg {
|
||||||
height: 8rem;
|
// height: 8rem;
|
||||||
width: 8rem;
|
// width: 8rem;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
.list-section {
|
.list-section {
|
||||||
background-color: var(--container-bg-color-alt);
|
background-color: var(--container-bg-color-alt);
|
||||||
|
|
@ -65,13 +65,13 @@
|
||||||
> .ant-card {
|
> .ant-card {
|
||||||
background-color: var(--black);
|
background-color: var(--black);
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
.ant-card-meta-avatar {
|
// .ant-card-meta-avatar {
|
||||||
margin-top: 0.25rem;
|
// margin-top: 0.25rem;
|
||||||
svg {
|
// svg {
|
||||||
height: 1.5em;
|
// height: 1.5em;
|
||||||
width: 1.5em;
|
// width: 1.5em;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -112,15 +112,15 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
.ant-input-affix-wrapper {
|
// .ant-input-affix-wrapper {
|
||||||
border-color: var(--owncast-purple-50);
|
// border-color: var(--owncast-purple-50);
|
||||||
}
|
// }
|
||||||
input.ant-input {
|
// input.ant-input {
|
||||||
&::placeholder {
|
// &::placeholder {
|
||||||
color: var(--owncast-purple);
|
// color: var(--owncast-purple);
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.input-side {
|
.input-side {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
|
|
||||||
40
web/styles/theme.less
Normal file
40
web/styles/theme.less
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
@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.
|
||||||
|
|
||||||
|
// 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
|
||||||
|
@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%);
|
||||||
|
|
||||||
|
|
||||||
|
@primary-color: #d62222; // split border inside a component
|
||||||
|
@text-color: green;
|
||||||
|
@text-color-secondary: orange;
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
// See theme.less for specific Ant Design overrides.
|
||||||
:root {
|
:root {
|
||||||
// colors
|
// colors
|
||||||
--white: rgba(255, 255, 255, 1);
|
--white: rgba(255, 255, 255, 1);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue