Skip to content

Commit

Permalink
feat: support dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
fengtianze committed Mar 9, 2021
1 parent ce1ec32 commit 6e75972
Show file tree
Hide file tree
Showing 19 changed files with 1,904 additions and 2,119 deletions.
46 changes: 46 additions & 0 deletions .storybook/IgnoreNotFoundExportPlugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* https://github.com/TypeStrong/ts-loader/issues/653
*/
const escapeStringForRegExp = string =>
string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');

module.exports = class IgnoreNotFoundExportPlugin {
constructor(exportsToIgnore) {
this.exportsToIgnore = exportsToIgnore || [];
}

getMessageRegExp() {
if (this.exportsToIgnore.length > 0) {
const exportsPattern =
'(' + this.exportsToIgnore.map(escapeStringForRegExp).join('|') + ')';

return new RegExp(
`export '${exportsPattern}'( \\(reexported as '.*'\\))? was not found in`,
);
} else {
return /export '.*'( \(reexported as '.*'\))? was not found in/;
}
}

apply(compiler) {
const messageRegExp = this.getMessageRegExp();

const doneHook = stats => {
stats.compilation.warnings = stats.compilation.warnings.filter(warn => {
if (
warn.constructor.name === 'ModuleDependencyWarning' &&
messageRegExp.test(warn.message)
) {
return false;
}
return true;
});
};

if (compiler.hooks) {
compiler.hooks.done.tap('IgnoreNotFoundExportPlugin', doneHook);
} else {
compiler.plugin('done', doneHook);
}
}
};
3 changes: 2 additions & 1 deletion .storybook/global.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '../src/theme/style.scss';
@import '../src/theme/style';
@import '../src/theme/colors';

