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

Create colors-royaldawn ruleset, along with some other improvements

Browse source
This commit is contained in:
Steffo 2022-12-28 23:19:03 +01:00
parent 51d57729ca
commit 4d6d8be081
Signed by: steffo
GPG key ID: 6965406171929D01
14 changed files with 225 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
dist/classic.module.css vendored
View file

@ -4,6 +4,7 @@
*/
.bluelib {
--b-border-radius: 8px;
--b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
}
.bluelib,
.bluelib * {
@ -15,7 +16,7 @@
.bluelib .header-4,
.bluelib .header-5,
.bluelib .header-6 {
text-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
text-shadow: var(--b-outer-shadow);
}
.bluelib .panel .header-1,
.bluelib .panel .header-2,
@ -28,7 +29,7 @@
.bluelib .panel,
.bluelib .table.panel > .table-caption {
border-radius: var(--b-border-radius);
box-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
box-shadow: var(--b-outer-shadow);
}
.bluelib .panel .panel,
.bluelib .table.panel > .table-caption .panel {
@ -96,7 +97,7 @@
}
.bluelib .table.panel > .table-caption {
border-radius: 0;
box-shadow: 0.0625em 0 0.25em hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
box-shadow: var(--b-outer-shadow);
}
.bluelib .table.panel-dialog > .table-caption {
border-bottom-width: 2px;

7
dist/classic.root.css vendored
View file

@ -4,6 +4,7 @@
*/
body {
--b-border-radius: 8px;
--b-outer-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
}
body,
body * {
@ -15,7 +16,7 @@ body h3,
body h4,
body h5,
body h6 {
text-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
text-shadow: var(--b-outer-shadow);
}
body .panel h1,
body .panel h2,
@ -28,7 +29,7 @@ body .panel h6 {
body .panel,
body table.panel > caption {
border-radius: var(--b-border-radius);
box-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
box-shadow: var(--b-outer-shadow);
}
body .panel .panel,
body table.panel > caption .panel {
@ -96,7 +97,7 @@ body table.panel {
}
body table.panel > caption {
border-radius: 0;
box-shadow: 0.0625em 0 0.25em hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
box-shadow: var(--b-outer-shadow);
}
body table.dialog > caption {
border-bottom-width: 2px;

66
dist/colors-royaldawn.module.css vendored Normal file
View file

@ -0,0 +1,66 @@
/*
* Bluelib Royal Dawn Colors
* by <me@steffo.eu>
*/
.bluelib {
--bhsl-background-hue: 31deg;
--bhsl-background-saturation: 100%;
--bhsl-background-lightness: 10%;
--bhsl-foreground-hue: 46deg;
--bhsl-foreground-saturation: 97%;
--bhsl-foreground-lightness: 85%;
--bhsl-primary-hue: 0deg;
--bhsl-primary-saturation: 0%;
--bhsl-primary-lightness: 100%;
--bhsl-link-hue: 195deg;
--bhsl-link-saturation: 97%;
--bhsl-link-lightness: 47%;
--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.75;
}
body {
background-image: linear-gradient(90deg, #E76608, #3C247F);
}

10
dist/colors-royaldawn.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-royaldawn.less";

66
dist/colors-royaldawn.root.css vendored Normal file
View file

@ -0,0 +1,66 @@
/*
* Bluelib Royal Dawn Colors
* by <me@steffo.eu>
*/
body {
--bhsl-background-hue: 31deg;
--bhsl-background-saturation: 100%;
--bhsl-background-lightness: 10%;
--bhsl-foreground-hue: 46deg;
--bhsl-foreground-saturation: 97%;
--bhsl-foreground-lightness: 85%;
--bhsl-primary-hue: 0deg;
--bhsl-primary-saturation: 0%;
--bhsl-primary-lightness: 100%;
--bhsl-link-hue: 195deg;
--bhsl-link-saturation: 97%;
--bhsl-link-lightness: 47%;
--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.75;
}
body {
background-image: linear-gradient(90deg, #E76608, #3C247F);
}

10
dist/colors-royaldawn.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-royaldawn.less";

6
dist/glass.module.css vendored
View file

@ -4,16 +4,18 @@
*/
.bluelib {
--b-panel-blur: 16px;
--b-panel-initial-opacity: 0.3;
--b-panel-nested-opacity: 0.075;
}
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
.bluelib .panel,
.bluelib .table.panel > .table-caption {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / 0.3);
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));
backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
}
.bluelib .panel .panel,
.bluelib .table.panel > .table-caption .panel {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
backdrop-filter: none;
}
.bluelib .modifier-mark,

6
dist/glass.root.css vendored
View file

@ -4,16 +4,18 @@
*/
body {
--b-panel-blur: 16px;
--b-panel-initial-opacity: 0.3;
--b-panel-nested-opacity: 0.075;
}
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
body .panel,
body table.panel > caption {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / 0.3);
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness) / var(--b-panel-initial-opacity));
backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
}
body .panel .panel,
body table.panel > caption .panel {
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / var(--b-panel-nested-opacity));
backdrop-filter: none;
}
body .mark,

11
examples/index.html
View file

@ -15,6 +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/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">
@ -30,7 +31,7 @@
<title>Bluelib</title>
</head>
<body id="body" class="theme-bluelib">
<img id="background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg">
<img id="background" alt="" src="">
<main>
<article>
<h1>
@ -215,6 +216,10 @@
<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>
<dd>
The palette of the <a href="https://www.ryg.one">RYG</a> community.
</dd>
</dl>
</dd>
<dt>Fonts</dt>
@ -935,7 +940,7 @@
</section>
<section class="panel box" id="panel-code">
<h3>
Code
<u>Code</u>
</h3>
<p>
A <dfn id="dfn-code">code</dfn> element denotes that its contents are some kind of <b>code</b> (probably belonging to a programming language).
@ -956,7 +961,7 @@
</section>
<section class="panel box" id="panel-sample">
<h3>
Sample input and output
<u>K</u>ey<u>b</u>oar<u>d</u> input and <u>samp</u>le output
</h3>
<p>
<dfn id="dfn-sample-input">Input samples</dfn> and <dfn id="dfn-sample-output">output samples</dfn> from a computer have elements which denote them, and are formatted appropriately.

2
examples/index.js
View file

@ -122,4 +122,4 @@ function selectColor(name, bgsrc) {
}
enableChanges()
enableChanges()

BIN
examples/rygbg.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 369 KiB

9
src/rulesets/classic.less
View file

@ -8,6 +8,9 @@
& {
// Sets the border radius of all panels
--b-border-radius: 8px;
// Set the shadow drawn on element placed directly on the background
--b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c];
}
&, @{all} {
@ -17,7 +20,7 @@
// Give headers a slight shadow so they are easier to read outside of panels
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
text-shadow: 2px 2px 4px .hsl-group(background)[@c];
text-shadow: var(--b-outer-shadow);
}
// But do not give it to headers inside panels
@ -31,7 +34,7 @@
border-radius: var(--b-border-radius);
// And a shadow effect
box-shadow: 2px 2px 4px .hsl-group(background)[@c];
box-shadow: var(--b-outer-shadow);
// Do not give the same effects to nested panels
@{panel} {
@ -78,7 +81,7 @@
border-radius: 0;
// Minimize the visibility of the caption's box shadow to prevent overlap with the table itself
box-shadow: 0.0625em 0 0.25em .hsl-group(background)[@c];
box-shadow: var(--b-outer-shadow);
}
}

