mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-10-16 05:37:28 +00:00
Add experimental purplestar theme (#59)
This commit is contained in:
GitHub
parent
a4d3787b87
commit
95a54ef578
7 changed files with 191 additions and 15 deletions
60
dist/colors-purplestar.module.css
vendored
Normal file
60
dist/colors-purplestar.module.css
vendored
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* Bluelib Purple Star Colors
|
||||
* by <me@steffo.eu>
|
||||
*/
|
||||
:where(.bluelib) {
|
||||
--bhsl-background-hue: 262deg;
|
||||
--bhsl-background-saturation: 85%;
|
||||
--bhsl-background-lightness: 40%;
|
||||
--bhsl-foreground-hue: 212deg;
|
||||
--bhsl-foreground-saturation: 100%;
|
||||
--bhsl-foreground-lightness: 81%;
|
||||
--bhsl-primary-hue: 0deg;
|
||||
--bhsl-primary-saturation: 0%;
|
||||
--bhsl-primary-lightness: 100%;
|
||||
--bhsl-link-hue: 180deg;
|
||||
--bhsl-link-saturation: 100%;
|
||||
--bhsl-link-lightness: 40%;
|
||||
--bhsl-mark-foreground-hue: 32deg;
|
||||
--bhsl-mark-foreground-saturation: 64%;
|
||||
--bhsl-mark-foreground-lightness: 14%;
|
||||
--bhsl-mark-background-hue: 32deg;
|
||||
--bhsl-mark-background-saturation: 100%;
|
||||
--bhsl-mark-background-lightness: 81%;
|
||||
--bhsl-todo-foreground-hue: 43deg;
|
||||
--bhsl-todo-foreground-saturation: 100%;
|
||||
--bhsl-todo-foreground-lightness: 65%;
|
||||
--bhsl-todo-background-hue: 204deg;
|
||||
--bhsl-todo-background-saturation: 11%;
|
||||
--bhsl-todo-background-lightness: 18%;
|
||||
--bhsl-sample-input-hue: 0deg;
|
||||
--bhsl-sample-input-saturation: 100%;
|
||||
--bhsl-sample-input-lightness: 0%;
|
||||
--bhsl-sample-output-hue: 0deg;
|
||||
--bhsl-sample-output-saturation: 100%;
|
||||
--bhsl-sample-output-lightness: 100%;
|
||||
--bhsl-red-hue: 0deg;
|
||||
--bhsl-red-saturation: 100%;
|
||||
--bhsl-red-lightness: 75%;
|
||||
--bhsl-yellow-hue: 60deg;
|
||||
--bhsl-yellow-saturation: 100%;
|
||||
--bhsl-yellow-lightness: 75%;
|
||||
--bhsl-green-hue: 120deg;
|
||||
--bhsl-green-saturation: 100%;
|
||||
--bhsl-green-lightness: 75%;
|
||||
--bhsl-cyan-hue: 180deg;
|
||||
--bhsl-cyan-saturation: 100%;
|
||||
--bhsl-cyan-lightness: 75%;
|
||||
--bhsl-blue-hue: 240deg;
|
||||
--bhsl-blue-saturation: 100%;
|
||||
--bhsl-blue-lightness: 75%;
|
||||
--bhsl-magenta-hue: 300deg;
|
||||
--bhsl-magenta-saturation: 100%;
|
||||
--bhsl-magenta-lightness: 75%;
|
||||
--bhsl-inserted-hue: var(--bhsl-green-hue);
|
||||
--bhsl-inserted-saturation: var(--bhsl-green-saturation);
|
||||
--bhsl-inserted-lightness: var(--bhsl-green-lightness);
|
||||
--bhsl-deleted-hue: var(--bhsl-red-hue);
|
||||
--bhsl-deleted-saturation: var(--bhsl-red-saturation);
|
||||
--bhsl-deleted-lightness: var(--bhsl-red-lightness);
|
||||
}
|
||||
10
dist/colors-purplestar.module.less
vendored
Normal file
10
dist/colors-purplestar.module.less
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// Mixins
|
||||
@import (less) "../src/mixins/fonts.less";
|
||||
@import (less) "../src/mixins/hsl.less";
|
||||
|
||||
// Selector
|
||||
@import (less) "../src/selectorsets/module.less";
|
||||
|
||||
// Rule
|
||||
@import (less) "../src/rulesets/colors/colors-purplestar.less";
|
||||
|
||||
60
dist/colors-purplestar.root.css
vendored
Normal file
60
dist/colors-purplestar.root.css
vendored
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* Bluelib Purple Star Colors
|
||||
* by <me@steffo.eu>
|
||||
*/
|
||||
:where(body) {
|
||||
--bhsl-background-hue: 262deg;
|
||||
--bhsl-background-saturation: 85%;
|
||||
--bhsl-background-lightness: 40%;
|
||||
--bhsl-foreground-hue: 212deg;
|
||||
--bhsl-foreground-saturation: 100%;
|
||||
--bhsl-foreground-lightness: 81%;
|
||||
--bhsl-primary-hue: 0deg;
|
||||
--bhsl-primary-saturation: 0%;
|
||||
--bhsl-primary-lightness: 100%;
|
||||
--bhsl-link-hue: 180deg;
|
||||
--bhsl-link-saturation: 100%;
|
||||
--bhsl-link-lightness: 40%;
|
||||
--bhsl-mark-foreground-hue: 32deg;
|
||||
--bhsl-mark-foreground-saturation: 64%;
|
||||
--bhsl-mark-foreground-lightness: 14%;
|
||||
--bhsl-mark-background-hue: 32deg;
|
||||
--bhsl-mark-background-saturation: 100%;
|
||||
--bhsl-mark-background-lightness: 81%;
|
||||
--bhsl-todo-foreground-hue: 43deg;
|
||||
--bhsl-todo-foreground-saturation: 100%;
|
||||
--bhsl-todo-foreground-lightness: 65%;
|
||||
--bhsl-todo-background-hue: 204deg;
|
||||
--bhsl-todo-background-saturation: 11%;
|
||||
--bhsl-todo-background-lightness: 18%;
|
||||
--bhsl-sample-input-hue: 0deg;
|
||||
--bhsl-sample-input-saturation: 100%;
|
||||
--bhsl-sample-input-lightness: 0%;
|
||||
--bhsl-sample-output-hue: 0deg;
|
||||
--bhsl-sample-output-saturation: 100%;
|
||||
--bhsl-sample-output-lightness: 100%;
|
||||
--bhsl-red-hue: 0deg;
|
||||
--bhsl-red-saturation: 100%;
|
||||
--bhsl-red-lightness: 75%;
|
||||
--bhsl-yellow-hue: 60deg;
|
||||
--bhsl-yellow-saturation: 100%;
|
||||
--bhsl-yellow-lightness: 75%;
|
||||
--bhsl-green-hue: 120deg;
|
||||
--bhsl-green-saturation: 100%;
|
||||
--bhsl-green-lightness: 75%;
|
||||
--bhsl-cyan-hue: 180deg;
|
||||
--bhsl-cyan-saturation: 100%;
|
||||
--bhsl-cyan-lightness: 75%;
|
||||
--bhsl-blue-hue: 240deg;
|
||||
--bhsl-blue-saturation: 100%;
|
||||
--bhsl-blue-lightness: 75%;
|
||||
--bhsl-magenta-hue: 300deg;
|
||||
--bhsl-magenta-saturation: 100%;
|
||||
--bhsl-magenta-lightness: 75%;
|
||||
--bhsl-inserted-hue: var(--bhsl-green-hue);
|
||||
--bhsl-inserted-saturation: var(--bhsl-green-saturation);
|
||||
--bhsl-inserted-lightness: var(--bhsl-green-lightness);
|
||||
--bhsl-deleted-hue: var(--bhsl-red-hue);
|
||||
--bhsl-deleted-saturation: var(--bhsl-red-saturation);
|
||||
--bhsl-deleted-lightness: var(--bhsl-red-lightness);
|
||||
}
|
||||
10
dist/colors-purplestar.root.less
vendored
Normal file
10
dist/colors-purplestar.root.less
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// Mixins
|
||||
@import (less) "../src/mixins/fonts.less";
|
||||
@import (less) "../src/mixins/hsl.less";
|
||||
|
||||
// Selector
|
||||
@import (less) "../src/selectorsets/root.less";
|
||||
|
||||
// Rule
|
||||
@import (less) "../src/rulesets/colors/colors-purplestar.less";
|
||||
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-amber.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-pixeldawn.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-purplestar.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less">
|
||||
|
|
@ -202,24 +203,28 @@
|
|||
</dd>
|
||||
<dt><label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:dist-fun:root')"> Fun</label></dt>
|
||||
<dd>
|
||||
Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
|
||||
<mark>Experimental.</mark> <i>Ruleset</i> with bizzare or buggy but fun rules.
|
||||
</dd>
|
||||
<dt>Colors</dt>
|
||||
<dd>
|
||||
<dl>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label></dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label></dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label></dt>
|
||||
<dd>
|
||||
A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise.
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label></dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label></dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label></dt>
|
||||
<dd>
|
||||
A theme developed in collaboration with Viktya, featuring a pixelated beach-side sunrise.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor ('less:dist-colors-purplestar:root', 'kazuend-2KXEb_8G5vo-unsplash-edited.jpg')"> Purple Star</label></dt>
|
||||
<dd>
|
||||
<mark>Experimental.</mark> A purple-ish theme for <a href="https://www.starshard.studio">Star Shard Studio</a>.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
<dt>Fonts</dt>
|
||||
<dd>
|
||||
|
|
|
|||
BIN
examples/kazuend-2KXEb_8G5vo-unsplash-edited.jpg
Normal file
BIN
examples/kazuend-2KXEb_8G5vo-unsplash-edited.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
31
src/rulesets/colors/colors-purplestar.less
Normal file
31
src/rulesets/colors/colors-purplestar.less
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* Bluelib Purple Star Colors
|
||||
* by <me@steffo.eu>
|
||||
*/
|
||||
|
||||
@{bluelib} {
|
||||
.create-hsl-group(background; 262deg; 85%; 13%);
|
||||
.create-hsl-group(foreground; 262deg; 100%; 78%);
|
||||
.create-hsl-group(primary; 53deg; 100%; 100%);
|
||||
// .create-hsl-group(link; 292deg; 65%; 50%);
|
||||
.create-hsl-group(link; 53deg; 100%; 72%);
|
||||
|
||||
.create-hsl-group(mark-foreground; 53deg; 64%; 14%);
|
||||
.create-hsl-group(mark-background; 53deg; 100%; 72%);
|
||||
|
||||
.create-hsl-group(todo-foreground; 43deg; 100%; 65%);
|
||||
.create-hsl-group(todo-background; 204deg; 11%; 18%);
|
||||
|
||||
.create-hsl-group(sample-input; 0deg; 100%; 0%);
|
||||
.create-hsl-group(sample-output; 0deg; 100%; 100%);
|
||||
|
||||
.create-hsl-group(red; 0deg; 100%; 75%);
|
||||
.create-hsl-group(yellow; 60deg; 100%; 75%);
|
||||
.create-hsl-group(green; 120deg; 100%; 75%);
|
||||
.create-hsl-group(cyan; 180deg; 100%; 75%);
|
||||
.create-hsl-group(blue; 240deg; 100%; 75%);
|
||||
.create-hsl-group(magenta; 300deg; 100%; 75%);
|
||||
|
||||
.map-hsl-group(inserted; green);
|
||||
.map-hsl-group(deleted; red);
|
||||
}
|
||||
Loading…
Reference in a new issue