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

Convert indentation to tabs

Browse source
This commit is contained in:
Steffo 2023-05-22 19:08:29 +02:00
parent 0c95bd2b3f
commit 7dc64b44cb
Signed by: steffo
GPG key ID: 2A24051445686895
20 changed files with 3513 additions and 3370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.editorconfig Normal file
View file

@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = tab
insert_final_newline = true
tab_width = 4

20
.vscode/launch.json vendored
View file

@ -1,12 +1,12 @@
{ {
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"name": "Preview example page", "name": "Preview example page",
"type": "firefox", "type": "firefox",
"request": "launch", "request": "launch",
"reAttach": true, "reAttach": true,
"file": "${workspaceFolder}/examples/index.html", "file": "${workspaceFolder}/examples/index.html"
}, }
] ]
} }

24
.vscode/settings.json vendored
View file

@ -1,14 +1,14 @@
{ {
"files.exclude": { "files.exclude": {
"**/.git": true, "**/.git": true,
"**/.svn": true, "**/.svn": true,
"**/.hg": true, "**/.hg": true,
"**/CVS": true, "**/CVS": true,
"**/.DS_Store": true, "**/.DS_Store": true,
"**/Thumbs.db": true, "**/Thumbs.db": true,
".idea": true, ".idea": true,
"dist": true, "dist": true,
"node_modules": true, "node_modules": true,
".nojekyll": true, ".nojekyll": true
} }
} }

4
examples/index.css
View file

@ -1,7 +1,7 @@
#body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel { #body :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
min-width: 360px; min-width: 360px;
} }
#body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel { #body .panel :is(.chapter-1, .chapter-2, .chapter-3, .chapter-4, .chapter-5, .chapter-6, .chapter-7, .chapter-8, .chapter-9) > .panel {
min-width: unset; min-width: unset;
} }

3690
examples/index.html
View file

File diff suppressed because it is too large Load diff

158
examples/index.js
View file

