steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

Add pixeldawn

Browse source
This commit is contained in:
Steffo 2022-12-29 01:45:51 +01:00
parent 45d803bf3d
commit 4b2a000360
Signed by: steffo
GPG key ID: 6965406171929D01
10 changed files with 200 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
dist/colors-pixeldawn.module.css vendored Normal file
View file

@ -0,0 +1,63 @@
/*
* Bluelib Royal Dawn Colors
* by <me@steffo.eu>
*/
.bluelib {
--bhsl-background-hue: 14deg;
--bhsl-background-saturation: 85%;
--bhsl-background-lightness: 74%;
--bhsl-foreground-hue: 0deg;
--bhsl-foreground-saturation: 0%;
--bhsl-foreground-lightness: 0%;
--bhsl-primary-hue: 0deg;
--bhsl-primary-saturation: 0%;
--bhsl-primary-lightness: 0%;
--bhsl-link-hue: 237deg;
--bhsl-link-saturation: 91%;
--bhsl-link-lightness: 59%;
--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: 60%;
--bhsl-yellow-hue: 60deg;
--bhsl-yellow-saturation: 100%;
--bhsl-yellow-lightness: 60%;
--bhsl-green-hue: 120deg;
--bhsl-green-saturation: 100%;
--bhsl-green-lightness: 60%;
--bhsl-cyan-hue: 180deg;
--bhsl-cyan-saturation: 100%;
--bhsl-cyan-lightness: 60%;
--bhsl-blue-hue: 240deg;
--bhsl-blue-saturation: 100%;
--bhsl-blue-lightness: 60%;
--bhsl-magenta-hue: 300deg;
--bhsl-magenta-saturation: 100%;
--bhsl-magenta-lightness: 60%;
--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);
}
.bluelib:is(.bluelib) {
--b-panel-initial-opacity: 0.5;
}

10
dist/colors-pixeldawn.module.less vendored Normal file
View 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-pixeldawn.less";

63
dist/colors-pixeldawn.root.css vendored Normal file
View file

@ -0,0 +1,63 @@
/*
* Bluelib Royal Dawn Colors
* by <me@steffo.eu>
*/
body {
--bhsl-background-hue: 14deg;
--bhsl-background-saturation: 85%;
--bhsl-background-lightness: 74%;
--bhsl-foreground-hue: 0deg;
--bhsl-foreground-saturation: 0%;
--bhsl-foreground-lightness: 0%;
--bhsl-primary-hue: 0deg;
--bhsl-primary-saturation: 0%;
--bhsl-primary-lightness: 0%;
--bhsl-link-hue: 237deg;
--bhsl-link-saturation: 91%;
--bhsl-link-lightness: 59%;
--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: 60%;
--bhsl-yellow-hue: 60deg;
--bhsl-yellow-saturation: 100%;
--bhsl-yellow-lightness: 60%;
--bhsl-green-hue: 120deg;
--bhsl-green-saturation: 100%;
--bhsl-green-lightness: 60%;
--bhsl-cyan-hue: 180deg;
--bhsl-cyan-saturation: 100%;
--bhsl-cyan-lightness: 60%;
--bhsl-blue-hue: 240deg;
--bhsl-blue-saturation: 100%;
--bhsl-blue-lightness: 60%;
--bhsl-magenta-hue: 300deg;
--bhsl-magenta-saturation: 100%;
--bhsl-magenta-lightness: 60%;
--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);
}
body:is(body) {
--b-panel-initial-opacity: 0.5;
}

10
dist/colors-pixeldawn.root.less vendored Normal file
View 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-pixeldawn.less";

26
examples/index.html
View file

