Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: handle inverse themes in config provider #67

Merged
merged 8 commits into from
Apr 19, 2022
Merged

feat: handle inverse themes in config provider #67

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fd15cd4
chore: optimize build size
ychhabra-eightfold Apr 18, 2022
4e921c6
chore: set globals for styles
ychhabra-eightfold Apr 18, 2022
a4d4213
chore: deps cleanup
ychhabra-eightfold Apr 18, 2022
8c45750
chore: update deps
ychhabra-eightfold Apr 18, 2022
d5ec3d4
chore: use mode to use style-loader
ychhabra-eightfold Apr 18, 2022
b13c5de
chore: use configType for webpack mode in storybook
ychhabra-eightfold Apr 18, 2022
a032cf4
feat: handle inverse themes in config provider
ychhabra-eightfold Apr 18, 2022
b188dad
Merge branch 'EightfoldAI:main' into inverseTheme
ychhabra-eightfold Apr 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 11 additions & 50 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const path = require('path');
const webpackCommon = require('../webpack.common');

module.exports = {
stories: [
Expand Down Expand Up @@ -28,57 +28,18 @@ module.exports = {
},
},
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

const fileLoaderRule = config.module.rules.find(
(rule) => rule.test && rule.test.test('.svg')
const webpackCommonConfig = webpackCommon(
{},
{ mode: configType.toLowerCase() }
);
fileLoaderRule.exclude = /\.svg$/;

config.module.rules.push(
{
test: /\.s[ca]ss|css$/,
use: [
'style-loader',
'@teamsupercell/typings-for-css-modules-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]_[hash:base64:6]',
exportLocalsConvention: 'camelCase',
},
},
},
'resolve-url-loader',
'sass-loader',
{
loader: 'style-resources-loader',
options: {
patterns: [
path.resolve(
__dirname,
'../src/styles/main.scss'
),
],
},
},
],
include: path.resolve(__dirname, '../'),
return {
...config,
optimization: webpackCommonConfig.optimization,
plugins: [...config.plugins, ...webpackCommonConfig.plugins],
module: {
...config.module,
rules: webpackCommonConfig.module.rules,
},
{
test: /\.svg$/,
use: ['@svgr/webpack', 'file-loader', 'url-loader'],
include: path.resolve(__dirname, '../'),
}
);

config.resolve.fallback = {
http: false,
};

return config;
},
};
5 changes: 2 additions & 3 deletions .storybook/manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
import octupleTheme from './octupleTheme';

addons.setConfig({
theme: octupleTheme
});
theme: octupleTheme,
});
224 changes: 1 addition & 223 deletions .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,229 +1,7 @@
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

<style>
html, body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
}
h2 {
margin-block-start: 0;
}

.display1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 6rem;
line-height: 7rem;
letter-spacing: -0.03rem;
}

.display2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 5rem;
line-height: 6rem;
letter-spacing: -0.03rem;
}

.display3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 4rem;
line-height: 4.5rem;
letter-spacing: -0.02rem;
}

.display4 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 3.5rem;
line-height: 4rem;
letter-spacing: -0.02rem;
}

.header1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 2.5rem;
line-height: 3rem;
letter-spacing: -0.02rem;
}

.header2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.01rem;
}

.header3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.5rem;
line-height: 2rem;
}

.header4 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.5rem;
}

.header5 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1.25rem;
}

.header6 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.25rem;
}

.subtitle1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.015rem;
}

.subtitle2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: -0.01rem;
}

.pre-display {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.75rem;
text-transform: uppercase;
}

.button1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.5rem;
}
.button1.open-sans {
font-family: 'Open Sans', sans-serif;
}

.button2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1.25rem;
}
.button2.open-sans {
font-family: 'Open Sans', sans-serif;
}

.button3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 0.875rem;
line-height: 1rem;
}
.button3.open-sans {
font-family: 'Open Sans', sans-serif;
}

.body1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 1.125rem;
line-height: 1.5rem;
}
.body1.semibold {
font-weight: 600;
}
.body1.open-sans {
font-family: 'Open Sans', sans-serif;
}

.body2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
}
.body2.semibold {
font-weight: 600;
}
.body2.open-sans {
font-family: 'Open Sans', sans-serif;
}

.body3 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.25rem;
}
.body3.semibold {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 600;
}
.body3.open-sans {
font-family: 'Open Sans', sans-serif;
}

.caption {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 0.75rem;
line-height: 1rem;
}

.icon-material-l {
font-family: 'Material Design Icons';
font-size: 1.5rem;
}

.icon-material-m {
font-family: 'Material Design Icons';
font-size: 1.25rem;
}

.icon-material-s {
font-family: 'Material Design Icons';
font-size: 1rem;
}

.icon-material-xs {
font-family: 'Material Design Icons';
font-size: 0.875rem;
}

.octuple-menu .logo-text {
font-size: 2.5rem;
line-height: 3rem;
font-weight: 700;
font-family: 'Source Sans Pro', sans-serif;
}

input[type=text], input[type=search] {
padding: 0.5rem;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1rem;
}

.field-label .text-style {
font-weight: 600;
font-size: 1rem;
line-height: 1.25rem;
font-family: 'Source Sans Pro', sans-serif;
}
</style>
</style>
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"build-storybook": "rm -rf dist && mkdir dist && build-storybook -o dist",
"build": "rm -rf lib && npm run lint && webpack --config webpack.prod.js --mode production",
"details": "webpack --config webpack.dev.js --mode development --stats-error-details",
"analyze": "webpack --config webpack.dev.js --mode development --json > stats.json",
"analyze": "webpack --config webpack.dev.js --mode production --json > stats.json",
"prepublish": "yarn build",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
Expand Down Expand Up @@ -100,7 +100,7 @@
"clean-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "6.0.1",
"css-loader": "6.5.1",
"css-minimizer-webpack-plugin": "3.2.0",
"css-minimizer-webpack-plugin": "3.4.1",
"cssnano": "4.1.10",
"dotenv": "10.0.0",
"dotenv-expand": "5.1.0",
Expand All @@ -126,7 +126,7 @@
"jest-resolve": "27.4.2",
"jest-watch-typeahead": "1.0.0",
"lint-staged": "12.3.6",
"mini-css-extract-plugin": "2.4.5",
"mini-css-extract-plugin": "2.6.0",
"postcss": "8.4.4",
"postcss-flexbugs-fixes": "5.0.2",
"postcss-loader": "6.2.1",
Expand Down
Loading