@ -4,10 +4,10 @@
* @returns {boolean} `true` if the rendering is complete, `false` otherwise. * @returns {boolean} `true` if the rendering is complete, `false` otherwise.
*/ */
function isLessDone() { function isLessDone() {
const lessSheets = document.querySelectorAll('link[rel="stylesheet/less"]') const lessSheets = document.querySelectorAll("link[rel=\"stylesheet/less\"]")
const cssSheets = document.querySelectorAll('style') const cssSheets = document.querySelectorAll("style")
return lessSheets.length === cssSheets.length return lessSheets.length === cssSheets.length
} }
@ -17,19 +17,19 @@ function isLessDone() {
* @returns {Promise<void>} Awaitable that waits until {@link isLessDone Less is done}. * @returns {Promise<void>} Awaitable that waits until {@link isLessDone Less is done}.
*/ */
async function sleepUntilLessIsDone() { async function sleepUntilLessIsDone() {
while(!isLessDone()) { while(!isLessDone()) {
await new Promise(resolve => setTimeout(resolve, 100)) await new Promise(resolve => setTimeout(resolve, 100))
} }
} }
const enabledByDefault = [ const enabledByDefault = [
"less:dist-base:root", "less:dist-base:root",
"less:dist-classic:root", "less:dist-classic:root",
"less:dist-glass:root", "less:dist-glass:root",
"less:dist-layouts-center:root", "less:dist-layouts-center:root",
"less:dist-colors-royalblue:root", "less:dist-colors-royalblue:root",
"less:dist-fonts-fira-ghpages:root", "less:dist-fonts-fira-ghpages:root",
] ]
@ -40,86 +40,98 @@ let background = undefined
async function enableChanges() { async function enableChanges() {
await sleepUntilLessIsDone() await sleepUntilLessIsDone()
lessStyles = [...document.styleSheets].filter( lessStyles = [...document.styleSheets].filter(
(s) => s.ownerNode.id.startsWith("less:dist") (s) => s.ownerNode.id.startsWith("less:dist"),
).map( ).map(
(s) => ({[s.ownerNode.id]: s}) (s) => (
).reduce( { [s.ownerNode.id]: s }
(p, c) => ({...p, ...c}), ),
{} ).reduce(
) (p, c) => (
console.debug("Found Less stylesheets:", lessStyles) { ...p, ...c }
),
{},
)
console.debug("Found Less stylesheets:", lessStyles)
lessColors = [...document.styleSheets].filter( lessColors = [...document.styleSheets].filter(
(s) => s.ownerNode.id.startsWith("less:dist-colors") (s) => s.ownerNode.id.startsWith("less:dist-colors"),
).map( ).map(
(s) => ({[s.ownerNode.id]: s}) (s) => (
).reduce( { [s.ownerNode.id]: s }
(p, c) => ({...p, ...c}), ),
{} ).reduce(
) (p, c) => (
console.debug("Found Less colors:", lessColors) { ...p, ...c }
),
{},
)
console.debug("Found Less colors:", lessColors)
lessFonts = [...document.styleSheets].filter( lessFonts = [...document.styleSheets].filter(
(s) => s.ownerNode.id.startsWith("less:dist-fonts") (s) => s.ownerNode.id.startsWith("less:dist-fonts"),
).map( ).map(
(s) => ({[s.ownerNode.id]: s}) (s) => (
).reduce( { [s.ownerNode.id]: s }
(p, c) => ({...p, ...c}), ),
{} ).reduce(
) (p, c) => (
console.debug("Found Less fonts:", lessFonts) { ...p, ...c }
),
{},
)
console.debug("Found Less fonts:", lessFonts)
background = document.querySelector(".layout-center-background") background = document.querySelector(".layout-center-background")
console.debug("Found background:", background) console.debug("Found background:", background)
for(const [k, v] of Object.entries(lessStyles)) { for(const [k, v] of Object.entries(lessStyles)) {
v.disabled = !enabledByDefault.includes(k) v.disabled = !enabledByDefault.includes(k)
} }
for(const input of document.querySelectorAll(".ruleset-toggle")) { for(const input of document.querySelectorAll(".ruleset-toggle")) {
input.disabled = false input.disabled = false
input.parentElement.classList.remove("fade") input.parentElement.classList.remove("fade")
} }
} }
function toggleStyle(name) { function toggleStyle(name) {
if(lessStyles === undefined) { if(lessStyles === undefined) {
console.error("Less stylesheets are not yet available.") console.error("Less stylesheets are not yet available.")
return return
} }
const style = lessStyles[name] const style = lessStyles[name]
if(style === undefined) { if(style === undefined) {
console.error("No such Less stylesheet.") console.error("No such Less stylesheet.")
return return
} }
style.disabled = !style.disabled style.disabled = !style.disabled
} }
function selectColor(name, bgsrc) { function selectColor(name, bgsrc) {
if(lessColors === undefined) { if(lessColors === undefined) {
console.error("Less stylesheets are not yet available.") console.error("Less stylesheets are not yet available.")
return return
} }
const style = lessStyles[name] const style = lessStyles[name]
if(style === undefined) { if(style === undefined) {
console.error("No such Less stylesheet.") console.error("No such Less stylesheet.")
return return
} }
for(const c of Object.values(lessColors)) { for(const c of Object.values(lessColors)) {
c.disabled = true c.disabled = true
} }
style.disabled = false style.disabled = false
background.src = bgsrc background.src = bgsrc
} }

14
index.html
View file

@ -1,9 +1,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="refresh" content="0; url=examples/index.html" /> <meta http-equiv="refresh" content="0; url=examples/index.html"/>
<title>Redirecting...</title> <title>Redirecting...</title>
</head> </head>
<body> <body>
Redirecting to <a href="examples/index.html">the Bluelib examples</a>... Redirecting to <a href="examples/index.html">the Bluelib examples</a>...
</body> </body>
</html> </html>

120
package.json
View file

@ -1,62 +1,62 @@
{ {
"name": "@steffo/bluelib", "name": "@steffo/bluelib",
"version": "8.1.0", "version": "8.1.0",
"description": "A stylesheet that supports fast dynamic recoloring via CSS variables", "description": "A stylesheet that supports fast dynamic recoloring via CSS variables",
"scripts": { "scripts": {
"dev": "web-dev-server --watch --port 8080", "dev": "web-dev-server --watch --port 8080",
"build": "cd dist && ./_build.sh && cd .." "build": "cd dist && ./_build.sh && cd .."
}, },
"keywords": [ "keywords": [
"bluelib", "bluelib",
"css", "css",
"less" "less"
], ],
"homepage": "https://gh.steffo.eu/bluelib/", "homepage": "https://gh.steffo.eu/bluelib/",
"bugs": { "bugs": {
"url": "https://github.com/Steffo99/bluelib/issues", "url": "https://github.com/Steffo99/bluelib/issues",
"email": "me@steffo.eu" "email": "me@steffo.eu"
}, },
"author": { "author": {
"name": "Stefano Pigozzi", "name": "Stefano Pigozzi",
"email": "me@steffo.eu", "email": "me@steffo.eu",
"url": "https://www.steffo.eu" "url": "https://www.steffo.eu"
}, },
"contributors": [ "contributors": [
{ {
"name": "Stefano Pigozzi", "name": "Stefano Pigozzi",
"email": "me@steffo.eu", "email": "me@steffo.eu",
"url": "https://www.steffo.eu" "url": "https://www.steffo.eu"
}, },
{ {
"name": "Lorenzo Balugani", "name": "Lorenzo Balugani",
"email": "lorenzo.balugani@fermitech.info", "email": "lorenzo.balugani@fermitech.info",
"url": "https://www.fermitech.info" "url": "https://www.fermitech.info"
}, },
{ {
"name": "Francesca Peres", "name": "Francesca Peres",
"email": "Viktya@users.noreply.github.com" "email": "Viktya@users.noreply.github.com"
} }
], ],
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
"url": "https://ko-fi.com/steffo" "url": "https://ko-fi.com/steffo"
} }
], ],
"files": [ "files": [
"dist/**/*.less", "dist/**/*.less",
"dist/**/*.css", "dist/**/*.css",
"dist/**/*.css.map" "dist/**/*.css.map"
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/Steffo99/bluelib.git" "url": "https://github.com/Steffo99/bluelib.git"
}, },
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"private": false, "private": false,
"devDependencies": { "devDependencies": {
"@web/dev-server": "^0.1.34", "@web/dev-server": "^0.1.34",
"less": "^4.1.3", "less": "^4.1.3",
"less-plugin-clean-css": "^1.5.1" "less-plugin-clean-css": "^1.5.1"
} }
} }

