diff --git a/dist/classic.module.css b/dist/classic.module.css index 91ee0ca..435f37b 100644 --- a/dist/classic.module.css +++ b/dist/classic.module.css @@ -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; diff --git a/dist/classic.root.css b/dist/classic.root.css index 47c80fc..78fcf3d 100644 --- a/dist/classic.root.css +++ b/dist/classic.root.css @@ -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; diff --git a/dist/colors-royaldawn.module.css b/dist/colors-royaldawn.module.css new file mode 100644 index 0000000..f3da682 --- /dev/null +++ b/dist/colors-royaldawn.module.css @@ -0,0 +1,66 @@ +/* + * Bluelib Royal Dawn Colors + * by + */ +.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); +} diff --git a/dist/colors-royaldawn.module.less b/dist/colors-royaldawn.module.less new file mode 100644 index 0000000..7d0dfb7 --- /dev/null +++ b/dist/colors-royaldawn.module.less @@ -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"; + diff --git a/dist/colors-royaldawn.root.css b/dist/colors-royaldawn.root.css new file mode 100644 index 0000000..6d70832 --- /dev/null +++ b/dist/colors-royaldawn.root.css @@ -0,0 +1,66 @@ +/* + * Bluelib Royal Dawn Colors + * by + */ +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); +} diff --git a/dist/colors-royaldawn.root.less b/dist/colors-royaldawn.root.less new file mode 100644 index 0000000..f5f83c0 --- /dev/null +++ b/dist/colors-royaldawn.root.less @@ -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"; + diff --git a/dist/glass.module.css b/dist/glass.module.css index aa9b7ef..d899ce7 100644 --- a/dist/glass.module.css +++ b/dist/glass.module.css @@ -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, diff --git a/dist/glass.root.css b/dist/glass.root.css index ad79f59..1dd03e2 100644 --- a/dist/glass.root.css +++ b/dist/glass.root.css @@ -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, diff --git a/examples/index.html b/examples/index.html index e5b297c..9ba04db 100644 --- a/examples/index.html +++ b/examples/index.html @@ -15,6 +15,7 @@ + @@ -30,7 +31,7 @@ Bluelib - +

@@ -215,6 +216,10 @@
Nemesis' own color theme, with a "coffee-like" look.
+
+
+ The palette of the RYG community. +
Fonts
@@ -935,7 +940,7 @@

- Code + Code

A code element denotes that its contents are some kind of code (probably belonging to a programming language). @@ -956,7 +961,7 @@

- Sample input and output + Keyboard input and sample output

Input samples and output samples from a computer have elements which denote them, and are formatted appropriately. diff --git a/examples/index.js b/examples/index.js index acd24b5..c25419d 100644 --- a/examples/index.js +++ b/examples/index.js @@ -122,4 +122,4 @@ function selectColor(name, bgsrc) { } -enableChanges() \ No newline at end of file +enableChanges() diff --git a/examples/rygbg.jpg b/examples/rygbg.jpg new file mode 100644 index 0000000..0c2efc6 Binary files /dev/null and b/examples/rygbg.jpg differ diff --git a/src/rulesets/classic.less b/src/rulesets/classic.less index be64a53..61ceab2 100644 --- a/src/rulesets/classic.less +++ b/src/rulesets/classic.less @@ -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); } } diff --git a/src/rulesets/colors/colors-royaldawn.less b/src/rulesets/colors/colors-royaldawn.less new file mode 100644 index 0000000..689766c --- /dev/null +++ b/src/rulesets/colors/colors-royaldawn.less @@ -0,0 +1,38 @@ +/* + * Bluelib Royal Dawn Colors + * by + */ + +@{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); +} \ No newline at end of file diff --git a/src/rulesets/glass.less b/src/rulesets/glass.less index 23cbdb0..8d96d0a 100644 --- a/src/rulesets/glass.less +++ b/src/rulesets/glass.less @@ -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; } }