@ -15,7 +15,7 @@
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less">
<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-royaldawn.root.less">
<link rel="stylesheet/less" type="text/css" href="../dist/colors-pixeldawn.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">
@ -31,7 +31,7 @@
<title>Bluelib</title>
</head>
<body id="body" class="theme-bluelib">
<img id="background" alt="" src="">
<img id="background" alt="" src="rygbg.png" style="image-rendering: pixelated;">
<main>
<article>
<h1>
@ -189,43 +189,43 @@
Available rulesets
</h3>
<dl>
<dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:bluelib-dist-base:root')"> Base</label></dt>
<dt><label class="fade"><input type="checkbox" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:bluelib-dist-base:root')"> Base</label></dt>
<dd>
The base <i>ruleset</i>, providing the layout and basic high contrast theming.
</dd>
<dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:bluelib-dist-classic:root')"> Classic</label></dt>
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:bluelib-dist-classic:root')"> Classic</label></dt>
<dd>
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
</dd>
<dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:bluelib-dist-glass:root')"> Glass</label></dt>
<dt><label class="fade"><input type="checkbox" autocomplete="off" checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:bluelib-dist-glass:root')"> Glass</label></dt>
<dd>
Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
</dd>
<dt><label class="fade"><input type="checkbox" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:bluelib-dist-fun:root')"> Fun</label></dt>
<dt><label class="fade"><input type="checkbox" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:bluelib-dist-fun:root')"> Fun</label></dt>
<dd>
Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
</dd>
<dt>Colors</dt>
<dd>
<dl>
<dt><label class="fade"><input type="radio" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label></dt>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-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" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label></dt>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-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" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royaldawn:root', '')"> Royal Dawn</label></dt>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-pixeldawn:root', 'pixeldawn-viktya.png')"> Pixel Dawn</label></dt>
<dd>
The palette of the <a href="https://www.ryg.one">RYG</a> community.
yes
</dd>
</dl>
</dd>
<dt>Fonts</dt>
<dd>
<dl>
<dt><label class="fade"><input type="radio" disabled checked name="ruleset-fonts"> Fira</label></dt>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked name="ruleset-fonts"> Fira</label></dt>
<dd>
Font theme based upon Mozilla's <a href="https://github.com/mozilla/Fira">Fira</a> font.
</dd>
@ -238,11 +238,11 @@
Available selectorsets
</h3>
<dl>
<dt><label class="fade"><input type="radio" disabled checked name="selectorset"> Root</label></dt>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled checked name="selectorset"> Root</label></dt>
<dd>
Simple selectors for usage in plain HTML pages, with short and human-friendly class names.
</dd>
<dt><label class="fade"><input type="radio" disabled name="selectorset"> Module</label></dt>
<dt><label class="fade"><input type="radio" autocomplete="off" disabled name="selectorset"> Module</label></dt>
<dd>
All selectors use class names, allowing the usage of the target with <a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects.
</dd>

2
examples/index.js
View file

@ -27,7 +27,7 @@ const enabledByDefault = [
"less:bluelib-dist-base:root",
"less:bluelib-dist-classic:root",
"less:bluelib-dist-glass:root",
"less:bluelib-dist-colors-royalblue:root",
"less:bluelib-dist-colors-pixeldawn:root",
"less:bluelib-dist-fonts-fira-ghpages:root",
]

BIN
examples/pixeldawn-viktya.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
examples/rygbg.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 369 KiB

BIN
examples/rygbg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 115 KiB

40
src/rulesets/colors/colors-pixeldawn.less Normal file
View file

@ -0,0 +1,40 @@
/*
* Bluelib Royal Dawn Colors
* by <me@steffo.eu>
*/
@{bluelib} {
// .create-hsl-group(background; 275deg; 69%; 80%);
// .create-hsl-group(foreground; 0deg; 0%; 0%);
// .create-hsl-group(primary; 0deg; 0%; 0%);
// .create-hsl-group(link; 237deg; 91%; 59%);
.create-hsl-group(background; 14deg; 85%; 74%);
.create-hsl-group(foreground; 0deg; 0%; 0%);
.create-hsl-group(primary; 0deg; 0%; 0%);
.create-hsl-group(link; 237deg; 80%; 41%);
.create-hsl-group(mark-foreground; 32deg; 64%; 14%);
.create-hsl-group(mark-background; 32deg; 100%; 81%);
.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%; 60%);
.create-hsl-group(yellow; 60deg; 100%; 60%);
.create-hsl-group(green; 120deg; 100%; 60%);
.create-hsl-group(cyan; 180deg; 100%; 60%);
.create-hsl-group(blue; 240deg; 100%; 60%);
.create-hsl-group(magenta; 300deg; 100%; 60%);
.map-hsl-group(inserted; green);
.map-hsl-group(deleted; red);
&:is(@{bluelib}) {
--b-panel-initial-opacity: 0.500;
--b-border-radius: 0;
}
}