steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-21 11:14:19 +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

22
.vscode/launch.json vendored
View file

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

26
.vscode/settings.json vendored
View file

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

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

16
index.html
View file

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

120
package.json
View file

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

24
src/mixins/fonts.less
View file

@ -7,12 +7,12 @@
///
/// See `.use-font-group`.
.create-font-group(@name; @style; @variant; @weight; @stretch; @size; @height; @family) {
--bfont-@{name}-style: @style;
--bfont-@{name}-variant: @variant;
--bfont-@{name}-weight: @weight;
--bfont-@{name}-stretch: @stretch;
--bfont-@{name}-height: @height;
--bfont-@{name}-family: @family;
--bfont-@{name}-style: @style;
--bfont-@{name}-variant: @variant;
--bfont-@{name}-weight: @weight;
--bfont-@{name}-stretch: @stretch;
--bfont-@{name}-height: @height;
--bfont-@{name}-family: @family;
}
@ -20,10 +20,10 @@
///
/// See `.create-font-group`.
.use-font-group(@name) {
font-style: var(~"--bfont-@{name}-style");
font-variant: var(~"--bfont-@{name}-variant");
font-weight: var(~"--bfont-@{name}-weight");
font-stretch: var(~"--bfont-@{name}-stretch");
line-height: var(~"--bfont-@{name}-height");
font-family: var(~"--bfont-@{name}-family");
font-style: var(~"--bfont-@{name}-style");
font-variant: var(~"--bfont-@{name}-variant");
font-weight: var(~"--bfont-@{name}-weight");
font-stretch: var(~"--bfont-@{name}-stretch");
line-height: var(~"--bfont-@{name}-height");
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.
.create-hsl-group(@name; @hue; @saturation; @lightness) {
--bhsl-@{name}-hue: @hue;
--bhsl-@{name}-saturation: @saturation;
--bhsl-@{name}-lightness: @lightness;
--bhsl-@{name}-hue: @hue;
--bhsl-@{name}-saturation: @saturation;
--bhsl-@{name}-lightness: @lightness;
}
/// Set the CSS variables of a certain color group to the ones of another.
.map-hsl-group(@to; @from) {
--bhsl-@{to}-hue: var(~"--bhsl-@{from}-hue");
--bhsl-@{to}-saturation: var(~"--bhsl-@{from}-saturation");
--bhsl-@{to}-lightness: var(~"--bhsl-@{from}-lightness");
--bhsl-@{to}-hue: var(~"--bhsl-@{from}-hue");
--bhsl-@{to}-saturation: var(~"--bhsl-@{from}-saturation");
--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.
.hsl-group(@name) {
@c: hsl(
var(~"--bhsl-@{name}-hue")
var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-lightness")
);
@c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation") var(~"--bhsl-@{name}-lightness"));
}
.hsl-group(@name; @alpha) {
@c: hsl(
var(~"--bhsl-@{name}-hue")
var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-lightness")
/ @alpha
);
@c: hsl(var(~"--bhsl-@{name}-hue") var(~"--bhsl-@{name}-saturation")
var(~"--bhsl-@{name}-lightness")
/ @alpha);
}
.hsl-group(@name; @hue-changes; @saturation-changes; @lightness-changes; @alpha) {
@c: hsl(
calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}")
calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}")
/ @alpha
);
@c: hsl(calc(var(~"--bhsl-@{name}-hue") ~"@{hue-changes}") calc(var(~"--bhsl-@{name}-saturation") ~"@{saturation-changes}")
calc(var(~"--bhsl-@{name}-lightness") ~"@{lightness-changes}")
/ @alpha);
}

1789
src/rulesets/base.less
View file

File diff suppressed because it is too large Load diff

264
src/rulesets/classic.less
View file

