Skip to content

Commit a89738e

Browse files
zombieFoxzombieFox
committed
[design] add more presets
1 parent b3a217d commit a89738e

File tree

5 files changed

+168
-26
lines changed

5 files changed

+168
-26
lines changed

‎src/css/theme.css‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -108,24 +108,24 @@
108108
background-color:rgb(var(--theme-preset-accent-nighttab))
109109
}
110110

111-
.theme-preset-background-midnightblue-01{
112-
background-color:rgb(var(--theme-preset-background-midnightblue-01))
111+
.theme-preset-background-midnight-01{
112+
background-color:rgb(var(--theme-preset-background-midnight-01))
113113
}
114114

115-
.theme-preset-background-midnightblue-02{
116-
background-color:rgb(var(--theme-preset-background-midnightblue-02))
115+
.theme-preset-background-midnight-02{
116+
background-color:rgb(var(--theme-preset-background-midnight-02))
117117
}
118118

119-
.theme-preset-background-midnightblue-03{
120-
background-color:rgb(var(--theme-preset-background-midnightblue-03))
119+
.theme-preset-background-midnight-03{
120+
background-color:rgb(var(--theme-preset-background-midnight-03))
121121
}
122122

123-
.theme-preset-background-midnightblue-04{
124-
background-color:rgb(var(--theme-preset-background-midnightblue-04))
123+
.theme-preset-background-midnight-04{
124+
background-color:rgb(var(--theme-preset-background-midnight-04))
125125
}
126126

127-
.theme-preset-accent-midnightblue{
128-
background-color:rgb(var(--theme-preset-accent-midnightblue))
127+
.theme-preset-accent-midnight{
128+
background-color:rgb(var(--theme-preset-accent-midnight))
129129
}
130130

131131
.theme-preset-background-bluegum-01{
@@ -327,3 +327,43 @@
327327
.theme-preset-accent-outrun{
328328
background-color:rgb(var(--theme-preset-accent-outrun))
329329
}
330+
331+
.theme-preset-background-pumpkin-01{
332+
background-color:rgb(var(--theme-preset-background-pumpkin-01))
333+
}
334+
335+
.theme-preset-background-pumpkin-02{
336+
background-color:rgb(var(--theme-preset-background-pumpkin-02))
337+
}
338+
339+
.theme-preset-background-pumpkin-03{
340+
background-color:rgb(var(--theme-preset-background-pumpkin-03))
341+
}
342+
343+
.theme-preset-background-pumpkin-04{
344+
background-color:rgb(var(--theme-preset-background-pumpkin-04))
345+
}
346+
347+
.theme-preset-accent-pumpkin{
348+
background-color:rgb(var(--theme-preset-accent-pumpkin))
349+
}
350+
351+
.theme-preset-background-whoosh-01{
352+
background-color:rgb(var(--theme-preset-background-whoosh-01))
353+
}
354+
355+
.theme-preset-background-whoosh-02{
356+
background-color:rgb(var(--theme-preset-background-whoosh-02))
357+
}
358+
359+
.theme-preset-background-whoosh-03{
360+
background-color:rgb(var(--theme-preset-background-whoosh-03))
361+
}
362+
363+
.theme-preset-background-whoosh-04{
364+
background-color:rgb(var(--theme-preset-background-whoosh-04))
365+
}
366+
367+
.theme-preset-accent-whoosh{
368+
background-color:rgb(var(--theme-preset-accent-whoosh))
369+
}

‎src/css/variables.css‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@
3131
--theme-preset-background-nighttab-03:25,25,25;
3232
--theme-preset-background-nighttab-04:25,25,25;
3333
--theme-preset-accent-nighttab:25,25,25;
34-
--theme-preset-background-midnightblue-01:25,25,25;
35-
--theme-preset-background-midnightblue-02:25,25,25;
36-
--theme-preset-background-midnightblue-03:25,25,25;
37-
--theme-preset-background-midnightblue-04:25,25,25;
38-
--theme-preset-accent-midnightblue:25,25,25;
34+
--theme-preset-background-midnight-01:25,25,25;
35+
--theme-preset-background-midnight-02:25,25,25;
36+
--theme-preset-background-midnight-03:25,25,25;
37+
--theme-preset-background-midnight-04:25,25,25;
38+
--theme-preset-accent-midnight:25,25,25;
3939
--theme-preset-background-bluegum-01:25,25,25;
4040
--theme-preset-background-bluegum-02:25,25,25;
4141
--theme-preset-background-bluegum-03:25,25,25;
@@ -86,6 +86,16 @@
8686
--theme-preset-background-outrun-03:25,25,25;
8787
--theme-preset-background-outrun-04:25,25,25;
8888
--theme-preset-accent-outrun:25,25,25;
89+
--theme-preset-background-pumpkin-01:25,25,25;
90+
--theme-preset-background-pumpkin-02:25,25,25;
91+
--theme-preset-background-pumpkin-03:25,25,25;
92+
--theme-preset-background-pumpkin-04:25,25,25;
93+
--theme-preset-accent-pumpkin:25,25,25;
94+
--theme-preset-background-whoosh-01:25,25,25;
95+
--theme-preset-background-whoosh-02:25,25,25;
96+
--theme-preset-background-whoosh-03:25,25,25;
97+
--theme-preset-background-whoosh-04:25,25,25;
98+
--theme-preset-accent-whoosh:25,25,25;
8999
--theme-preset-preview-size:6em;
90100
/* header */
91101
--header-area-width:100%;

‎src/index.html‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1322,15 +1322,15 @@ <h1 class="menu-item-header-text">Presets</h1>
13221322
</button>
13231323
</div>
13241324
<divclass="button-wrap form-inline">
1325-
<buttonclass="control-theme-preset-midnightblue theme-preset-button button mb-0" tabindex="-1">
1325+
<buttonclass="control-theme-preset-midnight theme-preset-button button mb-0" tabindex="-1">
13261326
<divclass="theme-preset-preview">
1327-
<spanclass="theme-preset-background-01 theme-preset-background-midnightblue-01"></span>
1328-
<spanclass="theme-preset-background-02 theme-preset-background-midnightblue-02"></span>
1329-
<spanclass="theme-preset-background-03 theme-preset-background-midnightblue-03"></span>
1330-
<spanclass="theme-preset-background-04 theme-preset-background-midnightblue-04"></span>
1331-
<spanclass="theme-preset-accent theme-preset-accent-midnightblue"></span>
1327+
<spanclass="theme-preset-background-01 theme-preset-background-midnight-01"></span>
1328+
<spanclass="theme-preset-background-02 theme-preset-background-midnight-02"></span>
1329+
<spanclass="theme-preset-background-03 theme-preset-background-midnight-03"></span>
1330+
<spanclass="theme-preset-background-04 theme-preset-background-midnight-04"></span>
1331+
<spanclass="theme-preset-accent theme-preset-accent-midnight"></span>
13321332
</div>
1333-
<spanclass="button-text small">Midnight Blue</span>
1333+
<spanclass="button-text small">Midnight</span>
13341334
</button>
13351335
</div>
13361336
<divclass="button-wrap form-inline">
@@ -1453,6 +1453,30 @@ <h1 class="menu-item-header-text">Presets</h1>
14531453
<spanclass="button-text small">Outrun</span>
14541454
</button>
14551455
</div>
1456+
<divclass="button-wrap form-inline">
1457+
<buttonclass="control-theme-preset-pumpkin theme-preset-button button mb-0" tabindex="-1">
1458+
<divclass="theme-preset-preview">
1459+
<spanclass="theme-preset-background-01 theme-preset-background-pumpkin-01"></span>
1460+
<spanclass="theme-preset-background-02 theme-preset-background-pumpkin-02"></span>
1461+
<spanclass="theme-preset-background-03 theme-preset-background-pumpkin-03"></span>
1462+
<spanclass="theme-preset-background-04 theme-preset-background-pumpkin-04"></span>
1463+
<spanclass="theme-preset-accent theme-preset-accent-pumpkin"></span>
1464+
</div>
1465+
<spanclass="button-text small">Pumpkin</span>
1466+
</button>
1467+
</div>
1468+
<divclass="button-wrap form-inline">
1469+
<buttonclass="control-theme-preset-whoosh theme-preset-button button mb-0" tabindex="-1">
1470+
<divclass="theme-preset-preview">
1471+
<spanclass="theme-preset-background-01 theme-preset-background-whoosh-01"></span>
1472+
<spanclass="theme-preset-background-02 theme-preset-background-whoosh-02"></span>
1473+
<spanclass="theme-preset-background-03 theme-preset-background-whoosh-03"></span>
1474+
<spanclass="theme-preset-background-04 theme-preset-background-whoosh-04"></span>
1475+
<spanclass="theme-preset-accent theme-preset-accent-whoosh"></span>
1476+
</div>
1477+
<spanclass="button-text small">Whoosh</span>
1478+
</button>
1479+
</div>
14561480
</div>
14571481
</div>
14581482
<divclass="menu-item">

‎src/js/control.js‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2544,10 +2544,10 @@ var control = (function(){
25442544
render.class();
25452545
}
25462546
},{
2547-
element: helper.e(".control-theme-preset-midnightblue"),
2547+
element: helper.e(".control-theme-preset-midnight"),
25482548
type: "button",
25492549
func: function(){
2550-
theme.preset("midnightblue");
2550+
theme.preset("midnight");
25512551
theme.style.check();
25522552
theme.render.color.shade();
25532553
theme.render.accent.color();
@@ -2686,6 +2686,32 @@ var control = (function(){
26862686
render.update();
26872687
render.class();
26882688
}
2689+
},{
2690+
element: helper.e(".control-theme-preset-pumpkin"),
2691+
type: "button",
2692+
func: function(){
2693+
theme.preset("pumpkin");
2694+
theme.style.check();
2695+
theme.render.color.shade();
2696+
theme.render.accent.color();
2697+
theme.render.radius();
2698+
link.groupAndItems();
2699+
render.update();
2700+
render.class();
2701+
}
2702+
},{
2703+
element: helper.e(".control-theme-preset-whoosh"),
2704+
type: "button",
2705+
func: function(){
2706+
theme.preset("whoosh");
2707+
theme.style.check();
2708+
theme.render.color.shade();
2709+
theme.render.accent.color();
2710+
theme.render.radius();
2711+
link.groupAndItems();
2712+
render.update();
2713+
render.class();
2714+
}
26892715
},{
26902716
element: helper.e(".control-theme-style-dark"),
26912717
path: "theme.style",

‎src/js/state.js‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,7 @@ var state = (function(){
389389
radius: 0.25,
390390
style: "dark"
391391
},
392-
midnightblue: {
392+
midnight: {
393393
color: {
394394
hsl: {
395395
h: 215,
@@ -572,7 +572,7 @@ var state = (function(){
572572
},
573573
accent: {
574574
r: 255,
575-
g: 136,
575+
g: 221,
576576
b: 0
577577
},
578578
radius: 0.6,
@@ -619,6 +619,48 @@ var state = (function(){
619619
},
620620
radius: 0,
621621
style: "dark"
622+
},
623+
pumpkin: {
624+
color: {
625+
hsl: {
626+
h: 198,
627+
s: 0,
628+
l: 46
629+
},
630+
rgb: {
631+
r: 117,
632+
g: 117,
633+
b: 117
634+
}
635+
},
636+
accent: {
637+
r: 238,
638+
g: 119,
639+
b: 34
640+
},
641+
radius: 0.2,
642+
style: "dark"
643+
},
644+
whoosh: {
645+
color: {
646+
hsl: {
647+
h: 307,
648+
s: 100,
649+
l: 59
650+
},
651+
rgb: {
652+
r: 254,
653+
g: 45,
654+
b: 230
655+
}
656+
},
657+
accent: {
658+
r: 238,
659+
g: 238,
660+
b: 34
661+
},
662+
radius: 1.2,
663+
style: "dark"
622664
}
623665
};
624666

0 commit comments

Comments
(0)