Skip to content

Commit 8df15a1

Browse files
author
Administrator
committed
themeing added
1 parent 1955a46 commit 8df15a1

File tree

10 files changed

+135
-38
lines changed

10 files changed

+135
-38
lines changed

‎.storybook/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const path = require("path");
22
module.exports = {
33
stories: ["../src/**/*.stories.tsx"],
44
// Add any Storybook addons you want here: https://storybook.js.org/addons/
5-
addons: [],
5+
addons: ['storybook-dark-mode'],
66
webpackFinal: async config => {
77
/*
88
config.module.rules.push({

‎.storybook/preview.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,14 @@
6666
*
6767
* Will add a new dropdown in your toolbar with options light and dark.
6868
**/
69+
70+
export const parameters = {
71+
darkMode: {
72+
// Set the initial theme
73+
// current: 'light',
74+
darkClass:"dark",
75+
lightClass:"light",
76+
classTarget:'html',
77+
stylePreview:true,
78+
},
79+
};

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"rollup-plugin-less": "^1.1.3",
7070
"rollup-plugin-peer-deps-external": "^2.2.4",
7171
"rollup-plugin-typescript2": "^0.29.0",
72+
"storybook-dark-mode": "^1.1.2",
7273
"style-loader": "^3.3.1",
7374
"typescript": "^4.4.2",
7475
"webpack": "^5.74.0"

‎rollup.build.css‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,11 @@
88
--font-color: #fafafa;
99
}
1010
}
11-
/*
12-
@mixin font-defaults {
13-
font-family: $font-family;
14-
}
15-
16-
@mixin heading {
17-
@include font-defaults;
18-
11+
.heading {
12+
font-family: "Avenir Next", Helvetica, Arial, sans-serif;
1913
font-size: 40px;
2014
font-weight: bold;
2115
}
22-
*/
2316
.tree-menu {
2417
-webkit-touch-callout: none;
2518
/* iOS Safari */
@@ -95,3 +88,6 @@
9588
.tree-menu .selected {
9689
background-color: #363b50;
9790
}
91+
.test.tree-menu {
92+
background-color: black;
93+
}

‎src/TreeMenu/TreeMenu.less‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
@import "../variables.less";
33
@import "../typography.less";
44

5-
6-
75
.tree-menu {
8-
6+
7+
background-color: var(--tree-background);
8+
9+
font-family: var(--font-family);
10+
911
-webkit-touch-callout: none; /* iOS Safari */
1012
-webkit-user-select: none; /* Safari */
1113
-khtml-user-select: none; /* Konqueror HTML */
@@ -32,14 +34,16 @@
3234
cursor: pointer;
3335
transition: all .3s ease-in;
3436

37+
color:var(--item-title);
38+
3539
&.disabled {
3640
pointer-events: none;
37-
color: rgb(110, 110, 110);
41+
color: var(--item-disabled-color); //rgb(110, 110, 110);
3842
}
3943

4044
&:hover {
41-
color: rgb(62, 174, 230);
42-
background-color: rgb(60, 63, 76);
45+
color: var(--item-hover-color);
46+
background-color: var(--item-hover-background);
4347
transition: all .3s ease-in;
4448
opacity: 1;
4549
}
@@ -58,7 +62,7 @@
5862

5963
&.disabled {
6064
pointer-events: none;
61-
color: rgb(110, 110, 110);
65+
color: var(--item-disabled-color);
6266
}
6367

6468
}
@@ -87,6 +91,10 @@
8791
flex-direction: row;
8892
align-items: center;
8993

94+
&:hover{
95+
color:var(--item-hover-color);
96+
}
97+
9098
> .folder {
9199

92100
}
@@ -97,15 +105,20 @@
97105
// border:1px solid white;
98106
}
99107
> .title {
108+
109+
// &:not(:hover) and :not(.disabled) {
110+
// color: var(--item-title);
111+
// }
100112
display: flex;
101113
flex-grow: 1;
102114
flex-direction: column;
103-
104115
> .info {
105116
font-size: .7em;
106-
color: orange;
117+
color: var(--item-info);
107118
}
108119
}
120+
121+
109122

110123
> .marker {
111124

@@ -114,8 +127,17 @@
114127
}
115128