@ -5,164 +5,166 @@
@{bluelib} {
& {
// Sets the border radius of all panels
--b-border-radius: 8px;
& {
// 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];
}
// Set the shadow drawn on element placed directly on the background
--b-outer-shadow: 2px 2px 4px .hsl-group(background)[@c];
}
&, @{all} {
// Lower the default border opacity
border-color: .hsl-group(current; 0.15)[@c];
}
&, @{all} {
// Lower the default border opacity
border-color: .hsl-group(current; 0.15)[@c];
}
// Give headers a slight shadow so they are easier to read outside of panels
@{header} {
text-shadow: var(--b-outer-shadow);
}
// Give headers a slight shadow so they are easier to read outside of panels
@{header} {
text-shadow: var(--b-outer-shadow);
}
// But do not give it to headers inside panels
@{panel} {
@{header} {
text-shadow: none;
}
}
// But do not give it to headers inside panels
@{panel} {
@{header} {
text-shadow: none;
}
}
@{panel}, @{table}@{panel} > @{table-caption} {
border-radius: var(--b-border-radius);
@{panel}, @{table}@{panel} > @{table-caption} {
border-radius: var(--b-border-radius);
// And a shadow effect
box-shadow: var(--b-outer-shadow);
// And a shadow effect
box-shadow: var(--b-outer-shadow);
// Do not give the same effects to nested panels
@{panel} {
background-color: .hsl-group(current; 0.075)[@c];
backdrop-filter: none;
box-shadow: none;
}
}
// Do not give the same effects to nested panels
@{panel} {
background-color: .hsl-group(current; 0.075)[@c];
backdrop-filter: none;
box-shadow: none;
}
}
// Make sure mark still works, even considering specificity
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
// Make sure mark still works, even considering specificity
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
}
}
}
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
}
}
}
// Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
border-color: .hsl-group(current)[@c];
// Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
border-color: .hsl-group(current)[@c];
// Make the modifier inherit properly
@{panel} {
background-color: .hsl-group(todo-background)[@c];
border-color: .hsl-group(current)[@c];
}
}
// Make the modifier inherit properly
@{panel} {
background-color: .hsl-group(todo-background)[@c];
border-color: .hsl-group(current)[@c];
}
}
// Fixup table panels
@{table}@{panel} {
// Ensure table panels have no rounded borders
border-radius: 0;
> @{table-caption} {
// And ensure neither do table panel captions
border-radius: 0;
// Minimize the visibility of the caption's box shadow to prevent overlap with the table itself
box-shadow: var(--b-outer-shadow);
}
}
// Fixup table panels
@{table}@{panel} {
// Ensure table panels have no rounded borders
border-radius: 0;
@{table}@{panel-dialog} > @{table-caption} {
border-bottom-width: 2px;
}
> @{table-caption} {
// And ensure neither do table panel captions
border-radius: 0;
@{input} {
background-color: .hsl-group(current; 0.025)[@c];
// Minimize the visibility of the caption's box shadow to prevent overlap with the table itself
box-shadow: var(--b-outer-shadow);
}
}
&:hover {
background-color: .hsl-group(current; 0.05)[@c];
}
@{table}@{panel-dialog} > @{table-caption} {
border-bottom-width: 2px;
}
&:active {
background-color: .hsl-group(current; 0.075)[@c];
}
}
@{input} {
background-color: .hsl-group(current; 0.025)[@c];
@{input-field}, @{input-select} {
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);
}
&:hover {
background-color: .hsl-group(current; 0.05)[@c];
}
@{list-unordered}, @{list-ordered} {
> *::marker {
color: .hsl-group(current; 0.5)[@c];
}
}
&:active {
background-color: .hsl-group(current; 0.075)[@c];
}
}
@{glossary-summary} {
color: .hsl-group(current; 0.7)[@c];
@{input-field}, @{input-select} {
border-radius: var(--b-border-radius) var(--b-border-radius) 0 0;
}
&::marker {
color: .hsl-group(current; 0.5)[@c];
}
@{input-area}, @{input-multiselect} {
border-radius: 0 var(--b-border-radius) var(--b-border-radius) 0;
}
&:hover {
color: .hsl-group(current)[@c];
}
@{input-button} {
border-radius: var(--b-border-radius);
}
&:hover::marker {
color: .hsl-group(current; 0.7)[@c];
}
@{list-unordered}, @{list-ordered} {
> *::marker {
color: .hsl-group(current; 0.5)[@c];
}
}
&:active::marker {
color: .hsl-group(current)[@c];
}
}
@{glossary-summary} {
color: .hsl-group(current; 0.7)[@c];
// FIXME: may not work well for lighter themes
@{text-anchor} {
&:hover {
color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 20%"; 1.0)[@c];
}
&::marker {
color: .hsl-group(current; 0.5)[@c];
}
&:active {
color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 40%"; 1.0)[@c];
}
}
&:hover {
color: .hsl-group(current)[@c];
}
@{text-input}, @{text-output} {
border-radius: calc(var(--b-border-radius) / 4);
}
&:hover::marker {
color: .hsl-group(current; 0.7)[@c];
}
@{text-variable} {
color: .hsl-group(current; 0.7)[@c];
}
&:active::marker {
color: .hsl-group(current)[@c];
}
}
@{text-quote} {
&::before, &::after {
color: .hsl-group(current; 0.7)[@c];
}
}
// FIXME: may not work well for lighter themes
@{text-anchor} {
&:hover {
color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 20%"; 1.0)[@c];
}
@{text-ruby-annotation} {
color: .hsl-group(current; 0.7)[@c];
}
}
&:active {
color: .hsl-group(link; "+ 0deg"; "+ 0%"; "+ 40%"; 1.0)[@c];
}
}
@{text-input}, @{text-output} {
border-radius: calc(var(--b-border-radius) / 4);
}
@{text-variable} {
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} {
.create-hsl-group(background; 0deg; 8%; 14%);
.create-hsl-group(foreground; 19deg; 91%; 46%);
.create-hsl-group(primary; 0deg; 42%; 94%);
.create-hsl-group(link; 50deg; 100%; 80%);
.create-hsl-group(background; 0deg; 8%; 14%);
.create-hsl-group(foreground; 19deg; 91%; 46%);
.create-hsl-group(primary; 0deg; 42%; 94%);
.create-hsl-group(link; 50deg; 100%; 80%);
.create-hsl-group(mark-foreground; 19deg; 64%; 14%);
.create-hsl-group(mark-background; 19deg; 100%; 81%);
.create-hsl-group(mark-foreground; 19deg; 64%; 14%);
.create-hsl-group(mark-background; 19deg; 100%; 81%);
.create-hsl-group(todo-foreground; 43deg; 100%; 65%);
.create-hsl-group(todo-background; 204deg; 11%; 18%);
.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(sample-input; 0deg; 100%; 0%);
.create-hsl-group(sample-output; 0deg; 100%; 100%);
.create-hsl-group(red; 0deg; 100%; 66%);
.create-hsl-group(yellow; 60deg; 100%; 66%);
.create-hsl-group(green; 120deg; 100%; 66%);
.create-hsl-group(cyan; 180deg; 100%; 66%);
.create-hsl-group(blue; 240deg; 100%; 66%);
.create-hsl-group(magenta; 300deg; 100%; 66%);
.create-hsl-group(red; 0deg; 100%; 66%);
.create-hsl-group(yellow; 60deg; 100%; 66%);
.create-hsl-group(green; 120deg; 100%; 66%);
.create-hsl-group(cyan; 180deg; 100%; 66%);
.create-hsl-group(blue; 240deg; 100%; 66%);
.create-hsl-group(magenta; 300deg; 100%; 66%);
.map-hsl-group(inserted; green);
.map-hsl-group(deleted; red);
.map-hsl-group(inserted; green);
.map-hsl-group(deleted; red);
}

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

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

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

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

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