38
src/rulesets/colors/colors-royaldawn.less Normal file
View file

@ -0,0 +1,38 @@
/*
* Bluelib Royal Dawn Colors
* by <me@steffo.eu>
*/
@{bluelib} {
.create-hsl-group(background; 31deg; 100%; 10%);
.create-hsl-group(foreground; 46deg; 97%; 85%);
.create-hsl-group(primary; 0deg; 0%; 100%);
.create-hsl-group(link; 195deg; 97%; 47%);
.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.750;
}
}
body {
background-image: linear-gradient(90deg, #E76608, #3C247F);
}

7
src/rulesets/glass.less
View file

@ -9,21 +9,22 @@
--b-panel-blur: 16px;
// Set the opacity of the glass panels
--b-panel-opacity: 0.075;
--b-panel-initial-opacity: 0.300;
--b-panel-nested-opacity: 0.075;
}
// Ensure that browsers not supporting backdrop-filter do not apply this style
@supports (backdrop-filter: blur(var(--b-panel-blur))) {
@{panel}, @{table}@{panel} > @{table-caption} {
background-color: .hsl-group(background; calc(4 * var(--b-panel-opacity)))[@c];
background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c];
backdrop-filter:
blur(var(--b-panel-blur))
hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
;
@{panel} {
background-color: .hsl-group(current; var(--b-panel-opacity))[@c];
background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
backdrop-filter: none;
}
}