116129
.selected {
117-
background-color: rgb(54, 59, 80);
130+
background-color:var(--item-selected-background);
131+
color:var(--item-selected-color) !important;
118132
}
119133

134+
}
120135

136+
.test {
137+
&.tree-menu {
138+
// background-color: black;
139+
.item:hover {
140+
// background-color: red;
141+
}
142+
}
121143
}

‎src/TreeMenu/TreeMenu.stories.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// Generated with util/create-component.js
22
import React,{ useEffect,createRef } from "react";
33
import TreeMenu,{ TreeMenuItem,TreeMenuActions } from "./TreeMenu";
4+
// import * as DarkModeToggle from "https://googlechromelabs.github.io/dark-mode-toggle/src/dark-mode-toggle.mjs";
45

56

67
const ITEMS : TreeMenuItem[] = [
78
{
8-
id:"main",title:"Main Menu",
9+
id:"main",title:"Main Menu 1",
910
childs:[
1011
{
1112
id:"home",
@@ -143,6 +144,7 @@ export const WithBar = () => {
143144
return (
144145
<div style={{ maxWidth:400 }}>
145146
<TreeMenu
147+
// classPrefix="light"
146148
// initialCollapsed
147149
initialSelected="LAST"
148150
ref={ref}

‎src/TreeMenu/TreeMenu.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,10 @@ const TreeMenu = React.forwardRef<TreeMenuActions,TreeMenuProps>((props,ref) =>
5353
onClick,
5454
onToggle,
5555
initialCollapsed,
56-
initialSelected } = props;
56+
initialSelected,
57+
classPrefix,
58+
theme
59+
} = props;
5760
const [data,setData] = useState<TreeMenuItemType[]>([]);
5861
const [selected,setSelected] = useState<ItemProps>();
5962
const [changed,setChanged] = useState(false);
@@ -235,7 +238,7 @@ const TreeMenu = React.forwardRef<TreeMenuActions,TreeMenuProps>((props,ref) =>
235238
};
236239

237240
return (
238-
<div className="tree-menu" ref={setRef}>
241+
<div className={clsx(classPrefix,theme,"tree-menu")} ref={setRef}>
239242
{menu}
240243
</div>
241244
);

‎src/TreeMenu/TreeMenu.types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,14 @@ export type ItemRenderProps = {
3737
renderGroup?:TreeMenuProps["renderGroupIcon"];
3838
} & ItemProps;
3939

40+
type Theme = "dark" | "light"
41+
4042
export interface TreeMenuProps {
43+
// item tree data
4144
items:TreeMenuItem[];
45+
// style scope
46+
theme?:Theme;
47+
classPrefix?:string;
4248
initialCollapsed?:boolean;
4349
initialSelected?:string;
4450
renderBadge?:RenderType;

‎src/variables.less‎

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,60 @@
1-
// Variables
2-
@harvey-black: #131111;
3-
@harvey-white: #e0e0e0;
4-
@harvey-red: #ff2323;
5-
@harvey-green: #005f20;
6-
@harvey-blue: #070bce;
71

82
:root {
93
--background: #fff;
104
--font-color: #494949;
5+
--test-color:rgb(0, 51, 255);
6+
}
7+
8+
.tree-menu {
9+
--font-family:"Avenir Next", Helvetica, Arial, sans-serif;
10+
}
11+
12+
.dark-colors() {
13+
--tree-background:rgb(36, 37, 57);
14+
--item-title:rgba(225, 225, 225, 0.787);
15+
--item-info: #c8a636;
16+
--item-group-icon:red;
17+
--item-selected-background:rgba(148, 185, 247, 0.364);
18+
--item-selected-color:rgb(255, 255, 255);
19+
--item-hover-background:rgba(89, 100, 102, 0.692);
20+
--item-hover-color:rgb(4, 197, 255);
21+
--item-disabled-color:rgba(129, 129, 129, 0.533);
22+
}
23+
24+
.light-colors() {
25+
--tree-background:rgb(231, 231, 231);
26+
--item-title:rgba(31, 31, 31, 0.787);
27+
--item-info: #79aaff;
28+
--item-group-icon:red;
29+
--item-selected-background:rgba(129, 129, 129, 0.364);
30+
--item-selected-color:rgb(32, 32, 32);
31+
--item-hover-background:rgba(0, 0, 0, 0.063);
32+
--item-hover-color:rgb(0, 0, 0);
33+
--item-disabled-color:rgba(129, 129, 129, 0.533);
34+
}
35+
36+
37+
@media (prefers-color-scheme: light) {
38+
.tree-menu {
39+
.light-colors();
40+
}
1141
}
1242

1343
@media (prefers-color-scheme: dark) {
14-
:root {
15-
--background: #3c3c3c;
16-
--font-color: #fafafa;
44+
.tree-menu {
45+
.dark-colors();
46+
}
47+
}
48+
49+
50+
.dark {
51+
.tree-menu {
52+
.dark-colors();
1753
}
1854
}
55+
56+
.light {
57+
.tree-menu {
58+
.light-colors();
59+
}
60+
}

‎yarn.lock‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1355,7 +1355,7 @@
13551355
estree-walker "^1.0.1"
13561356
picomatch "^2.2.2"
13571357

1358-
"@storybook/[email protected]":
1358+
"@storybook/[email protected]", "@storybook/addons@^6.0.0":
13591359
version "6.5.13"
13601360
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73"
13611361
integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA==
@@ -1372,7 +1372,7 @@
13721372
global "^4.4.0"
13731373
regenerator-runtime "^0.13.7"
13741374

1375-
"@storybook/[email protected]":
1375+
"@storybook/[email protected]", "@storybook/api@^6.0.0":
13761376
version "6.5.13"
13771377
resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64"
13781378
integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w==
@@ -1559,7 +1559,7 @@
15591559
core-js "^3.8.2"
15601560
global "^4.4.0"
15611561

1562-
"@storybook/[email protected]":
1562+
"@storybook/[email protected]", "@storybook/components@^6.0.0":
15631563
version "6.5.13"
15641564
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13.tgz#a05fc969458760b348d640f26c2cad310ab35030"
15651565
integrity sha512-6Hhx70JK5pGfKCkqMU4yq/BBH+vRTmzj7tZKfPwba+f8VmTMoOr/2ysTQFRtXryiHB6Z15xBYgfq5x2pIwQzLQ==
@@ -1655,7 +1655,7 @@
16551655
util-deprecate "^1.0.2"
16561656
webpack "4"
16571657

1658-
"@storybook/[email protected]":
1658+
"@storybook/[email protected]", "@storybook/core-events@^6.0.0":
16591659
version "6.5.13"
16601660
resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a"
16611661
integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w==
@@ -2002,7 +2002,7 @@
20022002
read-pkg-up "^7.0.1"
20032003
regenerator-runtime "^0.13.7"
20042004

2005-
"@storybook/[email protected]":
2005+
"@storybook/[email protected]", "@storybook/theming@^6.0.0":
20062006
version "6.5.13"
20072007
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083"
20082008
integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g==
@@ -4844,7 +4844,7 @@ extglob@^2.0.4:
48444844
snapdragon "^0.8.1"
48454845
to-regex "^3.0.1"
48464846

4847-
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
4847+
fast-deep-equal@^3.0.0, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
48484848
version "3.1.3"
48494849
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
48504850
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -8930,6 +8930,20 @@ store2@^2.12.0:
89308930
resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
89318931
integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
89328932

8933+
storybook-dark-mode@^1.1.2:
8934+
version "1.1.2"
8935+
resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-1.1.2.tgz#2ba3ab912cdd03a76a560408de1883eb378cb04c"
8936+
integrity sha512-L5QjJN49bl+ktprM6faMkTeW+LCvuMYWQaRo8/JGSMmzomIjLT7Yo20UiTsnMgMYyYWYF5O4EK/F3OvjDNp8tQ==
8937+
dependencies:
8938+
"@storybook/addons" "^6.0.0"
8939+
"@storybook/api" "^6.0.0"
8940+
"@storybook/components" "^6.0.0"
8941+
"@storybook/core-events" "^6.0.0"
8942+
"@storybook/theming" "^6.0.0"
8943+
fast-deep-equal "^3.0.0"
8944+
global "^4.4.0"
8945+
memoizerific "^1.11.3"
8946+
89338947
stream-browserify@^2.0.1:
89348948
version "2.0.2"
89358949
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"

0 commit comments

Comments
 (0)