[design] add theme preset

This commit is contained in:
zombieFox 2019-12-27 21:49:59 -07:00
parent afd64919af
commit 126803f851
4 changed files with 72 additions and 0 deletions

View File

@ -367,3 +367,23 @@
.theme-preset-accent-whoosh {
background-color: rgb(var(--theme-preset-accent-whoosh))
}
.theme-preset-background-eldergold-01 {
background-color: rgb(var(--theme-preset-background-eldergold-01))
}
.theme-preset-background-eldergold-02 {
background-color: rgb(var(--theme-preset-background-eldergold-02))
}
.theme-preset-background-eldergold-03 {
background-color: rgb(var(--theme-preset-background-eldergold-03))
}
.theme-preset-background-eldergold-04 {
background-color: rgb(var(--theme-preset-background-eldergold-04))
}
.theme-preset-accent-eldergold {
background-color: rgb(var(--theme-preset-accent-eldergold))
}

View File

@ -1477,6 +1477,18 @@
<span class="button-text small">Whoosh</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-eldergold theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-eldergold-01"></span>
<span class="theme-preset-background-02 theme-preset-background-eldergold-02"></span>
<span class="theme-preset-background-03 theme-preset-background-eldergold-03"></span>
<span class="theme-preset-background-04 theme-preset-background-eldergold-04"></span>
<span class="theme-preset-accent theme-preset-accent-eldergold"></span>
</div>
<span class="button-text small">Elder Gold</span>
</button>
</div>
</div>
</div>
<div class="menu-item">

View File

@ -2740,6 +2740,21 @@ var control = (function() {
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-preset-eldergold"),
type: "button",
func: function() {
theme.preset("eldergold");
theme.render.font.display();
theme.render.font.ui();
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
link.groupAndItems();
render.update();
render.class();
}
}, {
element: helper.e(".control-theme-style-dark"),
path: "theme.style",

View File

@ -490,6 +490,31 @@ var theme = (function() {
},
radius: 1.2,
style: "dark"
},
eldergold: {
font: {
display: "Life Savers",
ui: "Quicksand"
},
color: {
hsl: {
h: 209,
s: 50,
l: 45
},
rgb: {
r: 58,
g: 118,
b: 175
}
},
accent: {
r: 255,
g: 160,
b: 0
},
radius: 0.5,
style: "dark"
}
}
};