@ -8,260 +8,260 @@
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-Hair.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-Hair.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-HairItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-HairItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-UltraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-UltraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-UltraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-UltraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-Heavy.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-Heavy.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraSans-HeavyItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraSans-HeavyItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
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') format('embedded-opentype'),
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/ttf/FiraMono-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
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') format('embedded-opentype'),
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/ttf/FiraMono-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@{bluelib} {
// @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( 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( 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( 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( 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( 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( 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);
// @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(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(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(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(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(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(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);
}

22
src/rulesets/fun.less
View file

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

107
src/rulesets/glass.less
View file

@ -4,71 +4,66 @@
*/
@{bluelib} {
& {
// Sets the backdrop-filter blur radius of all panels
--b-panel-blur: 16px;
& {
// Sets the backdrop-filter blur radius of all panels
--b-panel-blur: 16px;
// Set the opacity of the glass panels
--b-panel-initial-opacity: 0.300;
--b-panel-nested-opacity: 0.075;
}
// Set the opacity of the glass panels
--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))) {
// 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; 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}, @{table}@{panel} > @{table-caption} {
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-nested-opacity))[@c];
backdrop-filter: none;
}
}
@{panel} {
background-color: .hsl-group(current; var(--b-panel-nested-opacity))[@c];
backdrop-filter: none;
}
}
// Make sure mark still works, even considering specificity
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
backdrop-filter: none;
// Make sure mark still works, even considering specificity
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
backdrop-filter: none;
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(background)[@c];
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
}
}
}
// Make the modifier toggle properly
@{modifier-mark}, @{panel}@{modifier-mark} {
background-color: .hsl-group(mark-background)[@c];
}
}
}
// Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
// Make sure to-do still works, even considering specificity
@{modifier-todo}, @{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
// Make the modifier inherit properly
@{panel} {
background-color: .hsl-group(todo-background)[@c];
backdrop-filter: none;
}
}
// Make the modifier inherit properly
@{panel} {
background-color: .hsl-group(todo-background)[@c];
backdrop-filter: none;
}
}
// Make to-do have a glass background too
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background; 0.3)[@c];
backdrop-filter:
blur(var(--b-panel-blur))
grayscale(100%)
;
}
@{panel} {
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
}
}
// Make to-do have a glass background too
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background; 0.3)[@c];
backdrop-filter: blur(var(--b-panel-blur)) grayscale(100%);
}
}
@{panel} {
@{panel}@{modifier-todo} {
background-color: .hsl-group(todo-background)[@c];
}
}
}
}

6
src/rulesets/layouts/layouts-center.less
View file

@ -31,7 +31,7 @@
justify-content: space-between;
align-items: stretch;
> @{layout-center-background} {
> @{layout-center-background} {
position: fixed;
z-index: -100;
@ -39,8 +39,8 @@
left: 0;
width: 110vw;
height: 110vh;
object-fit: cover;
object-position: center;
}
}
}