24
src/mixins/fonts.less
View file

@ -7,12 +7,12 @@
/// ///
/// See `.use-font-group`. /// See `.use-font-group`.
.create-font-group(@name; @style; @variant; @weight; @stretch; @size; @height; @family) { .create-font-group(@name; @style; @variant; @weight; @stretch; @size; @height; @family) {
--bfont-@{name}-style: @style; --bfont-@{name}-style: @style;
--bfont-@{name}-variant: @variant; --bfont-@{name}-variant: @variant;
--bfont-@{name}-weight: @weight; --bfont-@{name}-weight: @weight;
--bfont-@{name}-stretch: @stretch; --bfont-@{name}-stretch: @stretch;
--bfont-@{name}-height: @height; --bfont-@{name}-height: @height;
--bfont-@{name}-family: @family; --bfont-@{name}-family: @family;
} }
@ -20,10 +20,10 @@
/// ///
/// See `.create-font-group`. /// See `.create-font-group`.
.use-font-group(@name) { .use-font-group(@name) {
font-style: var(~"--bfont-@{name}-style"); font-style: var(~"--bfont-@{name}-style");
font-variant: var(~"--bfont-@{name}-variant"); font-variant: var(~"--bfont-@{name}-variant");
font-weight: var(~"--bfont-@{name}-weight"); font-weight: var(~"--bfont-@{name}-weight");
font-stretch: var(~"--bfont-@{name}-stretch"); font-stretch: var(~"--bfont-@{name}-stretch");
line-height: var(~"--bfont-@{name}-height"); line-height: var(~"--bfont-@{name}-height");
font-family: var(~"--bfont-@{name}-family"); font-family: var(~"--bfont-@{name}-family");
} }

38
src/mixins/hsl.less
View file

@ -7,17 +7,17 @@
/// Set the CSS variables of a certain color group to the given values. /// Set the CSS variables of a certain color group to the given values.
.create-hsl-group(@name; @hue; @saturation; @lightness) { .create-hsl-group(@name; @hue; @saturation; @lightness) {
--bhsl-@{name}-hue: @hue; --bhsl-@{name}-hue: @hue;
--bhsl-@{name}-saturation: @saturation; --bhsl-@{name}-saturation: @saturation;
--bhsl-@{name}-lightness: @lightness; --bhsl-@{name}-lightness: @lightness;
} }
/// Set the CSS variables of a certain color group to the ones of another. /// Set the CSS variables of a certain color group to the ones of another.
.map-hsl-group(@to; @from) { .map-hsl-group(@to; @from) {
--bhsl-@{to}-hue: var(~"--bhsl-@{from}-hue"); --bhsl-@{to}-hue: var(~"--bhsl-@{from}-hue");
--bhsl-@{to}-saturation: var(~"--bhsl-@{from}-saturation"); --bhsl-@{to}-saturation: var(~"--bhsl-@{from}-saturation");
--bhsl-@{to}-lightness: var(~"--bhsl-@{from}-lightness"); --bhsl-@{to}-lightness: var(~"--bhsl-@{from}-lightness");
} }
@ -27,25 +27,17 @@
/// ///
/// For example, acceptable parameters may be: "+ 10deg", "/ 2", "* 1000", "- var(--something)", and so on. /// For example, acceptable parameters may be: "+ 10deg", "/ 2", "* 1000", "- var(--something)", and so on.
.hsl-group(@name) { .hsl-group(@name) {
@c: hsl( @c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation") var(~"--bhsl-@{name}-lightness"));
var(~"--bhsl-@{name}-hue")
var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-lightness")
);
} }
.hsl-group(@name; @alpha) { .hsl-group(@name; @alpha) {
@c: hsl( @c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-lightness")
var(~"--bhsl-@{name}-saturation") / @alpha);
var(~"--bhsl-@{name}-lightness")
/ @alpha
);
} }
.hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) { .hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) {
@c: hsl( @c: hsl(calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}") calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}") calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}")
calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}") / @alpha);
calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}")
/ @alpha
);
} }

1787
src/rulesets/base.less
View file

File diff suppressed because it is too large Load diff

258
src/rulesets/classic.less
View file