storybook-dynamic-app-root {
&:first-child,
Expand Down
18 changes: 13 additions & 5 deletions .storybook/main.ts → .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import { Configuration } from 'webpack';
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const IgnoreNotFoundExportPlugin = require('./IgnoreNotFoundExportPlugin.js');

function webpackFinal(config: Configuration) {
config.resolve.plugins = [new TsconfigPathsPlugin()];
function webpackFinal(config) {
config.resolve.plugins = [
new TsconfigPathsPlugin({
configFile: '.storybook/tsconfig.json',
}),
];

// story source addon
config.module.rules.push({
Expand All @@ -16,10 +20,13 @@ function webpackFinal(config: Configuration) {
enforce: 'pre',
});

// remove useless import type warning
config.plugins.push(new IgnoreNotFoundExportPlugin());

return config;
}

export default {
module.exports = {
stories: [
'../stories/**/index.@(js|ts)',
'../stories/**/*.stories.@(js|ts|mdx)',
Expand All @@ -29,6 +36,7 @@ export default {
'@storybook/addon-knobs',
'@storybook/addon-actions',
'@storybook/addon-storysource',
'storybook-dark-mode',
],
webpackFinal,
};
4 changes: 2 additions & 2 deletions .storybook/manager.ts → .storybook/manager.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { addons } from '@storybook/addons';
import { create } from '@storybook/theming';
const { addons } = require('@storybook/addons');
const { create } = require('@storybook/theming');

addons.setConfig({
panelPosition: 'right',
Expand Down
11 changes: 11 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
require('!style-loader!css-loader!sass-loader!./global.scss');

const { addons } = require('@storybook/addons');

const channel = addons.getChannel();

channel.addListener('DARK_MODE', isDark => {
document
.querySelector('html')
.setAttribute('aui-color-mode', isDark ? 'dark' : 'light');
});
1 change: 0 additions & 1 deletion .storybook/preview.ts

This file was deleted.

6 changes: 6 additions & 0 deletions .storybook/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
{
"extends": "../tsconfig",
"compilerOptions": {
"baseUrl": "../",
"paths": {
"@alauda/ui": ["./src/public-api"]
}
},
"include": ["../src/**/*", "../stories/**/*"],
"exclude": ["../src/**/*.spec.ts"]
}
58 changes: 28 additions & 30 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,52 +46,50 @@
"rxjs": "^6.0.0"
},
"devDependencies": {
"@1stg/app-config": "^1.1.2",
"@1stg/lib-config": "^1.0.4",
"@1stg/tslint-config": "^1.0.0",
"@angular-devkit/build-angular": "^0.1102.1",
"@angular-devkit/core": "^11.2.1",
"@angular/animations": "^11.2.1",
"@angular/cdk": "^11.2.1",
"@angular/cli": "^11.2.1",
"@angular/common": "^11.2.1",
"@angular/compiler": "^11.2.1",
"@angular/compiler-cli": "^11.2.1",
"@angular/core": "^11.2.1",
"@angular/forms": "^11.2.1",
"@angular/platform-browser": "^11.2.1",
"@angular/platform-browser-dynamic": "^11.2.1",
"@storybook/addon-actions": "^6.1.18",
"@storybook/addon-docs": "^6.1.18",
"@storybook/addon-knobs": "^6.1.18",
"@storybook/addon-storysource": "^6.1.18",
"@storybook/addons": "^6.1.18",
"@storybook/angular": "^6.1.18",
"@storybook/cli": "^6.1.18",
"@storybook/source-loader": "^6.1.18",
"@1stg/app-config": "^1.2.9",
"@1stg/lib-config": "^1.1.9",
"@1stg/tslint-config": "^1.1.0",
"@angular-devkit/build-angular": "^0.1102.3",
"@angular-devkit/core": "^11.2.3",
"@angular/animations": "^11.2.4",
"@angular/cdk": "^11.2.3",
"@angular/cli": "^11.2.3",
"@angular/common": "^11.2.4",
"@angular/compiler": "^11.2.4",
"@angular/compiler-cli": "^11.2.4",
"@angular/core": "^11.2.4",
"@angular/forms": "^11.2.4",
"@angular/platform-browser": "^11.2.4",
"@angular/platform-browser-dynamic": "^11.2.4",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-docs": "^6.1.21",
"@storybook/addon-knobs": "^6.1.21",
"@storybook/addon-storysource": "^6.1.21",
"@storybook/addons": "^6.1.21",
"@storybook/angular": "^6.1.21",
"@storybook/cli": "^6.1.21",
"@storybook/source-loader": "^6.1.21",
"@types/jest": "^26.0.20",
"@types/node": "^14.14.30",
"@types/node": "^14.14.31",
"clipboard-polyfill": "^3.0.2",
"gulp": "^4.0.2",
"gulp-dart-sass": "^1.0.2",
"jest": "^26.6.3",
"jest-junit": "^12.0.0",
"jest-preset-angular": "^8.3.2",
"ng-packagr": "^11.2.2",
"ng-packagr": "^11.2.4",
"ng-tslint": "^1.1.0",
"npm-run-all": "^4.1.5",
"rxjs": "^6.6.2",
"rxjs": "^6.6.6",
"standard-version": "^9.1.1",
"storybook-dark-mode": "^1.0.4",
"ts-node": "^9.1.1",
"tsconfig-paths-webpack-plugin": "^3.3.0",
"tslib": "^2.1.0",
"tslint": "^6.1.3",
"typescript": "^4.1.5",
"yarn-deduplicate": "^3.1.0"
},
"resolutions": {
"prettier": "^2.2.1",
"sass-loader": "^10.1.1",
"webpack": "^4.46.0"
"prettier": "^2.2.1"
}
}
70 changes: 20 additions & 50 deletions src/button/button.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -208,11 +208,12 @@ $button-size: (
color: $button-primary-border;
background-color: $color-white;
border-color: $button-primary-border;
$hover-bg: mix($color-white, $button-primary-border, 90%);

&:hover {
&:hover,
&:active,
&.isActive {
color: $button-primary-border;
background-color: $hover-bg;
background-color: $color-primary-ultra-light;
border-color: $button-primary-border;
}

Expand All @@ -223,13 +224,6 @@ $button-size: (
@include outline-shadow($outline-color-primary);
}

&:active,
&.isActive {
color: mix($color-black, $button-primary-border, 20%);
background-color: $hover-bg;
border-color: $button-primary-border;
}

&[disabled] {
color: $button-default-content-disabled;
background-color: $button-default-bg-disabled;
Expand Down Expand Up @@ -273,11 +267,12 @@ $button-size: (
color: $button-success-border;
background-color: $color-white;
border-color: $button-success-border;
$hover-bg: mix($color-white, $button-success-border, 90%);

&:hover {
&:hover,
&:active,
&.isActive {
color: $button-success-border;
background-color: $hover-bg;
background-color: $color-success-ultra-light;
border-color: $button-success-border;
}

Expand All @@ -288,13 +283,6 @@ $button-size: (
@include outline-shadow($outline-color-success);
}

&:active,
&.isActive {
color: mix($color-black, $button-success-border, 20%);
background-color: $hover-bg;
border-color: $button-success-border;
}

&[disabled] {
color: $button-default-content-disabled;
background-color: $button-default-bg-disabled;
Expand Down Expand Up @@ -338,11 +326,12 @@ $button-size: (
color: $button-warning-border;
background-color: $color-white;
border-color: $button-warning-border;
$hover-bg: mix($color-white, $button-warning-border, 90%);

&:hover {
&:hover,
&:active,
&.isActive {
color: $button-warning-border;
background-color: $hover-bg;
background-color: $color-warning-ultra-light;
border-color: $button-warning-border;
}

Expand All @@ -353,13 +342,6 @@ $button-size: (
@include outline-shadow($outline-color-warning);
}

&:active,
&.isActive {
color: mix($color-black, $button-warning-border, 20%);
background-color: $hover-bg;
border-color: $button-warning-border;
}

&[disabled] {
color: $button-default-content-disabled;
background-color: $button-default-bg-disabled;
Expand Down Expand Up @@ -405,11 +387,12 @@ $button-size: (
color: $button-danger-border;
background-color: $color-white;
border-color: $button-danger-border;
$hover-bg: mix($color-white, $button-danger-border, 90%);

&:hover {
&:hover,
&:active,
&.isActive {
color: $button-danger-border;
background-color: $hover-bg;
background-color: $color-danger-ultra-light;
border-color: $button-danger-border;
}

Expand All @@ -420,13 +403,6 @@ $button-size: (
@include outline-shadow($outline-color-error);
}

&:active,
&.isActive {
color: mix($color-black, $button-danger-border, 20%);
background-color: $hover-bg;
border-color: $button-danger-border;
}

&[disabled] {
color: $button-default-content-disabled;
background-color: $button-default-bg-disabled;
Expand Down Expand Up @@ -470,11 +446,12 @@ $button-size: (
color: $button-info-border;
background-color: $color-white;
border-color: $button-info-border;
$hover-bg: mix($color-white, $button-info-border, 90%);

&:hover {
&:hover,
&:active,
&.isActive {
color: $button-info-border;
background-color: $hover-bg;
background-color: $color-info-ultra-light;
border-color: $button-info-border;
}

Expand All @@ -485,13 +462,6 @@ $button-size: (
@include outline-shadow($outline-color-info);
}

&:active,
&.isActive {
color: mix($color-black, $button-info-border, 20%);
background-color: $hover-bg;
border-color: $button-info-border;
}

&[disabled] {
color: $button-default-content-disabled;
background-color: $button-default-bg-disabled;
Expand Down
1 change: 1 addition & 0 deletions src/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,4 @@ export * from './color-picker/public-api';
export * from './accordion/public-api';
export * from './page/public-api';
export * from './scrolling/public-api';
export * from './theme/public-api';
10 changes: 5 additions & 5 deletions src/status-bar/status-bar.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@ $block: aui-status-bar;
flex: 1 1 1;

&--primary {
background-color: mix($color-white, $color-primary, 20%);
background-color: $color-primary-lighter;
}
&--success {
background-color: mix($color-white, $color-success, 20%);
background-color: $color-success-lighter;
}
&--warning {
background-color: mix($color-white, $color-warning, 20%);
background-color: $color-warning-lighter;
}
&--error {
background-color: mix($color-white, $color-error, 20%);
background-color: $color-error-lighter;
}
&--info {
background-color: mix($color-white, $color-info, 20%);
background-color: $color-info-lighter;
}
&--pending {
height: $status-bar-pending-gradient-width * 8;
Expand Down
Loading

0 comments on commit 6e75972

Please sign in to comment.