diff --git a/dist/colors-pixeldawn.module.css b/dist/colors-pixeldawn.module.css new file mode 100644 index 0000000..ab099bd --- /dev/null +++ b/dist/colors-pixeldawn.module.css @@ -0,0 +1,63 @@ +/* + * Bluelib Royal Dawn Colors + * by + */ +.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; +} diff --git a/dist/colors-pixeldawn.module.less b/dist/colors-pixeldawn.module.less new file mode 100644 index 0000000..7cdd819 --- /dev/null +++ b/dist/colors-pixeldawn.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-pixeldawn.less"; + diff --git a/dist/colors-pixeldawn.root.css b/dist/colors-pixeldawn.root.css new file mode 100644 index 0000000..0296c76 --- /dev/null +++ b/dist/colors-pixeldawn.root.css @@ -0,0 +1,63 @@ +/* + * Bluelib Royal Dawn Colors + * by + */ +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; +} diff --git a/dist/colors-pixeldawn.root.less b/dist/colors-pixeldawn.root.less new file mode 100644 index 0000000..25a7e14 --- /dev/null +++ b/dist/colors-pixeldawn.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-pixeldawn.less"; + diff --git a/examples/index.html b/examples/index.html index d57c486..828ad71 100644 --- a/examples/index.html +++ b/examples/index.html @@ -15,7 +15,7 @@ - + @@ -31,7 +31,7 @@ Bluelib - +

@@ -189,43 +189,43 @@ Available rulesets

-
+
The base ruleset, providing the layout and basic high contrast theming.
-
+
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
-
+
Made to celebrate the addition of backdrop-filter to Firefox, makes panels have a stained glass background.
-
+
Experimental ruleset with bizzare or buggy but fun rules. Unsupported, do not use in production!
Colors
-
+
Steffo's signature color theme, based upon RYG⁵'s logo colors.
-
+
Nemesis' own color theme, with a "coffee-like" look.
-
+
- The palette of the RYG community. + yes
Fonts
-
+
Font theme based upon Mozilla's Fira font.
@@ -238,11 +238,11 @@ Available selectorsets
-
+
Simple selectors for usage in plain HTML pages, with short and human-friendly class names.
-
+
All selectors use class names, allowing the usage of the target with CSS Modules. Useful for React or similar web app projects.
diff --git a/examples/index.js b/examples/index.js index c25419d..35b02e6 100644 --- a/examples/index.js +++ b/examples/index.js @@ -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", ] diff --git a/examples/pixeldawn-viktya.png b/examples/pixeldawn-viktya.png new file mode 100644 index 0000000..94607c4 Binary files /dev/null and b/examples/pixeldawn-viktya.png differ diff --git a/examples/rygbg.jpg b/examples/rygbg.jpg deleted file mode 100644 index 0c2efc6..0000000 Binary files a/examples/rygbg.jpg and /dev/null differ diff --git a/examples/rygbg.png b/examples/rygbg.png new file mode 100644 index 0000000..94607c4 Binary files /dev/null and b/examples/rygbg.png differ diff --git a/src/rulesets/colors/colors-pixeldawn.less b/src/rulesets/colors/colors-pixeldawn.less new file mode 100644 index 0000000..22c6952 --- /dev/null +++ b/src/rulesets/colors/colors-pixeldawn.less @@ -0,0 +1,40 @@ +/* + * Bluelib Royal Dawn Colors + * by + */ + +@{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; + } +}