@ -5,164 +5,166 @@
@{bluelib} { @{bluelib} {
& { & {
// Sets the border radius of all panels // Sets the border radius of all panels
--b-border-radius: 8px; --b-border-radius: 8px;
// Set the shadow drawn on element placed directly on the background // Set the shadow drawn on element placed directly on the background
--b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c]; --b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c];
} }
&, @{all} { &, @{all} {
// Lower the default border opacity // Lower the default border opacity
border-color: .hsl-group(current; 0.15)[@c]; border-color: .hsl-group(current; 0.15)[@c];
} }
// Give headers a slight shadow so they are easier to read outside of panels // Give headers a slight shadow so they are easier to read outside of panels
@{header} { @{header} {
text-shadow: var(--b-outer-shadow); text-shadow: var(--b-outer-shadow);
} }
// But do not give it to headers inside panels // But do not give it to headers inside panels
@{panel} { @{panel} {
@{header} { @{header} {
text-shadow: none; text-shadow: none;
} }
} }
@{panel}, @{table}@{panel} > @{table-caption} { @{panel}, @{table}@{panel} > @{table-caption} {
border-radius: var(--b-border-radius); border-radius: var(--b-border-radius);
// And a shadow effect // And a shadow effect
box-shadow: var(--b-outer-shadow); box-shadow: var(--b-outer-shadow);
// Do not give the same effects to nested panels // Do not give the same effects to nested panels
@{panel} { @{panel} {
background-color: .hsl-group(current; 0.075)[@c]; background-color: .hsl-group(current; 0.075)[@c];
backdrop-filter: none; backdrop-filter: none;
box-shadow: none; box-shadow: none;
} }
} }
// Make sure mark still works, even considering specificity // Make sure mark still works, even considering specificity
@{modifier-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c]; background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
} }
} }
} }
// Make sure to-do still works, even considering specificity // Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} { @{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c]; background-color: .hsl-group(todo-background)[@c];
border-color: .hsl-group(current)[@c]; border-color: .hsl-group(current)[@c];
// Make the modifier inherit properly // Make the modifier inherit properly
@{panel} { @{panel} {
background-color: .hsl-group(todo-background)[@c]; background-color: .hsl-group(todo-background)[@c];
border-color: .hsl-group(current)[@c]; border-color: .hsl-group(current)[@c];
} }
} }
// Fixup table panels // Fixup table panels
@{table}@{panel} { @{table}@{panel} {
// Ensure table panels have no rounded borders // Ensure table panels have no rounded borders
border-radius: 0; border-radius: 0;
> @{table-caption} { > @{table-caption} {
// And ensure neither do table panel captions // And ensure neither do table panel captions
border-radius: 0; border-radius: 0;
// Minimize the visibility of the caption's box shadow to prevent overlap with the table itself // Minimize the visibility of the caption's box shadow to prevent overlap with the table itself
box-shadow: var(--b-outer-shadow); box-shadow: var(--b-outer-shadow);
} }
} }
@{table}@{panel-dialog} > @{table-caption} { @{table}@{panel-dialog} > @{table-caption} {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
@{input} { @{input} {
background-color: .hsl-group(current; 0.025)[@c]; background-color: .hsl-group(current; 0.025)[@c];
&:hover { &:hover {
background-color: .hsl-group(current; 0.05)[@c]; background-color: .hsl-group(current; 0.05)[@c];
} }
&:active { &:active {
background-color: .hsl-group(current; 0.075)[@c]; background-color: .hsl-group(current; 0.075)[@c];
} }
} }
@{input-field}, @{input-select} { @{input-field}, @{input-select} {
border-radius: var(--b-border-radius) var(--b-border-radius) 0 0; border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
} }
@{input-area}, @{input-multiselect} {
border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
}
@{input-button} {
border-radius: var(--b-border-radius);
}
@{list-unordered}, @{list-ordered} { @{input-area}, @{input-multiselect} {
> *::marker { border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
color: .hsl-group(current; 0.5)[@c]; }
}
}
@{glossary-summary} { @{input-button} {
color: .hsl-group(current; 0.7)[@c]; border-radius: var(--b-border-radius);
}
&::marker { @{list-unordered}, @{list-ordered} {
color: .hsl-group(current; 0.5)[@c]; > *::marker {
} color: .hsl-group(current; 0.5)[@c];
}
}
&:hover { @{glossary-summary} {
color: .hsl-group(current)[@c]; color: .hsl-group(current; 0.7)[@c];
}
&:hover::marker { &::marker {
color: .hsl-group(current; 0.7)[@c]; color: .hsl-group(current; 0.5)[@c];
} }
&:active::marker { &:hover {
color: .hsl-group(current)[@c]; color: .hsl-group(current)[@c];
} }
}
// FIXME: may not work well for lighter themes &:hover::marker {
@{text-anchor} { color: .hsl-group(current; 0.7)[@c];
&:hover { }
color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 20%"; 1.0)[@c];
}
&:active { &:active::marker {
color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 40%"; 1.0)[@c]; color: .hsl-group(current)[@c];
} }
} }
@{text-input}, @{text-output} { // FIXME: may not work well for lighter themes
border-radius: calc(var(--b-border-radius) / 4); @{text-anchor} {
} &:hover {
color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 20%"; 1.0)[@c];
}
@{text-variable} { &:active {
color: .hsl-group(current; 0.7)[@c]; color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 40%"; 1.0)[@c];
} }
}
@{text-quote} { @{text-input}, @{text-output} {
&::before, &::after { border-radius: calc(var(--b-border-radius) / 4);
color: .hsl-group(current; 0.7)[@c]; }
}
}
@{text-ruby-annotation} { @{text-variable} {
color: .hsl-group(current; 0.7)[@c]; color: .hsl-group(current; 0.7)[@c];
} }
@{text-quote} {
&::before, &::after {
color: .hsl-group(current; 0.7)[@c];
}
}
@{text-ruby-annotation} {
color: .hsl-group(current; 0.7)[@c];
}
} }

36
src/rulesets/colors/colors-amber.less
View file

@ -5,27 +5,27 @@
*/ */
@{bluelib} { @{bluelib} {
.create-hsl-group(background; 0deg; 8%; 14%); .create-hsl-group(background; 0deg; 8%; 14%);
.create-hsl-group(foreground; 19deg; 91%; 46%); .create-hsl-group(foreground; 19deg; 91%; 46%);
.create-hsl-group(primary; 0deg; 42%; 94%); .create-hsl-group(primary; 0deg; 42%; 94%);
.create-hsl-group(link; 50deg; 100%; 80%); .create-hsl-group(link; 50deg; 100%; 80%);
.create-hsl-group(mark-foreground; 19deg; 64%; 14%); .create-hsl-group(mark-foreground; 19deg; 64%; 14%);
.create-hsl-group(mark-background; 19deg; 100%; 81%); .create-hsl-group(mark-background; 19deg; 100%; 81%);
.create-hsl-group(todo-foreground; 43deg; 100%; 65%); .create-hsl-group(todo-foreground; 43deg; 100%; 65%);
.create-hsl-group(todo-background; 204deg; 11%; 18%); .create-hsl-group(todo-background; 204deg; 11%; 18%);
.create-hsl-group(sample-input; 0deg; 100%; 0%); .create-hsl-group(sample-input; 0deg; 100%; 0%);
.create-hsl-group(sample-output; 0deg; 100%; 100%); .create-hsl-group(sample-output; 0deg; 100%; 100%);
.create-hsl-group(red; 0deg; 100%; 66%); .create-hsl-group(red; 0deg; 100%; 66%);
.create-hsl-group(yellow; 60deg; 100%; 66%); .create-hsl-group(yellow; 60deg; 100%; 66%);
.create-hsl-group(green; 120deg; 100%; 66%); .create-hsl-group(green; 120deg; 100%; 66%);
.create-hsl-group(cyan; 180deg; 100%; 66%); .create-hsl-group(cyan; 180deg; 100%; 66%);
.create-hsl-group(blue; 240deg; 100%; 66%); .create-hsl-group(blue; 240deg; 100%; 66%);
.create-hsl-group(magenta; 300deg; 100%; 66%); .create-hsl-group(magenta; 300deg; 100%; 66%);
.map-hsl-group(inserted; green); .map-hsl-group(inserted; green);
.map-hsl-group(deleted; red); .map-hsl-group(deleted; red);
} }

86
src/rulesets/colors/colors-pixeldawn.less
View file

@ -4,58 +4,58 @@
*/ */
@{bluelib} { @{bluelib} {
.create-hsl-group(background; 14deg; 85%; 74%); .create-hsl-group(background; 14deg; 85%; 74%);
.create-hsl-group(foreground; 340deg; 40%; 20%); .create-hsl-group(foreground; 340deg; 40%; 20%);
.create-hsl-group(primary; 220deg; 92%; 11%); .create-hsl-group(primary; 220deg; 92%; 11%);
.create-hsl-group(link; 237deg; 80%; 41%); .create-hsl-group(link; 237deg; 80%; 41%);
.create-hsl-group(mark-foreground; 194deg; 64%; 14%); .create-hsl-group(mark-foreground; 194deg; 64%; 14%);
.create-hsl-group(mark-background; 194deg; 100%; 81%); .create-hsl-group(mark-background; 194deg; 100%; 81%);
.create-hsl-group(todo-foreground; 43deg; 100%; 65%); .create-hsl-group(todo-foreground; 43deg; 100%; 65%);
.create-hsl-group(todo-background; 204deg; 11%; 18%); .create-hsl-group(todo-background; 204deg; 11%; 18%);
.create-hsl-group(sample-input; 0deg; 100%; 0%); .create-hsl-group(sample-input; 0deg; 100%; 0%);
.create-hsl-group(sample-output; 0deg; 100%; 100%); .create-hsl-group(sample-output; 0deg; 100%; 100%);
.create-hsl-group(red; 0deg; 100%; 15%); .create-hsl-group(red; 0deg; 100%; 15%);
.create-hsl-group(yellow; 60deg; 100%; 15%); .create-hsl-group(yellow; 60deg; 100%; 15%);
.create-hsl-group(green; 120deg; 100%; 15%); .create-hsl-group(green; 120deg; 100%; 15%);
.create-hsl-group(cyan; 180deg; 100%; 15%); .create-hsl-group(cyan; 180deg; 100%; 15%);
.create-hsl-group(blue; 240deg; 100%; 15%); .create-hsl-group(blue; 240deg; 100%; 15%);
.create-hsl-group(magenta; 300deg; 100%; 15%); .create-hsl-group(magenta; 300deg; 100%; 15%);
.map-hsl-group(inserted; green); .map-hsl-group(inserted; green);
.map-hsl-group(deleted; red); .map-hsl-group(deleted; red);
&:is(@{bluelib}) { &:is(@{bluelib}) {
--b-panel-initial-opacity: 0.500; --b-panel-initial-opacity: 0.500;
--b-border-radius: 0; --b-border-radius: 0;
--b-outer-shadow: none; --b-outer-shadow: none;
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
color: white; color: white;
text-shadow: 2px 2px 0 #9832ce; text-shadow: 2px 2px 0 #9832ce;
} }
@{panel} { @{panel} {
@{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} { @{header-1}, @{header-2}, @{header-3}, @{header-4}, @{header-5}, @{header-6} {
color: .hsl-group(current)[@c]; color: .hsl-group(current)[@c];
text-shadow: none; text-shadow: none;
} }
} }
} }
/* /*
@{panel} { @{panel} {
@{panel} { @{panel} {
background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important; background-color: .hsl-group(background; 0; - 8%; - 5%; 1.0)[@c] !important;
@{panel} { @{panel} {
background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important; background-color: .hsl-group(background; 0; - 16%; - 10%; 1.0)[@c] !important;
} }
} }
} }
*/ */
} }

38
src/rulesets/colors/colors-purplestar.less
View file

@ -4,28 +4,28 @@
*/ */
@{bluelib} { @{bluelib} {
.create-hsl-group(background; 262deg; 85%; 13%); .create-hsl-group(background; 262deg; 85%; 13%);
.create-hsl-group(foreground; 262deg; 100%; 78%); .create-hsl-group(foreground; 262deg; 100%; 78%);
.create-hsl-group(primary; 53deg; 100%; 100%); .create-hsl-group(primary; 53deg; 100%; 100%);
// .create-hsl-group(link; 292deg; 65%; 50%); // .create-hsl-group(link; 292deg; 65%; 50%);
.create-hsl-group(link; 53deg; 100%; 72%); .create-hsl-group(link; 53deg; 100%; 72%);
.create-hsl-group(mark-foreground; 53deg; 64%; 14%); .create-hsl-group(mark-foreground; 53deg; 64%; 14%);
.create-hsl-group(mark-background; 53deg; 100%; 72%); .create-hsl-group(mark-background; 53deg; 100%; 72%);
.create-hsl-group(todo-foreground; 43deg; 100%; 65%); .create-hsl-group(todo-foreground; 43deg; 100%; 65%);
.create-hsl-group(todo-background; 204deg; 11%; 18%); .create-hsl-group(todo-background; 204deg; 11%; 18%);
.create-hsl-group(sample-input; 0deg; 100%; 0%); .create-hsl-group(sample-input; 0deg; 100%; 0%);
.create-hsl-group(sample-output; 0deg; 100%; 100%); .create-hsl-group(sample-output; 0deg; 100%; 100%);
.create-hsl-group(red; 0deg; 100%; 75%); .create-hsl-group(red; 0deg; 100%; 75%);
.create-hsl-group(yellow; 60deg; 100%; 75%); .create-hsl-group(yellow; 60deg; 100%; 75%);
.create-hsl-group(green; 120deg; 100%; 75%); .create-hsl-group(green; 120deg; 100%; 75%);
.create-hsl-group(cyan; 180deg; 100%; 75%); .create-hsl-group(cyan; 180deg; 100%; 75%);
.create-hsl-group(blue; 240deg; 100%; 75%); .create-hsl-group(blue; 240deg; 100%; 75%);
.create-hsl-group(magenta; 300deg; 100%; 75%); .create-hsl-group(magenta; 300deg; 100%; 75%);
.map-hsl-group(inserted; green); .map-hsl-group(inserted; green);
.map-hsl-group(deleted; red); .map-hsl-group(deleted; red);
} }

36
src/rulesets/colors/colors-royalblue.less
View file

@ -4,27 +4,27 @@
*/ */
@{bluelib} { @{bluelib} {
.create-hsl-group(background; 224deg; 64%; 14%); .create-hsl-group(background; 224deg; 64%; 14%);
.create-hsl-group(foreground; 212deg; 100%; 81%); .create-hsl-group(foreground; 212deg; 100%; 81%);
.create-hsl-group(primary; 0deg; 0%; 100%); .create-hsl-group(primary; 0deg; 0%; 100%);
.create-hsl-group(link; 180deg; 100%; 40%); .create-hsl-group(link; 180deg; 100%; 40%);
.create-hsl-group(mark-foreground; 32deg; 64%; 14%); .create-hsl-group(mark-foreground; 32deg; 64%; 14%);
.create-hsl-group(mark-background; 32deg; 100%; 81%); .create-hsl-group(mark-background; 32deg; 100%; 81%);
.create-hsl-group(todo-foreground; 43deg; 100%; 65%); .create-hsl-group(todo-foreground; 43deg; 100%; 65%);
.create-hsl-group(todo-background; 204deg; 11%; 18%); .create-hsl-group(todo-background; 204deg; 11%; 18%);
.create-hsl-group(sample-input; 0deg; 100%; 0%); .create-hsl-group(sample-input; 0deg; 100%; 0%);
.create-hsl-group(sample-output; 0deg; 100%; 100%); .create-hsl-group(sample-output; 0deg; 100%; 100%);
.create-hsl-group(red; 0deg; 100%; 75%); .create-hsl-group(red; 0deg; 100%; 75%);
.create-hsl-group(yellow; 60deg; 100%; 75%); .create-hsl-group(yellow; 60deg; 100%; 75%);
.create-hsl-group(green; 120deg; 100%; 75%); .create-hsl-group(green; 120deg; 100%; 75%);
.create-hsl-group(cyan; 180deg; 100%; 75%); .create-hsl-group(cyan; 180deg; 100%; 75%);
.create-hsl-group(blue; 240deg; 100%; 75%); .create-hsl-group(blue; 240deg; 100%; 75%);
.create-hsl-group(magenta; 300deg; 100%; 75%); .create-hsl-group(magenta; 300deg; 100%; 75%);
.map-hsl-group(inserted; green); .map-hsl-group(inserted; green);
.map-hsl-group(deleted; red); .map-hsl-group(deleted; red);
} }

388
src/rulesets/fonts/fonts-fira-ghpages.less
View file

@ -8,260 +8,260 @@
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-Hair.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-Hair.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-Hair.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-Hair.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-Hair.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-Hair.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-Hair.ttf') format('truetype');
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-HairItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-HairItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-HairItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-HairItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-HairItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-HairItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-HairItalic.ttf') format('truetype');
font-weight: 100; font-weight: 100;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLight.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLight.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLight.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLight.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLight.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLight.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLight.ttf') format('truetype');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-UltraLightItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLightItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-UltraLightItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLightItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-UltraLightItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLightItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-UltraLightItalic.ttf') format('truetype');
font-weight: 200; font-weight: 200;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-Light.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-Light.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-Light.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-Light.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-Light.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-Light.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-Light.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-LightItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-LightItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-LightItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-LightItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-LightItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-Regular.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-Regular.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-Regular.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-Regular.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-Italic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-Italic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-Italic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-Italic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-Italic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-Italic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-Italic.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-Medium.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-Medium.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-Medium.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-Medium.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-Medium.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-Medium.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-Medium.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-MediumItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-MediumItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-MediumItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-MediumItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-MediumItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-MediumItalic.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBold.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBold.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBold.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBold.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBold.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBold.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-SemiBoldItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBoldItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-SemiBoldItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBoldItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-SemiBoldItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBoldItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-Bold.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-Bold.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-Bold.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-Bold.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-Bold.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-Bold.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-Bold.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-BoldItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-BoldItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-BoldItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBold.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBold.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBold.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBold.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBold.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBold.ttf') format('truetype');
font-weight: 800; font-weight: 800;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-ExtraBoldItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBoldItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-ExtraBoldItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBoldItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-ExtraBoldItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800; font-weight: 800;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-Heavy.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-Heavy.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-Heavy.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-Heavy.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-Heavy.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-Heavy.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-Heavy.ttf') format('truetype');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Sans'; font-family: 'Fira Sans';
src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraSans-HeavyItalic.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraSans-HeavyItalic.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraSans-HeavyItalic.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraSans-HeavyItalic.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraSans-HeavyItalic.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraSans-HeavyItalic.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraSans-HeavyItalic.ttf') format('truetype');
font-weight: 900; font-weight: 900;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Mono'; font-family: 'Fira Mono';
src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraMono-Regular.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraMono-Regular.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraMono-Regular.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraMono-Regular.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraMono-Regular.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraMono-Regular.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraMono-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Fira Mono'; font-family: 'Fira Mono';
src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot'); src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot');
src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot') format('embedded-opentype'), src: url('https://mozilla.github.io/Fira/eot/FiraMono-Bold.eot') format('embedded-opentype'),
url('https://mozilla.github.io/Fira/woff2/FiraMono-Bold.woff2') format('woff2'), url('https://mozilla.github.io/Fira/woff2/FiraMono-Bold.woff2') format('woff2'),
url('https://mozilla.github.io/Fira/woff/FiraMono-Bold.woff') format('woff'), url('https://mozilla.github.io/Fira/woff/FiraMono-Bold.woff') format('woff'),
url('https://mozilla.github.io/Fira/ttf/FiraMono-Bold.ttf') format('truetype'); url('https://mozilla.github.io/Fira/ttf/FiraMono-Bold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@{bluelib} { @{bluelib} {
// @name; @style; @variant; @weight;@stretch; @size; @height; @family // @name; @style; @variant; @weight;@stretch; @size; @height; @family
.create-font-group( text; normal; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(text; normal; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( header; normal; normal; 600; normal; regular; 1.7; "Fira Sans", sans-serif); .create-font-group(header; normal; normal; 600; normal; regular; 1.7; "Fira Sans", sans-serif);
.create-font-group( code; normal; normal; 400; normal; regular; 1.3; "Fira Mono", monospace); .create-font-group(code; normal; normal; 400; normal; regular; 1.3; "Fira Mono", monospace);
.create-font-group( boldcode; normal; normal; 600; normal; regular; 1.3; "Fira Mono", monospace); .create-font-group(boldcode; normal; normal; 600; normal; regular; 1.3; "Fira Mono", monospace);
.create-font-group( term; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(term; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( summary; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(summary; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group(idiomatic; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(idiomatic; italic; normal; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( emphasis; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(emphasis; italic; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group(attention; normal; normal; 600; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(attention; normal; normal; 600; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( strong; normal; normal; 900; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(strong; normal; normal; 900; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( variable; normal; normal; 300; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(variable; normal; normal; 300; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( citation; normal; small-caps; 400; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(citation; normal; small-caps; 400; normal; regular; 1.3; "Fira Sans", sans-serif);
.create-font-group( label; normal; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif); .create-font-group(label; normal; normal; 500; normal; regular; 1.3; "Fira Sans", sans-serif);
} }

20
src/rulesets/fun.less
View file

@ -5,21 +5,21 @@
//noinspection CssInvalidAtRule //noinspection CssInvalidAtRule
@property --bhsl-current-hue { @property --bhsl-current-hue {
syntax: '<angle>'; syntax: '<angle>';
initial-value: 0deg; initial-value: 0deg;
inherits: true; inherits: true;
} }
@keyframes rainbow { @keyframes rainbow {
0% { 0% {
--bhsl-current-hue: 0deg; --bhsl-current-hue: 0deg;
} }
100% { 100% {
--bhsl-current-hue: 360deg; --bhsl-current-hue: 360deg;
} }
} }
@{animation-rainbow} { @{animation-rainbow} {
animation: 2s linear infinite rainbow; animation: 2s linear infinite rainbow;
} }

107
src/rulesets/glass.less
View file

@ -4,71 +4,66 @@
*/ */
@{bluelib} { @{bluelib} {
& { & {
// Sets the backdrop-filter blur radius of all panels // Sets the backdrop-filter blur radius of all panels
--b-panel-blur: 16px; --b-panel-blur: 16px;
// Set the opacity of the glass panels // Set the opacity of the glass panels
--b-panel-initial-opacity: 0.300; --b-panel-initial-opacity: 0.300;
--b-panel-nested-opacity: 0.075; --b-panel-nested-opacity: 0.075;
} }
// Ensure that browsers not supporting backdrop-filter do not apply this style // Ensure that browsers not supporting backdrop-filter do not apply this style
@supports (backdrop-filter: blur(var(--b-panel-blur))) { @supports (backdrop-filter: blur(var(--b-panel-blur))) {
@{panel}, @{table}@{panel} > @{table-caption} { @{panel}, @{table}@{panel} > @{table-caption} {
background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c]; background-color: .hsl-group(background; var(--b-panel-initial-opacity))[@c];
backdrop-filter: backdrop-filter: blur(var(--b-panel-blur)) hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)));
blur(var(--b-panel-blur))
hue-rotate(calc(var(--bhsl-current-hue) - var(--bhsl-foreground-hue)))
;
@{panel} { @{panel} {
background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c]; background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
backdrop-filter: none; backdrop-filter: none;
} }
} }
// Make sure mark still works, even considering specificity // Make sure mark still works, even considering specificity
@{modifier-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
backdrop-filter: none; backdrop-filter: none;
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c]; background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly // Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} { @{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c]; background-color: .hsl-group(mark-background)[@c];
} }
} }
} }
// Make sure to-do still works, even considering specificity // Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} { @{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c]; background-color: .hsl-group(todo-background)[@c];
// Make the modifier inherit properly // Make the modifier inherit properly
@{panel} { @{panel} {
background-color: .hsl-group(todo-background)[@c]; background-color: .hsl-group(todo-background)[@c];
backdrop-filter: none; backdrop-filter: none;
} }
} }
// Make to-do have a glass background too // Make to-do have a glass background too
@{panel}@{modifier-todo} { @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background; 0.3)[@c]; background-color: .hsl-group(todo-background; 0.3)[@c];
backdrop-filter: backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
blur(var(--b-panel-blur)) }
grayscale(100%)
;
}
@{panel} {
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
}
}
} @{panel} {
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
}
}
}
} }